fix(web): fix function compile res data error (#549)

labring · Dec 16, 2022 · 9d6f8b0 · 9d6f8b0
1 parent 0fe81df
commit 9d6f8b0
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 10 deletions.
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -12,7 +12,9 @@
   "DeleteConfirm": "确认要删除函数吗？",
   "SearchPlacehoder": "输入函数名搜索",
   "CreateTime": "创建时间",
-  "Editting...": "编辑中...",
+  "Editting...": "编辑中 (Ctrl/⌘ + S 保存)",
+  "LocalSaved...": "已保存本地",
+  "LocalSavedTip": "(代码已保存到本地,可直接发起调试)",
   "FunctionPanel": {
     "Debug": "调试",
     "Deploy": "发布",

diff --git a/web/src/pages/app/functions/index.tsx b/web/src/pages/app/functions/index.tsx
@@ -2,6 +2,7 @@
  * cloud functions index page
  ***************************/
 
+import { useState } from "react";
 import { Badge, Button, Center, HStack } from "@chakra-ui/react";
 import { t } from "i18next";
 
@@ -26,14 +27,16 @@ import useGlobalStore from "@/pages/globalStore";
 
 function FunctionPage() {
   const store = useFunctionStore((store) => store);
-  const { currentFunction, updateFunctionCode } = store;
+  const { currentFunction, updateFunctionCode, functionCodes } = store;
 
   const functionCache = useFunctionCache();
 
   const { showSuccess } = useGlobalStore((state) => state);
 
   const updateFunctionMutation = useUpdateFunctionMutation();
 
+  const [localSaved, setLocalSaved] = useState(false);
+
   const deploy = async () => {
     const res = await updateFunctionMutation.mutateAsync({
       description: currentFunction?.desc,
@@ -55,7 +58,8 @@ function FunctionPage() {
   });
 
   useHotKey("s", async () => {
-    // functionCache.setCache(currentFunction!.id, functionCodes[currentFunction!.id]);
+    setLocalSaved(true);
+    functionCache.setCache(currentFunction!.id, functionCodes[currentFunction!.id]);
   });
 
   return (
@@ -78,11 +82,23 @@ function FunctionPage() {
                     </span>
                   </span>
                   <span className="ml-4 ">
-                    {currentFunction?.id &&
+                    {localSaved ? (
+                      <div>
+                        <Badge colorScheme="gray" className="mr-2">
+                          {t("LocalSaved...")}
+                        </Badge>
+                        <span className="ml-2 text-slate-500 text-sm">{t("LocalSavedTip")}</span>
+                      </div>
+                    ) : (
+                      currentFunction?.id &&
                       functionCache.getCache(currentFunction?.id) !==
                         currentFunction?.source?.code && (
-                        <Badge colorScheme="purple">{t("Editting...")}</Badge>
-                      )}
+                        <div>
+                          <Badge colorScheme="purple">{t("Editting...")}</Badge>{" "}
+                        </div>
+                      )
+                    )}
+
                     {/* <FileStatusIcon status={FileStatus.deleted} /> */}
                   </span>
                 </div>
@@ -115,8 +131,9 @@ function FunctionPage() {
                 path={currentFunction?.name || ""}
                 value={functionCache.getCache(currentFunction!.id)}
                 onChange={(value) => {
+                  setLocalSaved(false);
                   updateFunctionCode(currentFunction, value || "");
-                  functionCache.setCache(currentFunction!.id, value || "");
+                  // functionCache.setCache(currentFunction!.id, value || "");
                 }}
               />
             ) : (

diff --git a/web/src/pages/app/functions/mods/DebugPannel/index.tsx b/web/src/pages/app/functions/mods/DebugPannel/index.tsx
@@ -50,12 +50,12 @@ export default function DebugPanel() {
         code: functionCache.getCache(currentFunction!.id),
         name: currentFunction!.name,
       });
-      if (compileRes.id) {
+      if (!compileRes.error) {
         const res = await axios({
           url: getFunctionDebugUrl(),
           method: "post",
           data: {
-            func: compileRes || "",
+            func: compileRes.data || "",
             param: JSON.parse(params),
           },
           headers: {

diff --git a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
@@ -2,7 +2,7 @@
  * cloud functions list sidebar
  ***************************/
 
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { DeleteIcon, Search2Icon } from "@chakra-ui/icons";
 import { Input, InputGroup, InputLeftElement } from "@chakra-ui/react";
 import { t } from "i18next";