From 3de391c4ded4adbac401dfef7f8bc1935f8f76a0 Mon Sep 17 00:00:00 2001
From: Hu Yueh-Wei <wei.hu.tw@gmail.com>
Date: Tue, 17 Dec 2024 14:28:56 +0800
Subject: [PATCH] feat: add more tman designer UI logic

---
 .../ten_manager/designer_frontend/src/App.tsx | 29 ++++---------------
 .../designer_frontend/src/api/api.ts          | 15 ++++++++++
 2 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/core/src/ten_manager/designer_frontend/src/App.tsx b/core/src/ten_manager/designer_frontend/src/App.tsx
index 03bc26a3c6..48589fa65d 100644
--- a/core/src/ten_manager/designer_frontend/src/App.tsx
+++ b/core/src/ten_manager/designer_frontend/src/App.tsx
@@ -12,16 +12,7 @@ import SettingsPopup from "./components/SettingsPopup/SettingsPopup";
 import { useTheme } from "./hooks/useTheme";
 
 import "./theme/index.scss";
-
-interface ApiResponse<T> {
-  status: string;
-  data: T;
-  meta?: any;
-}
-
-interface DesignerVersion {
-  version: string;
-}
+import { fetchDesignerVersion } from "./api/api";
 
 const App: React.FC = () => {
   const [version, setVersion] = useState<string>("");
@@ -33,22 +24,12 @@ const App: React.FC = () => {
 
   // Get the version of tman.
   useEffect(() => {
-    fetch("/api/designer/v1/version")
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        return response.json();
-      })
-      .then((payload: ApiResponse<DesignerVersion>) => {
-        if (payload.status === "ok" && payload.data.version) {
-          setVersion(payload.data.version);
-        } else {
-          throw new Error("Failed to fetch version information.");
-        }
+    fetchDesignerVersion()
+      .then((version) => {
+        setVersion(version);
       })
       .catch((err) => {
-        console.error("Error fetching API:", err);
+        console.error("Failed to fetch version:", err);
         setError("Failed to fetch version.");
       });
   }, []);
diff --git a/core/src/ten_manager/designer_frontend/src/api/api.ts b/core/src/ten_manager/designer_frontend/src/api/api.ts
index 8cf7f67c18..e70645bc1a 100644
--- a/core/src/ten_manager/designer_frontend/src/api/api.ts
+++ b/core/src/ten_manager/designer_frontend/src/api/api.ts
@@ -25,6 +25,21 @@ export const isSuccessResponse = <T>(
   return response.status === "ok";
 };
 
+export const fetchDesignerVersion = async (): Promise<string> => {
+  const response = await fetch("/api/designer/v1/version");
+  if (!response.ok) {
+    throw new Error(`Failed to fetch version: ${response.status}`);
+  }
+
+  const data: ApiResponse<{ version: string }> = await response.json();
+
+  if (isSuccessResponse(data) && data.data.version) {
+    return data.data.version;
+  } else {
+    throw new Error("Failed to fetch version information.");
+  }
+};
+
 export const fetchNodes = async (): Promise<BackendNode[]> => {
   const response = await fetch(`/api/designer/v1/graphs/default/nodes`);
   if (!response.ok) {