From 7c497977a292554bf300d9818646bcfe80f83cea Mon Sep 17 00:00:00 2001 From: Chubby Granny Chaser Date: Mon, 23 Dec 2024 20:51:58 +0000 Subject: [PATCH 1/3] feat: merging with achievements --- src/renderer/src/components/header/header.tsx | 4 ++-- src/renderer/src/features/catalogue-search.ts | 13 ++++++++++++- src/renderer/src/pages/catalogue/catalogue.tsx | 13 ++++--------- 3 files changed, 18 insertions(+), 12 deletions(-) diff --git a/src/renderer/src/components/header/header.tsx b/src/renderer/src/components/header/header.tsx index fd4e6510..3b5615f0 100644 --- a/src/renderer/src/components/header/header.tsx +++ b/src/renderer/src/components/header/header.tsx @@ -67,10 +67,10 @@ export function Header() { }; useEffect(() => { - if (!location.pathname.startsWith("/catalogue")) { + if (!location.pathname.startsWith("/catalogue") && searchValue) { dispatch(setFilters({ title: "" })); } - }, [location.pathname, dispatch]); + }, [location.pathname, searchValue, dispatch]); return ( <> diff --git a/src/renderer/src/features/catalogue-search.ts b/src/renderer/src/features/catalogue-search.ts index 9cddd038..95fccb29 100644 --- a/src/renderer/src/features/catalogue-search.ts +++ b/src/renderer/src/features/catalogue-search.ts @@ -5,6 +5,7 @@ import type { CatalogueSearchPayload } from "@types"; export interface CatalogueSearchState { filters: CatalogueSearchPayload; + page: number; } const initialState: CatalogueSearchState = { @@ -16,6 +17,7 @@ const initialState: CatalogueSearchState = { genres: [], developers: [], }, + page: 1, }; export const catalogueSearchSlice = createSlice({ @@ -27,11 +29,20 @@ export const catalogueSearchSlice = createSlice({ action: PayloadAction> ) => { state.filters = { ...state.filters, ...action.payload }; + state.page = initialState.page; }, clearFilters: (state) => { state.filters = initialState.filters; + state.page = initialState.page; + }, + setPage: (state, action: PayloadAction) => { + state.page = action.payload; + }, + clearPage: (state) => { + state.page = initialState.page; }, }, }); -export const { setFilters, clearFilters } = catalogueSearchSlice.actions; +export const { setFilters, clearFilters, setPage, clearPage } = + catalogueSearchSlice.actions; diff --git a/src/renderer/src/pages/catalogue/catalogue.tsx b/src/renderer/src/pages/catalogue/catalogue.tsx index da507dbc..eb51f856 100644 --- a/src/renderer/src/pages/catalogue/catalogue.tsx +++ b/src/renderer/src/pages/catalogue/catalogue.tsx @@ -13,7 +13,7 @@ import "./catalogue.scss"; import { SPACING_UNIT, vars } from "@renderer/theme.css"; import { downloadSourcesTable } from "@renderer/dexie"; import { FilterSection } from "./filter-section"; -import { setFilters } from "@renderer/features"; +import { setFilters, setPage } from "@renderer/features"; import { useTranslation } from "react-i18next"; import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; import { Pagination } from "./pagination"; @@ -42,12 +42,11 @@ export default function Catalogue() { const [results, setResults] = useState([]); - const [page, setPage] = useState(1); const [itemsCount, setItemsCount] = useState(0); const { formatNumber } = useFormat(); - const { filters } = useAppSelector((state) => state.catalogueSearch); + const { filters, page } = useAppSelector((state) => state.catalogueSearch); const dispatch = useAppDispatch(); @@ -103,10 +102,6 @@ export default function Catalogue() { })); }, [steamGenresMapping, filters.genres]); - useEffect(() => { - setPage(1); - }, [filters]); - const steamUserTagsFilterItems = useMemo(() => { if (!steamUserTags[language]) return []; @@ -240,7 +235,7 @@ export default function Catalogue() { }} > {groupedFilters.map((filter) => ( -
  • +
  • dispatch(setPage(page))} /> From 26a35a902ca5589d2c78d553b8e1539270a7cc6b Mon Sep 17 00:00:00 2001 From: Hachi-R Date: Mon, 23 Dec 2024 18:15:48 -0300 Subject: [PATCH 2/3] feat: enhance pagination component with first and last page buttons --- .../src/pages/catalogue/pagination.tsx | 71 +++++++++++++------ 1 file changed, 50 insertions(+), 21 deletions(-) diff --git a/src/renderer/src/pages/catalogue/pagination.tsx b/src/renderer/src/pages/catalogue/pagination.tsx index c2e510b2..377cbad9 100644 --- a/src/renderer/src/pages/catalogue/pagination.tsx +++ b/src/renderer/src/pages/catalogue/pagination.tsx @@ -1,5 +1,6 @@ import { Button } from "@renderer/components/button/button"; import { ChevronLeftIcon, ChevronRightIcon } from "@primer/octicons-react"; +import { useFormat } from "@renderer/hooks/use-format"; interface PaginationProps { page: number; @@ -27,6 +28,8 @@ export function Pagination({ startPage = Math.max(1, endPage - visiblePages + 1); } + const { formatNumber } = useFormat(); + return (
    {page > 2 && ( -
    - ... -
    + <> + {/* initial page */} + + + {/* ellipsis */} +
    + ... +
    + )} {/* Page Buttons */} @@ -68,21 +84,34 @@ export function Pagination({ style={{ width: 40, maxWidth: 40, maxHeight: 40 }} onClick={() => onPageChange(pageNumber)} > - {pageNumber} + {formatNumber(pageNumber)} ))} {page < totalPages - 1 && ( -
    - ... -
    + <> + {/* ellipsis */} +
    + ... +
    + + {/* last page */} + + )} {/* Next Button */} From 502f3b4aa7e9d66657b963d10bc90760c92149a3 Mon Sep 17 00:00:00 2001 From: Hachi-R Date: Mon, 23 Dec 2024 18:19:22 -0300 Subject: [PATCH 3/3] refactor: move formatNumber hook usage to before early return --- src/renderer/src/pages/catalogue/pagination.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/renderer/src/pages/catalogue/pagination.tsx b/src/renderer/src/pages/catalogue/pagination.tsx index 377cbad9..3669e902 100644 --- a/src/renderer/src/pages/catalogue/pagination.tsx +++ b/src/renderer/src/pages/catalogue/pagination.tsx @@ -13,6 +13,8 @@ export function Pagination({ totalPages, onPageChange, }: PaginationProps) { + const { formatNumber } = useFormat(); + if (totalPages <= 1) return null; // Number of visible pages @@ -28,8 +30,6 @@ export function Pagination({ startPage = Math.max(1, endPage - visiblePages + 1); } - const { formatNumber } = useFormat(); - return (