hipstagram/src/components/ChangeAvatarComponent.js

import {DropzoneArea} from "material-ui-dropzone";
import styled from 'styled-components';
import {connect} from "react-redux";
import {uploadFile} from "../shared/services&utilits/utilits";
import {useState} from "react";
import {gqlSetAvatar} from "../shared/services&utilits/gqlRequest";
import {setActiveUserData, setOwnerData} from "../store/actionCreators/ActionCreators";
import avatar from "../assets/img/avatarGolub.jpg"
import {SendButton} from "../shared/styledComponents";

const DropZone = styled.div`

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 45%;
  margin-right: 7%;
`

const AvatarComponent = styled.div`
  display: flex;
  width: 70vw;
  height: 70vh;
`

const AvatarImg = styled.img`
  width: 300px;
  height: 300px;
  border-radius: 50%;
`

const OldAvatar = styled.div`
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 50%;
`

const SaveButton = styled(SendButton)`
    margin-top: 50px;
`



function ChangeAvatarComponent({ownerData, closeModal, setOwnerData, setActiveUserData}) {
    const [avatarImagePreview, setAvatarImagePreview] = useState(ownerData && ownerData.avatar || null)


    const loadFIle = async (file) => {
        const img = await uploadFile(file);
        setAvatarImagePreview(img)
    }

    const loadAvatar = async(files) => {
        const newPreviewPicures = [];
        await files.forEach((file => {
            loadFIle(file, newPreviewPicures)
        }))
    }

    const saveAvatar = async () => {
        if (avatarImagePreview){
            const responce = await gqlSetAvatar(avatarImagePreview._id,ownerData._id)
            if (responce.ok) {
                setOwnerData(null);
                setActiveUserData(null);
                closeModal();
            }
        }
    }

    return <AvatarComponent>
        <OldAvatar>
            <AvatarImg src={avatarImagePreview && avatarImagePreview.url || avatar}/>
        </OldAvatar>
        <DropZone>
            <DropzoneArea
                key={avatarImagePreview._id}
                filesLimit={1}
                showPreviews={false}
                acceptedFiles={['image/*']}
                dropzoneText={"Drag and drop new avatar here or click"}
                onChange={(files) => loadAvatar(files)}
                showPreviewsInDropzone={false}
            />
            <SaveButton onClick={saveAvatar}>Save</SaveButton>
        </DropZone>
    </AvatarComponent>
}


const mapStateToProps = (state) => {
    return {
        ownerData: state.ownerData,
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        setOwnerData: (user) => dispatch(setOwnerData(user)),
        setActiveUserData: (user) => dispatch(setActiveUserData(user))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(ChangeAvatarComponent);