123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130 |
- 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}`}
- style={{
- display: 'block',
- backgroundColor: 'purple',
- color: 'white',
- margin: '5px',
- padding: '5px'
- }}
- >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
- 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' }}
- 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
- style={{ display: 'block', backgroundColor:'darkcyan', color: 'cyan', margin: '5px', padding: '5px' }}
- to={`/player/playlist/:${item._id}`}
- >{item.name}</Link>
- )
- }).reverse() : ''
- }
- </div>
- )
- }
- export const PlaylistsConnect = connect(state => ({ playlists: state.promise.userPlaylists || {} }))(Playlists)
|