12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 |
- import {connect} from "react-redux";
- import {CTrack} from "../track";
- import {CPlaylistDropZone} from "../tools";
- import {SortableContainer, SortableElement} from 'react-sortable-hoc';
- import {arrayMoveImmutable} from 'array-move';
- import {useState,useEffect} from "react";
- import {CPreloaded} from "../preloader";
- import {actionSetPlaylist} from "../../reducers";
- const MyTracks = ({playlist:{_id, name, tracks}={}}) =>
- <div className='Category'>
- <h1>{name}</h1>
- <CPreloaded promiseName='playlistById'>
- {(tracks || []).map(track => <CTrack track={track}/>)}
- </CPreloaded>
- </div>
- const CMyTracks = connect(state => ({playlist: state.promise.playlistById?.payload || []}),
- {setPlaylist: actionSetPlaylist})(MyTracks)
- export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
- <>
- <CPlaylistDropZone >
- <CMyTracks />
- </CPlaylistDropZone >
- </>
- // const SortableItem = SortableElement(CTrack);
- //
- // const MyTracks = ( {children}) =>
- // <div className='Category'>
- // {children}
- // </div>
- // const SortableList = SortableContainer(MyTracks)
- // // const CMyTracks = connect(state => ({playlist: state.promise.playlistById?.payload || []}))(MyTracks)
- //
- //
- // export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
- // <>
- // <CPlaylistDropZone >
- // <CPreloaded promiseName='playlistById'>
- // <CSortableComponent />
- // </CPreloaded>
- // </CPlaylistDropZone >
- // </>
- //
- //
- // function SortableComponent({tracks=[]}) {
- // const [state, setState] = useState(tracks)
- // useEffect(() => {
- // setState (tracks)
- // },[tracks])
- // const onSortEnd = ({oldIndex, newIndex}) => {
- // setState((state) => (arrayMoveImmutable(state, oldIndex, newIndex)));
- // };
- //
- // return <SortableList tracks={tracks} onSortEnd={onSortEnd}>
- // {state.map((value, index) => <SortableItem key={`item-${value}`} index={index} track={value}/>)}
- // {/*{console.log(state)}*/}
- // </SortableList>;
- // }
- //
- // const CSortableComponent = connect(state => ({tracks: state.promise.playlistById?.payload?.tracks || []}))(SortableComponent)
|