Rewrite filters to id

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tres",
   "private": true,
-  "version": "0.3.2",
+  "version": "0.3.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/Pages/CreateTicketForm/CreateTicketForm.tsx

@@ -45,7 +45,7 @@ const CreateTicketForm: FC = () => {
   };
 
   useEffect(() => {
-    isSuccess && setValue("faculty", data.faculty);
+    isSuccess && setValue("faculty", data.faculty.faculty_id);
   }, [isSuccess, data?.faculty, setValue]);
 
   return (
@@ -75,7 +75,7 @@ const CreateTicketForm: FC = () => {
             }}
           >
             <QueueSelect
-              faculty={isSuccess ? data.faculty : ""}
+              faculty={isSuccess ? data.faculty.faculty_id : null}
               register={register}
               setValue={setValue}
               queue={queue}

src/Pages/CreateTicketForm/components/QueueSelect/QueueSelect.tsx

@@ -20,7 +20,7 @@ import { useGetQueueByFacultyMutation } from "../../../../store/api/api";
 import IPalette from "../../../../theme/IPalette.interface";
 
 interface QueueSelectProps {
-  faculty: string;
+  faculty: number | null;
   queue: number | "none";
   register: UseFormRegister<ICreateTicketRequestBody>;
   setValue: UseFormSetValue<ICreateTicketRequestBody>;

src/Pages/FullTicketInfo/FullTicketInfo.tsx

@@ -34,6 +34,8 @@ const FullTicketInfo: FC = () => {
           container
           gap={3}
           sx={{
+            pt: 6,
+            pb: 10,
             "& > .MuiGrid-root > .MuiTypography-root:not(:first-of-type)": {
               fontSize: 20,
             },

src/Pages/GeneralTickets/GeneralTickets.tsx

@@ -13,6 +13,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";
 
 interface GeneralTicketsPageInfo {
   data?: {
@@ -28,30 +29,57 @@ const GeneralTickets: FC = () => {
 
   const [tickets, setTickets] = useState<ITicket[]>([]);
   const [totalPage, setTotalPage] = useState<number>(1);
+  const [facultyId, setFacultyId] = useState<number | null>(null);
 
   const jwt = useJwtDecode();
-  const [geTickets, { isLoading, isSuccess }] = useGetTicketsMutation();
+  const [geTickets, { isLoading, isSuccess: isTicketsSuccess }] =
+    useGetTicketsMutation();
+  const faculties = useGetFacultiesQuery({});
+  const statuses = useGetStatusesQuery({});
 
   const [searchParams, setSearchParams] = useSearchParams();
   const ticketsPerRow: number = Number(searchParams.get("ticket_per_row")) || 2;
   const currentPage: number = Number(searchParams.get("current_page")) || 1;
-  const faculty: string | null =
-    searchParams.get("faculty") !== "all_faculties"
-      ? searchParams.get("faculty")
-      : "";
+  const facultyQuery: string | null = searchParams.get("faculty");
 
   const option: string = jwt ? "tickets" : "anon";
 
   const requestBody = useMemo(() => {
-    const statuses: string[] = searchParams.get("statuses")?.split(",") || [];
+    const matchingStatusesId = [];
+
+    if (statuses.isSuccess) {
+      const statusList = statuses.data?.statuses_list;
+      const statusesQuery = searchParams
+        .get("statuses")
+        ?.split(",")
+        .map((status: string) => status.toUpperCase());
+
+      for (const status of statusList) {
+        if (statusesQuery && statusesQuery.includes(status.name)) {
+          matchingStatusesId.push(status.status_id);
+        }
+      }
+    }
+
+    if (faculties.isSuccess) {
+      if (facultyQuery === "all") {
+        setFacultyId(null);
+      } else {
+        setFacultyId(
+          faculties.data.faculties_list.find(
+            (faculty: IFaculty) => faculty.name === facultyQuery
+          )?.faculty_id
+        );
+      }
+    }
 
     return {
       start_page: currentPage,
       tickets_count: 3 * ticketsPerRow,
-      faculty: faculty,
-      status: statuses,
+      faculty: facultyId,
+      status: matchingStatusesId,
     };
-  }, [currentPage, ticketsPerRow, faculty, searchParams]);
+  }, [currentPage, ticketsPerRow, facultyId, searchParams, statuses.isSuccess]);
 
   useEffect(() => {
     geTickets({ option: option, body: JSON.stringify(requestBody) }).then(
@@ -86,7 +114,7 @@ const GeneralTickets: FC = () => {
       </Box>
       <Box sx={{ pt: "168px !important" }}>
         {isLoading && <Loader />}
-        {isSuccess &&
+        {isTicketsSuccess &&
           (tickets.length ? (
             <>
               <Grid

src/Pages/GeneralTickets/components/FilterPanel/components/FacultiesFilter/FacultiesFilter.tsx

@@ -11,23 +11,18 @@ import {
   useTheme,
 } from "@mui/material";
 
-import { useGetFacultiesQuery } from "../../../../../../store/api/api";
 import IPalette from "../../../../../../theme/IPalette.interface";
-
-interface IFaculty {
-  faculty_id: number;
-  name: string;
-}
+import { useGetFacultiesQuery } from "../../../../../../store/api/api";
 
 const FacultiesFilter: FC = () => {
   const { t } = useTranslation();
   const { palette }: IPalette = useTheme();
 
-  const [searchParams, setSearchParams] = useSearchParams();
-  const faculty = searchParams.get("faculty") || "all_faculties";
-
   const { data, isSuccess } = useGetFacultiesQuery({});
 
+  const [searchParams, setSearchParams] = useSearchParams();
+  const faculty = searchParams.get("faculty") || "all";
+
   const handleChange = (event: SelectChangeEvent<string>) => {
     const newFaculty = event.target.value;
     const params = new URLSearchParams(searchParams.toString());
@@ -59,7 +54,7 @@ const FacultiesFilter: FC = () => {
               "& .MuiInputBase-input": { pt: 1, pb: 1, width: 150 },
             }}
           >
-            <MenuItem value="all_faculties">
+            <MenuItem value="all">
               <ListItemText primary={t("generalTickets.facultyFilter")} />
             </MenuItem>
 

src/Pages/GeneralTickets/components/FilterPanel/components/StatusCheckboxGroup/StatusCheckboxGroup.tsx

@@ -28,7 +28,7 @@ const StatusCheckboxGroup: FC = () => {
 
     const selectedStatuses = statusesFullInfo
       .filter(status => updatedChecked[status.id])
-      .map(status => status.label);
+      .map(status => status.query);
 
     if (params.has("statuses")) {
       params.set("statuses", selectedStatuses.join(","));

src/Pages/GeneralTickets/components/FilterPanel/components/StatusCheckboxGroup/getStatuses.ts

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 
 interface StatusFullObject {
   id: number;
+  query: string;
   label: string;
   color: string;
   checked: boolean;
@@ -20,21 +21,25 @@ export const useGetStatusesFullObject = (
   return [
     {
       id: 0,
+      query: "accepted",
       label: t("statusesFilter.accepted"),
       color: "#E09C36",
     },
     {
       id: 1,
+      query: "open",
       label: t("statusesFilter.open"),
       color: "#2982D3",
     },
     {
       id: 2,
+      query: "waiting",
       label: t("statusesFilter.waiting"),
       color: "#9E3DFF",
     },
     {
       id: 3,
+      query: "close",
       label: t("statusesFilter.close"),
       color: "#68B651",
     },
@@ -46,12 +51,5 @@ export const useGetStatusesFullObject = (
 };
 
 export const useGetStatusesName = (): string[] => {
-  const { t } = useTranslation();
-
-  return [
-    t("statusesFilter.accepted"),
-    t("statusesFilter.open"),
-    t("statusesFilter.waiting"),
-    t("statusesFilter.close"),
-  ];
+  return ["accepted", "open", "waiting", "close"];
 };

src/Pages/GeneralTickets/generalTickets.inerface.ts

@@ -0,0 +1,9 @@
+interface IFaculty {
+  faculty_id: number;
+  name: string;
+}
+
+interface IStatus {
+  status_id: number;
+  name: string;
+}

src/Pages/Layout/components/Header/Header.tsx

@@ -43,7 +43,7 @@ const Header: FC<HeaderProps> = ({
   const isNeedStepBack: boolean = isFullTicketInfo || isCreateTicket;
 
   const handleClick = (): void => {
-    navigate(-2);
+    navigate(-1);
   };
 
   return (

src/Router/Router.tsx

@@ -41,8 +41,6 @@ const Router: FC = () => {
   useEffect(() => {
     if (!isAuth && pathname !== endpoints.generalTickets) {
       navigate(endpoints.generalTickets);
-    } else {
-      setSearchParams(new URLSearchParams(search));
     }
   }, [pathname, search, setSearchParams, isAuth, navigate]);
 

src/store/api/api.ts

@@ -15,6 +15,9 @@ export const api = createApi({
     getFaculties: builder.query({
       query: () => "/meta/get_faculties",
     }),
+    getStatuses: builder.query({
+      query: () => "/meta/get_statuses",
+    }),
     // signup: builder.mutation({
     //   query: ({ body }) => ({
     //     url: "/registration/",
@@ -54,5 +57,6 @@ export const {
   useGetUpdatesQuery,
   useLoginMutation,
   useGetFacultiesQuery,
+  useGetStatusesQuery,
   useGetQueueByFacultyMutation,
 } = api;