minor refactor
This commit is contained in:
parent
528dd6c71a
commit
7fa15d9b98
@ -1,6 +1,6 @@
|
|||||||
import { CircularProgress, List, ListItem, Box, useTheme, Pagination } from "@mui/material";
|
import { CircularProgress, List, ListItem, Box, useTheme, Pagination } from "@mui/material";
|
||||||
import TicketCard from "./TicketCard";
|
import TicketCard from "./TicketCard";
|
||||||
import { setCurrentPage, useTicketStore } from "@root/stores/tickets";
|
import { setTicketApiPage, useTicketStore } from "@root/stores/tickets";
|
||||||
import { Ticket } from "@root/model/ticket";
|
import { Ticket } from "@root/model/ticket";
|
||||||
|
|
||||||
|
|
||||||
@ -9,10 +9,10 @@ export default function TicketList() {
|
|||||||
const tickets = useTicketStore(state => state.tickets);
|
const tickets = useTicketStore(state => state.tickets);
|
||||||
const fetchState = useTicketStore(state => state.fetchState);
|
const fetchState = useTicketStore(state => state.fetchState);
|
||||||
const ticketCount = useTicketStore(state => state.ticketCount);
|
const ticketCount = useTicketStore(state => state.ticketCount);
|
||||||
const currentPage = useTicketStore(state => state.currentPage);
|
const ticketApiPage = useTicketStore(state => state.apiPage);
|
||||||
const ticketsPerPage = useTicketStore(state => state.ticketsPerPage);
|
const ticketsPerPage = useTicketStore(state => state.ticketsPerPage);
|
||||||
|
|
||||||
const sortedTickets = tickets.sort(sortTicketsByUpdateTime).slice(currentPage * ticketsPerPage, (currentPage + 1) * ticketsPerPage);
|
const sortedTickets = tickets.sort(sortTicketsByUpdateTime).slice(ticketApiPage * ticketsPerPage, (ticketApiPage + 1) * ticketsPerPage);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
@ -62,8 +62,8 @@ export default function TicketList() {
|
|||||||
{ticketCount > ticketsPerPage &&
|
{ticketCount > ticketsPerPage &&
|
||||||
<Pagination
|
<Pagination
|
||||||
count={Math.ceil(ticketCount / ticketsPerPage)}
|
count={Math.ceil(ticketCount / ticketsPerPage)}
|
||||||
page={currentPage + 1}
|
page={ticketApiPage + 1}
|
||||||
onChange={(e, value) => setCurrentPage(value - 1)}
|
onChange={(e, value) => setTicketApiPage(value - 1)}
|
||||||
sx={{ alignSelf: "center" }}
|
sx={{ alignSelf: "center" }}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
|
@ -7,7 +7,7 @@ interface TicketStore {
|
|||||||
ticketCount: number;
|
ticketCount: number;
|
||||||
tickets: Ticket[];
|
tickets: Ticket[];
|
||||||
fetchState: "idle" | "fetching" | "all fetched";
|
fetchState: "idle" | "fetching" | "all fetched";
|
||||||
currentPage: number;
|
apiPage: number;
|
||||||
ticketsPerPage: number;
|
ticketsPerPage: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -17,20 +17,20 @@ export const useTicketStore = create<TicketStore>()(
|
|||||||
ticketCount: 0,
|
ticketCount: 0,
|
||||||
tickets: [],
|
tickets: [],
|
||||||
fetchState: "idle",
|
fetchState: "idle",
|
||||||
currentPage: 0,
|
apiPage: 0,
|
||||||
ticketsPerPage: 10,
|
ticketsPerPage: 10,
|
||||||
}),
|
}),
|
||||||
{
|
{
|
||||||
name: "Tickets store (client)"
|
name: "Tickets store (marketplace)"
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
export const setTicketCount = (ticketCount: number) => useTicketStore.setState({ ticketCount });
|
export const setTicketCount = (ticketCount: number) => useTicketStore.setState({ ticketCount });
|
||||||
|
|
||||||
export const setFetchState = (fetchState: "idle" | "fetching" | "all fetched") => useTicketStore.setState({ fetchState });
|
export const setTicketsFetchState = (fetchState: "idle" | "fetching" | "all fetched") => useTicketStore.setState({ fetchState });
|
||||||
|
|
||||||
export const setCurrentPage = (currentPage: number) => useTicketStore.setState({ currentPage });
|
export const setTicketApiPage = (apiPage: number) => useTicketStore.setState({ apiPage: apiPage });
|
||||||
|
|
||||||
export const updateTickets = (receivedTickets: Ticket[]) => {
|
export const updateTickets = (receivedTickets: Ticket[]) => {
|
||||||
const state = useTicketStore.getState();
|
const state = useTicketStore.getState();
|
||||||
|
Loading…
Reference in New Issue
Block a user