Pulled develop

hrspace-request-builder · Mar 24, 2024 · 33fdba0 · 33fdba0
2 parents 75bad2b + 2877392
commit 33fdba0
Show file tree

Hide file tree

Showing 20 changed files with 729 additions and 260 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+=GARB=
diff --git a/README.md b/README.md
@@ -1,2 +1,4 @@
 # [HRSpace-request-builder-frontend](https://hrspace-request-builder.github.io/hrspace-request-builder-frontend/)
 Request builder for recruiter search for HRSpace
+
+docker compose -f docker/docker-compose.yml up -d --build
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,38 +1,61 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Route, Routes } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
 import NotFound404 from "./pages/not-found/not-found";
 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 {
+  getCategoriesRequest,
+  getCityRequest,
+  getVacancyNamesRequest,
+} from "./services/dataSlice";
+/* eslint-disable react-hooks/exhaustive-deps */
 function App() {
+  const dispatch = useDispatch();
+  // eslint-disable-next-line react-redux/useSelector-prefer-selectors
+  const isLoading = useSelector((state) => state.data.isLoading);
+
+  useEffect(() => {
+    dispatch(getCityRequest());
+    dispatch(getVacancyNamesRequest());
+    dispatch(getCategoriesRequest());
+  }, []);
+
   return (
-    <Routes>
-      <Route element={<GlobalRoute />}>
-        <Route path="/" element={<HomePage />} />
-        <Route
-          path="/request-builder/1"
-          element={<RequestBuilder page={1} />}
-        />
-        <Route
-          path="/request-builder/2"
-          element={<RequestBuilder page={2} />}
-        />
-        <Route
-          path="/request-builder/3"
-          element={<RequestBuilder page={3} />}
-        />
-        <Route path="/success" element={<Success />} />
-        <Route path="/failure" element={<FailureWindow />} />
-        <Route path="/404" element={<Window404 />} />
-        {/* <Route path="/pay" element={}/> */}
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    <>
+      {isLoading ? (
+        <p>Загрузка..</p>
+      ) : (
+        <Routes>
+          <Route element={<GlobalRoute />}>
+            <Route path="/" element={<HomePage />} />
+            <Route
+              path="/request-builder/1"
+              element={<RequestBuilder page={1} />}
+            />
+            <Route
+              path="/request-builder/2"
+              element={<RequestBuilder page={2} />}
+            />
+            <Route
+              path="/request-builder/3"
+              element={<RequestBuilder page={3} />}
+            />
+            <Route path="/success" element={<Success />} />
+            <Route path="/failure" element={<FailureWindow />} />
+            <Route path="/404" element={<Window404 />} />
+            {/* <Route path="/pay" element={}/> */}
 
-        <Route path="*" element={<NotFound404 />} />
-      </Route>
-    </Routes>
+            <Route path="*" element={<NotFound404 />} />
+          </Route>
+        </Routes>
+      )}
+    </>
   );
 }
 

diff --git a/src/api/api.js b/src/api/api.js
@@ -0,0 +1,14 @@
+export const BASE_URL = "http://185.221.162.231/api/v1";
+
+const checkResponse = (res) =>
+  res.ok ? res.json() : Promise.reject(new Error(`Ошибка ${res.status}`));
+
+// const checkSuccess = (res) =>
+//   res && res.success
+//     ? res
+//     : Promise.reject(new Error(`Ответ не success: ${res}`));
+
+export function request(endpoint, options = {}) {
+  return fetch(`${BASE_URL}${endpoint}`, options).then(checkResponse);
+  // .then(checkSuccess);
+}
diff --git a/src/components/404-window/404-window.module.scss b/src/components/404-window/404-window.module.scss
@@ -5,7 +5,7 @@
   flex-direction: column;
 
   margin-bottom: 213px;
-  padding-top: 68px;
+  padding-top: 48px;
 
   .successPicture {
     width: 521px;

diff --git a/src/components/failure-window/failure-window.module.scss b/src/components/failure-window/failure-window.module.scss
@@ -5,11 +5,11 @@
   flex-direction: column;
 
   margin-bottom: 213px;
-  padding-top: 68px;
+  padding-top: 48px;
 
   .successPicture {
-    width: 422px;
-    height: 336px;
+    width: 297px;
+    height: 237px;
     margin-bottom: 48px;
 
     background-image: url(../../images/fail.svg);

diff --git a/src/components/footer/footer.scss b/src/components/footer/footer.scss
@@ -1,3 +1,5 @@
+$textColor: #babdbf;
+
 @mixin flex($direction, $justify) {
   display: flex;
   flex-direction: $direction;
@@ -26,6 +28,7 @@
       font-size: 14px;
       line-height: 20px;
       margin: 0;
+      color: $textColor;
     }
   }
 

diff --git a/src/components/popup/popup.jsx b/src/components/popup/popup.jsx
@@ -47,8 +47,13 @@ function Popup() {
     recruiterCount,
     specialRequirementsField,
     companyInfoSwitch,
+    grade,
+    expirience,
+    employment,
+    registrationType,
   } = formStateFromRedux;
   const checkedAdditionalTasks = formStateFromRedux.additionalTasks;
+  const checkedWorktype = formStateFromRedux.worktype;
 
   // данные с dataSlice.js
   const dataOfResponsibilities = requestedDataFromRedux.responsibilities;
@@ -138,12 +143,94 @@ function Popup() {
                 {formStateFromRedux.specialisationField?.specialisation}
               </p>
             </li>
+            <li className={styles.listItem}>
+              <h3 className={styles.h3}>Грейд</h3>
+              <div className={styles.paragraph}>
+                <div className={styles.checkboxContainer}>
+                  <div className={styles.boxForMarker}>
+                    <div className={styles.marker} />
+                  </div>
+                  <p
+                    className={`${styles.paragraph} ${styles.checkboxDescription}`}
+                  >
+                    {grade}
+                  </p>
+                </div>
+              </div>
+            </li>
+            <li className={styles.listItem}>
+              <h3 className={styles.h3}>Опыт работы</h3>
+              <div className={styles.paragraph}>
+                <div className={styles.checkboxContainer}>
+                  <div className={styles.boxForMarker}>
+                    <div className={styles.marker} />
+                  </div>
+                  <p
+                    className={`${styles.paragraph} ${styles.checkboxDescription}`}
+                  >
+                    {expirience}
+                  </p>
+                </div>
+              </div>
+            </li>
             <li className={styles.listItem}>
               <h3 className={styles.h3}>Город</h3>
               <p className={styles.paragraph}>
                 {formStateFromRedux.cityField?.name}
               </p>
             </li>
+            <li className={styles.listItem}>
+              <h3 className={styles.h3}>Тип работы</h3>
+              <div className={styles.paragraph}>
+                {checkedWorktype.map((element, index) => (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <div className={styles.checkboxContainer} key={index}>
+                    <div className={styles.boxForMarker}>
+                      <div className={styles.marker} />
+                    </div>
+
+                    <p
+                      className={`${styles.paragraph} ${styles.checkboxDescription}`}
+                    >
+                      {element}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </li>
+
+            <li className={styles.listItem}>
+              <h3 className={styles.h3}>Занятость</h3>
+              <div className={styles.paragraph}>
+                <div className={styles.checkboxContainer}>
+                  <div className={styles.boxForMarker}>
+                    <div className={styles.marker} />
+                  </div>
+                  <p
+                    className={`${styles.paragraph} ${styles.checkboxDescription}`}
+                  >
+                    {employment}
+                  </p>
+                </div>
+              </div>
+            </li>
+
+            <li className={styles.listItem}>
+              <h3 className={styles.h3}>Тип оформления</h3>
+              <div className={styles.paragraph}>
+                <div className={styles.checkboxContainer}>
+                  <div className={styles.boxForMarker}>
+                    <div className={styles.marker} />
+                  </div>
+                  <p
+                    className={`${styles.paragraph} ${styles.checkboxDescription}`}
+                  >
+                    {registrationType}
+                  </p>
+                </div>
+              </div>
+            </li>
+
             <li className={styles.listItem}>
               <h3 className={styles.h3}>Зарплата gross</h3>
               <p className={styles.paragraph}>
@@ -153,7 +240,7 @@ function Popup() {
             </li>
             <li className={styles.listItem}>
               <h3 className={styles.h3}>Обязанности</h3>
-              <p className={styles.paragraph}>
+              <div className={styles.paragraph}>
                 {checkedResponsibilities.map((element, index) => (
                   // eslint-disable-next-line react/no-array-index-key
                   <div className={styles.checkboxContainer} key={index}>
@@ -169,11 +256,11 @@ function Popup() {
                   </div>
                 ))}
                 {formStateFromRedux.responsibilitiesField}
-              </p>
+              </div>
             </li>
             <li className={styles.listItem}>
               <h3 className={styles.h3}>Требования</h3>
-              <p className={styles.paragraph}>
+              <div className={styles.paragraph}>
                 {checkedRequirements.map((element, index) => (
                   // eslint-disable-next-line react/no-array-index-key
                   <div className={styles.checkboxContainer} key={index}>
@@ -188,11 +275,11 @@ function Popup() {
                   </div>
                 ))}
                 {formStateFromRedux.requirementsField}
-              </p>
+              </div>
             </li>
             <li className={styles.listItem}>
               <h3 className={styles.h3}>Условия</h3>
-              <p className={styles.paragraph}>
+              <div className={styles.paragraph}>
                 {checkedConditions.map((element, index) => (
                   // eslint-disable-next-line react/no-array-index-key
                   <div className={styles.checkboxContainer} key={index}>
@@ -207,7 +294,7 @@ function Popup() {
                   </div>
                 ))}
                 {formStateFromRedux.conditionsField}
-              </p>
+              </div>
             </li>
           </ul>
         </div>
@@ -241,7 +328,7 @@ function Popup() {
             </li>
             <li className={styles.listItem}>
               <h3 className={styles.h3}>Дополнительные задачи рекрутера</h3>
-              <p className={styles.paragraph}>
+              <div className={styles.paragraph}>
                 {checkedAdditionalTasks.map((element, index) => (
                   // eslint-disable-next-line react/no-array-index-key
                   <div className={styles.checkboxContainer} key={index}>
@@ -255,7 +342,7 @@ function Popup() {
                     </p>
                   </div>
                 ))}
-              </p>
+              </div>
             </li>
             <li className={styles.listItem}>
               <h3 className={styles.h3}>Что предоставить</h3>

diff --git a/src/components/popup/popup.module.scss b/src/components/popup/popup.module.scss
@@ -28,8 +28,8 @@ $scrollbarThumbColor: #959799;
   visibility: hidden;
   opacity: 0;
   transition:
-    visibility 0.3s,
-    opacity 0.5s linear;
+    visibility 0.2s,
+    opacity 0.2s linear;
   z-index: 100;
 
   .popup {

diff --git a/src/components/request-creator/salary/salary.module.scss b/src/components/request-creator/salary/salary.module.scss
@@ -14,13 +14,16 @@
 
 .salary {
   gap: 12px;
-  display: flex;
-  align-items: center;
+  //display: flex;
+  //align-items: center;
+  display: grid;
+  grid-template-columns: 211px 211px 1fr;
 }
 
 .ruble {
   font-size: 16px;
   font-weight: 400;
+  margin-top: 15px;
 }
 
 .salary_expectations {

diff --git a/src/components/request-creator2/reward-field/reward-field.module.scss b/src/components/request-creator2/reward-field/reward-field.module.scss
@@ -10,12 +10,13 @@
   font-size: 16px;
   font-weight: 400;
   color: #303233;
+  margin-top: 17px;
 }
 
 .reward_field_container_textfield_container {
   gap: 8px;
   display: flex;
-  align-items: center;
+  // align-items: center;
 }
 
 .reward_hit_container {

diff --git a/src/components/success/success.module.scss b/src/components/success/success.module.scss
@@ -5,11 +5,11 @@
   flex-direction: column;
 
   margin-bottom: 213px;
-  padding-top: 68px;
+  padding-top: 48px;
 
   .successPicture {
-    width: 402px;
-    height: 335px;
+    width: 297px;
+    height: 247px;
     margin-bottom: 48px;
 
     background-image: url(../../images/success.svg);