Skip to content

Commit

Permalink
Merge pull request #60 from hrspace-request-builder/wip/apiOnSubmit
Browse files Browse the repository at this point in the history 
Wip/api on submit
  • Loading branch information
@LedyBacer
LedyBacer authored Mar 25, 2024
2 parents ff24d53 + a72ddbd commit 5dd7da7
Show file tree
Hide file tree
Showing 6 changed files with 243 additions and 202 deletions.
195 changes: 189 additions & 6 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,27 @@
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import { Route, Routes } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
// import NotFound404 from "./pages/not-found/not-found";
import * as yup from "yup";
import { useFormik } from "formik";
import HomePage from "./pages/home-page/home-page";
import RequestBuilder from "./pages/request-builder/request-builder";
import GlobalRoute from "./components/global-route/global-route";
import Success from "./components/success/success";
import FailureWindow from "./components/failure-window/failure-window";
import Window404 from "./components/404-window/404-window";
import {
formDataPost,
getCategoriesRequest,
getCityRequest,
getRequiredDataFromSpecRequest,
getRequiredDataRequest,
getVacancyNamesRequest,
handleClearRequiredData,
handleClearSalaryData,
} from "./services/dataSlice";
/* eslint-disable react-hooks/exhaustive-deps */
import { saveFormState } from "./services/formSlice";
/* eslint-disable react-hooks/exhaustive-deps, react-redux/useSelector-prefer-selectors */
function App() {
const dispatch = useDispatch();
// eslint-disable-next-line react-redux/useSelector-prefer-selectors
Expand All @@ -25,26 +33,201 @@ function App() {
dispatch(getCategoriesRequest());
}, []);

const formStateFromRedux = useSelector((state) => state.form.formState);
const baseDataFromRedux = useSelector((state) => state.data.baseData);

const validationSchema = yup.object({
vacancyNameField: yup.object().shape({
name: yup.string().min(3).required(),
}),
specialisationField: yup.object().required(),
cityField: yup.object().required(),
salaryFromField: yup
.number()
.positive()
.min(1000)
.max(1000000000)
.integer()
.required(),
salaryToField: yup
.number()
.positive()
.min(1000)
.max(1000000000)
.integer()
.required(),
rewardField: yup
.number()
.positive()
.min(1000)
.max(1000000000)
.integer()
.required(),
employeeCountField: yup
.number()
.positive()
.min(1)
.max(1000)
.integer()
.required(),
});

const formik = useFormik({
initialValues: formStateFromRedux || {
vacancyNameField: null,
specialisationField: null,
cityField: null,
grade: "",
expirience: "",
worktype: [],
employment: "",
registrationType: "",
salaryFromField: "",
salaryToField: "",
responsibilitiesCheckboxes: [],
responsibilitiesField: "",
requirementsCheckboxes: [],
requirementsField: "",
conditionsCheckbox: [],
conditionsField: "",
rewardRadio: 0,
rewardField: "",
employeeCountField: "",
recruiterCount: "",
rewardRadio3: 0,
additionalTasks: [],
whatNeedRadio: 0,
specialRequirementsField: "",
companyInfoSwitch: false,
},
validationSchema,
onSubmit: (values) => {
console.log(JSON.stringify(values, null, 2));
dispatch(formDataPost(values));
},
});

const [vacancyNameTemp, handleVacancyNameTemp] = useState({});
const [cityTemp, handlecityTemp] = useState({});
const [specialisationTemp, handleSpecialisationTemp] = useState({});
useEffect(
() => () => {
const formState = formik.values;
// console.log(JSON.stringify(formState, null, 2));

const firstFieldHandler = () => {
dispatch(
getRequiredDataFromSpecRequest({
specId: formState.vacancyNameField.id,
}),
);

const tmpSpecName = baseDataFromRedux.specialisationNames.find(
(item) => item.id === formState.vacancyNameField.id,
);
const tmpSpec = baseDataFromRedux.specialisations.find(
(item) => item.id === tmpSpecName.specialisationsId,
);

formik.setFieldValue("specialisationField", {
id: tmpSpecName.id,
title: tmpSpecName.name,
specialisation: tmpSpec.name,
});
};

if (
formState.vacancyNameField !== null &&
formState.cityField === null &&
formState.vacancyNameField !== vacancyNameTemp
) {
if (formState.specialisationField === null) {
if (formState.vacancyNameField.id !== undefined) {
firstFieldHandler();
}
} else if (
formState.vacancyNameField.id !== formState.specialisationField.id &&
formState.vacancyNameField.id !== undefined
) {
firstFieldHandler();
}
}
/// //////////////////////////////////////////////

if (
formState.cityField === null &&
formState.specialisationField !== specialisationTemp
) {
if (formState.vacancyNameField === null) {
if (formState.specialisationField !== null) {
dispatch(
getRequiredDataFromSpecRequest({
specId: formState.specialisationField.id,
}),
);
}
} else if (
formState.vacancyNameField.name !== undefined &&
formState.specialisationField !== null
) {
dispatch(
getRequiredDataFromSpecRequest({
specId: formState.specialisationField.id,
}),
);
}
}
/// //////////////////////////////////////////////
if (
formState.cityField !== null &&
formState.specialisationField !== null &&
(formState.specialisationField !== specialisationTemp ||
formState.cityField !== cityTemp)
) {
dispatch(
getRequiredDataRequest({
vacancyNameFieldId: formState.specialisationField.id,
cityId: formState.cityField.id,
}),
);
}
/// //////////////////////////////////////////////
if (formState.cityField === null) {
dispatch(handleClearSalaryData());
}

if (formState.specialisationField === null) {
dispatch(handleClearRequiredData());
}

dispatch(saveFormState(formik.values));
handleSpecialisationTemp(formState.specialisationField);
handleVacancyNameTemp(formState.vacancyNameField);
handlecityTemp(formState.cityField);
},
[formik],
);

return (
// eslint-disable-next-line react/jsx-no-useless-fragment
<>
{isLoading ? (
<p>Загрузка..</p>
) : (
<Routes>
<Route element={<GlobalRoute />}>
<Route element={<GlobalRoute formik={formik} />}>
<Route path="/" element={<HomePage />} />
<Route
path="/request-builder/1"
element={<RequestBuilder page={1} />}
element={<RequestBuilder page={1} formik={formik} />}
/>
<Route
path="/request-builder/2"
element={<RequestBuilder page={2} />}
element={<RequestBuilder page={2} formik={formik} />}
/>
<Route
path="/request-builder/3"
element={<RequestBuilder page={3} />}
element={<RequestBuilder page={3} formik={formik} />}
/>
<Route path="/success" element={<Success />} />
<Route path="/failure" element={<FailureWindow />} />
Expand Down
8 changes: 4 additions & 4 deletions src/components/global-route/global-route.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ import styles from "./global-route.module.scss";
import AppHeader from "../app-header/app-header";
import Footer from "../footer/footer";
import Popup from "../popup/popup";

function GlobalRoute() {
/* eslint-disable react/prop-types */
function GlobalRoute({ formik }) {
const location = useLocation();
const currentRoute = location.pathname;

return (
<>
<form onSubmit={formik.handleSubmit}>
<div
className={`${styles.container} ${["/success", "/failure", "/404"].includes(currentRoute) ? styles.containerAnotherTheme : ""}`}
>
Expand All @@ -21,7 +21,7 @@ function GlobalRoute() {
<Footer />
</div>
<Popup />
</>
</form>
);
}

Expand Down
22 changes: 17 additions & 5 deletions src/components/popup/popup.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@ import { Button } from "@mui/material";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import styles from "./popup.module.scss";
import { handleModal } from "../../services/modalSlice";
import { handleModal, handleSuccess } from "../../services/modalSlice";

/* eslint-disable react-hooks/exhaustive-deps */
function Popup() {
const dispatch = useDispatch();
// eslint-disable-next-line react-redux/useSelector-prefer-selectors
Expand All @@ -15,6 +16,8 @@ function Popup() {
const requestedDataFromRedux = useSelector(
(state) => state.data.requestedData,
);
// eslint-disable-next-line react-redux/useSelector-prefer-selectors
const isSuccess = useSelector((state) => state.modal.isSuccess);
const navigate = useNavigate();

const handleClose = () => {
Expand All @@ -31,6 +34,14 @@ function Popup() {
return () => document.removeEventListener("keydown", onEsc);
});

React.useEffect(() => {
if (isSuccess) {
handleClose();
navigate("/success");
dispatch(handleSuccess(false));
}
}, [isSuccess]);

// данные с formSlice.js
const arrOfRespCheckboxesId =
formStateFromRedux.responsibilitiesCheckboxes.map(Number);
Expand Down Expand Up @@ -381,10 +392,11 @@ function Popup() {
<Button
variant="contained"
color="rqback"
onClick={() => {
handleClose();
navigate("/success");
}}
// onClick={() => {
// handleClose();
// navigate("/success");
// }}
type="submit"
sx={{
height: "46px",
width: "180px",
Expand Down
Loading

0 comments on commit 5dd7da7

Please sign in to comment.