additional syles added. footer-player-bar initial look made

src/App.js

@@ -63,17 +63,32 @@ if (store.getState().auth?.token) {
   history.push('/login')
 }
 
+const PlayerBar = () => {
+  return (
+    <footer>
+      <div>
+        <button>{`<<`}</button>
+        <button>{`> / ||`}</button>
+        <button>{`>>`}</button>
+        <input type="range" />
+      </div>
+      <small>ARTIST - TRACK NAME</small>
+    </footer>
+  )
+}
+
 const Player = () =>
-  <>
+  <div>
     <header><Link to="/player">Player</Link></header>
-    <div style={{ display: 'flex' }}>
-      <aside style={{ border: '1px solid black', width: '30%' }}>
+    <div style={{ border:'1px solid blue',display: 'flex', height: '89vh', minHeight: '60vh', overflow:'none'}}>
+      <aside style={{width: '30%', overflow:'auto'}}>
         <Sidebar.LogoutBtnConnect />
         <Sidebar.ProfileWindowDropzoneConnect />
         <Sidebar.UserTracksBtnConnect />
+        <Sidebar.PlaylistAddConnect />
         <Sidebar.PlaylistsConnect />
       </aside>
-      <main style={{ border: '1px solid black', width: '80%' }}>
+      <main style={{ border: '1px solid red', width: '80%', height:'100%', overflow:'auto'}}>
         <Switch>
           <Route path="/player/playlist/:_id" component={Page.PlaylistPageConnect} exact />
           <Route path="/player/tracks/:_id" component={Page.UserTracksPageConnect} exact />
@@ -91,8 +106,8 @@ const Player = () =>
         </Switch>
       </main>
     </div>
-    <footer> back stop forw</footer>
-  </>
+    <PlayerBar />
+  </div>
 
 function App() {
   return (

src/components/Page/index.js

@@ -10,10 +10,8 @@ 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>
+      <button style={{ padding: '10px', margin: '2px' }}> {`[>] / [ || ]`} </button>
+      <button style={{ padding: '10px', margin: '2px' }}>+</button>
     </div>
     <div style={{ textAlign: 'left' }}>
       <h5>{artist || 'Artist: unknown'}</h5>

src/components/Sidebar/index.js

@@ -6,53 +6,53 @@ import { Link } from 'react-router-dom';
 import { history, backendURL } from '../../App';
 import { useDropzone } from 'react-dropzone'
 
-const LogoutBtn = ({onLogout}) =>
+const LogoutBtn = ({ onLogout }) =>
   <div
-  style={{ border: '1px solid black', backgroundColor: 'red', color: 'white' }}
-  onClick={() => { onLogout(); history.push('/login') }}
+    style={{ border: '1px solid black', backgroundColor: 'red', color: 'white' }}
+    onClick={() => { onLogout(); history.push('/login') }}
   >log-out[X]</div>
 
-export const LogoutBtnConnect = connect(null, {onLogout: action.actionAuthLogout })(LogoutBtn)
+export const LogoutBtnConnect = connect(null, { onLogout: action.actionAuthLogout })(LogoutBtn)
 
-const ProfileWindow = ({user}) => {
+const ProfileWindow = ({ user }) => {
   let [userInfo, setUserInfo] = useState(user.payload)
 
-  useEffect(()=> {
+  useEffect(() => {
     setUserInfo(user.payload)
-  },[user, userInfo])
+  }, [user, userInfo])
 
-  return(
+  return (
     <section>
-      <h3>{userInfo?.login || 'user'}</h3>         
-      <img 
-        width={100} 
-        height={100}  
-        style={{ border: '1px solid black', display:'block', margin:'5% auto', marginBottom:'2px'}}
-        src={ userInfo?.avatar?.url ? backendURL + '/' + userInfo?.avatar?.url : ''}
-        alt='avatar' 
+      <h3>{userInfo?.login || 'user'}</h3>
+      <img
+        width={100}
+        height={100}
+        style={{ border: '1px solid black', display: 'block', margin: '5% auto', marginBottom: '2px' }}
+        src={userInfo?.avatar?.url ? backendURL + '/' + userInfo?.avatar?.url : ''}
+        alt='avatar'
       />
     </section>
-   )
+  )
 }
 export const ProfileWindowConnect = connect(state => ({ user: state.promise.userData || {} }))(ProfileWindow)
 
-const ProfileWindowDropzone = ({onLoad}) => {
+const ProfileWindowDropzone = ({ 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'}}>
-        <input {...getInputProps()} />
-        <ProfileWindowConnect />
-        {isDragActive? <small>drag here...</small> : <small>change avatar</small>}
-      </div>
+    <div {...getRootProps()} style={isDragActive ? { border: '1px solid mediumseagreen' } : { border: '1px solid black' }}>
+      <input {...getInputProps()} />
+      <ProfileWindowConnect />
+      {isDragActive ? <small>drag here...</small> : <small>change avatar</small>}
+    </div>
   )
 }
-export const ProfileWindowDropzoneConnect = connect(null, {onLoad: action.actionUploadAvatar})(ProfileWindowDropzone)
+export const ProfileWindowDropzoneConnect = connect(null, { onLoad: action.actionUploadAvatar })(ProfileWindowDropzone)
 
-const UserTracksBtn = ({userId}) => {
+const UserTracksBtn = ({ userId }) => {
   let [_id, setId] = useState()
   useEffect(() => {
     console.log('CHENG', userId)
@@ -61,34 +61,34 @@ const UserTracksBtn = ({userId}) => {
 
   return (
     <Link
-    to={`/player/tracks/:${_id}`} 
-    style={{
-      display:'block', 
-      backgroundColor: 'purple', 
-      color: 'white', 
-      margin: '5px', 
-      padding:'5px'
-    }} 
-    >MY TRACKS</Link>
+      to={`/player/tracks/:${_id}`}
+      style={{
+        display: 'block',
+        backgroundColor: 'purple',
+        color: 'white',
+        margin: '5px',
+        padding: '5px'
+      }}
+    >My tracks</Link>
   )
 }
-export const UserTracksBtnConnect = connect(state => ({userId: state.promise.userData?.payload?._id || ''}))(UserTracksBtn)
+export const UserTracksBtnConnect = connect(state => ({ userId: state.promise.userData?.payload?._id || '' }))(UserTracksBtn)
 
-const PlaylistAdd = ({addPlaylist}) => {
+const PlaylistAdd = ({ addPlaylist }) => {
   let [clicked, setClicked] = useState(false)
   let [name, setName] = useState()
   return (
     <div>
       {
-        !clicked?
-          <button 
-            style={{backgroundColor: 'mediumseagreen',width : '95%',padding: '5px', margin: '5px', fontSize:'21px' }}
+        !clicked ?
+          <button
+            style={{ border: '1px solid black', backgroundColor: 'mediumseagreen', width: '95%', padding: '5px', margin: '5px' }}
             onClick={() => setClicked(true)}
           >NEW PLAYLIST</button>
           :
-          <div style={{width : '95%', margin:'0 auto'}}>
-            <input 
-              style={{width:'72%', padding:'5px'}} 
+          <div style={{ width: '95%', margin: '0 auto' }}>
+            <input
+              style={{ width: '72%', padding: '5px' }}
               placeholder='Playlist name'
               value={name}
               onChange={(e) => setName(e.target.value)}
@@ -96,36 +96,35 @@ const PlaylistAdd = ({addPlaylist}) => {
 
             <button
               disabled={!name}
-              style={{padding:'5px', backgroundColor:'mediumseagreen'}}
-              onClick={() => {addPlaylist(name); setClicked(false); setName('');}}
+              style={{ padding: '5px', backgroundColor: 'mediumseagreen' }}
+              onClick={() => { addPlaylist(name); setClicked(false); setName(''); }}
             >+</button>
 
             <button
-              style={{padding:'5px', backgroundColor:'red'}} 
-              onClick={() => {setClicked(false); setName('')}}
+              style={{ padding: '5px', backgroundColor: 'red' }}
+              onClick={() => { setClicked(false); setName('') }}
             >X</button>
           </div>
       }
     </div>
   )
 }
-const PlaylistAddConnect = connect(null, {addPlaylist: action.actionAddPlaylist})(PlaylistAdd)
+export const PlaylistAddConnect = connect(null, { addPlaylist: action.actionAddPlaylist })(PlaylistAdd)
 
-const Playlists = ({playlists}) => {
+const Playlists = ({ playlists }) => {
   return (
-    <div style={{backgroundColor: 'lightcyan'}}>
-      <PlaylistAddConnect />
+    <div>
       {
-        playlists?.payload? playlists.payload.map(item => {
+        playlists?.payload ? playlists.payload.map(item => {
           return (
-            <Link 
-              style={{display:'block', backgroundColor: 'darkcyan', color: 'cyan', margin: '5px', padding:'5px'}} 
-              to={`/player/playlist/:${item._id}`}
+            <Link
+              style={{ display: 'block', backgroundColor:'darkcyan', color: 'cyan', margin: '5px', padding: '5px' }}
+              to={`${history.location.pathname}/playlist/:${item._id}`}
             >{item.name}</Link>
           )
-        }) : ''
+        }).reverse() : ''
       }
     </div>
   )
 }
-export const PlaylistsConnect = connect(state => ({playlists: state.promise.userPlaylists || {}}))(Playlists)
+export const PlaylistsConnect = connect(state => ({ playlists: state.promise.userPlaylists || {} }))(Playlists)