PenaSide/adminFront
3
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

extract ticket list component

Browse Source
This commit is contained in:
nflnkr 2023-03-22 12:33:17 +03:00
parent 0e6970cc76
commit c4f2139bcb
2 changed files with 43 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/pages/dashboard/Content/Support/Support.tsx
View File

@ -4,15 +4,14 @@ import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
import HighlightOffOutlinedIcon from '@mui/icons-material/HighlightOffOutlined';
import { enqueueSnackbar } from 'notistack';
import { GetTicketsRequest, Ticket } from "@root/model/ticket";
import { setTickets, addOrUpdateTicket, useTicketStore } from "@root/stores/tickets";
import TicketItem from "./TicketItem";
import { setTickets, addOrUpdateTicket } from "@root/stores/tickets";
import { getTickets, subscribeToAllTickets } from "@root/api/tickets";
import Chat from "./Chat";
import TicketList from "./TicketList";
export default function Support() {
const theme = useTheme();
const tickets = useTicketStore(state => state.tickets);
useEffect(function fetchTickets() {
const getTicketsBody: GetTicketsRequest = {
@ -62,8 +61,6 @@ export default function Support() {
};
}, []);
const sortedTickets = tickets.sort(sortTicketsByUpdateTime).sort(sortTicketsByUnread);
return (
<Box sx={{
width: "100%",
@ -120,32 +117,8 @@ export default function Support() {
<HighlightOffOutlinedIcon />
</Button>
</Box>
<Box sx={{
width: "100%",
border: "1px solid",
borderColor: theme.palette.grayDark.main,
borderRadius: "3px",
overflow: "auto",
overflowY: "auto",
padding: "10px"
}}>
{sortedTickets.map(ticket =>
<TicketItem ticket={ticket} key={ticket.id} isUnread={ticket.user === ticket.top_message.user_id} />
)}
</Box>
<TicketList />
</Box>
</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;
}
function sortTicketsByUnread(ticket1: Ticket, ticket2: Ticket) {
const isUnread1 = ticket1.user === ticket1.top_message.user_id;
const isUnread2 = ticket2.user === ticket2.top_message.user_id;
return Number(isUnread2) - Number(isUnread1);
}

40
src/pages/dashboard/Content/Support/TicketList.tsx Normal file
View File

@ -0,0 +1,40 @@
import { Box, useTheme } from "@mui/material";
import { Ticket } from "@root/model/ticket";
import { useTicketStore } from "@root/stores/tickets";
import TicketItem from "./TicketItem";
export default function TicketList() {
const theme = useTheme()
const tickets = useTicketStore(state => state.tickets);
const sortedTickets = tickets.sort(sortTicketsByUpdateTime).sort(sortTicketsByUnread);
return (
<Box sx={{
width: "100%",
border: "1px solid",
borderColor: theme.palette.grayDark.main,
borderRadius: "3px",
overflow: "auto",
overflowY: "auto",
padding: "10px"
}}>
{sortedTickets.map(ticket =>
<TicketItem ticket={ticket} key={ticket.id} isUnread={ticket.user === ticket.top_message.user_id} />
)}
</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;
}
function sortTicketsByUnread(ticket1: Ticket, ticket2: Ticket) {
const isUnread1 = ticket1.user === ticket1.top_message.user_id;
const isUnread2 = ticket2.user === ticket2.top_message.user_id;
return Number(isUnread2) - Number(isUnread1);
}