1234567891011121314151617181920212223242526272829303132333435363738394041424344 |
- 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)
|