update

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

@@ -1,6 +1,8 @@
-// import {SortableContainer, SortableElement} from 'react-sortable-hoc';
-// import {arrayMoveImmutable} from 'array-move';
-// import {useState,useEffect} from "react";
+// import {sortableContainer, sortableElement} from 'react-sortable-hoc';
+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";
@@ -8,66 +10,81 @@ import {CPlaylistDropZone} from "../tools";
 import {CPreloaded} from "../preloader";
 
 
-const MyTracks = ({playlist={}}) => {
-    const{name, tracks} = playlist
+const SortableItem = SortableElement(CTrack);
+
+const MyTracks = ( {children}) =>
+    <div className='Category'>
+        {children}
+    </div>
+
+
+
+const SortableList = SortableContainer(({children, tracks}) => {
+
     return (
-        <div className='Category'>
-            <h2>{name}</h2>
-            <CPreloaded promiseName='playlistById'>
-                {(tracks || []).map((track,index) => <CTrack trackIndex={index} track={track}/>)}
-            </CPreloaded>
+        <div tracks={tracks}>
+            {children}
         </div>
     )
-}
-
-const CMyTracks = connect(state => ({playlist: state.promise.playlistById?.payload || []}),)(MyTracks)
+});
 
 
 export const MyPlaylistTracks = ({match:{params:{_id}}}) =>
     <>
         <CPlaylistDropZone >
-            <CMyTracks />
+            <CPreloaded promiseName='playlistById'>
+            <CSortableComponent />
+            </CPreloaded>
      </CPlaylistDropZone >
     </>
 
+
+function SortableComponent({playlist=[]}) {
+    const{name, tracks} = playlist
+    const [state, setState] = useState(tracks)
+    useEffect(() => {
+        setState (tracks)
+    },[tracks])
+    const onSortEnd = ({oldIndex, newIndex}) => {
+        setState((state) => (arrayMoveImmutable(state, oldIndex, newIndex)));
+    };
+    return (
+        <div>
+            <h2>{name}</h2>
+            <SortableList axis={'xy'} tracks={tracks} onSortEnd={onSortEnd}>
+                {state.map((value, index) =>
+                    <SortableItem key={`item-${value}`} trackIndex={index} track={value}/>)}
+            </SortableList>
+        </div>
+    )
+}
+
+const CSortableComponent = connect(state => ({ playlist: state.promise.playlistById?.payload || []}))(SortableComponent)
+
+
+
+
+// const MyTracks = ({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 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>
+//             <CMyTracks />
 //      </CPlaylistDropZone >
 //     </>
+
 //
-//
-// function SortableComponent({playlist=[]}) {
-//     const{name, tracks} = playlist
-//     const [state, setState] = useState(tracks)
-//     useEffect(() => {
-//         setState (tracks)
-//     },[tracks])
-//     const onSortEnd = ({oldIndex, newIndex}) => {
-//         setState((state) => (arrayMoveImmutable(state, oldIndex, newIndex)));
-//     };
-//     return (
-//         <div>
-//             <h2>{name}</h2>
-//             <SortableList tracks={tracks} onSortEnd={onSortEnd}>
-//                 {state.map((value, index) => <SortableItem key={`item-${value}`} trackIndex={index} track={value}/>)}
-//             </SortableList>
-//         </div>
-//     )
-// }
-//
-// const CSortableComponent = connect(state => ({ playlist: state.promise.playlistById?.payload || []}))(SortableComponent)
+//