From 9189f198f0a4721efd5f31b062e0cc2efe9cb42f Mon Sep 17 00:00:00 2001
From: heheer <71265218+newfish-cmyk@users.noreply.github.com>
Date: Fri, 28 Jul 2023 16:20:02 +0800
Subject: [PATCH] refactor(web): show template usedBy total & refactor template
 list query (#1429)

* fix(web): fix template used by total number

* fix(web): fix template list query
---
 .../FuncTemplateItem/index.tsx                |  4 +-
 .../Mods/TemplateInfo/index.tsx               |  8 +--
 web/src/pages/functionTemplate/index.tsx      | 54 +++++++++----------
 3 files changed, 30 insertions(+), 36 deletions(-)

diff --git a/web/src/pages/functionTemplate/FuncTemplateItem/index.tsx b/web/src/pages/functionTemplate/FuncTemplateItem/index.tsx
index 741e0ed157..461625f1ed 100644
--- a/web/src/pages/functionTemplate/FuncTemplateItem/index.tsx
+++ b/web/src/pages/functionTemplate/FuncTemplateItem/index.tsx
@@ -19,7 +19,7 @@ const FuncTemplateItem = (props: { isModal: boolean }) => {
   const navigate = useNavigate();
 
   const [template, setTemplate] = useState<TFunctionTemplate>();
-  const [usedBy, setUsedBy] = useState<any[]>([]);
+  const [usedBy, setUsedBy] = useState();
   const pathname = window.location.href;
   const id = pathname.split("/").pop();
 
@@ -38,7 +38,7 @@ const FuncTemplateItem = (props: { isModal: boolean }) => {
     {
       enabled: (id as string)?.length > 12,
       onSuccess: (data: any) => {
-        setUsedBy(data.data.list);
+        setUsedBy(data.data);
       },
     },
   );
diff --git a/web/src/pages/functionTemplate/Mods/TemplateInfo/index.tsx b/web/src/pages/functionTemplate/Mods/TemplateInfo/index.tsx
index 5698b306da..2eed14228f 100644
--- a/web/src/pages/functionTemplate/Mods/TemplateInfo/index.tsx
+++ b/web/src/pages/functionTemplate/Mods/TemplateInfo/index.tsx
@@ -10,7 +10,7 @@ import UseTemplate from "./UseTemplate";
 
 import { TFunctionTemplate } from "@/apis/typing";
 
-const TemplateInfo = (props: { functionTemplate: TFunctionTemplate; usedBy: any[] }) => {
+const TemplateInfo = (props: { functionTemplate: TFunctionTemplate; usedBy: any }) => {
   const { functionTemplate, usedBy } = props;
   const { items: functionList, environments, dependencies: packageList } = functionTemplate;
 
@@ -94,7 +94,7 @@ const TemplateInfo = (props: { functionTemplate: TFunctionTemplate; usedBy: any[
             })}
           </Box>
         </Box>
-        <Box className={clsx("border-b-[1px]", usedBy.length === 0 && "pb-2")}>
+        <Box className={clsx("border-b-[1px]", usedBy?.list?.length === 0 && "pb-2")}>
           <div className="flex items-center pt-5">
             <span className="text-xl font-bold">{t("Template.UsedBy")}</span>
             <span
@@ -103,11 +103,11 @@ const TemplateInfo = (props: { functionTemplate: TFunctionTemplate; usedBy: any[
                 darkMode ? "bg-gray-700" : "bg-gray-100",
               )}
             >
-              {usedBy.length}
+              {usedBy?.total}
             </span>
           </div>
           <AvatarGroup size={"sm"} max={10}>
-            {usedBy.map((item) => {
+            {usedBy?.list.map((item: { uid: string }) => {
               return (
                 <Box className="my-5 mr-2" key={item.uid}>
                   <Avatar size="sm" name={item.uid} src={getAvatarUrl(item.uid)} />
diff --git a/web/src/pages/functionTemplate/index.tsx b/web/src/pages/functionTemplate/index.tsx
index 1dadd1dc67..a884c35155 100644
--- a/web/src/pages/functionTemplate/index.tsx
+++ b/web/src/pages/functionTemplate/index.tsx
@@ -51,20 +51,18 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
   const sideBar_data = [
     { text: t("Template.Recommended"), value: "recommended" },
     { text: t("Template.CommunityTemplate"), value: "all" },
-    { text: t("Template.My"), value: "my" },
+    { text: t("Template.My"), value: "default" },
     { text: t("Template.StaredTemplate"), value: "stared" },
-    { text: t("Template.Recent"), value: "recent" },
+    { text: t("Template.Recent"), value: "recentUsed" },
   ];
-
   const defaultQueryData: queryData = {
     page: 1,
     pageSize: 12,
     keyword: "",
-    type: "default",
+    type: "",
     asc: 1,
     sort: "hot",
   };
-
   const [queryData, setQueryData] = useState(defaultQueryData);
   const setQueryDataDebounced = useMemo(
     () =>
@@ -73,7 +71,6 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
       }, 500),
     [queryData],
   );
-  const [sorting, setSorting] = useState(sortList[0]);
   const [templateList, setTemplateList] = useState<TemplateList>();
   const [searchKey, setSearchKey] = useState("");
 
@@ -92,12 +89,10 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
     return { text: "", value: "" };
   };
 
-  const [selectedItem, setSelectedItem] = useState(getInitialSelectedItem);
-
   useEffect(() => {
     const newSelectedItem = getInitialSelectedItem();
-    if (newSelectedItem.value !== selectedItem.value) {
-      setSelectedItem(newSelectedItem);
+    if (newSelectedItem.value !== queryData.type) {
+      setQueryData({ ...queryData, type: newSelectedItem.value });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [window.location.href]);
@@ -107,7 +102,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
       ...queryData,
     },
     {
-      enabled: selectedItem.value === "all",
+      enabled: queryData.type === "all",
       onSuccess: (data: any) => {
         setTemplateList(data.data);
       },
@@ -119,7 +114,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
       ...queryData,
     },
     {
-      enabled: selectedItem.value === "recommended",
+      enabled: queryData.type === "recommended",
       onSuccess: (data: any) => {
         setTemplateList(data.data);
       },
@@ -132,7 +127,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
       pageSize: 8,
     },
     {
-      enabled: ["my", "stared", "recent"].includes(selectedItem.value),
+      enabled: ["default", "stared", "recentUsed"].includes(queryData.type),
       onSuccess: (data: any) => {
         setTemplateList(data.data);
       },
@@ -147,20 +142,18 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
   const queryMapping = {
     all: functionTemplatesQuery,
     recommended: recommendFunctionTemplatesQuery,
-    my: myFunctionTemplatesQuery,
+    default: myFunctionTemplatesQuery,
     stared: myFunctionTemplatesQuery,
-    recent: myFunctionTemplatesQuery,
+    recentUsed: myFunctionTemplatesQuery,
   };
 
-  let isLoading = getLoadingStatus(selectedItem.value, queryMapping);
+  let isLoading = getLoadingStatus(queryData.type, queryMapping);
 
   const handleSideBarClick = (item: any) => {
-    setSelectedItem(item);
-    setSorting(sortList[0]);
     setSearchKey("");
     if (item.value === "stared") {
       setQueryData({ ...defaultQueryData, type: "stared" });
-    } else if (item.value === "recent") {
+    } else if (item.value === "recentUsed") {
       setQueryData({ ...defaultQueryData, type: "recentUsed" });
     } else {
       setQueryData(defaultQueryData);
@@ -169,7 +162,6 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
   };
 
   const handleSortListClick = (e: any) => {
-    setSorting(e.currentTarget.value);
     if (e.currentTarget.value === sortList[1]) {
       setQueryData({ ...queryData, asc: 1, sort: null });
     } else if (e.currentTarget.value === sortList[0]) {
@@ -179,7 +171,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
 
   return (
     <div className="pt-4">
-      {selectedItem.value ? (
+      {queryData.type ? (
         <>
           <div
             className={clsx(
@@ -196,7 +188,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
                   key={item.value}
                   className={clsx(
                     styles.explore_item,
-                    item.value === selectedItem.value
+                    item.value === queryData.type
                       ? "bg-primary-100 text-primary-600"
                       : !darkMode && "text-[#5A646E]",
                   )}
@@ -210,7 +202,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
           <div
             className={clsx("flex items-center justify-between py-5", isModal ? "pl-52" : "pl-72")}
           >
-            {selectedItem.value === "my" ? (
+            {queryData.type === "default" ? (
               <Button
                 onClick={() => {
                   navigate("/market/templates/create");
@@ -223,7 +215,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
               </Button>
             ) : null}
             <div className="flex w-full">
-              {selectedItem.value === "all" || selectedItem.value === "recommended" ? (
+              {queryData.type === "all" || queryData.type === "recommended" ? (
                 <InputGroup className="flex">
                   <InputLeftElement children={<Search2Icon />} height={"2.5rem"} />
                   <Input
@@ -275,7 +267,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
                 <Menu>
                   <MenuButton className="flex cursor-pointer">
                     <span className="whitespace-nowrap pl-2 text-lg">
-                      {sorting}
+                      {queryData.sort === "hot" ? sortList[0] : sortList[1]}
                       <ChevronDownIcon boxSize={6} color="gray.400" />
                     </span>
                   </MenuButton>
@@ -294,8 +286,10 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
           </div>
           <div className={isModal ? "pl-52" : "pl-72 pr-8"}>
             {isLoading ? (
-              <Center className="w-full pt-36">
-                <Spinner />
+              <Center className="min-h-[400px] flex-grow">
+                <span>
+                  <Spinner />
+                </span>
               </Center>
             ) : templateList && templateList.list.length > 0 ? (
               <>
@@ -304,7 +298,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
                     <section
                       className={clsx(
                         "mb-3 min-w-[18rem]",
-                        selectedItem.value === "all" || selectedItem.value === "recommended"
+                        queryData.type === "all" || queryData.type === "recommended"
                           ? "w-1/3"
                           : "w-1/2",
                       )}
@@ -313,10 +307,10 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
                       <TemplateCard
                         onClick={() => {
                           navigate(changeURL(`/${item._id}`));
-                          setSelectedItem({ text: "", value: "" });
+                          setQueryData({ ...queryData, type: "" });
                         }}
                         template={item}
-                        templateCategory={selectedItem.value}
+                        templateCategory={queryData.type}
                       />
                     </section>
                   ))}