feat: use gloabl currentSpace to track theming properly (#229)

src/common/components/pages/UserDefinedSpace.tsx

@@ -26,29 +26,32 @@ export default function UserDefinedSpace({
     editableSpaces,
     loadSpace,
     remoteSpaces,
-    localSpaces,
     saveLocalCopy,
     commitSpaceToDb,
     registerSpace,
+    getCurrentSpaceConfig,
+    setCurrentSpaceId,
   } = useAppStore((state) => ({
     editableSpaces: state.space.editableSpaces,
     loadSpace: state.space.loadSpace,
-    localSpaces: state.space.localSpaces,
     remoteSpaces: state.space.remoteSpaces,
     saveLocalCopy: state.space.saveLocalSpace,
     commitSpaceToDb: state.space.commitSpaceToDatabase,
     registerSpace: state.space.registerSpace,
+    getCurrentSpaceConfig: state.currentSpace.getCurrentSpaceConfig,
+    setCurrentSpaceId: state.currentSpace.setCurrentSpaceId,
   }));
   const [loading, setLoading] = useState(!isNil(providedSpaceId));
   const [loadSuccess, setLoadSuccesss] = useState(false);
 
   useEffect(() => {
+    setCurrentSpaceId(providedSpaceId);
     if (!isNil(providedSpaceId)) {
       setLoading(true);
       loadSpace(providedSpaceId).then((res) => {
         setLoadSuccesss(res !== null);
-        setLoading(false);
         setSpaceId(providedSpaceId);
+        setLoading(false);
       });
     }
   }, [providedSpaceId]);
@@ -96,29 +99,19 @@ export default function UserDefinedSpace({
       if (loading) {
         return undefined;
       }
-      if (loadSuccess) {
+      const currentSpaceConfig = getCurrentSpaceConfig();
+      if (loadSuccess && currentSpaceConfig) {
         return {
-          ...localSpaces[spaceId],
+          ...currentSpaceConfig,
           isEditable,
-          fidgetInstanceDatums: mapValues(
-            localSpaces[spaceId].fidgetInstanceDatums,
-            (datum) => ({
-              ...datum,
-              config: {
-                settings: datum.config.settings,
-                editable: datum.config.editable,
-                data: {}, // TO DO: Inject fidget data here
-              },
-            }),
-          ),
         };
       }
     }
     return {
       ...INITIAL_PERSONAL_SPACE_CONFIG,
       isEditable,
     };
-  }, [spaceId, isEditable, localSpaces, loading, loadSuccess, fid]);
+  }, [spaceId, isEditable, loading, loadSuccess, fid]);
 
   useEffect(() => {
     if (isEditable && isNil(spaceId) && !isNil(currentUserFid)) {

src/common/data/stores/app/currentSpace/index.ts

@@ -0,0 +1,56 @@
+import { SetterFunction, StoreGet, StoreSet } from "../../createStore";
+import { AppStore } from "..";
+import { SpaceConfig } from "@/common/components/templates/Space";
+import { isNil, mapValues } from "lodash";
+
+interface CurrentSpaceStoreState {
+  currentSpaceId: string | null;
+}
+
+interface CurrentSpaceStoreActions {
+  setCurrentSpaceId: SetterFunction<string | null>;
+  getCurrentSpaceConfig: () => Omit<SpaceConfig, "isEditable"> | undefined;
+}
+
+const HOMEBASE_ID = "homebase";
+
+export type CurrentSpaceStore = CurrentSpaceStoreState &
+  CurrentSpaceStoreActions;
+
+export const currentSpaceStoreDefaults: CurrentSpaceStoreState = {
+  currentSpaceId: HOMEBASE_ID,
+};
+
+export const createCurrentSpaceStoreFunc = (
+  set: StoreSet<AppStore>,
+  get: StoreGet<AppStore>,
+): CurrentSpaceStore => ({
+  ...currentSpaceStoreDefaults,
+  setCurrentSpaceId(id) {
+    set((draft) => {
+      draft.currentSpace.currentSpaceId = id;
+    }, "setCurrentSpaceId");
+  },
+  getCurrentSpaceConfig: () => {
+    const currentSpaceId = get().currentSpace.currentSpaceId;
+    if (currentSpaceId === HOMEBASE_ID) return get().homebase.homebaseConfig;
+    if (isNil(currentSpaceId)) return undefined;
+    const currentSpaceUpdatableConfig = get().space.localSpaces[currentSpaceId];
+    return currentSpaceUpdatableConfig
+      ? {
+          ...currentSpaceUpdatableConfig,
+          fidgetInstanceDatums: mapValues(
+            currentSpaceUpdatableConfig.fidgetInstanceDatums,
+            (datum) => ({
+              ...datum,
+              config: {
+                settings: datum.config.settings,
+                editable: datum.config.editable,
+                data: {}, // TO DO: Inject fidget data here
+              },
+            }),
+          ),
+        }
+      : undefined;
+  },
+});

src/common/data/stores/app/index.ts

@@ -22,12 +22,14 @@ import {
   SpaceStore,
 } from "./space/spaceStore";
 import { usePrivy } from "@privy-io/react-auth";
+import { createCurrentSpaceStoreFunc, CurrentSpaceStore } from "./currentSpace";
 
 export type AppStore = {
   account: AccountStore;
   setup: SetupStore;
   homebase: HomeBaseStore;
   space: SpaceStore;
+  currentSpace: CurrentSpaceStore;
   logout: () => void;
   getIsAccountReady: () => boolean;
   getIsInitializing: () => boolean;
@@ -40,6 +42,7 @@ const makeStoreFunc: MatativeConfig<AppStore> = (set, get, state) => ({
   account: createAccountStoreFunc(set, get, state),
   homebase: createHomeBaseStoreFunc(set, get),
   space: createSpaceStoreFunc(set, get),
+  currentSpace: createCurrentSpaceStoreFunc(set, get),
   logout: () => {
     get().account.reset();
     get().homebase.clearHomebase();

src/common/lib/theme/UserThemeProvider.tsx

@@ -10,11 +10,11 @@ export interface UserThemeContextValue {
 }
 
 export const useUserTheme = () => {
-  const { userTheme } = useAppStore((state) => ({
-    userTheme: state?.homebase?.homebaseConfig?.theme,
+  const { getCurrentSpace } = useAppStore((state) => ({
+    getCurrentSpace: state.currentSpace.getCurrentSpaceConfig,
   }));
 
-  return userTheme ?? defaultTheme;
+  return getCurrentSpace()?.theme ?? defaultTheme;
 };
 
 export const UserThemeProvider = ({ children }) => {

src/pages/homebase/index.tsx

@@ -13,6 +13,7 @@ const Homebase: NextPageWithLayout = () => {
     resetConfig,
     getIsLoggedIn,
     getIsInitializing,
+    setCurrentSpaceId,
   } = useAppStore((state) => ({
     homebaseConfig: state.homebase.homebaseConfig,
     saveConfig: state.homebase.saveHomebaseConfig,
@@ -21,10 +22,13 @@ const Homebase: NextPageWithLayout = () => {
     resetConfig: state.homebase.resetHomebaseConfig,
     getIsLoggedIn: state.getIsAccountReady,
     getIsInitializing: state.getIsInitializing,
+    setCurrentSpaceId: state.currentSpace.setCurrentSpaceId,
   }));
   const isLoggedIn = getIsLoggedIn();
   const isInitializing = getIsInitializing();
 
+  useEffect(() => setCurrentSpaceId("homebase"), []);
+
   useEffect(() => {
     isLoggedIn && loadConfig();
   }, [isLoggedIn]);
@@ -55,12 +59,7 @@ const Homebase: NextPageWithLayout = () => {
 
 Homebase.getLayout = function getLayout(page: React.ReactElement) {
   return (
-    <div
-      className="min-h-screen max-w-screen h-screen w-screen"
-      style={{ background: "var(--user-theme-background)" }}
-    >
-      {page}
-    </div>
+    <div className="min-h-screen max-w-screen h-screen w-screen">{page}</div>
   );
 };
 

src/pages/s/[handle].tsx

@@ -99,12 +99,7 @@ const UserPrimarySpace: NextPageWithLayout = ({
 
 UserPrimarySpace.getLayout = (page: React.ReactElement) => {
   return (
-    <div
-      className="min-h-screen max-w-screen h-screen w-screen"
-      style={{ background: "var(--user-theme-background)" }}
-    >
-      {page}
-    </div>
+    <div className="min-h-screen max-w-screen h-screen w-screen">{page}</div>
   );
 };