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

import * as action from '../../actions'
import plugPic from '../../assets/default.png'

import { useState, useEffect, useCallback } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { backendURL } from '../../App';
import { useDropzone } from 'react-dropzone'
import { faPlus, faBan, faSignOutAlt, faUpload} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const LogoutBtn = ({ onLogout }) =>
  <Link
    to='/login'
    className='sidebar__link highlightRed'
    onClick={() =>  onLogout()}
  >LOG-OUT <FontAwesomeIcon icon={faSignOutAlt}/></Link>

//export const LogoutBtnConnect = connect(null, { onLogout: action.actionAuthLogout })(LogoutBtn)
export const LogoutBtnConnect = connect(null, { onLogout: action.actionFullLogout })(LogoutBtn)

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

  return (
    <section >
      <h3>{userInfo?.login || 'user'}</h3>
      {userInfo?.avatar?.url ? 
                        <img src={backendURL + '/' + userInfo?.avatar?.url} alt='avatar'/> : 
                        <img src={plugPic} alt='avatar' />}
    </section>
  )
}
export const ProfileWindowConnect = connect(state => ({ user: state.promise.userData || {} }))(ProfileWindow)

const ProfileWindowDropzone = ({ onLoad }) => {
  const onDrop = useCallback(acceptedFiles => {
    if(acceptedFiles[0].type === 'image/png' || acceptedFiles[0].type === 'image/jpeg') onLoad(acceptedFiles[0])
  }, [onLoad])
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })

  return (
    <div {...getRootProps()} 
      className='sidebar__profile' 
      style={isDragActive ? { backgroundColor: '#0e6147' } : { backgroundColor: 'transparent' }}
    >
      <input {...getInputProps()} />
      <ProfileWindowConnect />
      <small className='lightText'>{isDragActive ? '...drop here' : 'change avatar'}</small>
    </div>
  )
}
export const ProfileWindowDropzoneConnect = connect(null, { onLoad: action.actionUploadAvatar })(ProfileWindowDropzone)

const UserTracksBtn = ({ userId }) => {
  let [_id, setId] = useState()
  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)

const PlaylistAdd = ({ addPlaylist }) => {
  let [clicked, setClicked] = useState(false)
  let [name, setName] = useState()
  return (
    <div>
      {
        !clicked ?
          <button
            className='sidebar__button highlightPaleGreen'
            onClick={() => setClicked(true)}
          >NEW PLAYLIST</button>
          :
          <div className='sidebar__addpanel'>
            <input
              placeholder='NEW PLATLIST NAME'
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
            <div className='sidebar__addpanel btnWrapper'>
              <button
                disabled={!name}
                className='highlightGreen'
                onClick={() => { addPlaylist(name); setClicked(false); setName(''); }}
              ><FontAwesomeIcon icon={faPlus} /></button>

              <button
                className='highlightRed'
                onClick={() => { setClicked(false); setName('') }}
              ><FontAwesomeIcon icon={faBan} /></button>
            </div>
          </div>
      }
    </div>
  )
}
export const PlaylistAddConnect = connect(null, { addPlaylist: action.actionAddPlaylist })(PlaylistAdd)

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