From 94a13f490312fb50e78e8b7024079807a5e7e7e3 Mon Sep 17 00:00:00 2001 From: Gubar Nikita Date: Thu, 28 Dec 2023 07:09:15 +0300 Subject: [PATCH] refactoring useFormValidation and registationForCandidate, adaptive modalRegistration and registationForCandidate --- .../ModalRegistration/modalRegistration.scss | 28 ++----- src/hooks/useFormValidation.js | 83 ++++++++++++------- .../RegistrationForCandidate.js | 36 +++++++- .../registationForCandidate.scss | 19 ++++- 4 files changed, 111 insertions(+), 55 deletions(-) diff --git a/src/components/Modal/ModalRegistration/modalRegistration.scss b/src/components/Modal/ModalRegistration/modalRegistration.scss index 633f1ee3..cf2b444a 100644 --- a/src/components/Modal/ModalRegistration/modalRegistration.scss +++ b/src/components/Modal/ModalRegistration/modalRegistration.scss @@ -12,7 +12,7 @@ width: 80%; } - @media (max-width: 617px) { + @media (max-width: 703px) { top: 7%; padding: 20px 10px 20px 10px; } @@ -22,10 +22,9 @@ display: flex; flex-direction: column; align-items: center; - padding: 0 0 0 30px; width: 65%; - @media (max-width: 740px) { + @media (max-width: 1106px) { width: 100%; padding: 0; } @@ -42,7 +41,7 @@ font-size: 25px; } - @media (max-width: 617px) { + @media (max-width: 703px) { flex-direction: column; align-items: center; font-size: 20px; @@ -66,7 +65,7 @@ font-size: 15px; } - @media (max-width: 617px) { + @media (max-width: 703px) { margin: 10px 0 0 0; } } @@ -78,7 +77,7 @@ justify-content: space-between; width: 100%; - @media (max-width: 617px) { + @media (max-width: 703px) { flex-direction: column; align-items: center; margin: 22px 0 0 0; @@ -89,8 +88,8 @@ flex-direction: column; width: 47%; - @media (max-width: 617px) { - width: 75%; + @media (max-width: 703px) { + width: 85%; } h5 { @@ -101,7 +100,7 @@ } input { - height: 35px; + height: 43px; background: #eff2f7; border-radius: 8px; border: none; @@ -134,11 +133,6 @@ width: 174px; height: 50px; font-size: 18px; - margin: 0 55px 0 0; - - @media (max-width: 740px) { - margin: 0; - } } .disable { @@ -170,11 +164,7 @@ justify-content: space-between; width: 35%; - @media (max-width: 960px) { - padding: 0 0 0 10px; - } - - @media (max-width: 740px) { + @media (max-width: 1106px) { display: none; } diff --git a/src/hooks/useFormValidation.js b/src/hooks/useFormValidation.js index 507f3b2c..192e7d83 100644 --- a/src/hooks/useFormValidation.js +++ b/src/hooks/useFormValidation.js @@ -1,15 +1,15 @@ import { useState } from "react"; -export const useFormValidation = () => { +import { apiRequest } from "@api/request"; + +export const useFormValidation = ( + apiEndpoint, + fields, + showNotificationError, + showNotificationTrue +) => { // Состояние формы, содержащее значения полей - const [formData, setFormData] = useState({ - name: "", - summary: "", - email: "", - tg: "", - password: "", - secondPassword: "" - }); + const [formData, setFormData] = useState(fields); // Состояние ошибок валидации const [validationErrors, setValidationErrors] = useState({}); @@ -23,32 +23,41 @@ export const useFormValidation = () => { // Функция для валидации формы const validateForm = () => { const errors = {}; - - if (formData.name.trim() === "") { - errors.name = "Имя обязательно к заполнению"; + if (formData.name != undefined) { + if (formData.name.trim() === "") { + errors.name = "Имя обязательно к заполнению"; + } } - const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - if (formData.email.trim() === "") { - errors.email = "E-mail обязателен к заполнению"; - } else if (!emailRegex.test(formData.email)) { - errors.email = "Неверный адрес электронной почты"; + if (formData.email != undefined) { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (formData.email.trim() === "") { + errors.email = "E-mail обязателен к заполнению"; + } else if (!emailRegex.test(formData.email)) { + errors.email = "Неверный адрес электронной почты"; + } } - if (formData.tg.trim() === "") { - errors.tg = "Telegram обязателен к заполнению"; + if (formData.tg != undefined) { + if (formData.tg.trim() === "") { + errors.tg = "Telegram обязателен к заполнению"; + } } - if (formData.password.trim() === "") { - errors.password = "Пароль обязателен к заполнению"; - } else if (formData.password.length < 8) { - errors.password = "Пароль должен содержать более 8 символов"; + if (formData.password != undefined) { + if (formData.password.trim() === "") { + errors.password = "Пароль обязателен к заполнению"; + } else if (formData.password.length < 8) { + errors.password = "Пароль должен содержать более 8 символов"; + } } - if (formData.secondPassword.trim() === "") { - errors.secondPassword = "Повторите пароль"; - } else if (formData.secondPassword !== formData.password) { - errors.secondPassword = "Пароли должны совпадать"; + if (formData.secondPassword != undefined) { + if (formData.secondPassword.trim() === "") { + errors.secondPassword = "Повторите пароль"; + } else if (formData.secondPassword !== formData.password) { + errors.secondPassword = "Пароли должны совпадать"; + } } setValidationErrors(errors); @@ -58,13 +67,25 @@ export const useFormValidation = () => { }; // Функция для обработки отправки формы - const handleSubmit = (e) => { + const handleSubmit = async (e) => { e.preventDefault(); + // Проверка валидации формы if (validateForm()) { - alert("Форма успешно отправлена!"); - } else { - alert("Пожалуйста, заполните форму правильно."); + try { + const response = await apiRequest(apiEndpoint, { + method: "POST", + data: formData + }); + + if (!response) { + showNotificationError(); + } else { + showNotificationTrue(); + } + } catch (error) { + console.error("Error submitting form:", error); + } } }; diff --git a/src/pages/RegistrationForCandidate/RegistrationForCandidate.js b/src/pages/RegistrationForCandidate/RegistrationForCandidate.js index de6b3d22..e883b877 100644 --- a/src/pages/RegistrationForCandidate/RegistrationForCandidate.js +++ b/src/pages/RegistrationForCandidate/RegistrationForCandidate.js @@ -1,6 +1,7 @@ import React from "react"; import { useFormValidation } from "@hooks/useFormValidation"; +import { useNotification } from "@hooks/useNotification"; import AuthHeader from "@components/Common/AuthHeader/AuthHeader"; import { Footer } from "@components/Common/Footer/Footer"; @@ -13,7 +14,40 @@ import BackEndImg from "assets/images/partnerProfile/personalBackEnd.svg"; import "./registationForCandidate.scss"; export const RegistrationForCandidate = () => { - const form = useFormValidation(); + const apiEndpoint = "/register/sign-up"; + + const fields = { + name: "", + summary: "", + email: "", + tg: "", + password: "", + secondPassword: "" + }; + + const { showNotification } = useNotification(); + const showNotificationError = () => { + showNotification({ + show: true, + text: "Аккаунт с таким логином или email уже существует", + type: "error" + }); + }; + const showNotificationTrue = () => { + showNotification({ + show: true, + text: "Аккаунт успешно создан", + type: "success" + }); + }; + + const form = useFormValidation( + apiEndpoint, + fields, + showNotificationError, + showNotificationTrue + ); + return (
diff --git a/src/pages/RegistrationForCandidate/registationForCandidate.scss b/src/pages/RegistrationForCandidate/registationForCandidate.scss index ad636528..24f6e506 100644 --- a/src/pages/RegistrationForCandidate/registationForCandidate.scss +++ b/src/pages/RegistrationForCandidate/registationForCandidate.scss @@ -26,7 +26,7 @@ } @media (max-width: 1072px) { - top: 32%; + top: 31.5%; } @media (max-width: 1024px) { @@ -110,17 +110,28 @@ row-gap: 28px; column-gap: 55px; + @media (max-width: 1072px) { + flex-wrap: nowrap; + flex-direction: column; + width: 50%; + } + + @media (max-width: 660px) { + width: 100%; + margin-left: 5px; + } + &__input { display: flex; flex-direction: column; width: 46%; @media (max-width: 1072px) { - width: 75%; + width: 100%; } @media (max-width: 478px) { - width: 100%; + // width: 100%; } label { @@ -135,7 +146,7 @@ background: #eff2f7; border-radius: 8px; width: 100%; - padding: 8px 12px; + padding: 10px 12px; border: none; outline: none; font-weight: 400;