my-tracks.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. import {SortableContainer,SortableElement} from "react-sortable-hoc";
  2. import {arrayMoveImmutable} from 'array-move';
  3. import {useState,useEffect} from "react";
  4. import {connect} from "react-redux";
  5. import {CTrack} from "../track";
  6. import {CPlaylistDropZone} from "../tools";
  7. import {CPreloaded} from "../preloader";
  8. import {actionFullUploadPlaylists} from "../../actions";
  9. // const SortableItem = SortableElement(CTrack);
  10. //
  11. //
  12. // const SortableList = SortableContainer(({items}) => {
  13. // return (
  14. // <div>
  15. // {items.map((value, index) =>
  16. // <SortableItem key={`item-${value}`} index={index} trackIndex={index} track={value}/>)}
  17. // </div>
  18. // )
  19. // });
  20. //
  21. // function SortableComponent({playlist:{name, tracks=[]}={},onLoad}) {
  22. //
  23. // const [state, setState] = useState(tracks || [])
  24. //
  25. // useEffect(() => {
  26. // setState (tracks || [])
  27. // },[tracks])
  28. // const onSortEnd = ({oldIndex, newIndex}) => {
  29. // setState((state) => (arrayMoveImmutable(state, oldIndex, newIndex)));
  30. // };
  31. // onLoad(state)
  32. // return (
  33. // <div>
  34. // <h2>{name}</h2>
  35. // <SortableList axis={'y'} items={state} onSortEnd={onSortEnd}/>
  36. // </div>
  37. // )
  38. // }
  39. //
  40. //
  41. //
  42. // const CSortableComponent = connect(state => ({ playlist: state?.promise?.playlistById?.payload || {}}),
  43. // {onLoad:actionFullUploadPlaylists})
  44. // (SortableComponent)
  45. //
  46. //
  47. // export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
  48. // <>
  49. // <CPlaylistDropZone >
  50. // <CPreloaded promiseName='playlistById'>
  51. // <CSortableComponent />
  52. // </CPreloaded>
  53. // </CPlaylistDropZone >
  54. // </>
  55. const MyTracks = ({playlist={}}) => {
  56. const{name, tracks=[]} = playlist
  57. return (
  58. <div className='Category'>
  59. <h2>{name}</h2>
  60. <CPreloaded promiseName='playlistById'>
  61. {(tracks || []).map((track,index) => <CTrack key={index} trackIndex={index} track={track}/>)}
  62. </CPreloaded>
  63. </div>
  64. )
  65. }
  66. const CMyTracks = connect(state => ({playlist: state.promise.playlistById?.payload || {}}),)(MyTracks)
  67. export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
  68. <>
  69. <CPlaylistDropZone >
  70. <CMyTracks />
  71. </CPlaylistDropZone >
  72. </>