my-tracks.js 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. import {connect} from "react-redux";
  2. import {CTrack} from "../track";
  3. import {CPlaylistDropZone} from "../tools";
  4. import {SortableContainer, SortableElement} from 'react-sortable-hoc';
  5. import {arrayMoveImmutable} from 'array-move';
  6. import {useState,useEffect} from "react";
  7. const SortableItem = SortableElement(CTrack);
  8. const MyTracks = ( {children}) =>
  9. <div className='Category'>
  10. {children}
  11. </div>
  12. const SortableList = SortableContainer(MyTracks)
  13. // const CMyTracks = connect(state => ({playlist: state.promise.playlistById?.payload || []}))(MyTracks)
  14. export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
  15. <>
  16. <CPlaylistDropZone >
  17. <CSortableComponent />
  18. </CPlaylistDropZone >
  19. </>
  20. function SortableComponent({tracks=[]}) {
  21. const [state, setState] = useState(tracks)
  22. useEffect(() => {
  23. setState (tracks)
  24. },[tracks])
  25. const onSortEnd = ({oldIndex, newIndex}) => {
  26. setState((state) => (arrayMoveImmutable(state, oldIndex, newIndex)));
  27. };
  28. return <SortableList tracks={tracks} onSortEnd={onSortEnd}>
  29. {state.map((value, index) => <SortableItem key={`item-${value}`} index={index} track={value}/>)}
  30. {/*{console.log(state)}*/}
  31. </SortableList>;
  32. }
  33. const CSortableComponent = connect(state => ({tracks: state.promise.playlistById?.payload?.tracks || []}))(SortableComponent)