add fetchForm

This commit is contained in:
Hope87 2021-07-06 10:53:50 +03:00
parent e8b7fbb2f3
commit a5820e0edb
7 changed files with 61 additions and 136 deletions

16
package-lock.json generated
View File

@ -6912,9 +6912,9 @@
}
},
"form-data": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
"integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"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"
}
}
}
},

View File

@ -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",

View File

@ -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) => (

View File

@ -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">

View File

@ -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));

View File

@ -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))
);

View File

@ -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;