|
@@ -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)
|
|
|
+//
|