From 55507f37aadc2762381fa51f36eca5c021b43649 Mon Sep 17 00:00:00 2001
From: heheer <71265218+newfish-cmyk@users.noreply.github.com>
Date: Thu, 29 Jun 2023 10:04:29 +0800
Subject: [PATCH] fix(web): fix navigate & func delete & title overflow (#1331)

* fix(web): fix navigate & func delete & overflow

* fix(web):fix template query & ui
---
 .../FuncTemplateItem/index.tsx                |  4 +-
 .../Mods/MonacoEditor/index.tsx               |  2 +-
 .../Mods/TemplateCard/TemplateCard.tsx        | 19 ++---
 web/src/pages/functionTemplate/index.tsx      | 69 ++++++++++++-------
 4 files changed, 58 insertions(+), 36 deletions(-)

diff --git a/web/src/pages/functionTemplate/FuncTemplateItem/index.tsx b/web/src/pages/functionTemplate/FuncTemplateItem/index.tsx
index 6425e04424..0c22db3312 100644
--- a/web/src/pages/functionTemplate/FuncTemplateItem/index.tsx
+++ b/web/src/pages/functionTemplate/FuncTemplateItem/index.tsx
@@ -5,8 +5,6 @@ import { ChevronRightIcon } from "@chakra-ui/icons";
 import { useColorMode } from "@chakra-ui/react";
 import clsx from "clsx";
 
-import { changeURL } from "@/utils/format";
-
 import TemplateInfo from "../Mods/TemplateInfo";
 import { useGetFunctionTemplateUsedByQuery, useGetOneFunctionTemplateQuery } from "../service";
 
@@ -57,7 +55,7 @@ const FuncTemplateItem = (props: { setSelectedItem: any; selectedItem: any; isMo
         <span
           className="cursor-pointer text-second"
           onClick={() => {
-            navigate(changeURL(`/recommended`));
+            navigate(-1);
             setSelectedItem({ text: t("Template.Recommended"), value: "recommended" });
           }}
         >
diff --git a/web/src/pages/functionTemplate/Mods/MonacoEditor/index.tsx b/web/src/pages/functionTemplate/Mods/MonacoEditor/index.tsx
index 12aa835baf..6f60553275 100644
--- a/web/src/pages/functionTemplate/Mods/MonacoEditor/index.tsx
+++ b/web/src/pages/functionTemplate/Mods/MonacoEditor/index.tsx
@@ -186,7 +186,7 @@ const MonacoEditor = (props: {
                     (func: any) => func.name !== currentFunction?.name,
                   );
                   setFunctionList(updatedFunctionList);
-                  setCurrentFunction(functionList[0]);
+                  setCurrentFunction(updatedFunctionList[0]);
                 }}
                 headerText={String(t("Delete"))}
                 bodyText={String(t("FunctionPanel.DeleteConfirm"))}
diff --git a/web/src/pages/functionTemplate/Mods/TemplateCard/TemplateCard.tsx b/web/src/pages/functionTemplate/Mods/TemplateCard/TemplateCard.tsx
index 590f3c3d2d..57318e37c6 100644
--- a/web/src/pages/functionTemplate/Mods/TemplateCard/TemplateCard.tsx
+++ b/web/src/pages/functionTemplate/Mods/TemplateCard/TemplateCard.tsx
@@ -45,11 +45,16 @@ const TemplateCard = (props: IProps) => {
       >
         <div className="mx-5" onClick={onClick}>
           <div className={clsx("mb-3 flex justify-between pt-4")}>
-            <div className="flex items-center text-2xl font-semibold">
+            <div
+              className={clsx(
+                "flex items-center text-2xl font-semibold",
+                templateCategory === "my" ? "w-9/12" : "w-full",
+              )}
+            >
               <div className="truncate">{template.name}</div>
             </div>
-            <div className="flex items-center">
-              {templateCategory === "my" && (
+            {templateCategory === "my" && (
+              <div className="flex items-center">
                 <span
                   className={clsx(
                     "mr-3 px-2 font-semibold",
@@ -60,8 +65,6 @@ const TemplateCard = (props: IProps) => {
                 >
                   {template.private ? "Private" : "Public"}
                 </span>
-              )}
-              {templateCategory === "my" && (
                 <Menu placement="bottom-end">
                   <MenuButton
                     onClick={(e) => {
@@ -92,8 +95,8 @@ const TemplateCard = (props: IProps) => {
                     </MenuItem>
                   </MenuList>
                 </Menu>
-              )}
-            </div>
+              </div>
+            )}
           </div>
 
           <div
@@ -110,7 +113,7 @@ const TemplateCard = (props: IProps) => {
               return (
                 <div
                   key={item.name}
-                  className="mr-2 rounded-md bg-blue-100 px-2 py-1 font-medium text-blue-700 "
+                  className="mr-2 whitespace-nowrap rounded-md bg-blue-100 px-2 py-1 font-medium text-blue-700"
                 >
                   {item.name}
                 </div>
diff --git a/web/src/pages/functionTemplate/index.tsx b/web/src/pages/functionTemplate/index.tsx
index 84b179e7be..7175f6aa37 100644
--- a/web/src/pages/functionTemplate/index.tsx
+++ b/web/src/pages/functionTemplate/index.tsx
@@ -4,6 +4,7 @@ import { useNavigate } from "react-router-dom";
 import { AddIcon, ChevronDownIcon, Search2Icon } from "@chakra-ui/icons";
 import {
   Button,
+  Center,
   Input,
   InputGroup,
   InputLeftElement,
@@ -12,12 +13,14 @@ import {
   MenuButton,
   MenuItem,
   MenuList,
+  Spinner,
   useColorMode,
 } from "@chakra-ui/react";
 import clsx from "clsx";
 import { debounce } from "lodash";
 
 import EmptyBox from "@/components/EmptyBox";
+import { changeURL } from "@/utils/format";
 
 import TemplateCard from "./Mods/TemplateCard/TemplateCard";
 import TemplatePopOver from "./Mods/TemplatePopover/TemplatePopover";
@@ -63,9 +66,6 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
     sort: "hot",
   };
 
-  const [selectedItem, setSelectedItem] = useState(
-    isModal ? { text: "", value: "" } : { text: t("Template.Recommended"), value: "recommended" },
-  );
   const [queryData, setQueryData] = useState(defaultQueryData);
   const setQueryDataDebounced = useMemo(
     () =>
@@ -83,25 +83,28 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
   const { colorMode } = useColorMode();
   const darkMode = colorMode === "dark";
 
-  useEffect(() => {
+  const getInitialSelectedItem = () => {
     const match = window.location.href.match(/\/([^/]+)\/?$/);
     if (match && match[1]) {
       const foundItem = sideBar_data.find((item) => item.value === match[1]);
       if (foundItem) {
-        setSelectedItem(foundItem);
-        if (foundItem.value === "stared") {
-          setQueryData({ ...queryData, type: "stared" });
-        } else if (foundItem.value === "recent") {
-          setQueryData({ ...queryData, type: "recentUsed" });
-        }
-      } else {
-        setSelectedItem({ text: "", value: "" });
+        return foundItem;
       }
     }
+    return { text: "", value: "" };
+  };
+
+  const [selectedItem, setSelectedItem] = useState(getInitialSelectedItem);
+
+  useEffect(() => {
+    const newSelectedItem = getInitialSelectedItem();
+    if (newSelectedItem.value !== selectedItem.value) {
+      setSelectedItem(newSelectedItem);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [window.location.href]);
 
-  useGetFunctionTemplatesQuery(
+  const functionTemplatesQuery = useGetFunctionTemplatesQuery(
     {
       ...queryData,
       page: page,
@@ -114,7 +117,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
     },
   );
 
-  useGetRecommendFunctionTemplatesQuery(
+  const recommendFunctionTemplatesQuery = useGetRecommendFunctionTemplatesQuery(
     {
       ...queryData,
       page: page,
@@ -127,7 +130,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
     },
   );
 
-  useGetMyFunctionTemplatesQuery(
+  const myFunctionTemplatesQuery = useGetMyFunctionTemplatesQuery(
     {
       ...queryData,
       page: page,
@@ -141,6 +144,21 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
     },
   );
 
+  function getLoadingStatus(selectedValue: any, queryMapping: any) {
+    const defaultLoadingStatus = false;
+    return queryMapping[selectedValue]?.isLoading ?? defaultLoadingStatus;
+  }
+
+  const queryMapping = {
+    all: functionTemplatesQuery,
+    recommended: recommendFunctionTemplatesQuery,
+    my: myFunctionTemplatesQuery,
+    stared: myFunctionTemplatesQuery,
+    recent: myFunctionTemplatesQuery,
+  };
+
+  let isLoading = getLoadingStatus(selectedItem.value, queryMapping);
+
   const handleSideBarClick = (item: any) => {
     setSelectedItem(item);
     setSorting(sortList[0]);
@@ -264,10 +282,12 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
                 <span className="whitespace-nowrap text-lg text-grayModern-400">
                   {t("Template.SortOrd")}{" "}
                 </span>
-                <span className="whitespace-nowrap pl-2 text-lg">{sorting}</span>
                 <Menu>
-                  <MenuButton className="cursor-pointer">
-                    <ChevronDownIcon boxSize={6} color="gray.400" />
+                  <MenuButton className="flex cursor-pointer">
+                    <span className="whitespace-nowrap pl-2 text-lg">
+                      {sorting}
+                      <ChevronDownIcon boxSize={6} color="gray.400" />
+                    </span>
                   </MenuButton>
                   <MenuList>
                     {sortList.map((item) => {
@@ -283,7 +303,11 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
             </div>
           </div>
           <div className={clsx("flex flex-wrap", isModal ? "pl-52" : "pl-72 pr-8")}>
-            {templateList && templateList.list.length > 0 ? (
+            {isLoading ? (
+              <Center className="h-full w-full">
+                <Spinner />
+              </Center>
+            ) : templateList && templateList.list.length > 0 ? (
               templateList.list.map((item) => (
                 <section
                   className={clsx(
@@ -297,15 +321,12 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
                   <TemplatePopOver template={item}>
                     <TemplateCard
                       onClick={() => {
-                        const currentURL = window.location.pathname;
-                        const lastIndex = currentURL.lastIndexOf("/");
-                        const newURL = currentURL.substring(0, lastIndex) + `/${item._id}`;
-                        navigate(newURL);
+                        navigate(changeURL(`/${item._id}`));
                         setSelectedItem({ text: "", value: "" });
                       }}
                       template={item}
                       templateCategory={selectedItem.value}
-                    ></TemplateCard>
+                    />
                   </TemplatePopOver>
                 </section>
               ))