update progressive file fetching prosess with localdb repo integration

Author: softmarshmallow

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

@@ -22,14 +22,14 @@ export function EditorLayerHierarchy() {
     : [];
 
   const renderItem = useCallback(
-    ({ id, name, depth, type }) => {
+    ({ id, name, depth, type, origin }) => {
       const selected = state?.selectedNodes?.includes(id);
 
       return (
         <LayerRow
           icon={
             <IconContainer>
-              <LayerIcon type={type} selected={selected} />
+              <LayerIcon type={origin} selected={selected} />
             </IconContainer>
           }
           name={name}

editor/components/home/cards/card-variant-file.tsx

@@ -4,24 +4,23 @@ import { BaseHomeSceneCard } from "./base-home-scene-card";
 
 export function FileCard({
   label,
-  thumbnail,
   data,
 }: {
   label: string;
-  thumbnail: string;
   data: {
-    file: string;
+    key: string;
+    thumbnailUrl: string;
   };
 }) {
   const router = useRouter();
 
   return (
     <BaseHomeSceneCard
       onClick={() => {
-        router.push(`/files/[file]`, `/files/${data.file}`);
+        router.push(`/files/[key]`, `/files/${data.key}`);
       }}
       label={label}
-      thumbnail={thumbnail}
+      thumbnail={data.thumbnailUrl}
     />
   );
 }

editor/components/home/cards/recent-design-card.tsx

@@ -26,15 +26,6 @@ export function RecentDesignCard(props: {
   );
 }
 
-const _defaultpreview =
-  "https://s3.amazonaws.com/uifaces/faces/twitter/golovey/128.jpg";
-function _safe_previewurl(previewUrl: string): string {
-  if (!previewUrl) {
-    return _defaultpreview;
-  }
-  return previewUrl;
-}
-
 function _str_lastUpdatedAt(lastUpdatedAt: Date) {
   if (!lastUpdatedAt) return;
   return moment(lastUpdatedAt).format("MM/dd/yyyy");

editor/hooks/use-design.ts

@@ -15,6 +15,7 @@ import { convert } from "@design-sdk/figma-node-conversion";
 import { mapFigmaRemoteToFigma } from "@design-sdk/figma-remote/lib/mapper";
 import { useFigmaAccessToken } from ".";
 import { FileResponse } from "@design-sdk/figma-remote-types";
+import { FigmaDesignRepository } from "repository/figma-design-repository";
 
 // globally configure auth credentials for interacting with `@design-sdk/figma-remote`
 configure_auth_credentials({
@@ -171,10 +172,8 @@ export function useDesignFile({ file }: { file: string }) {
   useEffect(() => {
     if (file && (fat.accessToken || fat.personalAccessToken)) {
       async function handle() {
-        const iterator = fetch.fetchFile({
-          file,
-          auth: fat,
-        });
+        const repo = new FigmaDesignRepository(fat);
+        const iterator = repo.fetchFile(file);
         let next: IteratorResult<FileResponse>;
         while ((next = await iterator.next()).done === false) {
           setDesignFile(next.value);

editor/pages/files/index.tsx

@@ -7,10 +7,11 @@ import {
   HomeSidebar,
 } from "components/home";
 import { WorkspaceRepository } from "repository";
+import { FileResponseRecord } from "store/fimga-file-store/figma-file-store";
 
 export default function FilesPage() {
   const repository = new WorkspaceRepository();
-  const [files, setFiles] = useState([]);
+  const [files, setFiles] = useState<FileResponseRecord[]>([]);
   useEffect(() => {
     repository.getFiles().then(setFiles);
   }, []);
@@ -25,7 +26,7 @@ export default function FilesPage() {
           <HomeHeading>Files</HomeHeading>
           <HomeCardGroup
             cards={files.map((d) => (
-              <Cards.File key={d.id} data={d} label={d.name} thumbnail={null} />
+              <Cards.File key={d.key} data={d} label={d.name} />
             ))}
           />
         </div>

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

@@ -0,0 +1,38 @@
+import { fetch } from "@design-sdk/figma-remote";
+import { FileResponse } from "@design-sdk/figma-remote-types";
+import { FigmaFileStore } from "store/fimga-file-store/figma-file-store";
+
+export class FigmaDesignRepository {
+  constructor(
+    readonly auth: { accessToken: string; personalAccessToken: string }
+  ) {}
+  async *fetchFile(fileId: string) {
+    const store = new FigmaFileStore(fileId);
+    const existing = await store.get();
+    if (existing) {
+      yield existing;
+    }
+
+    const _iter = fetch.fetchFile({ file: fileId, auth: this.auth });
+    let next: IteratorResult<fetch.FetchFileGeneratorReturnType>;
+    while ((next = await _iter.next()).done === false) {
+      switch (next.value.__response_type) {
+        case "pages":
+          if (!existing) {
+            yield next.value;
+          }
+          break;
+        case "roots":
+          if (!existing) {
+            yield next.value;
+            store.upsert(next.value);
+          }
+          break;
+        case "whole":
+          yield next.value;
+          store.upsert(next.value);
+          break;
+      }
+    }
+  }
+}

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

@@ -1,3 +1,5 @@
+import { FigmaFilesStore } from "store/fimga-file-store/figma-file-store";
+
 export class WorkspaceRepository {
   constructor() {}
 
@@ -13,6 +15,7 @@ export class WorkspaceRepository {
   }
 
   async getFiles(): Promise<any[]> {
+    return FigmaFilesStore.all();
     return [
       "JRD2EdsbBlWgib8NzTXIGo",
       "HSozKEVWhh8saZa2vr1Nxd",

editor/repository/workspace-repository/index.ts

@@ -71,12 +71,7 @@ function FilesSection({ files }: { files }) {
       anchor={"#files"}
       label={"Files"}
       cards={files.map((file) => (
-        <Cards.File
-          key={file.id}
-          data={file}
-          label={file.name}
-          thumbnail={file.thumbnail}
-        />
+        <Cards.File key={file.id} data={file} label={file.name} />
       ))}
     />
   );

editor/scaffolds/home-dashboard/home-dashboard.tsx

@@ -0,0 +1,59 @@
+import { openDB, IDBPDatabase } from "idb";
+import { FileResponse } from "@design-sdk/figma-remote-api";
+
+// #region global db initialization
+const __db_pref = { name: "fimga-file-store", version: 1 };
+const __pk = "key";
+const __table = "files";
+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);
+  });
+});
+// #endregion
+
+export class FigmaFilesStore {
+  static of = (key: string): FigmaFileStore => {
+    return new FigmaFileStore(key);
+  };
+
+  static async all() {
+    const files = await (await db).getAll(__table);
+    return files.map((file) => file as FileResponseRecord);
+  }
+
+  static async add(key: string, file: FileResponse) {
+    return new FigmaFileStore(key).upsert(file);
+  }
+}
+
+export class FigmaFileStore {
+  constructor(readonly filekey: string) {}
+
+  async upsert(file: FileResponse) {
+    try {
+      await (
+        await db
+      ).put(__table, <FileResponseRecord>{ ...file, [__pk]: this.filekey });
+    } catch (e) {
+      if (process.env.NODE_ENV === "development") {
+        console.error(e);
+      }
+    }
+  }
+
+  async get() {
+    const rec = await (await db).get(__table, this.filekey);
+    return rec;
+  }
+}