music-player/src/pages/header/avatar.js

import {useCallback} from "react";
import {store} from "../../reducers";
import {actionSetAvatar, actionUploadImage, backURL} from "../../actions";
import {useDropzone} from "react-dropzone";
import {connect} from "react-redux";
import avadef from "../../ava-def.jpg";



function AvatarDropzone({onLoad}) {
    const onDrop = useCallback((acceptedFiles) => {
        // Do something with the files
        onLoad(acceptedFiles[0]);
        store.dispatch(actionSetAvatar(acceptedFiles[0]))
    }, [onLoad]);
    const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

    return (
        <div {...getRootProps()}>
            <input {...getInputProps()} />
            {isDragActive ? (
               <button><p className=''>Перетащите файл сюда ...</p></button>
            ) : (
                <button>  <p>Сменить аву, нажмите или перетащите файл</p></button>
            )}
        </div>
    );
}


export const CAvatarDropZone = connect (null, {onLoad: actionUploadImage}) (AvatarDropzone)



const Avatar = ({ avatarURL = {} }) => {
    // console.log(avatarURL);
    return (
        <div className='Avatar'>
            {avatarURL !== null ? <img alt='avatar' src={backURL + "/" + avatarURL.avatar?.url}></img> : <img alt='def-ava' src={avadef}/>}
        </div>
    )
};

export const CAvatar = connect((state) => ({avatarURL: state.promise.aboutMe?.payload}))(Avatar)