DNO-inc · yaroslavUsenko · Jul 7, 2023 · Jul 6, 2023 · Jul 7, 2023
diff --git a/index.html b/index.html
@@ -4,6 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/src/assets/Logomark.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Improve communication within your university with Ticket System, a groundbreaking startup with a centralized platform for submitting complaints and suggestions. Enhance student-faculty-administration interaction by streamlining the process, fostering transparency, and ensuring efficient resolution. Join us in revolutionizing university communication today!"
+    />
     <title>TreS</title>
   </head>
   <body>

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -7,7 +7,6 @@
     "loginButton": "Log in",
     "password": "Password",
     "createButton": "Create ticket",
-    "signup": "Sign Up",
     "profile": "Profile",
     "error": "Error",
     "noAssignee": "no assignee",

diff --git a/public/locales/ua/translation.json b/public/locales/ua/translation.json
@@ -7,7 +7,6 @@
     "loginButton": "Увійти",
     "password": "Пароль",
     "createButton": "Створити тікет",
-    "signup": "Реєстрація",
     "profile": "Профіль",
     "error": "Помилка",
     "noAssignee": "ніким не розглядається",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,5 @@
-import { CssBaseline, ThemeProvider } from "@mui/material";
+import CssBaseline from "@mui/material/CssBaseline";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
 
 import { Router } from "./Router";
 

diff --git a/src/Pages/Bookmarks/Bookmarks.tsx b/src/Pages/Bookmarks/Bookmarks.tsx
@@ -9,6 +9,7 @@ const Bookmarks: FC = () => {
 
   return (
     <MyTicketPage
+      title={"bookmarks"}
       useGetQuery={getTickets}
       isLoading={isLoading}
       isSuccess={isSuccess}

diff --git a/src/Pages/CreateTicketForm/CreateTicketForm.tsx b/src/Pages/CreateTicketForm/CreateTicketForm.tsx
@@ -2,7 +2,9 @@ import { useEffect, useState, FC } from "react";
 import { useTranslation } from "react-i18next";
 import { useForm } from "react-hook-form";
 
-import { Grid, Typography, useTheme } from "@mui/material";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import useTheme from "@mui/material/styles/useTheme";
 
 import { QueueSelect } from "./components/QueueSelect";
 import { TicketTitleInput } from "./components/TicketTitleInput";
@@ -40,8 +42,10 @@ const CreateTicketForm: FC = () => {
   };
 
   const onSubmit = (data: ICreateTicketRequestBody): void => {
-    createTicket({ body: JSON.stringify(data) });
-    handleClear();
+    if (data.queue) {
+      createTicket({ body: JSON.stringify(data) });
+      handleClear();
+    }
   };
 
   useEffect(() => {

diff --git a/src/Pages/CreateTicketForm/components/FormActions/FormActions.tsx b/src/Pages/CreateTicketForm/components/FormActions/FormActions.tsx
@@ -1,7 +1,9 @@
 import { FC } from "react";
 import { useTranslation } from "react-i18next";
 
-import { Button, Grid, useTheme } from "@mui/material";
+import Button from "@mui/material/Button";
+import Grid from "@mui/material/Grid";
+import useTheme from "@mui/material/styles/useTheme";
 
 import IPalette from "../../../../theme/IPalette.interface";
 

diff --git a/src/Pages/CreateTicketForm/components/QueueSelect/QueueSelect.tsx b/src/Pages/CreateTicketForm/components/QueueSelect/QueueSelect.tsx
@@ -2,17 +2,15 @@ import { useEffect, useState, FC } from "react";
 import { useTranslation } from "react-i18next";
 import { UseFormRegister, UseFormSetValue } from "react-hook-form";
 
-import {
-  Box,
-  FormControl,
-  ListItemText,
-  ListSubheader,
-  MenuItem,
-  Select,
-  Typography,
-  useTheme,
-  SelectChangeEvent,
-} from "@mui/material";
+import Box from "@mui/material/Box";
+import FormControl from "@mui/material/FormControl";
+import ListItemText from "@mui/material/ListItemText";
+import ListSubheader from "@mui/material/ListSubheader";
+import MenuItem from "@mui/material/MenuItem";
+import Select from "@mui/material/Select";
+import Typography from "@mui/material/Typography";
+import { SelectChangeEvent } from "@mui/material/Select";
+import useTheme from "@mui/material/styles/useTheme";
 
 import { Loader } from "../../../../components/Loader";
 
@@ -99,7 +97,9 @@ const QueueSelect: FC<QueueSelectProps> = ({
       <FormControl
         fullWidth
         sx={{ bgcolor: palette.grey.card }}
-        {...register("queue")}
+        {...register("queue", {
+          required: "This is required.",
+        })}
       >
         <Select
           id="queue-select"

diff --git a/src/Pages/CreateTicketForm/components/TicketBodyTextField/TicketBodyTextField.tsx b/src/Pages/CreateTicketForm/components/TicketBodyTextField/TicketBodyTextField.tsx
@@ -2,7 +2,10 @@ import { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { UseFormRegister } from "react-hook-form";
 
-import { Box, TextField, Typography, useTheme } from "@mui/material";
+import Box from "@mui/material/Box";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import useTheme from "@mui/material/styles/useTheme";
 
 import IPalette from "../../../../theme/IPalette.interface";
 

diff --git a/...icketForm/components/TicketBodyTextField/components/MarkdownControls/MarkdownControls.tsx b/...icketForm/components/TicketBodyTextField/components/MarkdownControls/MarkdownControls.tsx
@@ -1,4 +1,4 @@
-import { Box } from "@mui/material";
+import Box from "@mui/material/Box";
 
 const MarkdownControls = () => {
   return <Box>markdown</Box>;

diff --git a/src/Pages/CreateTicketForm/components/TicketTitleInput/TicketTitleInput.tsx b/src/Pages/CreateTicketForm/components/TicketTitleInput/TicketTitleInput.tsx
@@ -3,7 +3,9 @@ import { useTranslation } from "react-i18next";
 import { UseFormRegister } from "react-hook-form";
 
 import TextField from "@mui/material/TextField";
-import { Box, Typography, useTheme } from "@mui/material";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import useTheme from "@mui/material/styles/useTheme";
 
 import IPalette from "../../../../theme/IPalette.interface";
 

diff --git a/src/Pages/CreateTicketForm/components/TicketVisibilityOptions/TicketVisibilityOptions.tsx b/src/Pages/CreateTicketForm/components/TicketVisibilityOptions/TicketVisibilityOptions.tsx
@@ -2,15 +2,13 @@ import { useEffect, FC, Dispatch, SetStateAction, ChangeEvent } from "react";
 import { useTranslation } from "react-i18next";
 import { UseFormSetValue } from "react-hook-form";
 
-import {
-  Box,
-  Checkbox,
-  FormControl,
-  FormControlLabel,
-  FormGroup,
-  Typography,
-  useTheme,
-} from "@mui/material";
+import Box from "@mui/material/Box";
+import Checkbox from "@mui/material/Checkbox";
+import FormControl from "@mui/material/FormControl";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormGroup from "@mui/material/FormGroup";
+import Typography from "@mui/material/Typography";
+import useTheme from "@mui/material/styles/useTheme";
 
 import IPalette from "../../../../theme/IPalette.interface";
 

diff --git a/src/Pages/Dashboard/Dashboard.tsx b/src/Pages/Dashboard/Dashboard.tsx
@@ -1,7 +1,9 @@
 import { FC } from "react";
 import { useTranslation } from "react-i18next";
 
-import { Box, Grid, Typography } from "@mui/material";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
 
 import { ComingSoon } from "../../components/ComingSoon";
 

diff --git a/src/Pages/Deleted/Deleted.tsx b/src/Pages/Deleted/Deleted.tsx
@@ -9,6 +9,7 @@ const Deleted: FC = () => {
 
   return (
     <MyTicketPage
+      title={"deleted"}
       useGetQuery={getTickets}
       isLoading={isLoading}
       isSuccess={isSuccess}

diff --git a/src/Pages/ErrorPage/ErrorPage.tsx b/src/Pages/ErrorPage/ErrorPage.tsx
@@ -1,7 +1,9 @@
 import { FC } from "react";
 import { useTranslation } from "react-i18next";
 
-import { Box, Grid, Typography } from "@mui/material";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
 
 const ErrorPage: FC = () => {
   const { t } = useTranslation();

diff --git a/src/Pages/Followed/Followed.tsx b/src/Pages/Followed/Followed.tsx
@@ -9,6 +9,7 @@ const Followed: FC = () => {
 
   return (
     <MyTicketPage
+      title={"followed"}
       useGetQuery={getTickets}
       isLoading={isLoading}
       isSuccess={isSuccess}

diff --git a/src/Pages/FullTicketInfo/FullTicketInfo.tsx b/src/Pages/FullTicketInfo/FullTicketInfo.tsx
@@ -2,7 +2,10 @@ import { useEffect, FC } from "react";
 import { useTranslation } from "react-i18next";
 import { NavLink, useLocation } from "react-router-dom";
 
-import { Box, Grid, useTheme, Typography } from "@mui/material";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import useTheme from "@mui/material/styles/useTheme";
 
 import { Loader } from "../../components/Loader";
 import { ActionPanel } from "./components/ActionPanel";
@@ -125,10 +128,14 @@ const FullTicketInfo: FC = () => {
               <Grid>
                 <Typography>{t("fullTicket.author")}</Typography>
                 <NavLink
-                  to={`${endpoints.profile}/${ticket.creator.user_id}`}
+                  to={
+                    !ticket.creator
+                      ? ""
+                      : `${endpoints.profile}/${ticket.creator.user_id}`
+                  }
                   style={{ color: palette.semantic.info }}
                 >
-                  @{ticket.creator.login}
+                  @{!ticket.creator ? "anonymous" : ticket.creator.login}
                 </NavLink>
               </Grid>
               <Grid>

diff --git a/src/Pages/FullTicketInfo/components/ActionPanel/ActionPanel.tsx b/src/Pages/FullTicketInfo/components/ActionPanel/ActionPanel.tsx
@@ -1,6 +1,8 @@
 import { FC } from "react";
 
-import { Box, IconButton, useTheme } from "@mui/material";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import useTheme from "@mui/material/styles/useTheme";
 
 import DoNotDisturbAltOutlinedIcon from "@mui/icons-material/DoNotDisturbAltOutlined";
 import BookmarkBorderOutlinedIcon from "@mui/icons-material/BookmarkBorderOutlined";

diff --git a/src/Pages/GeneralTickets/GeneralTickets.tsx b/src/Pages/GeneralTickets/GeneralTickets.tsx
@@ -4,7 +4,10 @@ import { useSearchParams } from "react-router-dom";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/query/react";
 import { SerializedError } from "@reduxjs/toolkit";
 
-import { Box, Grid, Typography, useMediaQuery } from "@mui/material";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import useMediaQuery from "@mui/material/useMediaQuery";
 
 import { Ticket } from "../../components/Ticket/Ticket";
 import { Loader } from "../../components/Loader";
@@ -14,6 +17,7 @@ import { CustomPagination } from "../../components/CustomPagination";
 import { useGetTicketsMutation } from "../../store/api/tickets/tickets.api";
 import { useJwtDecode } from "../../shared/hooks";
 import { useGetFacultiesQuery, useGetStatusesQuery } from "../../store/api/api";
+import { ITicket } from "../../components/Ticket/ticket.interface";
 
 interface GeneralTicketsPageInfo {
   data?: {
@@ -37,7 +41,7 @@ const GeneralTickets: FC = () => {
   const faculties = useGetFacultiesQuery({});
   const statuses = useGetStatusesQuery({});
 
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams] = useSearchParams();
   const ticketsPerRow: number = Number(searchParams.get("ticket_per_row")) || 2;
   const currentPage: number = Number(searchParams.get("current_page")) || 1;
   const facultyQuery: string | null = searchParams.get("faculty");
@@ -75,34 +79,23 @@ const GeneralTickets: FC = () => {
 
     return {
       start_page: currentPage,
-      tickets_count: 3 * ticketsPerRow,
+      items_count: 3 * ticketsPerRow,
       faculty: facultyId,
       status: matchingStatusesId,
     };
-  }, [currentPage, ticketsPerRow, facultyId, searchParams, statuses.isSuccess]);
+  }, [option, searchParams]);
 
   useEffect(() => {
-    geTickets({ option: option, body: JSON.stringify(requestBody) }).then(
-      (res: GeneralTicketsPageInfo): void | PromiseLike<void> => {
-        if (res.data) {
-          setTickets(res.data.ticket_list);
-          setTotalPage(res.data.total_pages);
-        }
+    geTickets({
+      option: option,
+      body: JSON.stringify(requestBody),
+    }).then((res: GeneralTicketsPageInfo): void | PromiseLike<void> => {
+      if (res.data) {
+        setTickets(res.data.ticket_list);
+        setTotalPage(res.data.total_pages);
       }
-    );
-  }, [option, searchParams, geTickets, requestBody]);
-
-  const handlePageChange = (page: number) => {
-    const params = new URLSearchParams(searchParams.toString());
-
-    if (params.has("current_page")) {
-      params.set("current_page", page.toString());
-    } else {
-      params.append("current_page", page.toString());
-    }
-
-    setSearchParams(params);
-  };
+    });
+  }, [requestBody]);
 
   return (
     <Grid container flexDirection={"column"}>
@@ -134,11 +127,7 @@ const GeneralTickets: FC = () => {
                   );
                 })}
               </Grid>
-              <CustomPagination
-                total={totalPage}
-                current={currentPage}
-                onChange={handlePageChange}
-              />
+              <CustomPagination total={totalPage} current={currentPage} />
             </>
           ) : (
             <Typography variant="h1" mt={6}>

diff --git a/src/Pages/Layout/Layout.tsx b/src/Pages/Layout/Layout.tsx
@@ -1,41 +1,41 @@
 import { Dispatch, SetStateAction, useState, FC, Suspense } from "react";
 import { Outlet } from "react-router-dom";
 
-import { Box, Grid, useTheme } from "@mui/material";
+import Box from "@mui/material/Box";
+import useTheme from "@mui/material/styles/useTheme";
 
 import { Header } from "./components/Header";
 import { Sidebar } from "./components/Sidebar";
 
 import IPalette from "../../theme/IPalette.interface";
 import { Loader } from "../../components/Loader";
+import { dimensions } from "../../constants";
 
 interface LayoutProps {
   isAuth: boolean;
   setIsAuth: Dispatch<SetStateAction<boolean>>;
 }
 
-const drawerWidth = 300;
-
 const Layout: FC<LayoutProps> = ({ isAuth, setIsAuth }) => {
   const [mobileOpen, setMobileOpen] = useState<boolean>(false);
   const { palette }: IPalette = useTheme();
 
+  const drawerWidth = dimensions.drawerWidth;
+
   const handleDrawerToggle = (): void => {
     setMobileOpen(!mobileOpen);
   };
 
   return (
-    <Grid sx={{ display: "flex" }}>
+    <Box sx={{ display: "flex" }}>
       <Header
         isAuth={isAuth}
         setIsAuth={setIsAuth}
-        drawerWidth={drawerWidth}
         handleDrawerToggle={handleDrawerToggle}
       />
 
       <Sidebar
         mobileOpen={mobileOpen}
-        drawerWidth={drawerWidth}
         handleDrawerToggle={handleDrawerToggle}
       />
       <Box
@@ -67,7 +67,7 @@ const Layout: FC<LayoutProps> = ({ isAuth, setIsAuth }) => {
           <Outlet />
         </Suspense>
       </Box>
-    </Grid>
+    </Box>
   );
 };