|
|
@@ -1,102 +1,122 @@
|
|
|
import * as action from '../../actions'
|
|
|
|
|
|
-import { useEffect, useState} from 'react';
|
|
|
+import { useEffect, useState, useCallback } from 'react';
|
|
|
import { connect } from 'react-redux';
|
|
|
import { useDropzone } from 'react-dropzone'
|
|
|
-import React, {useCallback} from 'react'
|
|
|
-
|
|
|
-const Track = ({track:{url, originalFileName, id3:{title, artist, album}}}) =>
|
|
|
- <li style={{border: '1px solid black', display:'flex', alignItems:'center'}}>
|
|
|
- <div style={{marginRight:'2%'}}>
|
|
|
- <button style={{padding: '10px', margin:'2px'}}> {`>`} </button>
|
|
|
- <button style={{padding: '10px', margin:'2px'}}>| |</button>
|
|
|
- <br/>
|
|
|
- <button style={{padding: '10px', margin:'2px'}}>Add to...</button>
|
|
|
- </div>
|
|
|
- <div style={{textAlign: 'left'}}>
|
|
|
- <h5>{artist || 'Artist: unknown'}</h5>
|
|
|
- <h6>{album || 'Album: unknown'}</h6>
|
|
|
- <h5>{title || originalFileName}</h5>
|
|
|
- <p>{url}</p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
-//----------------------------------------------------
|
|
|
-const Playlist = ({playlist}) => {
|
|
|
- return(
|
|
|
+import { sortableContainer, sortableElement } from 'react-sortable-hoc';
|
|
|
+import { arrayMoveImmutable } from 'array-move';
|
|
|
+
|
|
|
+
|
|
|
+const Track = ({ track: { _id, url, originalFileName, id3: { title, artist, album } } }) =>
|
|
|
+ <li style={{ border: '1px solid black', display: 'flex', alignItems: 'center' }}>
|
|
|
+ <div style={{ marginRight: '2%' }}>
|
|
|
+ <button style={{ padding: '10px', margin: '2px' }}> {`>`} </button>
|
|
|
+ <button style={{ padding: '10px', margin: '2px' }}>| |</button>
|
|
|
+ <br />
|
|
|
+ <button style={{ padding: '10px', margin: '2px' }}>Add to...</button>
|
|
|
+ </div>
|
|
|
+ <div style={{ textAlign: 'left' }}>
|
|
|
+ <h5>{artist || 'Artist: unknown'}</h5>
|
|
|
+ <h6>{album || 'Album: unknown'}</h6>
|
|
|
+ <h5>{title || originalFileName}</h5>
|
|
|
+ <p>{_id}</p>
|
|
|
+ <p>{url}</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+const SortableItem = sortableElement(Track);
|
|
|
+
|
|
|
+const SortableContainer = sortableContainer(({ children }) => {
|
|
|
+ return <ul>{children}</ul>;
|
|
|
+});
|
|
|
+
|
|
|
+const Playlist = ({ playlist, updPlaylist }) => {
|
|
|
+ let [_tracks, setTracks] = useState()
|
|
|
+
|
|
|
+ useEffect(() => setTracks(playlist[0]?.tracks), [playlist])
|
|
|
+
|
|
|
+ const onSortEnd = ({ oldIndex, newIndex }) => {
|
|
|
+ setTracks(arrayMoveImmutable(_tracks, oldIndex, newIndex))
|
|
|
+ updPlaylist(playlist[0]._id, arrayMoveImmutable(_tracks, oldIndex, newIndex).map(track => ({ _id: track._id })))
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
<>
|
|
|
<h2>{playlist[0]?.name || 'Playlist'}</h2>
|
|
|
- <ul>
|
|
|
- {(playlist[0]?.tracks || []).map(track => <Track track={track}/>)}
|
|
|
- </ul>
|
|
|
+ <SortableContainer onSortEnd={onSortEnd}>
|
|
|
+ {(_tracks || []).map((track, index) => <SortableItem index={index} track={track} />)}
|
|
|
+ </SortableContainer>
|
|
|
</>
|
|
|
)
|
|
|
}
|
|
|
-export const PlaylistConnect = connect(state => ({playlist: state.promise.playlistTracks?.payload || []}))(Playlist)
|
|
|
+export const PlaylistConnect = connect(
|
|
|
+ state => ({ playlist: state.promise.playlistTracks?.payload || [] }),
|
|
|
+ { updPlaylist: action.actionUpdatePlaylist }
|
|
|
+)(Playlist)
|
|
|
|
|
|
-const PlaylistTrackDropzone = ({playlist, uploadTrack}) => {
|
|
|
+const PlaylistTrackDropzone = ({ playlist, uploadTrack }) => {
|
|
|
let [playlistId, setPlaylistId] = useState()
|
|
|
|
|
|
- useEffect(()=> {
|
|
|
+ useEffect(() => {
|
|
|
setPlaylistId(playlist[0]?._id)
|
|
|
}, [playlist])
|
|
|
|
|
|
const onDrop = useCallback(acceptedFiles => {
|
|
|
uploadTrack(acceptedFiles[0], playlistId)
|
|
|
}, [uploadTrack, playlistId])
|
|
|
- const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})
|
|
|
+ const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
|
|
|
|
|
|
return (
|
|
|
- <div {...getRootProps()} style={isDragActive? {border:'1px solid mediumseagreen'} : {border:'1px solid black'}}>
|
|
|
- {isDragActive? <small>drag here...</small> : <small>to upload drag track here</small>}
|
|
|
- <PlaylistConnect />
|
|
|
- </div>
|
|
|
+ <div {...getRootProps()} style={isDragActive ? { border: '1px solid mediumseagreen' } : { border: '1px solid black' }}>
|
|
|
+ {isDragActive ? <small>drag here...</small> : <small>to upload drag track here</small>}
|
|
|
+ <PlaylistConnect />
|
|
|
+ </div>
|
|
|
)
|
|
|
}
|
|
|
const PlaylistTrackDropzoneConnect = connect(
|
|
|
- state => ({playlist: state.promise.playlistTracks?.payload || []}),
|
|
|
- {uploadTrack: action.actionUploadUserTrack}
|
|
|
- )(PlaylistTrackDropzone)
|
|
|
+ state => ({ playlist: state.promise.playlistTracks?.payload || [] }),
|
|
|
+ { uploadTrack: action.actionUploadUserTrack }
|
|
|
+)(PlaylistTrackDropzone)
|
|
|
|
|
|
-const PlaylistPage = ({match: {params: {_id}}, getTracks}) => {
|
|
|
+const PlaylistPage = ({ match: { params: { _id } }, getTracks }) => {
|
|
|
useEffect(() => { getTracks(_id.substring(1)) }, [_id, getTracks])
|
|
|
- //return(<PlaylistConnect />)
|
|
|
- return(<PlaylistTrackDropzoneConnect />)
|
|
|
+ return (<PlaylistTrackDropzoneConnect />)
|
|
|
}
|
|
|
-export const PlaylistPageConnect = connect(null, {getTracks: action.actionGetPlaylistById})(PlaylistPage)
|
|
|
-//----------------------------------------------------
|
|
|
+export const PlaylistPageConnect = connect(null, { getTracks: action.actionGetPlaylistById })(PlaylistPage)
|
|
|
+
|
|
|
|
|
|
-const UserTracks = ({user, tracks}) =>
|
|
|
- <>
|
|
|
- <h2>{ user.login || 'My' } tracks:</h2>
|
|
|
- <ul>
|
|
|
- {(tracks || []).map(track => <Track track={track}/>).reverse()}
|
|
|
- </ul>
|
|
|
- </>
|
|
|
+const UserTracks = ({ user, tracks }) => {
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <h2>{user.login || 'My'} tracks:</h2>
|
|
|
+ <ul>{(tracks || []).map(track => <Track track={track} />).reverse()}</ul>
|
|
|
+ </>
|
|
|
+ )
|
|
|
+}
|
|
|
|
|
|
const UserTracksConnect = connect(state => ({
|
|
|
- tracks: state.promise.userTracks?.payload || [],
|
|
|
- user: state.promise.userData?.payload || {}
|
|
|
- })
|
|
|
+ tracks: state.promise.userTracks?.payload || [],
|
|
|
+ user: state.promise.userData?.payload || {}
|
|
|
+})
|
|
|
)(UserTracks)
|
|
|
|
|
|
-const UserTracksDropzone = ({onLoad}) => {
|
|
|
+const UserTracksDropzone = ({ onLoad }) => {
|
|
|
const onDrop = useCallback(acceptedFiles => {
|
|
|
onLoad(acceptedFiles[0])
|
|
|
}, [onLoad])
|
|
|
- const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})
|
|
|
+ const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
|
|
|
|
|
|
return (
|
|
|
- <div {...getRootProps()} style={isDragActive? {border:'1px solid mediumseagreen'} : {border:'1px solid black'}}>
|
|
|
- {isDragActive? <small>drag here...</small> : <small>to upload drag track here</small>}
|
|
|
- <UserTracksConnect />
|
|
|
- </div>
|
|
|
+ <div {...getRootProps()} style={isDragActive ? { border: '1px solid mediumseagreen' } : { border: '1px solid black' }}>
|
|
|
+ {isDragActive ? <small>drag here...</small> : <small>to upload drag track here</small>}
|
|
|
+ <UserTracksConnect />
|
|
|
+ </div>
|
|
|
)
|
|
|
}
|
|
|
-export const UserTrackDropzoneConnect = connect(null, {onLoad: action.actionUploadUserTrack})(UserTracksDropzone)
|
|
|
+export const UserTrackDropzoneConnect = connect(null, { onLoad: action.actionUploadUserTrack })(UserTracksDropzone)
|
|
|
|
|
|
-const UserTracksPage = ({match: {params: {_id}}, getUserTracks}) => {
|
|
|
- useEffect(() => { getUserTracks() },[_id, getUserTracks])
|
|
|
- //return(<UserTracksConnect/>)
|
|
|
- return(<UserTrackDropzoneConnect/>)
|
|
|
+const UserTracksPage = ({ match: { params: { _id } }, getUserTracks }) => {
|
|
|
+ useEffect(() => { getUserTracks() }, [_id, getUserTracks])
|
|
|
+ return (<UserTrackDropzoneConnect />)
|
|
|
}
|
|
|
-export const UserTracksPageConnect = connect(null, {getUserTracks: action.actionGetUserTracks})(UserTracksPage)
|
|
|
+export const UserTracksPageConnect = connect(null, { getUserTracks: action.actionGetUserTracks })(UserTracksPage)
|
