Merge branch 'feat/new-catalogue' of https://github.com/hydralauncher/hydra into feat/new-catalogue

src/renderer/src/features/catalogue-search.ts

@@ -6,6 +6,8 @@ import type { CatalogueSearchPayload } from "@types";
 export interface CatalogueSearchState {
   filters: CatalogueSearchPayload;
   page: number;
+  steamUserTags: Record<string, Record<string, number>>;
+  steamGenres: Record<string, string[]>;
 }
 
 const initialState: CatalogueSearchState = {
@@ -17,6 +19,8 @@ const initialState: CatalogueSearchState = {
     genres: [],
     developers: [],
   },
+  steamUserTags: {},
+  steamGenres: {},
   page: 1,
 };
 
@@ -41,8 +45,23 @@ export const catalogueSearchSlice = createSlice({
     clearPage: (state) => {
       state.page = initialState.page;
     },
+    setTags: (
+      state,
+      action: PayloadAction<Record<string, Record<string, number>>>
+    ) => {
+      state.steamUserTags = action.payload;
+    },
+    setGenres: (state, action: PayloadAction<Record<string, string[]>>) => {
+      state.steamGenres = action.payload;
+    },
   },
 });
 
-export const { setFilters, clearFilters, setPage, clearPage } =
+export const {
-  catalogueSearchSlice.actions;
+  setFilters,
+  clearFilters,
+  setPage,
+  clearPage,
+  setTags,
+  setGenres,
+} = catalogueSearchSlice.actions;

src/renderer/src/hooks/use-catalogue.ts

@@ -1,30 +1,29 @@
 import axios from "axios";
 import { useCallback, useEffect, useState } from "react";
+import { useAppDispatch } from "./redux";
+import { setGenres, setTags } from "@renderer/features";
 
 export const externalResourcesInstance = axios.create({
   baseURL: import.meta.env.RENDERER_VITE_EXTERNAL_RESOURCES_URL,
 });
 
 export function useCatalogue() {
-  const [steamGenres, setSteamGenres] = useState<Record<string, string[]>>({});
+  const dispatch = useAppDispatch();
-  const [steamUserTags, setSteamUserTags] = useState<
-    Record<string, Record<string, number>>
-  >({});
 
   const [steamPublishers, setSteamPublishers] = useState<string[]>([]);
   const [steamDevelopers, setSteamDevelopers] = useState<string[]>([]);
 
   const getSteamUserTags = useCallback(() => {
     externalResourcesInstance.get("/steam-user-tags.json").then((response) => {
-      setSteamUserTags(response.data);
+      dispatch(setTags(response.data));
     });
-  }, []);
+  }, [dispatch]);
 
   const getSteamGenres = useCallback(() => {
     externalResourcesInstance.get("/steam-genres.json").then((response) => {
-      setSteamGenres(response.data);
+      dispatch(setGenres(response.data));
     });
-  }, []);
+  }, [dispatch]);
 
   const getSteamPublishers = useCallback(() => {
     externalResourcesInstance.get("/steam-publishers.json").then((response) => {
@@ -50,5 +49,5 @@ export function useCatalogue() {
     getSteamDevelopers,
   ]);
 
-  return { steamGenres, steamUserTags, steamPublishers, steamDevelopers };
+  return { steamPublishers, steamDevelopers };
 }

src/renderer/src/pages/catalogue/catalogue.tsx

@@ -35,8 +35,11 @@ export default function Catalogue() {
   const abortControllerRef = useRef<AbortController | null>(null);
   const cataloguePageRef = useRef<HTMLDivElement>(null);
 
-  const { steamGenres, steamUserTags, steamDevelopers, steamPublishers } =
+  const { steamDevelopers, steamPublishers } = useCatalogue();
-    useCatalogue();
+
+  const { steamGenres, steamUserTags } = useAppSelector(
+    (state) => state.catalogueSearch
+  );
 
   const [downloadSources, setDownloadSources] = useState<DownloadSource[]>([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -129,7 +132,7 @@ export default function Catalogue() {
       ...filters.tags.map((tag) => ({
         label: Object.keys(steamUserTags[language]).find(
           (key) => steamUserTags[language][key] === tag
-        ) as string,
+        ),
         orbColor: filterCategoryColors.tags,
         key: "tags",
         value: tag,
@@ -238,7 +241,7 @@ export default function Catalogue() {
             {groupedFilters.map((filter) => (
               <li key={`${filter.key}-${filter.value}`}>
                 <FilterItem
-                  filter={filter.label}
+                  filter={filter.label ?? ""}
                   orbColor={filter.orbColor}
                   onRemove={() => {
                     dispatch(