Merge branch 'track-key-fix' of Sergei-Levshnia/player-project into dev

src/actions/index.js

@@ -34,7 +34,6 @@ export const switchTrack = (isForward, currentTrackIndex, playlist) =>
     dispatch => {
         let playlistLength = playlist.constructor.name ==='Array'? playlist.length - 1 : playlist.tracks.length - 1
         let tracks = playlist.constructor.name ==='Array'? playlist : playlist.tracks
-        console.log('stuff', tracks, playlistLength)
 
         if (isForward ? currentTrackIndex < playlistLength : currentTrackIndex > 0) {
             dispatch(setTrack(tracks[currentTrackIndex + (isForward ? 1 : -1)], playlist))

src/components/Login/index.js

@@ -5,10 +5,17 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { history } from '../../App';
 
-const RegisterForm = ({ onRegister }) => {
+const RegisterForm = ({ onRegister, regData }) => {
   let [login, setLogin] = useState()
   let [password, setPassword] = useState()
   let [password2, setPassword2] = useState()
+  let [data, setData] = useState()
+  let [isReg, setIsReg] = useState(false)
+
+  useEffect(() => {
+    setData(regData)
+  }, [regData, data])
+
   return (
     <>
       <h1>Web-player</h1>
@@ -23,18 +30,19 @@ const RegisterForm = ({ onRegister }) => {
         />
         <small style={{ color: 'red' }}>{password2 && password2 !== password ? 'Passwords do not match' : ''}</small>
         <br />
-        <button 
-          className='forms__button highlightYellow' 
-          disabled={!password || !login || password2 !== password} 
-          onClick={() => onRegister(login, password)}
-        >Register</button>
+        {data?.payload && isReg? <small className='highlightGreen'>User {data.payload.login} successfully registered!</small> : 
+                        <button 
+                          className='forms__button highlightYellow' 
+                          disabled={!password || !login || password2 !== password} 
+                          onClick={() => {onRegister(login, password); setIsReg(true)}}
+                        >Register</button>}
         <br />
         <Link className='sidebar__link highlightYellow' to="/login">Back to log-in page</Link>
       </div>
     </>
   )
 }
-export const RegisterFormConnect = connect(null, { onRegister: action.actionRegister })(RegisterForm)
+export const RegisterFormConnect = connect(state => ({regData: state.promise.registration || {}}), { onRegister: action.actionRegister })(RegisterForm)
 
 const LoginForm = ({ loged, onLogin }) => {
   let [login, setLogin] = useState()

src/components/Page/index.js

@@ -50,7 +50,7 @@ const TrackConnect = connect(
 )(Track)
 
 const SortableItem = sortableElement(TrackConnect);
-const SortableContainer = sortableContainer(({ children }) => { return <ul>{children}</ul> });
+const SortableContainer = sortableContainer(({ children }) => <ul>{children}</ul> );
 
 const Playlist = ({ player, playlist, setPlaylist, updPlaylist, setIndex }) => {
   let [_tracks, setTracks] = useState()
@@ -73,7 +73,7 @@ const Playlist = ({ player, playlist, setPlaylist, updPlaylist, setIndex }) => {
     <>
       <h2 className='highlightGreen'>{playlist[0]?.name || 'Playlist'}</h2>
       <SortableContainer onSortEnd={onSortEnd}>
-        {(_tracks || []).map((track, index) => <SortableItem index={index} track={track} playlist={playlist[0]} />)}
+        { (_tracks || []).map((track, index) => <SortableItem key={track._id} index={index} track={track} playlist={playlist[0]} />) }
       </SortableContainer>
     </>
   )
@@ -98,7 +98,7 @@ const PlaylistTrackDropzone = ({ playlist, uploadTrack }) => {
   }, [playlist])
 
   const onDrop = useCallback(acceptedFiles => {
-    uploadTrack(acceptedFiles[0], playlistId)
+    if(acceptedFiles[0].type === 'audio/mpeg') uploadTrack(acceptedFiles[0], playlistId)
   }, [uploadTrack, playlistId])
   const { getRootProps, isDragActive } = useDropzone({ onDrop })
   return (
@@ -128,7 +128,7 @@ const UserTracks = ({ user, tracks }) => {
   return (
     <>
       <h2 className='highlightYellow'>{user.login || 'My'} uploaded tracks:</h2>
-      <ul>{(tracksRev || []).map(track => <TrackConnect track={track} playlist={tracksRev} />)}</ul>
+      <ul>{(tracksRev || []).map(track => <TrackConnect key={track._id} track={track} playlist={tracksRev} />)}</ul>
     </>
   )
 }
@@ -140,8 +140,9 @@ const UserTracksConnect = connect(state => ({
 
 const UserTracksDropzone = ({ onLoad }) => {
   const onDrop = useCallback(acceptedFiles => {
-    onLoad(acceptedFiles[0])
+    if(acceptedFiles[0].type === 'audio/mpeg') onLoad(acceptedFiles[0])
   }, [onLoad])
+  
   const { getRootProps, isDragActive } = useDropzone({ onDrop })
   return (
     <div

src/components/Playerbar.js

@@ -26,7 +26,7 @@ const Playerbar = ({ player, playTrack, pauseTrack, switchTrack, setTrackVolume,
                         <input
                             className="playerbar__range plumline yellowThumb"
                             style={{ width: '95%' }}
-                            type="range" min="0" max={_player?.duration} step="any"
+                            type="range" min="0" max={_player?.duration || 0} step="any"
                             value={_player?.currentTime}
                             onChange={(e) => setCurrentTime(e.target.value)}
                         />

src/components/Sidebar/index.js

@@ -36,7 +36,7 @@ export const ProfileWindowConnect = connect(state => ({ user: state.promise.user
 
 const ProfileWindowDropzone = ({ onLoad }) => {
   const onDrop = useCallback(acceptedFiles => {
-    onLoad(acceptedFiles[0])
+    if(acceptedFiles[0].type === 'image/png' || acceptedFiles[0].type === 'image/jpeg') onLoad(acceptedFiles[0])
   }, [onLoad])
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
 
@@ -55,11 +55,8 @@ export const ProfileWindowDropzoneConnect = connect(null, { onLoad: action.actio
 
 const UserTracksBtn = ({ userId }) => {
   let [_id, setId] = useState()
-  useEffect(() => {
-    console.log('CHENG', userId)
-    setId(userId)
-  }, [userId])
-
+  useEffect(() => setId(userId), [userId])
+  
   return (<Link to={`/player/tracks/:${_id}`} className='sidebar__link highlightYellow'>UPLOADS <FontAwesomeIcon icon={faUpload}/></Link>)
 }
 export const UserTracksBtnConnect = connect(state => ({ userId: state.promise.userData?.payload?._id || '' }))(UserTracksBtn)
@@ -106,9 +103,7 @@ const Playlists = ( { playlists }) => {
     <div>
       {
         playlists?.payload ? playlists.payload.map(item => {
-          return (
-            <Link className='sidebar__link' to={`/player/playlist/:${item._id}`}>{item.name}</Link>
-          )
+          return (<Link key={item._id} className='sidebar__link' to={`/player/playlist/:${item._id}`}>{item.name}</Link> )
         }).reverse() : ''
       }
     </div>

src/index.js

@@ -5,9 +5,10 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  <App />,
+  // <React.StrictMode>
+  //   <App />
+  // </React.StrictMode>,
   document.getElementById('root')
 );