import React, { useRef, useState } from 'react';
import { HttpApiMethods } from '../fetchUtils/FetchUtils';


const PostForm = () => {
    const formRef = useRef(null); // Добавление этой строки
    const [dataIsLoad, setDataIsLoad] = useState(false)

    let post = async () => {
        const httpApiMethods = new HttpApiMethods();
        let formData = new FormData(formRef.current); // Изменение этой строки
        setDataIsLoad(false)
        const updatedMeets = httpApiMethods.AddMeetings(formData)
        .then(
            () => {
                setDataIsLoad(true)
                
            }
        )
        
    }

    return (
        <div>
            <h2>Post</h2>
            <div>{dataIsLoad ? "ДАнные успешно загрузилисб" : ""}</div>
            <form ref={formRef} action='https://cyberbloom.zetcraft.ru/api/meetings'>
                <input type="text" placeholder='name' name='title'/>
                <input type="text" placeholder='time' name='time'/>
                <input type="text" placeholder='theme' name='theme'/>
                <input type="text" placeholder='speakerName' name='speakerName'/>
                <input type="file" placeholder='speackerImage' name='speackerImage'/>
                <input type="file" placeholder='placeImages' name='placeImages'/>
                <input type="text" placeholder='splecializations' name='splecializations'/>
                <input type="text" placeholder='speakerEmail' name='speakerEmail'/>
                <input type="text" placeholder='tags' name='tags'/>
                <input type="text" placeholder='SpeakerTelephone' name='speakerTelephone'/>
                <input type="text" placeholder='type' name='type'/>
                <input type="text" placeholder='videoUrl' name='videoUrl'/>
                <button onClick={post}>Create</button>
                </form>
        </div>
    );
}

export default PostForm;