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 }) => onLogout()} >LOG-OUT //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 ( {userInfo?.login || 'user'} {userInfo?.avatar?.url ? : } ) } 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 ( {isDragActive ? '...drop here' : 'change avatar'} ) } 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 (UPLOADS ) } 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 ( { !clicked ? setClicked(true)} >NEW PLAYLIST : setName(e.target.value)} /> { addPlaylist(name); setClicked(false); setName(''); }} > { setClicked(false); setName('') }} > } ) } export const PlaylistAddConnect = connect(null, { addPlaylist: action.actionAddPlaylist })(PlaylistAdd) const Playlists = ( { playlists }) => { return ( { playlists?.payload ? playlists.payload.map(item => { return ( {item.name} ) }).reverse() : '' } ) } export const PlaylistsConnect = connect(state => ({ playlists: state.promise.userPlaylists || {} }))(Playlists)