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 }) =>
{ onLogout(); history.push('/login') }}
>log-out[X]
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 (
{userInfo?.login || 'user'}
)
}
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 ?
drag 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 (
MY 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 ?
:
setName(e.target.value)}
/>
}
)
}
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)