fix submissions and rerender issues with store pages

Author: beebls

src/modules/theme-store/components/ThemeBrowserPage.tsx

@@ -10,6 +10,7 @@ import { LoadMoreButton } from "./LoadMoreButton";
 
 export function ThemeBrowserPage() {
   const initializeStore = useThemeBrowserStoreAction("initializeStore");
+  const isInitialized = useThemeBrowserStoreValue("isInitialized");
   const themes = useThemeBrowserStoreValue("themes");
   const loading = useThemeBrowserStoreValue("loading");
   const indexToSnapToOnLoad = useThemeBrowserStoreValue("indexToSnapToOnLoad");
@@ -21,6 +22,7 @@ export function ThemeBrowserPage() {
   const firstCardRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    if (isInitialized) return;
     void initializeStore();
   }, []);
 

src/modules/theme-store/context/ThemeBrowserStore.tsx

@@ -0,0 +1,75 @@
+import { createContext, useContext, useRef } from "react";
+import { createStore, StoreApi, useStore } from "zustand";
+import {
+  generateThemeBrowserStore,
+  IThemeBrowserStore,
+  ThemeBrowserStoreActions,
+  ThemeBrowserStoreValues,
+} from "./theme-browser-store-factory";
+
+const ThemeBrowserPersistenceStore = createStore<
+  Record<string, StoreApi<IThemeBrowserStore> | undefined>
+>(() => ({}));
+
+const ThemeBrowserStoreContext = createContext<StoreApi<IThemeBrowserStore> | null>(null);
+
+export function ThemeBrowserStoreProvider({
+  pageId,
+  children,
+  filterPath,
+  themePath,
+  themeType,
+  requiresAuth = false,
+}: {
+  pageId: string;
+  children: React.ReactNode;
+  filterPath: string;
+  themePath: string;
+  themeType: "ALL" | "DESKTOP" | "BPM";
+  requiresAuth?: boolean;
+}) {
+  const storeRef = useRef<StoreApi<IThemeBrowserStore> | null>(null);
+
+  if (!storeRef.current) {
+    let store: StoreApi<IThemeBrowserStore>;
+    const existingStore = ThemeBrowserPersistenceStore.getState()[pageId];
+
+    if (existingStore) {
+      store = existingStore;
+    } else {
+      store = generateThemeBrowserStore({
+        filterPath,
+        themePath,
+        themeType,
+        requiresAuth,
+      });
+      ThemeBrowserPersistenceStore.setState((state) => ({
+        ...state,
+        [pageId]: store,
+      }));
+    }
+
+    storeRef.current = store;
+  }
+
+  return (
+    <ThemeBrowserStoreContext.Provider value={storeRef.current}>
+      {children}
+    </ThemeBrowserStoreContext.Provider>
+  );
+}
+
+export const useThemeBrowserStore = <T,>(selector: (state: IThemeBrowserStore) => T) => {
+  const store = useContext(ThemeBrowserStoreContext);
+  if (!store) {
+    throw new Error("Missing StoreProvider");
+  }
+  return useStore(store, selector);
+};
+export const useThemeBrowserStoreValue = <T extends keyof ThemeBrowserStoreValues>(
+  key: T
+): IThemeBrowserStore[T] => useThemeBrowserStore((state) => state[key]);
+
+export const useThemeBrowserStoreAction = <T extends keyof ThemeBrowserStoreActions>(
+  key: T
+): IThemeBrowserStore[T] => useThemeBrowserStore((state) => state[key]);

src/modules/theme-store/context/ThemeBrowserStoreProvider.tsx

@@ -1,2 +1,2 @@
-export * from "./ThemeBrowserSharedStore";
-export * from "./ThemeBrowserStore";
+export * from "./theme-browser-shared-store";
+export * from "./ThemeBrowserStoreProvider";