feat(dcellar-web-ui): remove drawer close btn & add debounce refresh

node-real · Aug 30, 2023 · 04a2d8d · 04a2d8d
1 parent cd92cfa
commit 04a2d8d
Show file tree

Hide file tree

Showing 20 changed files with 141 additions and 136 deletions.
diff --git a/apps/dcellar-web-ui/src/base/theme/index.ts b/apps/dcellar-web-ui/src/base/theme/index.ts
@@ -22,6 +22,11 @@ export const theme = {
           top: 65,
           maxW: '500px',
         },
+        '.ui-drawer .ui-drawer-body': {
+          width: 'calc(100% + 48px)',
+          marginLeft: -24,
+          padding: '0 24px',
+        },
       },
     },
   },

diff --git a/apps/dcellar-web-ui/src/components/common/DCDrawer/index.tsx b/apps/dcellar-web-ui/src/components/common/DCDrawer/index.tsx
@@ -1,14 +1,23 @@
 import React from 'react';
-import { QDrawer, QDrawerProps } from '@totejs/uikit';
+import { QDrawer, QDrawerCloseButton, QDrawerProps } from '@totejs/uikit';
 import { reportEvent } from '@/utils/reportEvent';
 import { GAShow } from '../GATracker';
 export interface DCDrawerProps extends QDrawerProps {
   gaShowName?: string;
   gaShowData?: Record<string, any>;
   gaClickCloseName?: string;
+  showCloseBtn?: boolean;
 }
 export const DCDrawer = (props: DCDrawerProps) => {
-  const { children, gaShowName, gaShowData, gaClickCloseName, onClose, ...restProps } = props;
+  const {
+    children,
+    gaShowName,
+    gaShowData,
+    gaClickCloseName,
+    onClose,
+    showCloseBtn = true,
+    ...restProps
+  } = props;
 
   const onBeforeClose = () => {
     if (gaClickCloseName) {
@@ -30,6 +39,7 @@ export const DCDrawer = (props: DCDrawerProps) => {
         rootProps={{ top: 64.5 }}
         {...restProps}
       >
+        {showCloseBtn && <QDrawerCloseButton top={16} right={24} color="readable.tertiary" />}
         {children}
       </QDrawer>
     </GAShow>

diff --git a/apps/dcellar-web-ui/src/modules/accounts/components/AccountDetail.tsx b/apps/dcellar-web-ui/src/modules/accounts/components/AccountDetail.tsx
@@ -1,15 +1,5 @@
 import { useAppSelector } from '@/store';
-import {
-  Box,
-  Divider,
-  Flex,
-  Image,
-  Link,
-  QDrawerBody,
-  QDrawerCloseButton,
-  QDrawerHeader,
-  Text,
-} from '@totejs/uikit';
+import { Box, Divider, Flex, Image, Link, QDrawerBody, QDrawerHeader, Text } from '@totejs/uikit';
 import React from 'react';
 import { GREENFIELD_CHAIN_EXPLORER_URL, assetPrefix } from '@/base/env';
 import { trimAddress } from '@/utils/string';
@@ -26,7 +16,7 @@ import { getNumInDigits } from '@/utils/wallet';
 export const AccountDetail = ({ loading, title, accountDetail, lockFee }: any) => {
   const bnbPrice = useAppSelector(selectBnbPrice);
   const isOwnerAccount = accountDetail?.name?.toLowerCase() === 'owner account';
-  const {bankBalance} = useAppSelector(root=> root.accounts);
+  const { bankBalance } = useAppSelector((root) => root.accounts);
   const balance = isOwnerAccount
     ? BigNumber(accountDetail?.staticBalance || 0)
         .plus(BigNumber(bankBalance))
@@ -120,7 +110,6 @@ export const AccountDetail = ({ loading, title, accountDetail, lockFee }: any) =
       <QDrawerHeader fontWeight={600} fontSize={24} lineHeight="32px">
         {title}
       </QDrawerHeader>
-      <QDrawerCloseButton top={16} right={24} color="readable.tertiary" />
       <QDrawerBody>
         <Flex alignItems={'flex-start'}>
           <Image

diff --git a/apps/dcellar-web-ui/src/modules/bucket/components/DetailDrawer.tsx b/apps/dcellar-web-ui/src/modules/bucket/components/DetailDrawer.tsx
@@ -1,14 +1,5 @@
 import React, { memo, useEffect, useMemo } from 'react';
-import {
-  QDrawerCloseButton,
-  QDrawerHeader,
-  QDrawerBody,
-  Flex,
-  Text,
-  Link,
-  Box,
-  Divider,
-} from '@totejs/uikit';
+import { QDrawerHeader, QDrawerBody, Flex, Text, Link, Box, Divider } from '@totejs/uikit';
 import { useAppDispatch, useAppSelector } from '@/store';
 import { BucketItem, setEditDetail, setupBucketQuota } from '@/store/slices/bucket';
 import { formatFullTime, getMillisecond } from '@/utils/time';
@@ -197,7 +188,6 @@ export const DetailDrawer = memo<DetailDrawerProps>(function DetailDrawer() {
 
   return (
     <DCDrawer isOpen={isOpen} onClose={onClose}>
-      <QDrawerCloseButton />
       <QDrawerHeader>Bucket Detail</QDrawerHeader>
       <QDrawerBody>
         <Flex my={32}>

diff --git a/apps/dcellar-web-ui/src/modules/bucket/components/NewBucket.tsx b/apps/dcellar-web-ui/src/modules/bucket/components/NewBucket.tsx
@@ -1,10 +1,11 @@
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { CreateBucketButton } from '@/modules/bucket/bucket.style';
 import { AddIcon } from '@totejs/icons';
 import { useAppDispatch, useAppSelector } from '@/store';
 import { setEditCreate, setupBuckets } from '@/store/slices/bucket';
 import { Flex } from '@totejs/uikit';
 import RefreshIcon from '@/public/images/icons/refresh.svg';
+import { debounce } from 'lodash-es';
 
 interface NewBucketProps {
   showRefresh?: boolean;
@@ -14,9 +15,12 @@ export const NewBucket = memo<NewBucketProps>(function NewBucket({ showRefresh =
   const dispatch = useAppDispatch();
   const { loginAccount } = useAppSelector((root) => root.persist);
 
-  const onRefresh = () => {
-    dispatch(setupBuckets(loginAccount, true));
-  };
+  const onRefresh = useCallback(
+    debounce(() => {
+      dispatch(setupBuckets(loginAccount, true));
+    }, 300),
+    [loginAccount],
+  );
 
   return (
     <Flex gap={12}>

diff --git a/apps/dcellar-web-ui/src/modules/buckets/List/components/CreateBucket.tsx b/apps/dcellar-web-ui/src/modules/buckets/List/components/CreateBucket.tsx
@@ -8,7 +8,6 @@ import {
   InputRightElement,
   Link,
   QDrawerBody,
-  QDrawerCloseButton,
   QDrawerFooter,
   QDrawerHeader,
   Text,
@@ -423,7 +422,6 @@ export const CreateBucket = ({ isOpen, onClose, refetch }: Props) => {
         <CreateBucketFailed errorMsg={submitErrorMsg} onClose={() => setStatus('pending')} />
       )}
       <DCDrawer isOpen={isOpen} onClose={onClose}>
-        <QDrawerCloseButton />
         <QDrawerHeader>Create a Bucket</QDrawerHeader>
         <QDrawerBody mt={0}>
           <Box>

diff --git a/apps/dcellar-web-ui/src/modules/group/components/AddGroupMember.tsx b/apps/dcellar-web-ui/src/modules/group/components/AddGroupMember.tsx
@@ -16,7 +16,7 @@ import {
 } from '@/modules/file/constant';
 import { useUnmount, useUpdateEffect } from 'ahooks';
 import { DCDrawer } from '@/components/common/DCDrawer';
-import { Flex, QDrawerBody, QDrawerCloseButton, QDrawerHeader, Text, toast } from '@totejs/uikit';
+import { Flex, QDrawerBody, QDrawerHeader, Text, toast } from '@totejs/uikit';
 import { DCComboBox } from '@/components/common/DCComboBox';
 import { DCButton } from '@/components/common/DCButton';
 import ComingSoon from '@/components/common/SvgIcon/members.svg';
@@ -86,10 +86,10 @@ export const AddGroupMember = memo<AddMemberProps>(function AddMember() {
     const curTimeStamp = await getUtcZeroTimestamp();
     const expirationTimestamp = Math.floor(curTimeStamp + 10 * 60 * 60 * 1000);
     const expirationDate = new Date(expirationTimestamp);
-    const membersToAdd = values.map(item => ({
+    const membersToAdd = values.map((item) => ({
       member: item,
       expirationTime: toTimestamp(expirationDate),
-    }))
+    }));
 
     const payload = {
       operator: loginAccount,
@@ -118,7 +118,6 @@ export const AddGroupMember = memo<AddMemberProps>(function AddMember() {
 
   return (
     <DCDrawer isOpen={!!addGroupMember.groupName} onClose={onClose}>
-      <QDrawerCloseButton />
       <QDrawerHeader flexDirection="column">Add Members</QDrawerHeader>
       <QDrawerBody>
         <Flex gap={12}>

diff --git a/apps/dcellar-web-ui/src/modules/group/components/CreateGroup.tsx b/apps/dcellar-web-ui/src/modules/group/components/CreateGroup.tsx
@@ -5,7 +5,6 @@ import {
   FormControl,
   FormLabel,
   QDrawerBody,
-  QDrawerCloseButton,
   QDrawerFooter,
   QDrawerHeader,
   Text,
@@ -136,7 +135,6 @@ export const CreateGroup = memo<CreateGroupProps>(function CreateGroup() {
 
   return (
     <DCDrawer isOpen={creatingGroup} onClose={onClose}>
-      <QDrawerCloseButton />
       <QDrawerHeader flexDirection="column">
         Create a Group
         <Text fontSize={14} lineHeight="17px" fontWeight={400} color="#76808F">

diff --git a/apps/dcellar-web-ui/src/modules/group/components/EditGroup.tsx b/apps/dcellar-web-ui/src/modules/group/components/EditGroup.tsx
@@ -5,7 +5,6 @@ import {
   FormControl,
   FormLabel,
   QDrawerBody,
-  QDrawerCloseButton,
   QDrawerFooter,
   QDrawerHeader,
   Text,
@@ -135,7 +134,6 @@ export const EditGroup = memo<EditGroupProps>(function CreateGroup() {
 
   return (
     <DCDrawer isOpen={!!editGroup.groupName} onClose={onClose}>
-      <QDrawerCloseButton />
       <QDrawerHeader flexDirection="column">Edit Description</QDrawerHeader>
       <QDrawerBody>
         <FormControl mb={16} isInvalid={!!error.name}>

diff --git a/apps/dcellar-web-ui/src/modules/group/components/NewGroup.tsx b/apps/dcellar-web-ui/src/modules/group/components/NewGroup.tsx
@@ -1,9 +1,10 @@
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { Flex } from '@totejs/uikit';
 import { useAppDispatch, useAppSelector } from '@/store';
 import { setCreatingGroup, setupGroups } from '@/store/slices/group';
 import RefreshIcon from '@/public/images/icons/refresh.svg';
 import { DCButton } from '@/components/common/DCButton';
+import { debounce } from 'lodash-es';
 
 interface NewGroupProps {
   showRefresh?: boolean;
@@ -13,9 +14,12 @@ export const NewGroup = memo<NewGroupProps>(function NewGroup({ showRefresh = tr
   const dispatch = useAppDispatch();
   const { loginAccount } = useAppSelector((root) => root.persist);
 
-  const onRefresh = () => {
-    dispatch(setupGroups(loginAccount, true));
-  };
+  const onRefresh = useCallback(
+    debounce(() => {
+      dispatch(setupGroups(loginAccount, true));
+    }, 300),
+    [loginAccount],
+  );
 
   const onCreate = () => {
     dispatch(setCreatingGroup(true));

diff --git a/apps/dcellar-web-ui/src/modules/group/components/RemoveGroupMember.tsx b/apps/dcellar-web-ui/src/modules/group/components/RemoveGroupMember.tsx
@@ -16,7 +16,7 @@ import {
 } from '@/modules/file/constant';
 import { useUnmount, useUpdateEffect } from 'ahooks';
 import { DCDrawer } from '@/components/common/DCDrawer';
-import { Flex, QDrawerBody, QDrawerCloseButton, QDrawerHeader, Text, toast } from '@totejs/uikit';
+import { Flex, QDrawerBody, QDrawerHeader, Text, toast } from '@totejs/uikit';
 import { DCComboBox } from '@/components/common/DCComboBox';
 import { DCButton } from '@/components/common/DCButton';
 import ComingSoon from '@/components/common/SvgIcon/members.svg';
@@ -107,7 +107,6 @@ export const RemoveGroupMember = memo<RemoveGroupMemberProps>(function RemoveGro
 
   return (
     <DCDrawer isOpen={!!removeGroupMember.groupName} onClose={onClose}>
-      <QDrawerCloseButton />
       <QDrawerHeader flexDirection="column">Remove Members</QDrawerHeader>
       <QDrawerBody>
         <Flex gap={12}>

diff --git a/apps/dcellar-web-ui/src/modules/object/components/CreateFolder.tsx b/apps/dcellar-web-ui/src/modules/object/components/CreateFolder.tsx
@@ -5,12 +5,10 @@ import {
   FormControl,
   Link,
   QDrawerBody,
-  QDrawerCloseButton,
   QDrawerFooter,
   QDrawerHeader,
   Text,
   toast,
-  useDisclosure,
 } from '@totejs/uikit';
 import { InputItem } from '@/components/formitems/InputItem';
 import { Fees } from '@/modules/file/components/Fees';
@@ -282,7 +280,9 @@ export const CreateFolder = memo<modalProps>(function CreateFolderDrawer({ refet
   ) => {
     const fullPath = getPath(folderName, folders);
     const file = new File([], fullPath, { type: 'text/plain' });
-    const { seedString } = await dispatch(getSpOffChainData(loginAccount, primarySp.operatorAddress));
+    const { seedString } = await dispatch(
+      getSpOffChainData(loginAccount, primarySp.operatorAddress),
+    );
     const hashResult = await checksumWorkerApi?.generateCheckSumV2(file);
     const createObjectPayload: TBaseGetCreateObject = {
       bucketName,
@@ -326,22 +326,30 @@ export const CreateFolder = memo<modalProps>(function CreateFolderDrawer({ refet
 
   useEffect(() => {
     if (isEmpty(preLockFeeObject)) {
-      return
+      return;
     }
     const nGasFee = BigNumber(gasFee);
-    console.log('isOwnerAccount', isOwnerAccount, preLockFee, payLockFeeAccount.staticBalance, bankBalance)
+    console.log(
+      'isOwnerAccount',
+      isOwnerAccount,
+      preLockFee,
+      payLockFeeAccount.staticBalance,
+      bankBalance,
+    );
     if (isOwnerAccount) {
       if (BigNumber(preLockFee).gt(BigNumber(payLockFeeAccount.staticBalance).plus(bankBalance))) {
         setTimeout(() => setFormErrors([GET_GAS_FEE_LACK_BALANCE_ERROR]), 100);
       }
     } else {
-      if (BigNumber(preLockFee).gt(BigNumber(payLockFeeAccount.staticBalance)) || nGasFee.gt(BigNumber(bankBalance))) {
-        console.log('2131232131221')
+      if (
+        BigNumber(preLockFee).gt(BigNumber(payLockFeeAccount.staticBalance)) ||
+        nGasFee.gt(BigNumber(bankBalance))
+      ) {
+        console.log('2131232131221');
         setTimeout(() => setFormErrors([LOCK_FEE_LACK_BALANCE_ERROR]), 100);
       }
     }
-
-  }, [gasFee, bankBalance, preLockFee, payLockFeeAccount.staticBalance, preLockFeeObject,  loginAccount, isOwnerAccount]);
+  }, [gasFee, bankBalance, preLockFee, payLockFeeAccount.staticBalance, preLockFeeObject, loginAccount, isOwnerAccount]);
 
   useEffect(() => {
     setFormErrors([]);
@@ -357,7 +365,6 @@ export const CreateFolder = memo<modalProps>(function CreateFolderDrawer({ refet
       gaShowName="dc.file.create_folder_m.0.show"
       gaClickCloseName="dc.file.create_folder_m.close.click"
     >
-      <QDrawerCloseButton />
       <QDrawerHeader>Create a Folder</QDrawerHeader>
       <QDrawerBody>
         <Text