update global image repo config

Author: softmarshmallow

editor/scaffolds/code/index.tsx

@@ -6,13 +6,10 @@ import { EditorAppbarFragments } from "components/editor";
 import { get_framework_config } from "query/to-code-options-from-query";
 import { CodeOptionsControl } from "components/codeui-code-options-control";
 import { designToCode, Result } from "@designto/code";
-import { RemoteImageRepositories } from "@design-sdk/figma-remote/lib/asset-repository/image-repository";
+
 import { config } from "@designto/config";
-import {
-  ImageRepository,
-  MainImageRepository,
-} from "@design-sdk/core/assets-repository";
-import { useFigmaAccessToken } from "hooks";
+import { MainImageRepository } from "@design-sdk/core/assets-repository";
+
 import { DesignInput } from "@designto/config/input";
 import { useEditorState, useWorkspaceState } from "core/states";
 
@@ -24,7 +21,6 @@ export function CodeSegment() {
   const [result, setResult] = useState<Result>();
   const wstate = useWorkspaceState();
   const [state] = useEditorState();
-  const fat = useFigmaAccessToken();
   const [framework_config, set_framework_config] = useState(
     wstate.preferences.framework_config
   );
@@ -63,27 +59,6 @@ export function CodeSegment() {
   //@ts-ignore
   targetStateRef.current = targetted;
 
-  useEffect(() => {
-    // ------------------------------------------------------------
-    // other platforms are not supported yet
-    // set image repo for figma platform
-    if (state.design) {
-      MainImageRepository.instance = new RemoteImageRepositories(
-        state.design.key,
-        {
-          authentication: fat,
-        }
-      );
-      MainImageRepository.instance.register(
-        new ImageRepository(
-          "fill-later-assets",
-          "grida://assets-reservation/images/"
-        )
-      );
-    }
-    // ------------------------------------------------------------
-  }, [state.design?.key, fat.accessToken]);
-
   const on_result = (result: Result) => {
     //@ts-ignore
     if (result.id == targetStateRef?.current?.id) {

editor/scaffolds/editor/editor.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { DefaultEditorWorkspaceLayout } from "layouts/default-editor-workspace-layout";
 import {
   WorkspaceContentPanel,
@@ -15,10 +15,40 @@ import { colors } from "theme";
 import { Debugger } from "@code-editor/debugger";
 import { CodeSegment } from "scaffolds/code";
 
+import { RemoteImageRepositories } from "@design-sdk/figma-remote/lib/asset-repository/image-repository";
+import {
+  ImageRepository,
+  MainImageRepository,
+} from "@design-sdk/core/assets-repository";
+import { useFigmaAccessToken } from "hooks";
+
 export function Editor() {
   const wstate = useWorkspaceState();
   const [state] = useEditorState();
 
+  const fat = useFigmaAccessToken();
+
+  useEffect(() => {
+    // ------------------------------------------------------------
+    // other platforms are not supported yet
+    // set image repo for figma platform
+    if (state.design) {
+      MainImageRepository.instance = new RemoteImageRepositories(
+        state.design.key,
+        {
+          authentication: fat,
+        }
+      );
+      MainImageRepository.instance.register(
+        new ImageRepository(
+          "fill-later-assets",
+          "grida://assets-reservation/images/"
+        )
+      );
+    }
+    // ------------------------------------------------------------
+  }, [state.design?.key, fat.accessToken]);
+
   const _initially_loaded = state.design?.pages?.length > 0;
   const _initial_load_progress =
     [!!state.design?.input, state.design?.pages?.length > 0].filter(Boolean)

editor/scaffolds/preview/index.tsx

@@ -56,19 +56,24 @@ export function Preview({
         },
       })
         .then(on_preview_result)
-        .catch(console.error);
+        .catch((e) => {
+          console.error("error while making first paint preview.", e);
+        });
 
       if (!MainImageRepository.instance.empty) {
         designToCode({
-          input: root,
+          input: _input,
           build_config: build_config,
           framework: vanilla_presets.vanilla_default,
           asset_config: { asset_repository: MainImageRepository.instance },
         })
           .then(on_preview_result)
-          .catch(console.error);
-      } else {
-        console.error("MainImageRepository is empty");
+          .catch((e) => {
+            console.error(
+              "error while making preview with image repo provided.",
+              e
+            );
+          });
       }
     }
   }, [target?.id]);