fix navigation back to the expanded view

DeckThemes · Dec 26, 2024 · a0bcbe6 · a0bcbe6
1 parent ed57887
commit a0bcbe6
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 25 deletions.
diff --git a/src/decky-patches/unminify-mode/class-hash-map.ts b/src/decky-patches/unminify-mode/class-hash-map.ts
@@ -12,6 +12,7 @@ export function initializeClassHashMap() {
         // Filter out things that start with a number (eg: Breakpoints like 800px)
         // I have confirmed the new classes don't start with numbers
         if (isNaN(Number(value.charAt(0)))) {
+          // @ts-expect-error
           filteredModule[propertyName] = value;
         }
       });
@@ -24,9 +25,12 @@ export function initializeClassHashMap() {
 
   const mappings = allClasses.reduce((acc, cur) => {
     Object.entries(cur).forEach(([property, value]) => {
+      // @ts-expect-error
       if (acc[property]) {
+        // @ts-expect-error
         acc[property].push(value);
       } else {
+        // @ts-expect-error
         acc[property] = [value];
       }
     });

diff --git a/src/modules/theme-store/components/BrowserSearchFields.tsx b/src/modules/theme-store/components/BrowserSearchFields.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import {
   useThemeBrowserSharedAction,
   useThemeBrowserSharedValue,
@@ -23,9 +23,6 @@ export function BrowserSearchFields() {
   const setSearchOpts = useThemeBrowserStoreAction("setSearchOpts");
   const refreshThemes = useThemeBrowserStoreAction("refreshThemes");
 
-  const targetOverride = useThemeBrowserSharedValue("targetOverride");
-  const setTargetOverride = useThemeBrowserSharedAction("setTargetOverride");
-
   const browserCardSize = useThemeBrowserSharedValue("browserCardSize");
   const setBrowserCardSize = useThemeBrowserSharedAction("setBrowserCardSize");
 
@@ -65,12 +62,10 @@ export function BrowserSearchFields() {
               menuLabel="Filter"
               rgOptions={formattedFilters}
               strDefaultLabel="All"
-              selectedOption={targetOverride ?? searchOpts.filters}
+              selectedOption={searchOpts.filters}
               onChange={(value) => {
-                // When you select a new target, remove the global override
                 const newSearchOpts = { ...searchOpts, filters: value.data, page: 1 };
                 void setSearchOpts(newSearchOpts);
-                setTargetOverride(null);
               }}
             />
           </div>

diff --git a/src/modules/theme-store/context/ThemeBrowserSharedStore.tsx b/src/modules/theme-store/context/ThemeBrowserSharedStore.tsx
@@ -6,11 +6,13 @@ export type ColumnNumbers = 3 | 4 | 5;
 
 interface ThemeBrowserSharedStoreValues {
   browserCardSize: ColumnNumbers;
+  currentTab: string;
   targetOverride: string | null;
 }
 
 interface ThemeBrowserSharedStoreActions {
   setBrowserCardSize: (value: ColumnNumbers) => void;
+  setCurrentTab: (value: string) => void;
   setTargetOverride: (value: string | null) => void;
 }
 
@@ -21,8 +23,10 @@ interface IThemeBrowserSharedStore
 export const themeBrowserSharedStore = createStore<IThemeBrowserSharedStore>((set) => {
   return {
     browserCardSize: 3,
+    currentTab: "bpm-themes",
     targetOverride: "",
     setBrowserCardSize: (value: ColumnNumbers) => set({ browserCardSize: value }),
+    setCurrentTab: (value: string) => set({ currentTab: value }),
     setTargetOverride: (value: string | null) => set({ targetOverride: value }),
   };
 });

diff --git a/src/modules/theme-store/context/ThemeBrowserStore.tsx b/src/modules/theme-store/context/ThemeBrowserStore.tsx
@@ -23,7 +23,7 @@ interface ThemeBrowserStoreValues {
 interface ThemeBrowserStoreActions {
   initializeStore: () => Promise<void>;
   getFilters: () => Promise<void>;
-  setSearchOpts: (searchOpts: ThemeQueryRequest) => Promise<void>;
+  setSearchOpts: (searchOpts: ThemeQueryRequest, forceRefresh?: boolean) => Promise<void>;
   refreshThemes: () => Promise<void>;
   getThemes: () => Promise<void>;
 }
@@ -88,14 +88,22 @@ export function ThemeBrowserStoreProvider({
       initializeStore: async () => {
         try {
           await get().getFilters();
-          await get().getThemes();
 
-          // This ensures that it actually fetches new themed when you click on a forced target
-          themeBrowserSharedStore.subscribe((state, prevState) => {
-            if (state.targetOverride !== prevState.targetOverride) {
-              get().getThemes();
-            }
-          });
+          // When you navigate to the expanded view and back, it re-loads the page, which re-runs this, so we can just check if there is a target override
+          const { targetOverride } = getThemeBrowserSharedState();
+          if (targetOverride) {
+            get().setSearchOpts(
+              {
+                ...get().searchOpts,
+                filters: targetOverride,
+                page: 1,
+              },
+              true
+            );
+            themeBrowserSharedStore.setState({ targetOverride: null });
+          } else {
+            await get().getThemes();
+          }
         } catch (error) {}
       },
       getFilters: async () => {
@@ -117,30 +125,27 @@ export function ThemeBrowserStoreProvider({
           }
         } catch (error) {}
       },
-      setSearchOpts: async (searchOpts, options: { dontResetPage?: boolean } = {}) => {
+      setSearchOpts: async (searchOpts, forceRefresh?: boolean) => {
         const { searchOpts: prevSearchOpts, themes, getThemes } = get();
         set({ searchOpts, prevSearchOpts });
 
-        if (!isEqual(prevSearchOpts, searchOpts) || themes.length === 0) {
+        if (!isEqual(prevSearchOpts, searchOpts) || forceRefresh || themes.length === 0) {
           await getThemes();
         }
       },
       refreshThemes: async () => {
         // setSearchOpts calls get
         const { searchOpts, setSearchOpts } = get();
-        await setSearchOpts({ ...searchOpts, page: 1 });
+        await setSearchOpts({ ...searchOpts, page: 1 }, true);
       },
       getThemes: async () => {
         set({ loading: true });
         try {
           const { searchOpts } = get();
-          const { targetOverride } = getThemeBrowserSharedState();
-          const formattedSearchOpts = { ...searchOpts };
-          targetOverride && (formattedSearchOpts.filters = targetOverride);
 
           const { apiFetch } = getCSSLoaderState();
           const response = await apiFetch<ThemeQueryResponse>(
-            `${themePath}?${generateParamStr(formattedSearchOpts, themeType)}`,
+            `${themePath}?${generateParamStr(searchOpts, themeType)}`,
             {},
             requiresAuth
           );

diff --git a/src/modules/theme-store/pages/ThemeStoreRouter.tsx b/src/modules/theme-store/pages/ThemeStoreRouter.tsx
@@ -1,10 +1,14 @@
 import { Tabs } from "@decky/ui";
 import { ThemeBrowserPage, ThemeCardCSSVariableProvider } from "../components";
-import { ThemeBrowserStoreProvider } from "../context";
-import { useState } from "react";
+import {
+  ThemeBrowserStoreProvider,
+  useThemeBrowserSharedAction,
+  useThemeBrowserSharedValue,
+} from "../context";
 
 export function ThemeStoreRouter() {
-  const [currentTab, setCurrentTab] = useState("allthemes");
+  const currentTab = useThemeBrowserSharedValue("currentTab");
+  const setCurrentTab = useThemeBrowserSharedAction("setCurrentTab");
   return (
     <div className="cl_fullscreenroute_container">
       <ThemeCardCSSVariableProvider />