player-project/src/components/Sidebar/index.js

import * as action from '../../actions'

import { useState, useEffect, useCallback } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { history, backendURL } from '../../App';
import { useDropzone } from 'react-dropzone'

const LogoutBtn = ({ onLogout }) =>
  <div
    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)

const ProfileWindow = ({ user }) => {
  let [userInfo, setUserInfo] = useState(user.payload)

  useEffect(() => {
    setUserInfo(user.payload)
  }, [user, userInfo])

  return (
    <section>
      <h3>{userInfo?.login || 'user'}</h3>
      <img
        width={150}
        height={'auto'}
        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 onDrop = useCallback(acceptedFiles => {
    onLoad(acceptedFiles[0])
  }, [onLoad])
  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>
  )
}
export const ProfileWindowDropzoneConnect = connect(null, { onLoad: action.actionUploadAvatar })(ProfileWindowDropzone)

const UserTracksBtn = ({ userId }) => {
  let [_id, setId] = useState()
  useEffect(() => {
    console.log('CHENG', userId)
    setId(userId)
  }, [userId])

  return (<Link to={`/player/tracks/:${_id}`} className='sidebar__link highlight'>MY UPLOADS</Link>)
}
export const UserTracksBtnConnect = connect(state => ({ userId: state.promise.userData?.payload?._id || '' }))(UserTracksBtn)

const PlaylistAdd = ({ addPlaylist }) => {
  let [clicked, setClicked] = useState(false)
  let [name, setName] = useState()
  return (
    <div>
      {
        !clicked ?
          <button
            className='sidebar__button'
            onClick={() => setClicked(true)}
          >NEW PLAYLIST</button>
          :
          <div style={{ width: '95%', margin: '0 auto' }}>
            <input
              style={{ width: '72%', padding: '5px' }}
              placeholder='Playlist name'
              value={name}
              onChange={(e) => setName(e.target.value)}
            />

            <button
              disabled={!name}
              style={{ padding: '5px', backgroundColor: 'mediumseagreen' }}
              onClick={() => { addPlaylist(name); setClicked(false); setName(''); }}
            >+</button>

            <button
              style={{ padding: '5px', backgroundColor: 'red' }}
              onClick={() => { setClicked(false); setName('') }}
            >X</button>
          </div>
      }
    </div>
  )
}
export const PlaylistAddConnect = connect(null, { addPlaylist: action.actionAddPlaylist })(PlaylistAdd)

const Playlists = ({ playlists }) => {
  return (
    <div>
      {
        playlists?.payload ? playlists.payload.map(item => {
          return (
            <Link className='sidebar__link' to={`/player/playlist/:${item._id}`}>{item.name}</Link>
          )
        }).reverse() : ''
      }
    </div>
  )
}
export const PlaylistsConnect = connect(state => ({ playlists: state.promise.userPlaylists || {} }))(Playlists)