myPlaylists.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. import {actionCreatePlaylist, actionPlaylistFindByOwner, backURL} from "../actions";
  2. import {connect} from "react-redux";
  3. import {Link} from "react-router-dom";
  4. import {call, select, takeEvery} from "redux-saga/effects";
  5. import {actionPromise, promiseWorker} from "../reducers/promiseReducer";
  6. import {useState} from "react";
  7. import {history} from "../App";
  8. import {store} from "../reducers";
  9. import {CTrack} from "./track";
  10. import {CTrackDropZone} from "./trackdropzone";
  11. const MyTracks = ({playlist:{_id, name, tracks}={}}) =>
  12. <div className='Category'>
  13. <h1>{name}</h1>
  14. {(tracks || []).map(track => <CTrack track={track}/>)}
  15. </div>
  16. const CMyTracks = connect(state => ({playlist: state.promise.playlistById?.payload || []}))(MyTracks)
  17. export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
  18. <>
  19. <CTrackDropZone />
  20. <CMyTracks />
  21. </>
  22. const Playlist = ({playlist:{_id, name}={}}) =>
  23. <li><Link to={`/myplaylist/${_id}`}>{name}</Link></li>
  24. const MyPlaylists = ({playlists={},onCreatePlaylist}) => {
  25. const [p, setP] = useState ('')
  26. return (
  27. <div>
  28. <input placeholder='Название' onChange={e => setP(e.target.value)}/>
  29. <button onClick={() => {onCreatePlaylist(p)}}>Создать плейлист</button>
  30. <ul className='Users'>
  31. {playlists.map(playlist => <Playlist playlist={playlist}/> )}
  32. </ul>
  33. </div>
  34. )
  35. }
  36. export const CMyPlaylists = connect(state => ({playlists: state.promise.playlistFindByOwner?.payload || []}),{onCreatePlaylist:actionCreatePlaylist})(MyPlaylists)
  37. store.dispatch(actionPlaylistFindByOwner())