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

import {SortableContainer,SortableElement} from "react-sortable-hoc";
import {arrayMoveImmutable} from 'array-move';
import {useState, useEffect, useRef, useCallback} 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._id}`} index={index} trackIndex={index} track={value}/>)}
        </div>
    )
});

function SortableComponent({playlist:{name, tracks=[]}={},onLoad}) {

    // const [state, setState] = useState(tracks || [])
    const state = useRef(tracks || [])

    useEffect(() => {
        state.current = (tracks || [])
    },[tracks])

    const onSortEnd = useCallback(({oldIndex, newIndex}) => {
        state.current = (arrayMoveImmutable(state.current, oldIndex, newIndex))
        onLoad(state.current)
    },[])


    return (
        <div>
            <h2>{name}</h2>
            <SortableList axis={'y'} items={state.current} 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>
    </>






//
// 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 >
//     </>
//