Feature/pages layout components

src/components/App/App.tsx

@@ -1,7 +1,6 @@
-import { Routes, Route, useNavigate } from "react-router-dom"
-import { Auth } from "@Components"
+import { Routes, Route } from "react-router-dom"
+import { Auth, Vacancy } from "@Components"
 import ProtectedRoute from "../ProtectedRoute/ProtectedRoute"
-import MainScreen from "../MainScreen/MainScreen"
 import Search from "../Search/Search"
 import { useEffect } from "react"
 import { useAppDispatch, useAppSelector } from "@ReduxHooks"
@@ -14,11 +13,11 @@ import {
   getSkills,
   getVacancies,
 } from "@Features"
+import { MainLayout } from "@Layout"
 
 function App() {
   const dispatch = useAppDispatch()
-  const { user } = useAppSelector((state) => state.auth)
-  const navigate = useNavigate()
+  useAppSelector((state) => state.auth)
   useEffect(() => {
     dispatch(getCurrency())
     dispatch(getCity())
@@ -27,24 +26,20 @@ function App() {
     dispatch(getEmployments())
     dispatch(getExperiences())
     dispatch(getVacancies())
-  }, [])
+  }, [dispatch])
 
   return (
     <div className="App">
       <Routes>
-        <Route
-          path="/"
-          element={<ProtectedRoute element={MainScreen} />}
-        ></Route>
-        <Route
-          path="/search"
-          element={<ProtectedRoute element={Search} />}
-        ></Route>
-        <Route path="sign-in" element={<Auth podComponent="login" />}></Route>
-        <Route
-          path="sign-up"
-          element={<Auth podComponent="registration" />}
-        ></Route>
+        <Route path="/" element={<ProtectedRoute element={Vacancy} />} />
+
+        <Route path="/search" element={<ProtectedRoute element={Search} />} />
+
+        <Route path="sign-in" element={<Auth podComponent="login" />} />
+
+        <Route path="sign-up" element={<Auth podComponent="registration" />} />
+
+        <Route path="/test" element={<MainLayout />} />
       </Routes>
     </div>
   )

src/components/CandidateTable/CandidateTable.tsx

@@ -1,124 +1,147 @@
-import styles from "./CandidateTable.module.scss"
-import Accordion from "@mui/material/Accordion"
-import AccordionSummary from "@mui/material/AccordionSummary"
-import AccordionDetails from "@mui/material/AccordionDetails"
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore"
-import LinearProgress from "@mui/material/LinearProgress"
-import { Button, Stack } from "@mui/material"
-
-import CandidatInfoTable from "../CandidatInfoTable/CandidatInfoTable"
-
+import { FC } from "react"
+import { CandidatInfoTable } from "@Components"
+import { useAppSelector } from "@ReduxHooks"
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  LinearProgress,
+  Button,
+  Stack,
+  Typography,
+} from "@mui/material"
+import { ExpandMore } from "@mui/icons-material"
 import PencilIcon from "../../ui-kit/icons/pencil-1.svg"
 import FolderIcon from "../../ui-kit/icons/folder.svg"
 import EyeIcon from "../../ui-kit/icons/eye.svg"
-import { useAppSelector } from "@ReduxHooks"
 import dayjs from "dayjs"
 import relativeTime from "dayjs/plugin/relativeTime"
 import "dayjs/locale/ru"
-function CandidateTable() {
+
+import styles from "./CandidateTable.module.scss"
+
+const CandidateTable: FC = () => {
   dayjs.extend(relativeTime)
 
   const vacancies = useAppSelector((state) => state.vacancies.vacancyList)
+  console.log("Список вакансий", vacancies.length)
   return (
     <Stack spacing={1}>
-      {vacancies.map((vacancy) => (
-        <Accordion sx={{ width: "945px" }} key={vacancy.id}>
-          <AccordionSummary
-            sx={{
-              width: "945px",
-              height: "104px",
-              padding: "24px 32px",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              // alignContent: "flex-end",
-            }}
-            expandIcon={
-              <ExpandMoreIcon sx={{ width: "24px", height: "24px" }} />
-            }
-            // aria-controls="panel1a-content"
-            id="panel1a-header"
-          >
-            <div className={styles.tableWrapper}>
-              <div className={styles.professionWrapper}>
-                <h2 className={styles.vacantionTitle}>{vacancy.name}</h2>
-                <h3 className={styles.progressTitle}>
-                  {dayjs(vacancy.pub_datetime).locale("ru").fromNow()}
-                </h3>
-              </div>
+      {vacancies.length === 0 ? (
+        <Typography
+          sx={{
+            paddingTop: "56px",
+            fontFamily: "YS Display",
+            fontSize: "24px",
+            fontWeight: 500,
+            lineHeight: "32px",
+            letterSpacing: "0em",
+          }}
+          variant="h2"
+        >
+          Список вакансий отсутствует
+        </Typography>
+      ) : (
+        vacancies.map((vacancy) => (
+          <Accordion sx={{ width: "945px" }} key={vacancy.id}>
+            <AccordionSummary
+              sx={{
+                width: "945px",
+                height: "104px",
+                padding: "24px 32px",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+              expandIcon={<ExpandMore sx={{ width: "24px", height: "24px" }} />}
+              id="panel1a-header"
+            >
+              <div className={styles.tableWrapper}>
+                <div className={styles.professionWrapper}>
+                  <h2 className={styles.vacantionTitle}>{vacancy.name}</h2>
 
-              <div className={styles.progressWrapper}>
-                <h3 className={styles.progress}>Статус: 75%</h3>
-                <LinearProgress
-                  sx={{ width: "132px", height: "8px", borderRadius: "64px" }}
-                  variant="determinate"
-                  value={75}
-                />
-              </div>
+                  <h3 className={styles.progressTitle}>
+                    {dayjs(vacancy.pub_datetime).locale("ru").fromNow()}
+                  </h3>
+                </div>
+
+                <div className={styles.progressWrapper}>
+                  <h3 className={styles.progress}>Статус: 75%</h3>
+
+                  <LinearProgress
+                    sx={{ width: "132px", height: "8px", borderRadius: "64px" }}
+                    variant="determinate"
+                    value={75}
+                  />
+                </div>
+
+                {/* TODO: Вынести в подкомпонент  */}
+                <div className={styles.buttonWrapper}>
+                  <Button
+                    sx={{
+                      padding: "0",
+                      paddingRight: "24px",
+                      fontSize: "14px",
+                      lineHeight: "20px",
+                      fontWeight: "400",
+                      color: "#5A9BFF",
+                      textTransform: "none",
+                    }}
+                  >
+                    <img
+                      className={styles.icon}
+                      src={PencilIcon}
+                      alt="Иконка карандаша"
+                    />
+                    Изменить
+                  </Button>
+
+                  <Button
+                    sx={{
+                      padding: "0",
+                      paddingRight: "24px",
+                      fontSize: "14px",
+                      lineHeight: "20px",
+                      fontWeight: "400",
+                      color: "#5A9BFF",
+                      textTransform: "none",
+                    }}
+                  >
+                    <img
+                      className={styles.icon}
+                      src={FolderIcon}
+                      alt="Иконка папки"
+                    />
+                    В архив
+                  </Button>
 
-              <div className={styles.buttonWrapper}>
-                <Button
-                  sx={{
-                    padding: "0",
-                    paddingRight: "24px",
-                    fontSize: "14px",
-                    lineHeight: "20px",
-                    fontWeight: "400",
-                    color: "#5A9BFF",
-                    textTransform: "none",
-                  }}
-                >
-                  <img
-                    className={styles.icon}
-                    src={PencilIcon}
-                    alt="Иконка карандаша"
-                  ></img>
-                  Изменить
-                </Button>
-                <Button
-                  sx={{
-                    padding: "0",
-                    paddingRight: "24px",
-                    fontSize: "14px",
-                    lineHeight: "20px",
-                    fontWeight: "400",
-                    color: "#5A9BFF",
-                    textTransform: "none",
-                  }}
-                >
-                  <img
-                    className={styles.icon}
-                    src={FolderIcon}
-                    alt="Иконка папки"
-                  ></img>
-                  В архив
-                </Button>
-                <Button
-                  sx={{
-                    padding: "0",
-                    fontSize: "14px",
-                    lineHeight: "20px",
-                    fontWeight: "400",
-                    color: "#5A9BFF",
-                    textTransform: "none",
-                  }}
-                >
-                  <img
-                    className={styles.icon}
-                    src={EyeIcon}
-                    alt="Иконка глаза"
-                  ></img>
-                  Скрыть
-                </Button>
+                  <Button
+                    sx={{
+                      padding: "0",
+                      fontSize: "14px",
+                      lineHeight: "20px",
+                      fontWeight: "400",
+                      color: "#5A9BFF",
+                      textTransform: "none",
+                    }}
+                  >
+                    <img
+                      className={styles.icon}
+                      src={EyeIcon}
+                      alt="Иконка глаза"
+                    />
+                    Скрыть
+                  </Button>
+                </div>
               </div>
-            </div>
-          </AccordionSummary>
+            </AccordionSummary>
 
-          <AccordionDetails sx={{ padding: "24px 24px" }}>
-            <CandidatInfoTable />
-          </AccordionDetails>
-        </Accordion>
-      ))}
+            <AccordionDetails sx={{ padding: "24px 24px" }}>
+              <CandidatInfoTable />
+            </AccordionDetails>
+          </Accordion>
+        ))
+      )}
     </Stack>
   )
 }