feat: Breadcrumb

src/components/profile/MyCollectionList.tsx

@@ -56,7 +56,7 @@ const MyCollectionList = (props: ICollectionList) => {
   const state = useGlobal();
   const [p] = useSearchParams();
 
-  console.log('modalData', modalData);
+  // console.log('modalData', modalData);
 
   // const [selectBucketId, setSelectBucketId] = useState<string>('');
   // const { data: selectItem } = useGetItemByBucketId(selectBucketId);

src/components/resource/MyBreadcrumb.tsx

@@ -0,0 +1,77 @@
+import styled from '@emotion/styled';
+import { Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@totejs/uikit';
+import {
+  createSearchParams,
+  useNavigate,
+  useSearchParams,
+} from 'react-router-dom';
+
+interface Props {
+  root: {
+    bucketName: string;
+  };
+}
+
+export const MyBreadcrumb = (props: Props) => {
+  const [p] = useSearchParams();
+  const path = (p.get('path') as string) || '/';
+  const id = p.get('id') as string;
+  const navigator = useNavigate();
+
+  const { root } = props;
+
+  const bucketPath = path === '/' ? '' : path.split('/');
+  const breadItems = [root.bucketName].concat(bucketPath);
+
+  console.log('props', breadItems.length - 1);
+
+  return (
+    <CustomBreadcrumb>
+      {breadItems.map((item: string, index: number) => {
+        return (
+          <MyBreadcrumbItem
+            key={index}
+            isCurrentPage={index === breadItems.length - 2}
+          >
+            <BreadcrumbLink fontSize="16px" as="span">
+              <NavLink
+                as="span"
+                onClick={() => {
+                  const params: Record<string, string> = {
+                    id: id,
+                  };
+
+                  if (item !== root.bucketName) {
+                    params.path = item + '/';
+                  }
+
+                  navigator({
+                    pathname: '/resource',
+                    search: `?${createSearchParams(params)}`,
+                  });
+                }}
+              >
+                {item}
+              </NavLink>
+            </BreadcrumbLink>
+          </MyBreadcrumbItem>
+        );
+      })}
+    </CustomBreadcrumb>
+  );
+};
+
+const CustomBreadcrumb = styled(Breadcrumb)`
+  /* background: #373943; */
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 18px;
+  color: #ffffff;
+`;
+
+const MyBreadcrumbItem = styled(BreadcrumbItem)``;
+
+const NavLink = styled(Box)`
+  cursor: pointer;
+`;

src/components/resource/collection/CollectionList.tsx

@@ -85,7 +85,7 @@ const CollectionList = (props: Props) => {
   useEffect(() => {
     if (selectItem?.id === DEFAULT_ITEM.id) return;
 
-    console.log('selectItem', selectItem);
+    // console.log('selectItem', selectItem);
     if (!_.isEmpty(selectItem)) {
       console.log(`/resource?id=${selectItem.id}`);
       navigator(`/resource?id=${selectItem.id}`);
@@ -146,7 +146,7 @@ const CollectionList = (props: Props) => {
               // const from = encodeURIComponent(JSON.stringify(list));
 
               if (type === 'folder') {
-                console.log(data.name);
+                // console.log(data.name);
                 const params = {
                   id: id,
                   path: data.name + '/',
@@ -166,7 +166,7 @@ const CollectionList = (props: Props) => {
                 //   )}&address=${item}&from=${from}`,
                 // );
               } else {
-                console.log('data', data);
+                // console.log('data', data);
                 const id = String(data.data.Id);
                 setSelectObjectId(id);
                 setBucketName(data.data.BucketName);
@@ -192,7 +192,6 @@ const CollectionList = (props: Props) => {
       header: 'Format',
       width: 160,
       cell: (data: any) => {
-        const { type } = data;
         const content_type =
           data.type === 'folder'
             ? 'Folder'
@@ -241,6 +240,12 @@ const CollectionList = (props: Props) => {
     //     return <TotalVol groupId={groupId}></TotalVol>;
     //   },
     // },
+    {
+      header: '',
+      cell: (data) => {
+        return <Box>{}</Box>;
+      },
+    },
     // {
     //   header: 'Action',
     //   cell: (data: any) => {

src/pages/Resource.tsx

@@ -21,6 +21,8 @@ import { useGetItemById } from '../hooks/useGetItemById';
 import { useGetItemRelationWithAddr } from '../hooks/useGetItemRelationWithAddr';
 import { useGfGetObjInfo } from '../hooks/useGfGetObjInfo';
 import { reportEvent } from '../utils/ga';
+import { MyBreadcrumb } from '../components/resource/MyBreadcrumb';
+import { NoData } from '../components/NoData';
 
 /**
  * Have been listed
@@ -75,71 +77,21 @@ const Resource = () => {
 
   // console.log('itemInfo', itemInfo);
   // console.log('storageInfo', storageInfo);
-  console.log('groupData', groupData);
+  // console.log('groupData', groupData);
   // console.log('bucketData', bucketData);
   // console.log('objectData', objectData);
 
-  if (itemInfoLoading || !itemInfo) {
+  if (itemInfoLoading || !itemInfo || !bucketData) {
     return <Loader />;
   }
 
-  // const [breadItems, setBreadItems] = useState([]);
-
-  // const state = useGlobal();
-  // const showBuy = useMemo(() => {
-  //   const list = state.globalState.breadList;
-  //   console.log('state.globalState.breadList', list);
-  //   const fromPurchase =
-  //     list.findIndex((item) => item.name == 'My Purchase') > -1;
-  //   return (status == 1 || status == -1) && !fromPurchase;
-  // }, [status, address, state.globalState.breadList]);
-
-  /* useEffect(() => {
-    const list = state.globalState.breadList;
-    if (list.length && list[list.length - 1].name != title) {
-      setBreadItems(
-        list.concat([
-          {
-            name: title,
-            query: '',
-            path: '',
-          },
-        ]),
-      );
-    } else {
-      setBreadItems(list);
-    }
-  }, [state.globalState.breadList, title]); */
-
-  // const { num } = useCollectionItems(name, bucketListed);
-  // console.log('breadItems -=---->', breadItems);
-
   return (
     <Container>
-      {/* <MyBreadcrumb>
-        {breadItems.map((item: any, index: number) => {
-          return (
-            <MyBreadcrumbItem
-              key={index}
-              isCurrentPage={index === breadItems.length - 1}
-              onClick={() => {
-                state.globalDispatch({
-                  type: 'DEL_BREAD',
-                  name: item.name,
-                });
-              }}
-            >
-              <BreadcrumbLink fontSize="16px" as="span">
-                <Link
-                  to={`${item.path}` + (item.query ? '?' + item.query : '')}
-                >
-                  {item?.name?.replace('+', ' ')}
-                </Link>
-              </BreadcrumbLink>
-            </MyBreadcrumbItem>
-          );
-        })}
-      </MyBreadcrumb> */}
+      <MyBreadcrumb
+        root={{
+          bucketName: bucketData.bucketInfo.bucketName,
+        }}
+      />
 
       <ResourceInfo gap={100} padding="30px 0">
         <ImgCon relation={relation} itemInfo={itemInfo} />
@@ -188,16 +140,13 @@ const Resource = () => {
           )}
         </Info>
       </ResourceInfo>
-
       <Hr mb="55px" />
-
       <Overview
         itemInfo={itemInfo}
         relation={relation}
         bucketData={bucketData}
         groupData={groupData}
       />
-
       {itemInfo?.type === 'COLLECTION' && (
         <>
           <Hr mt="55px" />
@@ -232,18 +181,6 @@ const Hr = styled(Box)`
   background-color: #373943;
 `;
 
-const MyBreadcrumb = styled(Breadcrumb)`
-  /* background: #373943; */
-  font-style: normal;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 18px;
-
-  color: #ffffff;
-`;
-
-const MyBreadcrumbItem = styled(BreadcrumbItem)``;
-
 const Info = styled(Flex)`
   padding-top: 50px;
   padding-bottom: 50px;