update file data store strategy

Author: softmarshmallow

editor/components/editor/editor-layer-hierarchy/editor-layer-hierarchy-tree.tsx

@@ -17,13 +17,15 @@ export function EditorLayerHierarchy() {
     ? state.design.pages.find((p) => p.id == state.selectedPage).children
     : [state.design?.input?.entry];
 
-  const layers: FlattenedNode[][] = root
-    ? root.filter((l) => !!l).map((layer) => flatten(layer))
-    : [];
+  const layers: FlattenedNode[][] = useMemo(() => {
+    return root ? root.filter((l) => !!l).map((layer) => flatten(layer)) : [];
+  }, [root]);
 
   const renderItem = useCallback(
     ({ id, name, depth, type, origin }) => {
       const selected = state?.selectedNodes?.includes(id);
+      // const _haschildren = useMemo(() => haschildren(id), [id, depth]);
+      // const _haschildren = haschildren(id);
 
       return (
         <LayerRow
@@ -35,7 +37,7 @@ export function EditorLayerHierarchy() {
           name={name}
           depth={depth}
           id={id}
-          expanded={haschildren(id) == true ? true : undefined}
+          // expanded={_haschildren == true ? true : undefined}
           key={id}
           selected={selected}
           onAddClick={() => {}}
@@ -49,7 +51,7 @@ export function EditorLayerHierarchy() {
         />
       );
     },
-    [state?.selectedNodes]
+    [dispatch, state?.selectedNodes, layers]
   );
 
   const haschildren = useCallback(

editor/layouts/default-editor-workspace-layout.tsx

@@ -57,7 +57,6 @@ const PanelLeftSideWrap = styled.div`
   min-height: 100%;
   max-height: 100%;
   max-width: 400px;
-  overflow: auto;
 `;
 
 const PanelRightSideWrap = styled.div`

editor/repository/figma-design-repository/index.ts

@@ -20,6 +20,7 @@ export class FigmaDesignRepository {
         case "pages":
           if (!existing) {
             yield next.value;
+            store.upsert(next.value);
           }
           break;
         case "roots":

editor/store/fimga-file-store/figma-file-store.ts

@@ -9,17 +9,19 @@ export type FileResponseRecord = FileResponse & {
   [__pk]: string;
 };
 
-const db: Promise<IDBPDatabase<FileResponseRecord>> = new Promise((resolve) => {
-  openDB<FileResponseRecord>(__db_pref.name, __db_pref.version, {
-    upgrade(db) {
-      db.createObjectStore(__table, {
-        keyPath: __pk,
-      });
-    },
-  }).then((_db) => {
-    resolve(_db);
-  });
-});
+const db: Promise<IDBPDatabase<StorableFileResponse>> = new Promise(
+  (resolve) => {
+    openDB<StorableFileResponse>(__db_pref.name, __db_pref.version, {
+      upgrade(db) {
+        db.createObjectStore(__table, {
+          keyPath: __pk,
+        });
+      },
+    }).then((_db) => {
+      resolve(_db);
+    });
+  }
+);
 // #endregion
 
 export class FigmaFilesStore {
@@ -44,16 +46,68 @@ export class FigmaFileStore {
     try {
       await (
         await db
-      ).put(__table, <FileResponseRecord>{ ...file, [__pk]: this.filekey });
+      ).put(__table, <StorableFileResponse>{
+        ...minimizeFileResponse(file),
+        [__pk]: this.filekey,
+      });
     } catch (e) {
       if (process.env.NODE_ENV === "development") {
         console.error(e);
+        throw e;
       }
     }
   }
 
-  async get() {
+  async get(options?: { nounwrap?: boolean }): Promise<FileResponseRecord> {
     const rec = await (await db).get(__table, this.filekey);
-    return rec;
+    if (options?.nounwrap) {
+      return rec;
+    }
+    return unwrapStorableFileResponse(rec);
   }
 }
+
+type StorableFileResponse = {
+  readonly components: JSONString;
+  readonly styles: JSONString;
+  readonly document: JSONString;
+  readonly lastModified: string;
+  readonly name: string;
+  readonly role: string;
+  readonly schemaVersion: number;
+  readonly thumbnailUrl: string;
+  readonly version: string;
+};
+
+type JSONString = string;
+function minimizeFileResponse(file: FileResponse): StorableFileResponse {
+  return {
+    components: JSON.stringify(file.components),
+    styles: JSON.stringify(file.styles),
+    document: JSON.stringify(file.document),
+    lastModified: file.lastModified,
+    name: file.name,
+    role: file.role,
+    schemaVersion: file.schemaVersion,
+    thumbnailUrl: file.thumbnailUrl,
+    version: file.version,
+  };
+}
+
+function unwrapStorableFileResponse(
+  stored: StorableFileResponse | undefined | null
+): FileResponseRecord {
+  if (!stored) return;
+  return {
+    key: stored[__pk],
+    components: JSON.parse(stored.components),
+    styles: JSON.parse(stored.styles),
+    document: JSON.parse(stored.document),
+    lastModified: stored.lastModified,
+    name: stored.name,
+    role: stored.role as any,
+    schemaVersion: stored.schemaVersion,
+    thumbnailUrl: stored.thumbnailUrl,
+    version: stored.version,
+  };
+}