add fetchForm

package-lock.json

@@ -6912,9 +6912,9 @@
       }
     },
     "form-data": {
-      "version": "3.0.1",
+      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
-      "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
       "requires": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -9724,6 +9724,16 @@
           "version": "8.2.4",
           "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.2.4.tgz",
           "integrity": "sha512-Ibt84YwBDDA890eDiDCEqcbwvHlBvzzDkU2cGBBDDI1QWT12jTiXIOn2CIw5KK4i6N5Z2HUxwYjzriDyqaqqZg=="
+        },
+        "form-data": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
+          "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
         }
       }
     },

package.json

@@ -10,6 +10,7 @@
     "@testing-library/user-event": "^12.8.3",
     "bootstrap": "^4.6.0",
     "eslint": "^7.27.0",
+    "form-data": "^4.0.0",
     "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-bootstrap": "^1.6.0",

src/components/Description/Description.js

@@ -7,66 +7,6 @@ import { LEVELS } from '../constants/constants';
 import { selectProfiles, selectFilteredCandidates } from '../../redux/outstaffingSlice';
 import { useSelector } from 'react-redux';
 
-// const Description = ({ candidatesListArr, onLoadMore }) => {
-//   function createMarkup(text) {
-//     return { __html: text.split('</p>').slice(0, 3).join('') };
-//   }
-
-//   return (
-//     <section className={style.description}>
-//       <div className="container">
-//         <div className={style.description__wrapper}>
-//           {candidatesListArr.map((el) => (
-//             <div className="row" key={el.id}>
-//               <div className="col-2">
-//                 <img className={style.description__img} src={dog} alt="" />
-//               </div>
-//               <div className="col-12 col-xl-6">
-//                 <h3 className={style.description__title}>
-//                   {el.skillsName} разработчик, {LEVELS[el.level]}
-//                 </h3>
-
-//                 {el.text ? (
-//                   <div className={style.description__text} dangerouslySetInnerHTML={createMarkup(el.text)}></div>
-//                 ) : (
-//                   <p className={style.description__textSecondary}>Описание отсутствует...</p>
-//                 )}
-//               </div>
-//               <div className="col-12 col-xl-4">
-//                 <Link to={`/candidate/${el.id}`}>
-//                   <button className={style.description__button}>Подробное резюме</button>
-//                 </Link>
-//               </div>
-//               <div className="col-xl-2"></div>
-//               <div className="col-12 col-xl-6">
-//                 {el.skills.map((e) => (
-//                   <span key={e.id} className={style.description__sp}>
-//                     {e.skill.name}
-//                   </span>
-//                 ))}
-//                 <img className={style.description__rectangle} src={rectangle} alt="" />
-//               </div>
-//               <div className="col-xl-4"></div>
-//             </div>
-//           ))}
-//         </div>
-
-//         <div className="row">
-//           <div className="col-12">
-//             <div className={style.description__footer}>
-//               <div className={style.description__footer__btn}>
-//                 <button onClick={() => onLoadMore(2)}>Загрузить еще</button>
-//               </div>
-//             </div>
-//           </div>
-//         </div>
-//       </div>
-//     </section>
-//   );
-// };
-
-// export default Description;
-
 const Description = ({ onLoadMore }) => {
   const candidatesListArr = useSelector(selectProfiles);
   const filteredListArr = useSelector(selectFilteredCandidates);
@@ -78,42 +18,6 @@ const Description = ({ onLoadMore }) => {
   return (
     <section className={style.description}>
       <div className="container">
-        {/* <div className={style.description__wrapper}>
-          {candidatesListArr.map((el) => (
-            <div className="row" key={el.id}>
-              <div className="col-2">
-                <img className={style.description__img} src={dog} alt="" />
-              </div>
-              <div className="col-12 col-xl-6">
-                <h3 className={style.description__title}>
-                  {el.fio} разработчик, {LEVELS[el.level]}
-                </h3>
-
-                {el.vc_text ? (
-                  <div className={style.description__text} dangerouslySetInnerHTML={createMarkup(el.vc_text)}></div>
-                ) : (
-                  <p className={style.description__textSecondary}>Описание отсутствует...</p>
-                )}
-              </div>
-              <div className="col-12 col-xl-4">
-                <Link to={`/candidate/${el.id}`}>
-                  <button className={style.description__button}>Подробное резюме</button>
-                </Link>
-              </div>
-              <div className="col-xl-2"></div>
-              <div className="col-12 col-xl-6">
-                {el.skillValues.map((e) => (
-                  <span key={e.id} className={style.description__sp}>
-                    {e.skill.name}
-                  </span>
-                ))}
-                <img className={style.description__rectangle} src={rectangle} alt="" />
-              </div>
-              <div className="col-xl-4"></div>
-            </div>
-          ))}
-        </div> */}
-
         <div className={style.description__wrapper}>
           {filteredListArr && filteredListArr.length > 0
             ? filteredListArr.map((el) => (

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 [data, setData] = useState({
-  const [phone, setPhone] = useState('');
+    email: '',
-  const [comment, setСomment] = useState('');
+    phone: '',
-  const [name, setName] = useState('');
+    comment: '',
+  });
 
   const handleChange = (e) => {
-    const name = e.target.name;
+    const newData = { ...data };
-    const value = e.target.value;
+    newData[e.target.id] = e.target.value;
-
+    setData(newData);
-    if (name === 'Email') {
-      setEmail(value);
-    } else if (name === 'Phone') {
-      setPhone(value);
-    } else if (name === 'Comment') {
-      setСomment(value);
-    } else {
-      return;
-    }
   };
 
   const handleSubmit = (e) => {
     e.preventDefault();
 
-    const info = {
+    const formData = new FormData();
-      email: email,
+    formData.append('email', data.email);
-      phone: phone,
+    formData.append('phone', data.phone);
-      comment: comment,
+    formData.append('comment', data.comment);
+
+    fetchForm('https://guild.craft-group.xyz/api/profile/add-to-interview', formData);
   };
 
-    fetchForm('https://guild.craft-group.xyz/api/profile/add-to-interview', info)
+  // const handleSubmit = (e) => {
-      .then((el) => {
+  //   e.preventDefault();
-        return el.json();
-      })
-      .then((e) => {
-        setName(e);
-      });
-  };
 
-  console.log('NAME ', name);
+  //   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">

src/components/Home/Home.js

@@ -11,7 +11,7 @@ const Home = () => {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    fetchProfile(`https://guild.craft-group.xyz/api/profile?limit=`, index)
+    fetchProfile('https://guild.craft-group.xyz/api/profile?limit=', index)
       .then((profileArr) => dispatch(profiles(profileArr)))
       .catch((e) => console.log(e));
 

src/components/Select/TagSelect.js

@@ -15,7 +15,7 @@ const TagSelect = () => {
   const handleSubmit = () => {
     const filterItemsId = itemsArr.map((item) => item.id).join();
 
-    fetchItemsForId('https://guild.craft-group.xyz/api/profile?skills=', filterItemsId).then((el) =>
+    fetchItemsForId(`https://guild.craft-group.xyz/api/profile?skills=`, filterItemsId).then((el) =>
       dispatch(filteredCandidates(el))
     );
 

src/server/server.js

@@ -23,9 +23,9 @@ export const fetchForm = async (link, info) => {
   const response = await fetch(link, {
     method: 'POST',
     headers: {
-      'Content-Type': 'application/json',
+      'Content-Type': 'multipart/form-data',
     },
-    body: JSON.stringify(info),
+    body: info,
   });
 
   return response;