my-tracks.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  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. import {CPreloaded} from "../preloader";
  8. const MyTracks = ({playlist:{_id, name, tracks}={}}) =>
  9. <div className='Category'>
  10. <h1>{name}</h1>
  11. {(tracks || []).map(track => <CTrack track={track}/>)}
  12. </div>
  13. const CMyTracks = connect(state => ({playlist: state.promise.playlistById?.payload || []}))(MyTracks)
  14. export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
  15. <>
  16. <CPlaylistDropZone >
  17. <CPreloaded promiseName='playlistById'>
  18. <CMyTracks />
  19. </CPreloaded>
  20. </CPlaylistDropZone >
  21. </>
  22. // const SortableItem = SortableElement(CTrack);
  23. //
  24. // const MyTracks = ( {children}) =>
  25. // <div className='Category'>
  26. // {children}
  27. // </div>
  28. // const SortableList = SortableContainer(MyTracks)
  29. // // const CMyTracks = connect(state => ({playlist: state.promise.playlistById?.payload || []}))(MyTracks)
  30. //
  31. //
  32. // export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
  33. // <>
  34. // <CPlaylistDropZone >
  35. // <CPreloaded promiseName='playlistById'>
  36. // <CSortableComponent />
  37. // </CPreloaded>
  38. // </CPlaylistDropZone >
  39. // </>
  40. //
  41. //
  42. // function SortableComponent({tracks=[]}) {
  43. // const [state, setState] = useState(tracks)
  44. // useEffect(() => {
  45. // setState (tracks)
  46. // },[tracks])
  47. // const onSortEnd = ({oldIndex, newIndex}) => {
  48. // setState((state) => (arrayMoveImmutable(state, oldIndex, newIndex)));
  49. // };
  50. //
  51. // return <SortableList tracks={tracks} onSortEnd={onSortEnd}>
  52. // {state.map((value, index) => <SortableItem key={`item-${value}`} index={index} track={value}/>)}
  53. // {/*{console.log(state)}*/}
  54. // </SortableList>;
  55. // }
  56. //
  57. // const CSortableComponent = connect(state => ({tracks: state.promise.playlistById?.payload?.tracks || []}))(SortableComponent)