Update Spaces using merge instead of keeping Grid Local state (#233)

Nounspace · Jul 7, 2024 · fcda7a4 · fcda7a4
1 parent 55aeafe
commit fcda7a4
Show file tree

Hide file tree

Showing 14 changed files with 184 additions and 196 deletions.
diff --git a/src/common/components/pages/SpacePage.tsx b/src/common/components/pages/SpacePage.tsx
@@ -1,12 +1,12 @@
 import React, { ReactNode, useRef, useState } from "react";
 import Sidebar from "../organisms/Sidebar";
-import Space, { SpaceConfig } from "../templates/Space";
+import Space, { SpaceConfig, SpaceConfigSaveDetails } from "../templates/Space";
 import { isUndefined } from "lodash";
 import SpaceLoading from "../templates/SpaceLoading";
 
 type SpacePageArgs = {
   config?: SpaceConfig;
-  saveConfig?: (config: SpaceConfig) => Promise<void>;
+  saveConfig?: (config: SpaceConfigSaveDetails) => Promise<void>;
   commitConfig?: () => Promise<void>;
   resetConfig?: () => Promise<void>;
   profile?: ReactNode;

diff --git a/src/common/components/pages/UserDefinedSpace.tsx b/src/common/components/pages/UserDefinedSpace.tsx
@@ -3,8 +3,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useAuthenticatorManager } from "@/authenticators/AuthenticatorManager";
 import { useAppStore } from "@/common/data/stores/app";
 import createIntialPersonSpaceConfigForFid from "@/constants/initialPersonSpace";
-import { SpaceConfig } from "../templates/Space";
-import { UpdatableSpaceConfig } from "@/common/data/stores/app/space/spaceStore";
+import { SpaceConfigSaveDetails } from "../templates/Space";
 import Profile from "@/fidgets/ui/profile";
 import SpacePage from "./SpacePage";
 
@@ -38,18 +37,17 @@ export default function UserDefinedSpace({
     saveLocalCopy: state.space.saveLocalSpace,
     commitSpaceToDb: state.space.commitSpaceToDatabase,
     registerSpace: state.space.registerSpace,
+    currentSpaceId: state.currentSpace.currentSpaceId,
     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);
+      loadSpace(providedSpaceId, fid).then(() => {
         setSpaceId(providedSpaceId);
         setLoading(false);
       });
@@ -94,42 +92,33 @@ export default function UserDefinedSpace({
     [fid],
   );
 
-  const config: SpaceConfig | undefined = useMemo(() => {
-    if (!isNil(spaceId)) {
-      if (loading) {
-        return undefined;
-      }
-      const currentSpaceConfig = getCurrentSpaceConfig();
-      if (loadSuccess && currentSpaceConfig) {
-        return {
-          ...currentSpaceConfig,
-          isEditable,
-        };
-      }
-    }
-    return {
-      ...INITIAL_PERSONAL_SPACE_CONFIG,
+  const currentConfig = getCurrentSpaceConfig();
+
+  const config = useMemo(
+    () => ({
+      ...(currentConfig ? currentConfig : INITIAL_PERSONAL_SPACE_CONFIG),
       isEditable,
-    };
-  }, [spaceId, isEditable, loading, loadSuccess, fid]);
+    }),
+    [currentConfig, isEditable],
+  );
 
   useEffect(() => {
     if (isEditable && isNil(spaceId) && !isNil(currentUserFid)) {
-      registerSpace(currentUserFid, "profile").then((newSpaceId) =>
-        setSpaceId(newSpaceId || null),
-      );
+      registerSpace(currentUserFid, "profile").then((newSpaceId) => {
+        setSpaceId(newSpaceId || null);
+      });
     }
   }, [isEditable, spaceId, currentUserFid]);
 
   const saveConfig = useCallback(
-    async (spaceConfig: SpaceConfig) => {
+    async (spaceConfig: SpaceConfigSaveDetails) => {
       if (isNil(currentUserFid)) {
         throw new Error("Attempted to save config when user is not signed in!");
       }
       if (isNil(spaceId)) {
         throw new Error("Cannot save config until space is registered");
       }
-      const saveableConfig: UpdatableSpaceConfig = {
+      const saveableConfig = {
         ...spaceConfig,
         fidgetInstanceDatums: mapValues(
           spaceConfig.fidgetInstanceDatums,

diff --git a/src/common/components/templates/Space.tsx b/src/common/components/templates/Space.tsx
@@ -29,9 +29,15 @@ export type SpaceConfig = {
   theme: UserTheme;
 };
 
+export type SpaceConfigSaveDetails = Partial<
+  Omit<SpaceConfig, "layoutDetails">
+> & {
+  layoutDetails?: Partial<LayoutFidgetDetails<LayoutFidgetConfig<any>>>;
+};
+
 type SpaceArgs = {
   config: SpaceConfig;
-  saveConfig: (config: SpaceConfig) => Promise<void>;
+  saveConfig: (config: SpaceConfigSaveDetails) => Promise<void>;
   commitConfig: () => Promise<void>;
   resetConfig: () => Promise<void>;
   profile?: ReactNode;
@@ -71,13 +77,13 @@ export default function Space({
     layoutConfig,
     fidgetInstanceDatums,
     fidgetTrayContents,
-  }: LayoutFidgetSaveableConfig<LayoutFidgetConfig<any>>) {
+  }: Partial<LayoutFidgetSaveableConfig<LayoutFidgetConfig<any>>>) {
     return saveConfig({
-      ...config,
-      layoutDetails: {
-        ...config.layoutDetails,
-        layoutConfig,
-      },
+      layoutDetails: layoutConfig
+        ? {
+            layoutConfig,
+          }
+        : undefined,
       theme,
       fidgetInstanceDatums,
       fidgetTrayContents,

diff --git a/src/common/data/stores/app/accounts/identityStore.ts b/src/common/data/stores/app/accounts/identityStore.ts
@@ -171,7 +171,7 @@ export const identityStore = (
   setCurrentIdentity: (publicKey: string) => {
     set((draft) => {
       draft.account.currentSpaceIdentityPublicKey = publicKey;
-    });
+    }, "setCurrentIdentity");
   },
   loadIdentitiesForWallet: async (wallet: Wallet) => {
     // Load Identity + Nonce + Wallet address info from DB
@@ -190,7 +190,7 @@ export const identityStore = (
       : [];
     set((draft) => {
       draft.account.walletIdentities[wallet.address] = walletIdentities;
-    });
+    }, "loadIdentitiesForWallet");
     return walletIdentities;
   },
   getIdentitiesForWallet: (wallet: Wallet) => {
@@ -255,7 +255,7 @@ export const identityStore = (
         preKeys: [],
         associatedFids: [],
       });
-    });
+    }, "decryptIdentityKeys");
   },
   createIdentityForWallet: async (
     signMessage: SignMessageFunctionSignature,
@@ -307,7 +307,7 @@ export const identityStore = (
         preKeys: [],
         associatedFids: [],
       });
-    });
+    }, "createIdentityForWallet");
     return identityKeys.publicKey;
   },
 });

diff --git a/src/common/data/stores/app/accounts/prekeyStore.ts b/src/common/data/stores/app/accounts/prekeyStore.ts
@@ -173,7 +173,7 @@ export const prekeyStore = (
         ),
         ["timestamp"],
       );
-    });
+    }, "addPreKeysToIdentity");
   },
   loadPreKeys: async () => {
     const { data } = await axiosBackend.get<PreKeyResponse>(

diff --git a/src/common/data/stores/app/accounts/privyStore.ts b/src/common/data/stores/app/accounts/privyStore.ts
@@ -71,7 +71,7 @@ export const privyStore = (set: StoreSet<AppStore>): PrivyStore => ({
   setPrivyUser: (user: PrivyUser) => {
     set((draft) => {
       draft.account.privyUser = user;
-    });
+    }, "setPrivyUser");
   },
 });
 

diff --git a/src/common/data/stores/app/homebase/index.ts → ...data/stores/app/homebase/homebaseStore.ts b/src/common/data/stores/app/homebase/index.ts → ...data/stores/app/homebase/homebaseStore.ts
@@ -4,10 +4,13 @@ import axios from "axios";
 import { createClient } from "../../../database/supabase/clients/component";
 import { homebasePath } from "@/constants/supabase";
 import { SignedFile } from "@/common/lib/signedFiles";
-import { debounce } from "lodash";
+import { cloneDeep, debounce, isArray, mergeWith } from "lodash";
 import stringify from "fast-json-stable-stringify";
 import axiosBackend from "../../../api/backend";
-import { SpaceConfig } from "@/common/components/templates/Space";
+import {
+  SpaceConfig,
+  SpaceConfigSaveDetails,
+} from "@/common/components/templates/Space";
 import INITIAL_HOMEBASE_CONFIG from "@/constants/intialHomebase";
 import {
   analytics,
@@ -22,7 +25,7 @@ interface HomeBaseStoreState {
 interface HomeBaseStoreActions {
   loadHomebase: () => Promise<SpaceConfig>;
   commitHomebaseToDatabase: () => Promise<void>;
-  saveHomebaseConfig: (config: SpaceConfig) => Promise<void>;
+  saveHomebaseConfig: (config: SpaceConfigSaveDetails) => Promise<void>;
   resetHomebaseConfig: () => Promise<void>;
   clearHomebase: () => void;
 }
@@ -57,21 +60,23 @@ export const createHomeBaseStoreFunc = (
         await get().account.decryptEncryptedSignedFile(fileData),
       ) as SpaceConfig;
       set((draft) => {
-        draft.homebase.homebaseConfig = spaceConfig;
-        draft.homebase.remoteHomebaseConfig = spaceConfig;
-      });
+        draft.homebase.homebaseConfig = cloneDeep(spaceConfig);
+        draft.homebase.remoteHomebaseConfig = cloneDeep(spaceConfig);
+      }, "loadHomebase-found");
       return spaceConfig;
     } catch (e) {
       set((draft) => {
-        draft.homebase.homebaseConfig = INITIAL_HOMEBASE_CONFIG;
-        draft.homebase.remoteHomebaseConfig = INITIAL_HOMEBASE_CONFIG;
-      });
-      return INITIAL_HOMEBASE_CONFIG;
+        draft.homebase.homebaseConfig = cloneDeep(INITIAL_HOMEBASE_CONFIG);
+        draft.homebase.remoteHomebaseConfig = cloneDeep(
+          INITIAL_HOMEBASE_CONFIG,
+        );
+      }, "loadHomebase-default");
+      return cloneDeep(INITIAL_HOMEBASE_CONFIG);
     }
   },
   commitHomebaseToDatabase: async () => {
     debounce(async () => {
-      const localCopy = get().homebase.homebaseConfig;
+      const localCopy = cloneDeep(get().homebase.homebaseConfig);
       if (localCopy) {
         const file = await get().account.createEncryptedSignedFile(
           stringify(localCopy),
@@ -83,7 +88,7 @@ export const createHomeBaseStoreFunc = (
           await axiosBackend.post(`/api/space/homebase/`, file);
           set((draft) => {
             draft.homebase.remoteHomebaseConfig = localCopy;
-          });
+          }, "commitHomebaseToDatabase");
           analytics.track(AnalyticsEvent.SAVE_HOMEBASE_THEME);
         } catch (e) {
           console.error(e);
@@ -93,14 +98,23 @@ export const createHomeBaseStoreFunc = (
     }, 1000)();
   },
   saveHomebaseConfig: async (config) => {
-    set((draft) => {
-      draft.homebase.homebaseConfig = config;
+    const localCopy = cloneDeep(get().homebase.homebaseConfig) as SpaceConfig;
+    mergeWith(localCopy, config, (_, newItem) => {
+      if (isArray(newItem)) return newItem;
     });
+    set(
+      (draft) => {
+        draft.homebase.homebaseConfig = localCopy;
+      },
+      "saveHomebaseConfig",
+      false,
+    );
   },
   resetHomebaseConfig: async () => {
+    const remote = cloneDeep(get().homebase.remoteHomebaseConfig);
     set((draft) => {
-      draft.homebase.homebaseConfig = draft.homebase.remoteHomebaseConfig;
-    });
+      draft.homebase.homebaseConfig = remote;
+    }, "resetHomebaseConfig");
   },
   clearHomebase: () => {
     set(

diff --git a/src/common/data/stores/app/index.ts b/src/common/data/stores/app/index.ts
@@ -15,7 +15,7 @@ import {
   HomeBaseStore,
   createHomeBaseStoreFunc,
   partializedHomebaseStore,
-} from "./homebase";
+} from "./homebase/homebaseStore";
 import {
   createSpaceStoreFunc,
   partializedSpaceStore,