feat: merging with achievements

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>