feat: Collection List Button

src/components/resource/MyBreadcrumb.tsx

@@ -5,6 +5,8 @@ import {
   useNavigate,
   useSearchParams,
 } from 'react-router-dom';
+import { getItemByBucketId } from '../../utils/apis';
+import { getCollectionInfoByName } from '../../utils/gfSDK';
 
 interface Props {
   root: {
@@ -23,7 +25,7 @@ export const MyBreadcrumb = (props: Props) => {
   const bucketPath = path === '/' ? '' : path.split('/');
   const breadItems = [root.bucketName].concat(bucketPath);
 
-  console.log('props', breadItems.length - 1);
+  // console.log('props', breadItems.length - 1);
 
   return (
     <CustomBreadcrumb>
@@ -36,15 +38,19 @@ export const MyBreadcrumb = (props: Props) => {
             <BreadcrumbLink fontSize="16px" as="span">
               <NavLink
                 as="span"
-                onClick={() => {
-                  const params: Record<string, string> = {
-                    id: id,
-                  };
+                onClick={async () => {
+                  const params: Record<string, string> = {};
 
                   if (item !== root.bucketName) {
                     params.path = item + '/';
                   }
 
+                  const bucketData = await getCollectionInfoByName(item);
+                  const ItemInfo = await getItemByBucketId(
+                    bucketData.bucketInfo.id,
+                  );
+                  params.id = String(ItemInfo.id);
+
                   navigator({
                     pathname: '/resource',
                     search: `?${createSearchParams(params)}`,

src/components/resource/collection/ActionButtonGroup.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@totejs/uikit';
+import { Box, Button } from '@totejs/uikit';
 import { FILE_ITEM } from '../../../hooks/useGetObjectList';
 import { useAccount } from 'wagmi';
 import { useMemo } from 'react';
@@ -9,6 +9,10 @@ import {
   useGetObject,
 } from '../../../hooks/useGetBucketOrObj';
 import { generateGroupName } from '../../../utils';
+import { useGetItemById } from '../../../hooks/useGetItemById';
+import { getItemById, getItemByObjectId } from '../../../utils/apis';
+import { useGetDownloadUrl } from '../../../hooks/useGetDownloadUrl';
+import { DownloadIcon } from '@totejs/icons';
 
 interface Props {
   fileInfo: FILE_ITEM;
@@ -24,24 +28,34 @@ export const ActionButtonGroup = (props: Props) => {
 
   const { data: bucketData } = useGetBucketByName(BucketName);
   const { data: objectData } = useGetObject(BucketName, ObjectName);
-
   const { data: groupData } = useGetGroupByName(
     generateGroupName(BucketName, ObjectName),
     data.Owner,
   );
 
+  const downloadUrl = useGetDownloadUrl({
+    bucketName: BucketName,
+    name: ObjectName,
+  });
+
   return (
     <Box>
       {/* only owner can delist */}
       {isListed && data.Owner === address && (
-        <Box
+        <Button
+          size={'sm'}
+          background="#665800"
+          color="#FFE900"
+          h="32px"
+          fontSize="14px"
+          p="8px 16px"
           onClick={() => {
             if (!objectData || !groupData) return;
 
-            console.log(
-              'generateGroupName(BucketName, ObjectName)',
-              generateGroupName(BucketName, ObjectName),
-            );
+            // console.log(
+            //   'generateGroupName(BucketName, ObjectName)',
+            //   generateGroupName(BucketName, ObjectName),
+            // );
 
             modalData.modalDispatch({
               type: 'OPEN_DELIST',
@@ -59,12 +73,18 @@ export const ActionButtonGroup = (props: Props) => {
           }}
         >
           delist
-        </Box>
+        </Button>
       )}
 
       {/* only owner can list */}
       {!isListed && data.Owner === address && (
-        <Box
+        <Button
+          size={'sm'}
+          background="#665800"
+          color="#FFE900"
+          h="32px"
+          fontSize="14px"
+          p="8px 16px"
           onClick={() => {
             if (!bucketData || !objectData) return;
 
@@ -84,14 +104,59 @@ export const ActionButtonGroup = (props: Props) => {
           }}
         >
           list
-        </Box>
+        </Button>
       )}
 
       {/* only buyer can download */}
-      {isPurchasedByMe && <Box>download</Box>}
+      {isListed && isPurchasedByMe && (
+        <Button
+          h="32px"
+          bg="none"
+          color="#F1F2F3"
+          border="1px solid #F1F2F3"
+          fontSize="14px"
+          p="8px 16px"
+          _hover={{
+            background: '#E1E2E5',
+            color: '#181A1E',
+          }}
+          onClick={() => {
+            window.open(downloadUrl);
+          }}
+        >
+          <DownloadIcon />
+          <Box as="span" ml="8px">
+            Download
+          </Box>
+        </Button>
+      )}
 
       {/* haven't bought can buy excepy owner */}
-      {!isPurchasedByMe && data.Owner !== address && <Box>Buy</Box>}
+      {isListed && !isPurchasedByMe && data.Owner !== address && (
+        <Button
+          size={'sm'}
+          background="#665800"
+          color="#FFE900"
+          h="32px"
+          fontSize="14px"
+          p="8px 16px"
+          onClick={async () => {
+            // console.log('isPurchasedByMe', isPurchasedByMe);
+            if (!objectData) return;
+
+            const itemInfo = await getItemByObjectId(objectData.objectInfo.id);
+            modalData.modalDispatch({
+              type: 'OPEN_BUY',
+              buyData: itemInfo,
+              callBack: () => {
+                uploadFn();
+              },
+            });
+          }}
+        >
+          Only Buy This
+        </Button>
+      )}
     </Box>
   );
 };

src/components/resource/collection/CollectionList.tsx

@@ -1,17 +1,14 @@
 import styled from '@emotion/styled';
 import { CardPocketIcon } from '@totejs/icons';
 import { Box, ColumnDef, Flex, Table } from '@totejs/uikit';
-import _ from 'lodash';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback } from 'react';
 import {
   createSearchParams,
   useNavigate,
   useSearchParams,
 } from 'react-router-dom';
 import { useAccount } from 'wagmi';
-import { DEFAULT_ITEM } from '../../../hooks/useGetItemById';
 import {
-  useGetItemByObjId,
   useGetItemsByObjIds,
   usePurchaseQueryByObjIds,
 } from '../../../hooks/useGetItemByObjId';
@@ -21,18 +18,16 @@ import {
   objListMergeListedAndPurchased,
   useGetObjectList,
 } from '../../../hooks/useGetObjectList';
-import { useGlobal } from '../../../hooks/useGlobal';
-import { useModal } from '../../../hooks/useModal';
 import { usePagination } from '../../../hooks/usePagination';
 import { useSalesVolume } from '../../../hooks/useSalesVolume';
 import {
   contentTypeToExtension,
   defaultImg,
   formatDateUTC,
-  generateGroupName,
   parseFileSize,
   trimLongStr,
 } from '../../../utils';
+import { getItemByObjectId } from '../../../utils/apis';
 import { Item } from '../../../utils/apis/types';
 import { QueryHeadBucketResponse } from '../../../utils/gfSDK';
 import { Loader } from '../../Loader';
@@ -67,7 +62,6 @@ const CollectionList = (props: Props) => {
     .map((item: any) => {
       return item.data.Id as number;
     });
-  // console.log('oidList', oidList);
 
   const { data: objListedList, refetch: reloadListedList } =
     useGetItemsByObjIds(oidList || []);
@@ -81,17 +75,18 @@ const CollectionList = (props: Props) => {
     reloadPurchasedList();
   }, [reloadListedList, reloadObjectList, reloadPurchasedList]);
 
-  console.log('objListedList', objListedList);
-  console.log('purchasedList', purchasedList);
+  // console.log('oidList', oidList);
+  // console.log('objListedList', objListedList);
+  // console.log('purchasedList', purchasedList);
 
   const mergedList = objListMergeListedAndPurchased(
     objectList,
     objListedList,
     purchasedList,
   );
 
-  console.log('objectList', objectList);
-  console.log('mergedList', mergedList);
+  // console.log('objectList', objectList);
+  // console.log('mergedList', mergedList);
 
   const { handlePageChange, page } = usePagination();
 
@@ -126,8 +121,17 @@ const CollectionList = (props: Props) => {
         }
 
         if (type === 'file') {
+          const { isListed } = data;
           return (
-            <ImgContainer>
+            <ImgContainer
+              cursor={isListed ? 'pointer' : 'inherit'}
+              onClick={async () => {
+                if (isListed) {
+                  const item = await getItemByObjectId(data.data.Id);
+                  navigator(`/resource?id=${item.id}`);
+                }
+              }}
+            >
               <ImgCon src={defaultImg(name, 40)}></ImgCon>
               <Box title={name}>{trimLongStr(name, 15)}</Box>
             </ImgContainer>
@@ -190,7 +194,7 @@ const CollectionList = (props: Props) => {
     {
       header: '',
       cell: (data) => {
-        console.log('data', data);
+        // console.log('data', data);
         return (
           data.type === 'file' && (
             <ActionButtonGroup fileInfo={data} uploadFn={reloadList} />

src/context/modal/index.ts

@@ -96,6 +96,7 @@ export const ModalReducer = (initialState: any, action: any) => {
         ...initialState,
         openBuy: true,
         buyData: action.buyData,
+        callBack: action.callBack,
       };
     case 'BUYING':
       return {

src/hooks/useGetBucketOrObj.ts

@@ -93,11 +93,6 @@ export const useGetBOInfoFromGroup = (groupName?: string) => {
       // bucketName = _;
     }
 
-    console.log({
-      type: rType,
-      bucketName,
-      objectName,
-    });
     setBoInfo({
       type: rType,
       bucketName,

src/hooks/useGetItemById.ts

@@ -30,6 +30,7 @@ export const useGetItemById = (id: number) => {
   const [itemData, setItemData] = useState<Item>();
 
   const { data, isLoading, refetch } = useQuery({
+    enabled: !!id,
     queryKey: ['GET_ITEM', id],
     queryFn: () => getItemById(id),
     gcTime: 20000,
@@ -38,10 +39,10 @@ export const useGetItemById = (id: number) => {
   });
 
   useEffect(() => {
-    if (isLoading || !data) return;
+    if (isLoading || !data || !id) return;
 
     setItemData(data);
-  }, [data, isLoading]);
+  }, [data, id, isLoading]);
 
   return {
     data: itemData,

src/hooks/useGetItemByObjId.ts

@@ -87,21 +87,24 @@ export const usePurchaseQueryByObjIds = (
       const res = await queryPurchase({
         filter: {
           address,
-          objectIds: ids.concat(178839),
+          objectIds: ids,
         },
         offset: 0,
         limit: 10,
         sort: 'CREATION_DESC',
       });
-      console.log('res --->', res);
 
-      return res.purchases
-        .filter((item) => {
-          return ids.includes(item.resourceId);
+      const { purchases } = res;
+
+      const xx = purchases
+        .filter((p) => {
+          return ids.includes(p.item.resourceId);
         })
-        .map((item) => {
-          return item.resourceId;
+        .map((p) => {
+          return p.item.resourceId;
         });
+
+      return xx;
     },
   });
 };

src/hooks/useGetObjectList.ts

@@ -65,12 +65,6 @@ export const objListMergeListedAndPurchased = (
   listedList: number[] | undefined,
   purchasedList: number[] | undefined,
 ) => {
-  console.log(
-    'objListMergeListedAndPurchased objectList',
-    objectList,
-    listedList,
-    purchasedList,
-  );
   if (!objectList) return [];
   if (!listedList || !purchasedList) return objectList;
 

src/utils/apis/types.ts

@@ -58,7 +58,13 @@ export interface SearchPurchaseRequest {
   limit: number;
 }
 export interface SearchPurchaseResponse {
-  purchases: Item[];
+  purchases: {
+    id: number;
+    buyerAddress: string;
+    price: number;
+    createdAt: number;
+    item: Item;
+  }[];
   total: number;
 }
 
@@ -74,6 +80,12 @@ export interface QueryPurchaseRequest {
   limit: number;
 }
 export interface QueryPurchaseResponse {
-  purchases: Item[];
+  purchases: {
+    id: number;
+    buyerAddress: string;
+    price: number;
+    createdAt: number;
+    item: Item;
+  }[];
   total: number;
 }