extract ticket list to component

src/pages/Support/Support.tsx

@@ -1,11 +1,11 @@
-import { Typography, Box, useTheme, useMediaQuery, IconButton, List, ListItem } from "@mui/material";
+import { Typography, Box, useTheme, useMediaQuery, IconButton } from "@mui/material";
 import SectionWrapper from "../../components/SectionWrapper";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import ComplexNavText from "../../components/ComplexNavText";
 import SupportChat from "./SupportChat";
 import CreateTicket from "./CreateTicket";
-import TicketCard from "./TicketCard";
 import { useParams } from "react-router-dom";
+import TicketList from "./TicketList";
 
 
 export default function Support() {
@@ -43,53 +43,16 @@ export default function Support() {
             {ticketId ?
                 <SupportChat />
                 :
-                <>
+                <Box
-                    <CreateTicket />
+                    sx={{
-                    <List sx={{
-                        mt: upMd ? "40px" : "60px",
-                        p: 0,
                         display: "flex",
                         flexDirection: "column",
-                        gap: "40px",
+                        gap: upMd ? "40px" : "60px",
-                    }}>
+                    }}
-                        <ListItem disablePadding>
+                >
-                            <TicketCard
+                    <CreateTicket />
-                                name="Название обращения"
+                    <TicketList />
-                                body="Текст-заполнитель — 
+                </Box>
-                                это текст, который имеет Текст-заполнитель — 
-                                это текст, который имеет Текст-заполнитель — 
-                                это текст, который имеет Текст-заполнитель — 
-                                это текст, который имеет Текст-заполнитель"
-                                time="24.01.2022 16:40"
-                                ticketId="someTicketId"
-                            />
-                        </ListItem>
-                        <ListItem disablePadding>
-                            <TicketCard
-                                name="Название обращения Текст-заполнитель — 
-                                это текст, который имеет Текст-заполнитель — 
-                                это текст, который имеет"
-                                body="Текст-заполнитель — 
-                                это текст, который имеет Текст-заполнитель — 
-                                это текст, который имеет Текст-заполнитель — 
-                                это текст, который имеет Текст-заполнитель — "
-                                time="24.01.2022 16:40"
-                                ticketId="someTicketId"
-                            />
-                        </ListItem>
-                        <ListItem disablePadding>
-                            <TicketCard
-                                name="Название обращения"
-                                body="Текст-заполнитель — 
-                                это текст, который имеет Текст-заполнитель — 
-                                это текст, который имеет Текст-заполнитель — 
-                                это текст, который имеет Текст-заполните"
-                                time="24.01.2022 16:40"
-                                ticketId="someTicketId"
-                            />
-                        </ListItem>
-                    </List>
-                </>
             }
         </SectionWrapper>
     );

src/pages/Support/TicketList.tsx

@@ -0,0 +1,118 @@
+import { CircularProgress, List, ListItem, Box, useTheme, Pagination } from "@mui/material";
+import { useEffect, useState } from "react";
+import { apiRequestHandler } from "../../utils/api/apiRequestHandler";
+import { ApiError, Ticket } from "../../utils/api/types";
+import TicketCard from "./TicketCard";
+import { useSnackbar } from "notistack";
+
+
+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);
+
+    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}`);
+                    return;
+                } else if (result instanceof Error) {
+                    console.log(result);
+                    return;
+                }
+                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);
+                const newTicket = event.data;
+                if (typeof newTicket === "string") return;
+                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)]);
+            },
+            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 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>
+    );
+}