update auth handling

Author: softmarshmallow

editor-packages/editor-canvas/math/center-of.ts

@@ -24,7 +24,6 @@ export function centerOf(
   translate: XY;
   scale: number;
 } {
-  console.log("get center of", rects, "in", viewbound);
   if (!rects || rects.length === 0) {
     return {
       box: viewbound,

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

@@ -26,9 +26,18 @@ export function ComponentCard({
   useEffect(() => {
     if (fat) {
       if (!thumbnail) {
-        fetch.fetchNodeAsImage(data.file, fat, data.id).then((url) => {
-          setThumbnail(url.__default);
-        });
+        fetch
+          .fetchNodeAsImage(
+            data.file,
+            {
+              personalAccessToken: fat.personalAccessToken,
+              accessToken: fat.accessToken.token,
+            },
+            data.id
+          )
+          .then((url) => {
+            setThumbnail(url.__default);
+          });
       }
     }
   }, [fat]);

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

@@ -22,9 +22,18 @@ export function SceneCard({
   useEffect(() => {
     if (fat) {
       if (!thumbnail) {
-        fetch.fetchNodeAsImage(data.file, fat, data.id).then((url) => {
-          setThumbnail(url.__default);
-        });
+        fetch
+          .fetchNodeAsImage(
+            data.file,
+            {
+              personalAccessToken: fat.personalAccessToken,
+              accessToken: fat.accessToken.token,
+            },
+            data.id
+          )
+          .then((url) => {
+            setThumbnail(url.__default);
+          });
       }
     }
   }, [fat]);

editor/hooks/use-design.ts

@@ -131,7 +131,10 @@ export function useDesign({
             .fetchTargetAsReflect({
               file: targetnodeconfig.file,
               node: targetnodeconfig.node,
-              auth: fat,
+              auth: {
+                personalAccessToken: fat.personalAccessToken,
+                accessToken: fat.accessToken.token,
+              },
             })
             .then((res) => {
               cacheStore.set(res.raw); // setting cache does not need to be determined by `use_session_cache` option.
@@ -181,9 +184,12 @@ export function useDesignFile({ file }: { file: string }) {
   const fat = useFigmaAccessToken();
   useEffect(() => {
     if (file) {
-      if (fat.accessToken || fat.personalAccessToken) {
+      if (fat.personalAccessToken || fat.accessToken.token) {
         async function handle() {
-          const repo = new FigmaDesignRepository(fat);
+          const repo = new FigmaDesignRepository({
+            personalAccessToken: fat.personalAccessToken,
+            accessToken: fat.accessToken.token,
+          });
           const iterator = repo.fetchFile(file);
           let next: IteratorResult<TFetchFileForApp>;
           while ((next = await iterator.next()).done === false) {
@@ -192,18 +198,24 @@ export function useDesignFile({ file }: { file: string }) {
         }
         handle();
       } else {
-        setDesignFile({
-          __type: "error",
-          reason: "no-auth",
-        });
+        if (fat.accessToken.loading) {
+          setDesignFile({
+            __type: "loading",
+          });
+        } else {
+          setDesignFile({
+            __type: "error",
+            reason: "no-auth",
+          });
+        }
       }
     } else {
       setDesignFile({
         __type: "error",
         reason: "no-file",
       });
     }
-  }, [file, fat.accessToken]);
+  }, [file, fat.accessToken.loading]);
 
   return designfile;
 }

editor/hooks/use-figma-access-token.ts

@@ -13,14 +13,46 @@ import { personal } from "@design-sdk/figma-auth-store";
  * ```
  * @returns
  */
-export function useFigmaAccessToken() {
+export function useFigmaAccessToken(): {
+  accessToken: { token?: string; loading: boolean; verified: boolean };
+  personalAccessToken: string;
+} {
   const personalAccessToken = personal.get_safe();
   const [fat, setFat] = useState<string>(null);
+  const [loading, setLoading] = useState<boolean>(true);
   const router = useRouter();
 
   useEffect(() => {
     setFat(router.query.fat as string); // undefined is a valid input.
+    if (router.query.fat) {
+      setLoading(false);
+    }
+  }, [router.query]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      // assume router query loading is complete after this timeout
+      setLoading(false);
+    }, 50);
   }, [router]);
 
-  return { accessToken: fat, personalAccessToken: personalAccessToken };
+  if (personalAccessToken) {
+    return {
+      accessToken: {
+        token: fat,
+        loading: loading,
+        verified: false,
+      },
+      personalAccessToken,
+    };
+  }
+
+  return {
+    accessToken: {
+      token: fat,
+      loading: loading,
+      verified: false,
+    },
+    personalAccessToken: personalAccessToken,
+  };
 }

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

@@ -26,6 +26,7 @@ export default function FileEntryEditor() {
 
   // background whole file fetching
   const file = useDesignFile({ file: filekey });
+
   const prevstate =
     initialState.type == "success" && initialState.value.history.present;
 

editor/scaffolds/editor/editor.tsx

@@ -43,7 +43,10 @@ export function Editor({
       MainImageRepository.instance = new RemoteImageRepositories(
         state.design.key,
         {
-          authentication: fat,
+          authentication: {
+            personalAccessToken: fat.personalAccessToken,
+            accessToken: fat.accessToken.token,
+          },
         }
       );
       MainImageRepository.instance.register(