HW/final_project/src/pages/AbouteMePage.jsx

import React, { useState, useEffect } from 'react';
import '../App.css'
import store from "../store/index"
import { backendURL } from '../graphQl/getGQL';
export const PageAboutMe = ({ match: { params: { _id } }, getData, userName, avatar, chats }) => {
    const [avatarImg, setAvatarImg] = useState(null)

    useEffect(() => {
        getData(_id)
        const formElement = document.getElementById('form');
        const photoInput = document.getElementById('media');
        console.log('ava', avatar);
        if (formElement && photoInput) {

            photoInput.onchange = async () => {

                fetch(`${backendURL}/upload`, {
                    method: "POST",
                    headers: localStorage.authToken ? { Authorization: 'Bearer ' + localStorage.authToken } : {},
                    body: new FormData(formElement)
                }).then(res => res.json()).then(json => {
                    setAvatarImg(`${backendURL}/${json.url}`)
                    console.log(avatarImg);
                    console.log('UPLOAD RESULT', json)
                })


            }
        }
    }, [_id])


    return (
        <>
            <h2>{userName}</h2>
            {avatarImg && <img src={avatarImg} className='ava' alt="avatar" />}


            <form action="/upload" method="post" enctype="multipart/form-data" id='form'>
                <input type="file" name="media" id='media' />
            </form>



        </>
    )
}