format
This commit is contained in:
nflnkr
parent
2df36b9d7f
commit
b6ad40f24e
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user