minor refactor

This commit is contained in:
nflnkr 2023-04-06 18:10:10 +03:00
parent 528dd6c71a
commit 7fa15d9b98
2 changed files with 10 additions and 10 deletions

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