diff --git a/src/renderer/src/features/catalogue-search.ts b/src/renderer/src/features/catalogue-search.ts index 95fccb29..ad6ae3f3 100644 --- a/src/renderer/src/features/catalogue-search.ts +++ b/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>; + steamGenres: Record; } 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>> + ) => { + state.steamUserTags = action.payload; + }, + setGenres: (state, action: PayloadAction>) => { + state.steamGenres = action.payload; + }, }, }); -export const { setFilters, clearFilters, setPage, clearPage } = - catalogueSearchSlice.actions; +export const { + setFilters, + clearFilters, + setPage, + clearPage, + setTags, + setGenres, +} = catalogueSearchSlice.actions; diff --git a/src/renderer/src/hooks/use-catalogue.ts b/src/renderer/src/hooks/use-catalogue.ts index 9c774e83..1d0aeb57 100644 --- a/src/renderer/src/hooks/use-catalogue.ts +++ b/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>({}); - const [steamUserTags, setSteamUserTags] = useState< - Record> - >({}); + const dispatch = useAppDispatch(); const [steamPublishers, setSteamPublishers] = useState([]); const [steamDevelopers, setSteamDevelopers] = useState([]); 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 }; } diff --git a/src/renderer/src/pages/catalogue/catalogue.tsx b/src/renderer/src/pages/catalogue/catalogue.tsx index cdc212ac..705c95d7 100644 --- a/src/renderer/src/pages/catalogue/catalogue.tsx +++ b/src/renderer/src/pages/catalogue/catalogue.tsx @@ -35,8 +35,11 @@ export default function Catalogue() { const abortControllerRef = useRef(null); const cataloguePageRef = useRef(null); - const { steamGenres, steamUserTags, steamDevelopers, steamPublishers } = - useCatalogue(); + const { steamDevelopers, steamPublishers } = useCatalogue(); + + const { steamGenres, steamUserTags } = useAppSelector( + (state) => state.catalogueSearch + ); const [downloadSources, setDownloadSources] = useState([]); 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) => (
  • { dispatch(