add noauth handling

Author: softmarshmallow

editor/hooks/use-design.ts

@@ -174,7 +174,12 @@ export function useDesign({
 
 type TUseDesignFile =
   | TFetchFileForApp
-  | { __type: "error"; reason: "no-file" | "no-auth" | "unauthorized" }
+  | {
+      __type: "error";
+      reason: "no-auth" | "unauthorized";
+      cached?: TFetchFileForApp;
+    }
+  | { __type: "error"; reason: "no-file" }
   | { __type: "loading" };
 
 export function useDesignFile({ file }: { file: string }) {
@@ -203,10 +208,21 @@ export function useDesignFile({ file }: { file: string }) {
             __type: "loading",
           });
         } else {
-          setDesignFile({
-            __type: "error",
-            reason: "no-auth",
-          });
+          // if no auth provided, try to used cached file if possible.
+          FigmaDesignRepository.fetchCachedFile(file)
+            .then((r) => {
+              setDesignFile({
+                __type: "error",
+                reason: "no-auth",
+                cached: r,
+              });
+            })
+            .catch((e) => {
+              setDesignFile({
+                __type: "error",
+                reason: "no-auth",
+              });
+            });
         }
       }
     } else {

editor/pages/files/[key]/index.tsx

@@ -4,9 +4,10 @@ import { SigninToContinueBannerPrmoptProvider } from "components/prompt-banner-s
 import { Editor, EditorDefaultProviders } from "scaffolds/editor";
 import { EditorSnapshot, StateProvider } from "core/states";
 import { WorkspaceAction } from "core/actions";
-import { useDesign, useDesignFile } from "hooks";
+import { useDesignFile } from "hooks";
 
 import { warmup } from "scaffolds/editor";
+import { FileResponse } from "@design-sdk/figma-remote-types";
 
 export default function FileEntryEditor() {
   const router = useRouter();
@@ -30,32 +31,7 @@ export default function FileEntryEditor() {
   const prevstate =
     initialState.type == "success" && initialState.value.history.present;
 
-  useEffect(() => {
-    if (file.__type === "loading") {
-      return;
-    }
-
-    if (file.__type === "error") {
-      // handle error by reason
-      switch (file.reason) {
-        case "unauthorized":
-        case "no-auth": {
-          router.push("/preferences/access-tokens");
-          break;
-        }
-        case "no-file": {
-          // ignore. might still be fetching file from query param.
-          break;
-        }
-      }
-      return;
-    }
-
-    if (!file.__initial) {
-      // when full file is loaded, allow editor with user interaction.
-      setLoading(false);
-    }
-
+  const initWith = (file: FileResponse) => {
     let val: EditorSnapshot;
 
     // TODO: seed this as well
@@ -96,6 +72,49 @@ export default function FileEntryEditor() {
       type: "set",
       value: val,
     });
+  };
+
+  useEffect(() => {
+    if (!loading) {
+      return;
+    }
+
+    if (file.__type === "loading") {
+      return;
+    }
+
+    if (file.__type === "error") {
+      // handle error by reason
+      switch (file.reason) {
+        case "unauthorized":
+        case "no-auth": {
+          if (file.cached) {
+            initWith(file.cached);
+            setLoading(false);
+            alert(
+              "You will now see the cached version of this file. To view the latest version, setup your personall access token."
+            );
+            // TODO: show signin prompt
+            window.open("/preferences/access-tokens", "_blank");
+          } else {
+            router.push("/preferences/access-tokens");
+          }
+          break;
+        }
+        case "no-file": {
+          // ignore. might still be fetching file from query param.
+          break;
+        }
+      }
+      return;
+    }
+
+    if (!file.__initial) {
+      // when full file is loaded, allow editor with user interaction.
+      setLoading(false);
+    }
+
+    initWith(file);
   }, [
     filekey,
     file,

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

@@ -21,6 +21,17 @@ export class FigmaDesignRepository {
   constructor(
     readonly auth: { accessToken: string; personalAccessToken: string }
   ) {}
+
+  static async fetchCachedFile(fileId: string) {
+    const store = new FigmaFileStore(fileId);
+    const existing = await store.get();
+    if (existing) {
+      return { ...existing, __initial: false } as TFetchFileForApp;
+    } else {
+      throw new Error("file not found");
+    }
+  }
+
   async *fetchFile(fileId: string) {
     const store = new FigmaFileStore(fileId);
     const existing = await store.get();