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";
import {all, takeEvery, put, call} from 'redux-saga/effects';


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

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


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



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

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