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 { CircularProgress, List, ListItem, Box, useTheme, Pagination } from "@mui/material";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
import TicketCard from "./TicketCard";
|
import TicketCard from "./TicketCard";
|
||||||
import { useSnackbar } from "notistack";
|
import { useSnackbar } from "notistack";
|
||||||
|
|
||||||
import { apiRequestHandler } from "@utils/api/apiRequestHandler";
|
import { apiRequestHandler } from "@utils/api/apiRequestHandler";
|
||||||
import { ApiError, Ticket } from "@utils/api/types";
|
import { ApiError, Ticket } from "@utils/api/types";
|
||||||
|
|
||||||
|
|
||||||
const TICKETS_PER_PAGE = 10;
|
const TICKETS_PER_PAGE = 10;
|
||||||
|
|
||||||
export default function TicketList() {
|
export default function TicketList() {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const { enqueueSnackbar } = useSnackbar();
|
const { enqueueSnackbar } = useSnackbar();
|
||||||
const [tickets, setTickets] = useState<Ticket[]>([]);
|
const [tickets, setTickets] = useState<Ticket[]>([]);
|
||||||
const [ticketCount, setTicketCount] = useState<number | null>(null);
|
const [ticketCount, setTicketCount] = useState<number | null>(null);
|
||||||
const [currentPage, setCurrentPage] = useState<number>(0);
|
const [currentPage, setCurrentPage] = useState<number>(0);
|
||||||
const [isLoading, setIsLoading] = useState<boolean>(false);
|
const [isLoading, setIsLoading] = useState<boolean>(false);
|
||||||
|
|
||||||
useEffect(
|
useEffect(function fetchTickets() {
|
||||||
function fetchTickets() {
|
setIsLoading(true);
|
||||||
setIsLoading(true);
|
const abortController = new AbortController();
|
||||||
const abortController = new AbortController();
|
|
||||||
|
|
||||||
apiRequestHandler
|
apiRequestHandler
|
||||||
.getTickets({ amt: TICKETS_PER_PAGE, page: currentPage, srch: "", status: "open" }, abortController.signal)
|
.getTickets({ amt: TICKETS_PER_PAGE, page: currentPage, srch: "", status: "open" }, abortController.signal)
|
||||||
.then((result) => {
|
.then((result) => {
|
||||||
if (result instanceof ApiError) {
|
if (result instanceof ApiError) {
|
||||||
enqueueSnackbar(`Error: ${result.message}`);
|
enqueueSnackbar(`Error: ${result.message}`);
|
||||||
} else if (result instanceof Error) {
|
} else if (result instanceof Error) {
|
||||||
console.log(result);
|
console.log(result);
|
||||||
} else {
|
} else {
|
||||||
setTickets(result.data);
|
setTickets(result.data);
|
||||||
setTicketCount(result.count);
|
setTicketCount(result.count);
|
||||||
setIsLoading(false);
|
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 () => {
|
return () => {
|
||||||
abortController.abort();
|
unsubscribe();
|
||||||
};
|
};
|
||||||
},
|
}, [tickets]);
|
||||||
[currentPage, enqueueSnackbar]
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(
|
return (
|
||||||
function subscribeToTickets() {
|
<Box
|
||||||
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
|
|
||||||
sx={{
|
sx={{
|
||||||
position: "absolute",
|
display: "flex",
|
||||||
width: "100%",
|
gap: "40px",
|
||||||
height: "100%",
|
flexDirection: "column",
|
||||||
minHeight: "80px",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<CircularProgress sx={{ color: theme.palette.brightPurple.main }} size={60} />
|
<List
|
||||||
</Box>
|
sx={{
|
||||||
)}
|
p: 0,
|
||||||
</List>
|
display: "flex",
|
||||||
{ticketCount !== null && ticketCount > TICKETS_PER_PAGE && (
|
flexDirection: "column",
|
||||||
<Pagination
|
gap: "40px",
|
||||||
count={Math.ceil(ticketCount / TICKETS_PER_PAGE)}
|
opacity: isLoading ? 0.4 : 1,
|
||||||
page={currentPage + 1}
|
transitionProperty: "opacity",
|
||||||
onChange={(e, value) => setCurrentPage(value - 1)}
|
transitionDuration: "200ms",
|
||||||
sx={{ alignSelf: "center" }}
|
}}
|
||||||
/>
|
>
|
||||||
)}
|
{tickets.map((ticket) => (
|
||||||
</Box>
|
<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