fix(web): pagination ts error (#560)

* fix: pagination ts error * fix: ignore files
labring · Dec 19, 2022 · 3380690 · 3380690
1 parent 97c4728
commit 3380690
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 27 deletions.
diff --git a/web/.gitignore b/web/.gitignore
@@ -1,5 +1,4 @@
 # Logs
-logs
 *.log
 npm-debug.log*
 yarn-debug.log*

diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -21,6 +21,10 @@
   "Message": {
     "DeploySuccess": "发布成功"
   },
+  "ToolTip": {
+    "Copy": "复制",
+    "Copied": "已复制"
+  },
   "Common": {
     "Dialog": {
       "Confirm": "确定",

diff --git a/web/src/components/ConfirmButton/index.tsx b/web/src/components/ConfirmButton/index.tsx
@@ -16,7 +16,7 @@ interface ConfirmButtonProps {
   headerText: string;
   bodyText: string;
 
-  children: React.ReactNode;
+  children: React.ReactElement;
 }
 
 const ConfirmButton = ({ onSuccessAction, headerText, bodyText, children }: ConfirmButtonProps) => {
@@ -30,7 +30,7 @@ const ConfirmButton = ({ onSuccessAction, headerText, bodyText, children }: Conf
 
   return (
     <>
-      {React.cloneElement(children as React.ReactElement, {
+      {React.cloneElement(children, {
         onClick: onOpen,
       })}
 

diff --git a/web/src/components/CopyText/index.tsx b/web/src/components/CopyText/index.tsx
@@ -1,26 +1,33 @@
 import React, { useEffect } from "react";
 import { CopyIcon } from "@chakra-ui/icons";
-import { useClipboard } from "@chakra-ui/react";
+import { Tooltip, useClipboard } from "@chakra-ui/react";
+import { t } from "i18next";
 
 import useGlobalStore from "@/pages/globalStore";
 
-export default function CopyText(props: { text: string; tip?: string }) {
+export default function CopyText(props: {
+  text: string;
+  tip?: string;
+  children?: React.ReactElement;
+}) {
   const { onCopy, setValue } = useClipboard("");
   const { showSuccess } = useGlobalStore();
 
-  const text = props.text;
+  const { children = <CopyIcon />, text, tip } = props;
+
   useEffect(() => {
     setValue(text);
   }, [setValue, text]);
 
   return (
-    <CopyIcon
-      className="ml-1"
-      fontSize={12}
-      onClick={() => {
-        onCopy();
-        showSuccess(props.tip || "复制成功");
-      }}
-    />
+    <Tooltip label={t("ToolTip.Copy")} placement="top">
+      {React.cloneElement(children, {
+        className: "ml-2",
+        onClick: () => {
+          onCopy();
+          showSuccess(tip || t("ToolTip.Copied"));
+        },
+      })}
+    </Tooltip>
   );
 }
diff --git a/web/src/components/Pagination/index.tsx b/web/src/components/Pagination/index.tsx
@@ -13,7 +13,7 @@ export default function Pagination(props: {
 }) {
   const { values, onChange } = props;
   const { page = 1, total, limit = 10 } = values;
-  const maxPage = total ? Math.ceil(total / limit) : undefined;
+  const maxPage = total ? Math.ceil(total / limit) : -1;
 
   return (
     <Flex justifyContent="end" m={4} alignItems="center">
@@ -59,7 +59,7 @@ export default function Pagination(props: {
         </Text>
         /
         <Text fontWeight="bold" as="p" width={"40px"} display="inline-block" textAlign={"center"}>
-          {isNaN(maxPage) ? "" : maxPage}
+          {maxPage < 0 ? "" : maxPage}
         </Text>
       </Flex>
 

diff --git a/web/src/pages/app/database/CollectionListPanel/index.tsx b/web/src/pages/app/database/CollectionListPanel/index.tsx
@@ -66,7 +66,7 @@ export default function CollectionListPanel() {
                       <span className="ml-2 text-base">{db.name}</span>
                     </div>
                     <div className="invisible flex group-hover:visible">
-                      <IconWrap tooltip="复制">
+                      <IconWrap>
                         <CopyText text={db.name} tip="名称复制成功" />
                       </IconWrap>
                       <DeleteCollectionModal database={db} />

diff --git a/web/src/pages/app/logs/index.tsx b/web/src/pages/app/logs/index.tsx
@@ -19,6 +19,7 @@ import {
 } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
 
+import CopyText from "@/components/CopyText";
 import Pagination from "@/components/Pagination";
 import { formatDate } from "@/utils/format";
 import getPageInfo from "@/utils/getPageInfo";
@@ -116,21 +117,32 @@ export default function LogsPage() {
                 </Tr>
               </Thead>
 
-              {logListQuery.isFetching ? (
-                <Center>
-                  <Spinner />
-                </Center>
-              ) : null}
-
               <Tbody className="relative">
+                {logListQuery.isFetching ? (
+                  <Tr>
+                    <Td colSpan={5} height="200px" border={"none"}>
+                      <Center>
+                        <Spinner />
+                      </Center>
+                    </Td>
+                  </Tr>
+                ) : null}
                 {logListQuery.data?.data?.list.map((item: any) => {
                   return (
                     <Tr key={item._id} _hover={{ bgColor: "#efefef" }}>
                       <Td width={"200px"} className=" text-black-600 ">
                         {formatDate(item.created_at)}
                       </Td>
-                      <Td width={"360px"}>{item.request_id}</Td>
-                      <Td>{item.func}</Td>
+                      <Td width={"360px"}>
+                        <CopyText text={item.request_id}>
+                          <span>{item.request_id}</span>
+                        </CopyText>
+                      </Td>
+                      <Td>
+                        <CopyText text={item.func}>
+                          <span>{item.func}</span>
+                        </CopyText>
+                      </Td>
                       <Td isNumeric>
                         <span className=" text-green-700">{item.time_usage} ms</span>
                       </Td>

diff --git a/web/src/pages/app/logs/service.ts b/web/src/pages/app/logs/service.ts
@@ -0,0 +1,3 @@
+export const queryKeys = {
+  useLogsQuery: ["useLogsQuery"],
+};
diff --git a/web/src/pages/home/mods/CreateAppModal/index.tsx b/web/src/pages/home/mods/CreateAppModal/index.tsx
@@ -26,7 +26,7 @@ import { APP_STATUS, DEFAULT_REGION } from "@/constants/index";
 import { ApplicationControllerCreate, ApplicationControllerUpdate } from "@/apis/v1/applications";
 import useGlobalStore from "@/pages/globalStore";
 
-const CreateAppModal = (props: { application?: any; children: React.ReactNode }) => {
+const CreateAppModal = (props: { application?: any; children: React.ReactElement }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const queryClient = useQueryClient();
 
@@ -87,7 +87,7 @@ const CreateAppModal = (props: { application?: any; children: React.ReactNode })
 
   return (
     <>
-      {React.cloneElement(props.children as React.ReactElement, {
+      {React.cloneElement(props.children, {
         onClick: () => {
           reset(defaultValues);
           onOpen();