Skip to content

Commit

Permalink
feat(dcellar-web-ui): remove some duplicate code
Browse files Browse the repository at this point in the history
  • Loading branch information
aiden-cao committed Apr 9, 2024
1 parent 4bf4543 commit db559be
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 56 deletions.
27 changes: 9 additions & 18 deletions apps/dcellar-web-ui/src/components/common/DCTable/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,13 @@ import {
SimplePaginationProps,
} from '@/components/common/DCTable/SimplePagination';
import { useAppSelector } from '@/store';
import { UploadObject, selectUploadQueue } from '@/store/slices/global';
import { formatBytes } from '@/utils/formatter';
import styled from '@emotion/styled';
import { Badge, Box, Flex, Pagination, PaginationProps, Text, keyframes } from '@node-real/uikit';
import { Badge, Box, Flex, keyframes, Pagination, PaginationProps, Text } from '@node-real/uikit';
import { ConfigProvider, Table, TableProps } from 'antd';
import { ConfigProviderProps } from 'antd/es/config-provider';
import { find } from 'lodash-es';
import { memo } from 'react';
import { useUploadProcessObjects } from '@/hooks/useUploadProcessObjects';

export type AlignType = 'left' | 'right' | 'center';

Expand Down Expand Up @@ -165,21 +164,13 @@ export const UploadProgress = (props: { progress: number }) => {

export const UploadStatus = ({ object, size }: { object: string; size: number }) => {
const loginAccount = useAppSelector((root) => root.persist.loginAccount);
const queue = useAppSelector(selectUploadQueue(loginAccount));

const file = find<UploadObject>(queue, (q) => {
const objectInList = [
q.bucketName,
...q.prefixFolders,
q.waitObject.relativePath || '',
q.waitObject.name,
]
.filter((item) => !!item)
.join('/');
return objectInList === object && q.status !== 'ERROR';
});

if (!file) return <Badge colorScheme="warning">Created on Chain</Badge>;
const { processUploadObjects, processUploadObjectRecord } = useUploadProcessObjects(loginAccount);

const processing = processUploadObjects.includes(object);

if (!processing) return <Badge colorScheme="warning">Created on Chain</Badge>;

const file = processUploadObjectRecord[object];

if (file.status === 'UPLOAD') return <UploadProgress progress={file.progress} />;

Expand Down
30 changes: 30 additions & 0 deletions apps/dcellar-web-ui/src/hooks/useUploadProcessObjects.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { useAppSelector } from '@/store';
import { selectUploadQueue, UploadObject } from '@/store/slices/global';
import { useMemo } from 'react';

export const useUploadProcessObjects = (loginAccount: string) => {
const queue = useAppSelector(selectUploadQueue(loginAccount));

return useMemo(() => {
const processUploadObjectRecord: Record<string, UploadObject> = {};
const processUploadObjects = queue
.filter((q) => q.status !== 'ERROR')
.map((q) => {
const key = [
q.bucketName,
...q.prefixFolders,
q.waitObject.relativePath || '',
q.waitObject.name,
]
.filter((item) => !!item)
.join('/');
processUploadObjectRecord[key] = q;
return key;
});

return {
processUploadObjects,
processUploadObjectRecord,
};
}, [queue]);
};
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import {
selectGnfdGasFeesConfig,
selectUploadQueue,
setSignatureAction,
UploadObject,
} from '@/store/slices/global';
import { setDeletedObject, setObjectSelectedKeys } from '@/store/slices/object';
import { BN } from '@/utils/math';
Expand All @@ -39,9 +38,10 @@ import { ColoredWaitingIcon } from '@node-real/icons';
import { Flex, ModalBody, ModalFooter, ModalHeader, Text, toast } from '@node-real/uikit';
import { useAsyncEffect } from 'ahooks';
import { parseEther } from 'ethers/lib/utils.js';
import { find, round } from 'lodash-es';
import { round } from 'lodash-es';
import { memo, useMemo, useState } from 'react';
import { useAccount } from 'wagmi';
import { useUploadProcessObjects } from '@/hooks/useUploadProcessObjects';

interface BatchDeleteObjectOperationProps {
selectBucket: TBucket;
Expand All @@ -65,7 +65,6 @@ export const BatchDeleteObjectOperation = memo<BatchDeleteObjectOperationProps>(
const bankBalance = useAppSelector((root) => root.accounts.bankOrWalletBalance);
const gnfdGasFeesConfig = useAppSelector(selectGnfdGasFeesConfig);

const uploadQueue = useAppSelector(selectUploadQueue(loginAccount));
const { crudTimestamp } = useAppSelector(selectAccount(bucket?.PaymentAddress));
const availableBalance = useAppSelector(selectAvailableBalance(bucket?.PaymentAddress));
const [loading, setLoading] = useState(false);
Expand All @@ -76,6 +75,7 @@ export const BatchDeleteObjectOperation = memo<BatchDeleteObjectOperationProps>(
const { loading: loadingSettlementFee, settlementFee } = useSettlementFee(
bucket?.PaymentAddress,
);
const { processUploadObjects } = useUploadProcessObjects(loginAccount);

const deleteObjects = objectSelectedKeys.map((key) => {
return objectRecords[currentBucketName + '/' + key];
Expand Down Expand Up @@ -158,19 +158,9 @@ export const BatchDeleteObjectOperation = memo<BatchDeleteObjectOperationProps>(
privateKey,
};

const file = find<UploadObject>(uploadQueue, (q) => {
const objectInList = [
...q.prefixFolders,
q.waitObject.relativePath || '',
q.waitObject.name,
]
.filter((item) => !!item)
.join('/');
const processing = processUploadObjects.includes(`${currentBucketName}/${objectName}`);

return objectInList === objectName && q.status !== 'ERROR';
});

const [txRes, error] = await (ObjectStatus === 1 || (ObjectStatus !== 1 && !file)
const [txRes, error] = await (ObjectStatus === 1 || (ObjectStatus !== 1 && !processing)
? deleteObject(payload)
: cancelCreateObject(payload));
if (error && error !== E_OBJECT_NOT_EXISTS) {
Expand Down
35 changes: 12 additions & 23 deletions apps/dcellar-web-ui/src/modules/object/components/ObjectList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,11 @@ import { Box, Flex } from '@node-real/uikit';
import { useAsyncEffect, useUpdateEffect } from 'ahooks';
import { ColumnProps } from 'antd/es/table';
import dayjs from 'dayjs';
import { find, uniq, without, xor } from 'lodash-es';
import { uniq, without, xor } from 'lodash-es';
import { memo, useCallback } from 'react';
import { OBJECT_ERROR_TYPES, ObjectErrorType } from '../ObjectError';
import Link from 'next/link';
import { useUploadProcessObjects } from '@/hooks/useUploadProcessObjects';

export type ObjectActionValueType =
| 'marketplace'
Expand Down Expand Up @@ -122,6 +123,7 @@ export const ObjectList = memo<ObjectListProps>(function ObjectList({ shareMode
const loading = useAppSelector(selectPathLoading);
const objectList = useAppSelector(selectObjectList);
const uploadQueue = useAppSelector(selectUploadQueue(loginAccount));
const { processUploadObjects, processUploadObjectRecord } = useUploadProcessObjects(loginAccount);

const { setOpenAuthModal } = useOffChainAuth();
const bucket = bucketRecords[currentBucketName];
Expand Down Expand Up @@ -344,17 +346,13 @@ export const ObjectList = memo<ObjectListProps>(function ObjectList({ shareMode
pruneActions = removeAction(pruneActions, ['cancel']);
} else {
// It is not allowed to cancel when the chain is sealed, but the SP is not synchronized.
const file = find<UploadObject>(
uploadQueue,
(q) =>
[...q.prefixFolders, q.waitObject.relativePath || '', q.waitObject.name]
.filter((item) => !!item)
.join('/') === record.objectName && q.status !== 'ERROR',
);
const object = `${record.bucketName}/${record.objectName}`;
const processing = processUploadObjects.includes(object);
const file = processUploadObjectRecord[object];
// if is uploading, can not cancel;
if (file && ['SIGN', 'SIGNED', 'UPLOAD'].includes(file.status)) {
if (processing && ['SIGN', 'SIGNED', 'UPLOAD'].includes(file.status)) {
pruneActions = pickAction(pruneActions, ['detail']);
} else if (file && ['SEAL', 'SEALING'].includes(file.status)) {
} else if (processing && ['SEAL', 'SEALING'].includes(file.status)) {
pruneActions = removeAction(pruneActions, ['cancel', 'share', 'delete']);
} else {
// if not sealed, only support 'cancel' 'detail'
Expand Down Expand Up @@ -403,21 +401,12 @@ export const ObjectList = memo<ObjectListProps>(function ObjectList({ shareMode
onSelect: onSelectChange,
onSelectAll: onSelectAllChange,
getCheckboxProps: (record: ObjectEntity) => {
const file = find<UploadObject>(uploadQueue, (q) => {
const objectInList = [
...q.prefixFolders,
q.waitObject.relativePath || '',
q.waitObject.name,
]
.filter((item) => !!item)
.join('/');

return objectInList === record.objectName && q.status !== 'ERROR';
});
const object = `${record.bucketName}/${record.objectName}`;
const processing = processUploadObjects.includes(object);

return {
// folder or upload failed
disabled: record.folder || (record.objectStatus !== 1 && !!file), // Column configuration not to be checked
// folder or processing
disabled: record.folder || (record.objectStatus !== 1 && processing), // Column configuration not to be checked
name: record.name,
};
},
Expand Down

0 comments on commit db559be

Please sign in to comment.