// 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 {CPreloaded} from "../preloader";



const UserTracks = ({playlist={}}) => {
    const{name, tracks} = playlist
    return (
        <div className='Category'>
            <h2>{name}</h2>
            <CPreloaded promiseName='playlistById'>
                {(tracks || []).map((track,index) => <CTrack trackIndex={index} track={track}/>)}
            </CPreloaded>
        </div>
    )
}


const CUserTracks = connect(state => ({playlist: state.promise.playlistById?.payload || {}}))(UserTracks)


export const UserPlaylistTracks = ({match:{params:{_id}}}) =>
    <>
            <CUserTracks />
    </>

