12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 |
- import {actionCreatePlaylist, actionPlaylistFindByOwner, backURL} from "../actions";
- import {connect} from "react-redux";
- import {Link} from "react-router-dom";
- import {call, select, takeEvery} from "redux-saga/effects";
- import {actionPromise, promiseWorker} from "../reducers/promiseReducer";
- import {useState} from "react";
- import {history} from "../App";
- import {store} from "../reducers";
- import {CTrack} from "./player";
- import {CTrackDropZone} from "./pageMain";
- const Track = ({track:{_id,url,originalFileName}={}}) =>
- <div className='Tracks'>
- <audio controls src={backURL+'/'+url}></audio> <strong>{originalFileName}</strong>
- </div>
- const MyTracks = ({tracks}={}) =>
- <div>
- {(tracks || []).map(track => <Track track={track}/>)}
- </div>
- const CMyTracks = connect(state => ({tracks: state.promise.trackFindByPlaylist?.payload || []}))(MyTracks)
- export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
- <>
- <h1>{_id}</h1>
- <CTrackDropZone />
- <CMyTracks />
- </>
- const Playlist = ({playlist:{_id, name}={}}) =>
- <li><Link to={`/myplaylist/${_id}`}>{name}</Link></li>
- const MyPlaylists = ({playlists={},onCreatePlaylist}) => {
- const [p, setP] = useState ('')
- return (
- <div>
- <input placeholder='Название' onChange={e => setP(e.target.value)}/>
- <button onClick={() => {onCreatePlaylist(p)}}>Создать плейлист</button>
- <ul className='Users'>
- {playlists.map(playlist => <Playlist playlist={playlist}/> )}
- </ul>
- </div>
- )
- }
- export const CMyPlaylists = connect(state => ({playlists: state.promise.playlistFindByOwner1?.payload || []}),{onCreatePlaylist:actionCreatePlaylist})(MyPlaylists)
- store.dispatch(actionPlaylistFindByOwner())
|