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