PenaSide/front-hub
3
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

extract ticket list to component

Browse Source
This commit is contained in:
nflnkr 2022-12-22 15:43:14 +03:00
parent bd7f2cae98
commit d3a09b2fd4
2 changed files with 128 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/pages/Support/Support.tsx
View File

@ -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 />
:
<>
<CreateTicket />
<List sx={{
mt: upMd ? "40px" : "60px",
p: 0,
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "40px",
}}>
<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>
<ListItem disablePadding>
<TicketCard
name="Название обращения"
body="Текст-заполнитель —
это текст, который имеет Текст-заполнитель —
это текст, который имеет Текст-заполнитель —
это текст, который имеет Текст-заполните"
time="24.01.2022 16:40"
ticketId="someTicketId"
/>
</ListItem>
</List>
</>
gap: upMd ? "40px" : "60px",
}}
>
<CreateTicket />
<TicketList />
</Box>
}
</SectionWrapper>
);

118
src/pages/Support/TicketList.tsx Normal file
View File

@ -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>
);
}