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 (
//
// {items.map((value, index) =>
// )}
//
// )
// });
//
// 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 (
//
//
{name}
//
//
// )
// }
//
//
//
// const CSortableComponent = connect(state => ({ playlist: state?.promise?.playlistById?.payload || {}}),
// {onLoad:actionFullUploadPlaylists})
// (SortableComponent)
//
//
// export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
// <>
//
//
//
//
//
// >
const MyTracks = ({playlist={}}) => {
const{name, tracks=[]} = playlist
return (
{name}
{(tracks || []).map((track,index) => )}
)
}
const CMyTracks = connect(state => ({playlist: state.promise.playlistById?.payload || {}}),)(MyTracks)
export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
<>
>