front-hub/src/pages/Support/TicketList/TicketList.tsx

import { CircularProgress, List, ListItem, Box, useTheme, Pagination } from "@mui/material";
import TicketCard from "./TicketCard";
import { setTicketApiPage, useTicketStore } from "@root/stores/tickets";
import { Ticket } from "@root/model/ticket";


export default function TicketList() {
    const theme = useTheme();
    const tickets = useTicketStore(state => state.tickets);
    const ticketsFetchState = useTicketStore(state => state.fetchState);
    const ticketCount = useTicketStore(state => state.ticketCount);
    const ticketApiPage = useTicketStore(state => state.apiPage);
    const ticketsPerPage = useTicketStore(state => state.ticketsPerPage);

    const sortedTickets = tickets.sort(sortTicketsByUpdateTime).slice(ticketApiPage * ticketsPerPage, (ticketApiPage + 1) * ticketsPerPage);

    return (
        <Box
            sx={{
                display: "flex",
                gap: "40px",
                flexDirection: "column",
            }}
        >
            <List
                sx={{
                    p: 0,
                    display: "flex",
                    flexDirection: "column",
                    gap: "40px",
                    opacity: ticketsFetchState === "fetching" ? 0.4 : 1,
                    transitionProperty: "opacity",
                    transitionDuration: "200ms",
                }}
            >
                {sortedTickets.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>
                ))}
                {ticketsFetchState === "fetching" && (
                    <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 > ticketsPerPage &&
                <Pagination
                    count={Math.ceil(ticketCount / ticketsPerPage)}
                    page={ticketApiPage + 1}
                    onChange={(e, value) => setTicketApiPage(value - 1)}
                    sx={{ alignSelf: "center" }}
                />
            }
        </Box>
    );
}

function sortTicketsByUpdateTime(ticket1: Ticket, ticket2: Ticket) {
    const date1 = new Date(ticket1.updated_at).getTime();
    const date2 = new Date(ticket2.updated_at).getTime();
    return date2 - date1;
}