music-player/src/pages/my-tracks/my-tracks.js

// 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 {actionSetPlaylist} from "../../reducers";


const MyTracks = ({playlist={}}) => {
    const{_id, name, tracks} = playlist
    return (
        <div className='Category'>
            <h2>{name}</h2>
            <CPreloaded promiseName='playlistById'>
                {(tracks || []).map((track,index) => <CTrack key={`item-${index}`} trackIndex={index} playlist={playlist} 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)