Merge branch 'feat/new-catalogue' into feat/achievements-points

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 (
     <>

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<Partial<CatalogueSearchPayload>>
     ) => {
       state.filters = { ...state.filters, ...action.payload };
+      state.page = initialState.page;
     },
     clearFilters: (state) => {
       state.filters = initialState.filters;
+      state.page = initialState.page;
+    },
+    setPage: (state, action: PayloadAction<number>) => {
+      state.page = action.payload;
+    },
+    clearPage: (state) => {
+      state.page = initialState.page;
     },
   },
 });
 
-export const { setFilters, clearFilters } = catalogueSearchSlice.actions;
+export const { setFilters, clearFilters, setPage, clearPage } =
+  catalogueSearchSlice.actions;

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<any[]>([]);
 
-  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) => (
-              <li key={filter.label}>
+              <li key={`${filter.key}-${filter.value}`}>
                 <FilterItem
                   filter={filter.label}
                   orbColor={filter.orbColor}
@@ -308,7 +303,7 @@ export default function Catalogue() {
             <Pagination
               page={page}
               totalPages={Math.ceil(itemsCount / PAGE_SIZE)}
-              onPageChange={setPage}
+              onPageChange={(page) => dispatch(setPage(page))}
             />
           </div>
         </div>

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;
@@ -12,6 +13,8 @@ export function Pagination({
   totalPages,
   onPageChange,
 }: PaginationProps) {
+  const { formatNumber } = useFormat();
+
   if (totalPages <= 1) return null;
 
   // Number of visible pages
@@ -45,16 +48,29 @@ export function Pagination({
       </Button>
 
       {page > 2 && (
-        <div
-          style={{
-            width: 40,
-            justifyContent: "center",
-            display: "flex",
-            alignItems: "center",
-          }}
-        >
-          <span style={{ fontSize: 16 }}>...</span>
-        </div>
+        <>
+          {/* initial page */}
+          <Button
+            theme="outline"
+            onClick={() => onPageChange(1)}
+            style={{ width: 40, maxWidth: 40, maxHeight: 40 }}
+            disabled={page === 1}
+          >
+            {1}
+          </Button>
+
+          {/* ellipsis */}
+          <div
+            style={{
+              width: 40,
+              justifyContent: "center",
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <span style={{ fontSize: 16 }}>...</span>
+          </div>
+        </>
       )}
 
       {/* Page Buttons */}
@@ -68,21 +84,34 @@ export function Pagination({
           style={{ width: 40, maxWidth: 40, maxHeight: 40 }}
           onClick={() => onPageChange(pageNumber)}
         >
-          {pageNumber}
+          {formatNumber(pageNumber)}
         </Button>
       ))}
 
       {page < totalPages - 1 && (
-        <div
-          style={{
-            width: 40,
-            justifyContent: "center",
-            display: "flex",
-            alignItems: "center",
-          }}
-        >
-          <span style={{ fontSize: 16 }}>...</span>
-        </div>
+        <>
+          {/* ellipsis */}
+          <div
+            style={{
+              width: 40,
+              justifyContent: "center",
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <span style={{ fontSize: 16 }}>...</span>
+          </div>
+
+          {/* last page */}
+          <Button
+            theme="outline"
+            onClick={() => onPageChange(totalPages)}
+            style={{ width: 40, maxWidth: 40, maxHeight: 40 }}
+            disabled={page === totalPages}
+          >
+            {formatNumber(totalPages)}
+          </Button>
+        </>
       )}
 
       {/* Next Button */}