From b6ad40f24e11fcdce21dcea279d321f661b8d33d Mon Sep 17 00:00:00 2001
From: nflnkr <molohov.eugeny@yandex.ru>
Date: Thu, 30 Mar 2023 16:17:06 +0300
Subject: [PATCH] format

---
 src/pages/Support/TicketList.tsx | 225 +++++++++++++++----------------
 1 file changed, 109 insertions(+), 116 deletions(-)

diff --git a/src/pages/Support/TicketList.tsx b/src/pages/Support/TicketList.tsx
index 3399dfc..c6ee35d 100644
--- a/src/pages/Support/TicketList.tsx
+++ b/src/pages/Support/TicketList.tsx
@@ -1,134 +1,127 @@
 import { CircularProgress, List, ListItem, Box, useTheme, Pagination } from "@mui/material";
 import { useEffect, useState } from "react";
-
 import TicketCard from "./TicketCard";
 import { useSnackbar } from "notistack";
-
 import { apiRequestHandler } from "@utils/api/apiRequestHandler";
 import { ApiError, Ticket } from "@utils/api/types";
 
+
 const TICKETS_PER_PAGE = 10;
 
 export default function TicketList() {
-  const theme = useTheme();
-  const { enqueueSnackbar } = useSnackbar();
-  const [tickets, setTickets] = useState<Ticket[]>([]);
-  const [ticketCount, setTicketCount] = useState<number | null>(null);
-  const [currentPage, setCurrentPage] = useState<number>(0);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+    const theme = useTheme();
+    const { enqueueSnackbar } = useSnackbar();
+    const [tickets, setTickets] = useState<Ticket[]>([]);
+    const [ticketCount, setTicketCount] = useState<number | null>(null);
+    const [currentPage, setCurrentPage] = useState<number>(0);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  useEffect(
-    function fetchTickets() {
-      setIsLoading(true);
-      const abortController = new AbortController();
+    useEffect(function fetchTickets() {
+        setIsLoading(true);
+        const abortController = new AbortController();
 
-      apiRequestHandler
-        .getTickets({ amt: TICKETS_PER_PAGE, page: currentPage, srch: "", status: "open" }, abortController.signal)
-        .then((result) => {
-          if (result instanceof ApiError) {
-            enqueueSnackbar(`Error: ${result.message}`);
-          } else if (result instanceof Error) {
-            console.log(result);
-          } else {
-            setTickets(result.data);
-            setTicketCount(result.count);
-            setIsLoading(false);
-          }
+        apiRequestHandler
+            .getTickets({ amt: TICKETS_PER_PAGE, page: currentPage, srch: "", status: "open" }, abortController.signal)
+            .then((result) => {
+                if (result instanceof ApiError) {
+                    enqueueSnackbar(`Error: ${result.message}`);
+                } else if (result instanceof Error) {
+                    console.log(result);
+                } else {
+                    setTickets(result.data);
+                    setTicketCount(result.count);
+                    setIsLoading(false);
+                }
+            });
+
+        return () => {
+            abortController.abort();
+        };
+    }, [currentPage, enqueueSnackbar]);
+
+    useEffect(function subscribeToTickets() {
+        const unsubscribe = apiRequestHandler.subscribeToAllTickets({
+            onMessage(event) {
+                console.log("SSE received:", event.data);
+                try {
+                    const newTicket = JSON.parse(event.data) as Ticket;
+                    const existingTicketIndex = tickets.findIndex((ticket) => ticket.id === newTicket.id);
+                    if (existingTicketIndex !== -1) {
+                        setTickets((prevTickets) => {
+                            const newTickets = prevTickets.slice();
+                            newTickets.splice(existingTicketIndex, 1, newTicket);
+                            return newTickets;
+                        });
+                        return;
+                    }
+                    setTickets((prevTickets) => [newTicket, ...prevTickets.slice(0, TICKETS_PER_PAGE - 1)]);
+                } catch (error) {
+                    console.log("SSE is not JSON", error);
+                }
+            },
+            onError(event) {
+                console.log("SSE Error:", event);
+            },
         });
 
-      return () => {
-        abortController.abort();
-      };
-    },
-    [currentPage, enqueueSnackbar]
-  );
+        return () => {
+            unsubscribe();
+        };
+    }, [tickets]);
 
-  useEffect(
-    function subscribeToTickets() {
-      const unsubscribe = apiRequestHandler.subscribeToAllTickets({
-        onMessage(event) {
-          console.log("SSE received:", event.data);
-          try {
-            const newTicket = JSON.parse(event.data) as Ticket;
-            const existingTicketIndex = tickets.findIndex((ticket) => ticket.id === newTicket.id);
-            if (existingTicketIndex !== -1) {
-              setTickets((prevTickets) => {
-                const newTickets = prevTickets.slice();
-                newTickets.splice(existingTicketIndex, 1, newTicket);
-                return newTickets;
-              });
-              return;
-            }
-            setTickets((prevTickets) => [newTicket, ...prevTickets.slice(0, TICKETS_PER_PAGE - 1)]);
-          } catch (error) {
-            console.log("SSE is not JSON", error);
-          }
-        },
-        onError(event) {
-          console.log("SSE Error:", event);
-        },
-      });
-
-      return () => {
-        unsubscribe();
-      };
-    },
-    [tickets]
-  );
-
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        gap: "40px",
-        flexDirection: "column",
-      }}
-    >
-      <List
-        sx={{
-          p: 0,
-          display: "flex",
-          flexDirection: "column",
-          gap: "40px",
-          opacity: isLoading ? 0.4 : 1,
-          transitionProperty: "opacity",
-          transitionDuration: "200ms",
-        }}
-      >
-        {tickets.map((ticket) => (
-          <ListItem key={ticket.id} disablePadding>
-            <TicketCard
-              name={ticket.title}
-              body={ticket.top_message.message}
-              time={new Date(ticket.updated_at).toLocaleDateString()}
-              ticketId={ticket.id}
-            />
-          </ListItem>
-        ))}
-        {isLoading && (
-          <Box
+    return (
+        <Box
             sx={{
-              position: "absolute",
-              width: "100%",
-              height: "100%",
-              minHeight: "80px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
+                display: "flex",
+                gap: "40px",
+                flexDirection: "column",
             }}
-          >
-            <CircularProgress sx={{ color: theme.palette.brightPurple.main }} size={60} />
-          </Box>
-        )}
-      </List>
-      {ticketCount !== null && ticketCount > TICKETS_PER_PAGE && (
-        <Pagination
-          count={Math.ceil(ticketCount / TICKETS_PER_PAGE)}
-          page={currentPage + 1}
-          onChange={(e, value) => setCurrentPage(value - 1)}
-          sx={{ alignSelf: "center" }}
-        />
-      )}
-    </Box>
-  );
+        >
+            <List
+                sx={{
+                    p: 0,
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "40px",
+                    opacity: isLoading ? 0.4 : 1,
+                    transitionProperty: "opacity",
+                    transitionDuration: "200ms",
+                }}
+            >
+                {tickets.map((ticket) => (
+                    <ListItem key={ticket.id} disablePadding>
+                        <TicketCard
+                            name={ticket.title}
+                            body={ticket.top_message.message}
+                            time={new Date(ticket.updated_at).toLocaleDateString()}
+                            ticketId={ticket.id}
+                        />
+                    </ListItem>
+                ))}
+                {isLoading && (
+                    <Box
+                        sx={{
+                            position: "absolute",
+                            width: "100%",
+                            height: "100%",
+                            minHeight: "80px",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                        }}
+                    >
+                        <CircularProgress sx={{ color: theme.palette.brightPurple.main }} size={60} />
+                    </Box>
+                )}
+            </List>
+            {ticketCount !== null && ticketCount > TICKETS_PER_PAGE && (
+                <Pagination
+                    count={Math.ceil(ticketCount / TICKETS_PER_PAGE)}
+                    page={currentPage + 1}
+                    onChange={(e, value) => setCurrentPage(value - 1)}
+                    sx={{ alignSelf: "center" }}
+                />
+            )}
+        </Box>
+    );
 }