add fetchForm

src/components/Form/Form.js

@@ -3,64 +3,74 @@ import style from './Form.module.css';
 import { fetchForm } from '../../server/server';
 
 const Form = () => {
-  const [email, setEmail] = useState('');
-  const [phone, setPhone] = useState('');
-  const [comment, setСomment] = useState('');
-  const [name, setName] = useState('');
+  const [data, setData] = useState({
+    email: '',
+    phone: '',
+    comment: '',
+  });
 
   const handleChange = (e) => {
-    const name = e.target.name;
-    const value = e.target.value;
-
-    if (name === 'Email') {
-      setEmail(value);
-    } else if (name === 'Phone') {
-      setPhone(value);
-    } else if (name === 'Comment') {
-      setСomment(value);
-    } else {
-      return;
-    }
+    const newData = { ...data };
+    newData[e.target.id] = e.target.value;
+    setData(newData);
   };
 
   const handleSubmit = (e) => {
     e.preventDefault();
 
-    const info = {
-      email: email,
-      phone: phone,
-      comment: comment,
-    };
+    const formData = new FormData();
+    formData.append('email', data.email);
+    formData.append('phone', data.phone);
+    formData.append('comment', data.comment);
 
-    fetchForm('https://guild.craft-group.xyz/api/profile/add-to-interview', info)
-      .then((el) => {
-        return el.json();
-      })
-      .then((e) => {
-        setName(e);
-      });
+    fetchForm('https://guild.craft-group.xyz/api/profile/add-to-interview', formData);
   };
 
-  console.log('NAME ', name);
+  // const handleSubmit = (e) => {
+  //   e.preventDefault();
+
+  //   fetchForm('https://guild.craft-group.xyz/api/profile/add-to-interview', data)
+  //     .then((el) => {
+  //       return el.json();
+  //     })
+  //     .then((e) => {
+  //       console.log(e);
+  //     });
+  // };
 
   return (
     <div className="container">
       <div className="row">
         <div className="col-sm-12">
-          <form className={style.form}>
+          <form className={style.form} id="test">
             <label htmlFor="email">Емейл:</label>
-            <input onChange={handleChange} id="email" name="Email" type="email" placeholder="Емейл" value={email} />
+            <input
+              onChange={handleChange}
+              id="email"
+              name="Email"
+              type="email"
+              placeholder="Емейл"
+              value={data.email}
+            />
 
             <label htmlFor="phone">Номер телефона:</label>
-            <input onChange={handleChange} id="phone" type="number" name="Phone" placeholder="Телефон" value={phone} />
+            <input
+              onChange={handleChange}
+              id="phone"
+              type="number"
+              name="Phone"
+              placeholder="Телефон"
+              value={data.phone}
+            />
 
             <textarea
               onChange={handleChange}
+              id="comment"
               rows="5"
               cols="40"
               name="Comment"
               placeholder="Оставьте комментарий"
-              value={comment}
+              value={data.comment}
             ></textarea>
 
             <button onClick={handleSubmit} className={style.form__btn} type="submit">