feat: auto redirect

bnb-chain · Nov 21, 2023 · 013b345 · 013b345
1 parent dca5a81
commit 013b345
Show file tree

Hide file tree

Showing 15 changed files with 349 additions and 137 deletions.
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "@babel/core": "^7.22.1",
     "@bnb-chain/greenfield-js-sdk": "1.0.3",
     "@dopex-io/web3-multicall": "^0.1.9",
+    "@ebay/nice-modal-react": "^1.2.13",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.tsx b/src/App.tsx
@@ -16,6 +16,7 @@ import { Route, Routes, HashRouter } from 'react-router-dom';
 import { ModalProvider } from './context/modal';
 import { GlobalProvider } from './context/global';
 import { WalletModalProvider } from './context/walletModal';
+import NiceModal from '@ebay/nice-modal-react';
 
 import './base/global.css';
 
@@ -27,6 +28,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import React from 'react';
 import { Detail } from './pages/Detail';
 import { Redirect } from './pages/Redirect';
+import { R } from './pages/R';
 
 export interface IRoute {
   children?: Array<IRoute>;
@@ -62,6 +64,10 @@ const routes: Array<IRoute> = [
     path: '/redirect',
     element: <Redirect />,
   },
+  {
+    path: '/r',
+    element: <R />,
+  },
   {
     path: '/folder',
     element: <Folder></Folder>,
@@ -173,25 +179,27 @@ function App() {
       <ThemeProvider theme={theme}>
         <QueryClientProvider client={queryClient}>
           <GlobalProvider>
-            <ModalProvider>
-              <WalletModalProvider>
-                <HashRouter>
-                  <Layout>
-                    <Routes>
-                      {routes.map((item: IRoute) => {
-                        return (
-                          <Route
-                            key={item.path}
-                            path={item.path}
-                            element={<RouteGuard>{item.element}</RouteGuard>}
-                          />
-                        );
-                      })}
-                    </Routes>
-                  </Layout>
-                </HashRouter>
-              </WalletModalProvider>
-            </ModalProvider>
+            <NiceModal.Provider>
+              <ModalProvider>
+                <WalletModalProvider>
+                  <HashRouter>
+                    <Layout>
+                      <Routes>
+                        {routes.map((item: IRoute) => {
+                          return (
+                            <Route
+                              key={item.path}
+                              path={item.path}
+                              element={<RouteGuard>{item.element}</RouteGuard>}
+                            />
+                          );
+                        })}
+                      </Routes>
+                    </Layout>
+                  </HashRouter>
+                </WalletModalProvider>
+              </ModalProvider>
+            </NiceModal.Provider>
           </GlobalProvider>
 
           <ReactQueryDevtools initialIsOpen />

diff --git a/src/components/detail/Bucket.tsx b/src/components/detail/Bucket.tsx
@@ -2,7 +2,12 @@ import styled from '@emotion/styled';
 import { SendIcon } from '@totejs/icons';
 import { Box, Button, Flex } from '@totejs/uikit';
 import _ from 'lodash';
-import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+import {
+  Link,
+  useLocation,
+  useNavigate,
+  useSearchParams,
+} from 'react-router-dom';
 import { useAccount } from 'wagmi';
 import { NoData } from '../../components/NoData';
 import List from '../../components/detail/List';
@@ -18,14 +23,15 @@ import {
   generateGroupName,
   trimLongStr,
 } from '../../utils';
+import { useCallback, useEffect } from 'react';
 
 /**
  * Have not been listed
  * Show bucket or object detail info
  */
 export const Bucket = () => {
-  const navigator = useNavigate();
   const [p] = useSearchParams();
+  const { search } = useLocation();
 
   const bucketId = p.get('bid') as string;
   const modalData = useModal();
@@ -45,22 +51,30 @@ export const Bucket = () => {
     address || '',
   );
 
-  if (!_.isEmpty(bucketItemInfo)) {
-    navigator(`/resource?id=${bucketItemInfo.id}`, {
-      replace: true,
+  const openListModal = useCallback(() => {
+    if (!bucketData) return;
+
+    const initInfo = {
+      bucket_name: bucketData.bucketInfo.bucketName,
+      create_at: bucketData.bucketInfo.createAt.low,
+    };
+    modalData.modalDispatch({
+      type: 'OPEN_LIST',
+      initInfo,
     });
-  }
+  }, [bucketData?.bucketInfo.bucketName, bucketData?.bucketInfo.createAt.low]);
 
-  // if (isLoading) {
-  //   return <Loader />;
-  // }
+  // auto open list modal
+  useEffect(() => {
+    const needOpenModal = p.get('openModal') as string;
+    if (!needOpenModal) return;
+    openListModal();
+  }, [p, bucketData]);
 
   if (!bucketData) {
     return <NoData />;
   }
 
-  console.log('bucketItemInfo', bucketItemInfo);
-
   return (
     <>
       <ResourceInfo gap={20}>
@@ -116,19 +130,7 @@ export const Bucket = () => {
           <ActionGroup gap={10} alignItems={'center'}>
             {address === bucketData.bucketInfo.owner &&
               _.isEmpty(bucketItemInfo) && (
-                <Button
-                  size={'sm'}
-                  onClick={async () => {
-                    const initInfo = {
-                      bucket_name: bucketData.bucketInfo.bucketName,
-                      create_at: bucketData.bucketInfo.createAt.low,
-                    };
-                    modalData.modalDispatch({
-                      type: 'OPEN_LIST',
-                      initInfo,
-                    });
-                  }}
-                >
+                <Button size={'sm'} onClick={openListModal}>
                   List
                 </Button>
               )}
@@ -225,36 +227,4 @@ const OwnCon = styled(Flex)`
   }
 `;
 
-const MarketInfo = styled(Flex)`
-  font-size: 32px;
-  color: #f0b90b;
-`;
-
-const Price = styled.div`
-  font-size: 20px;
-  color: #f0b90b;
-`;
-
 const ActionGroup = styled(Flex)``;
-
-const FileSize = styled.div`
-  margin-right: 6px;
-
-  font-style: normal;
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 18px;
-
-  color: #ffffff;
-`;
-
-const NoDataCon = styled(Flex)``;
-
-const NoDataTitle = styled.div`
-  font-size: 32px;
-  font-weight: 600;
-`;
-
-const NoDataSub = styled.div`
-  font-size: 20px;
-`;
diff --git a/src/components/detail/List.tsx b/src/components/detail/List.tsx
@@ -44,8 +44,6 @@ const ProfileList = (props: any) => {
 
   const { address } = useAccount();
 
-  const navigate = useNavigate();
-
   const [p] = useSearchParams();
   let bucketId = p.getAll('bid')[0];
   const ownerAddress = p.getAll('address')[0];
@@ -74,31 +72,8 @@ const ProfileList = (props: any) => {
             justifyContent={'flex-start'}
             gap={6}
             onClick={() => {
-              // let list = state.globalState.breadList;
-              if (list.slice(-1)[0].name !== bucketName) {
-                // const item = {
-                //   path: '/resource',
-                //   name: bucketName || 'Collection',
-                //   query: p.toString(),
-                // };
-                // state.globalDispatch({
-                //   type: 'ADD_BREAD',
-                //   item,
-                // });
-                // list = list.concat([item]);
-              }
-
-              const from = encodeURIComponent(JSON.stringify(list));
-              if (!object_info) {
-                navigator(
-                  `/folder?bid=${bucketId}&f=${encodeURIComponent(
-                    name,
-                  )}&address=${ownerAddress}&from=${from}`,
-                );
-              } else {
-                const { id } = object_info;
-                navigate(`/detail?bid=${bucketId}&oid=${id}`);
-              }
+              const { id } = object_info;
+              navigator(`/detail?bid=${bucketId}&oid=${id}`);
             }}
           >
             {data.children ? (
@@ -231,7 +206,7 @@ const ProfileList = (props: any) => {
                   );
 
                   const { id } = object_info;
-                  navigate(
+                  navigator(
                     `/resource?oid=${id}&bgn=${bgn}&address=${ownerAddress}&tab=dataList&from=${from}`,
                   );
                 }}

diff --git a/src/components/detail/Object.tsx b/src/components/detail/Object.tsx
@@ -19,6 +19,7 @@ import {
   parseFileSize,
   trimLongStr,
 } from '../../utils';
+import { useCallback, useEffect } from 'react';
 
 /**
  * Have not been listed
@@ -43,16 +44,33 @@ export const Object = () => {
   const { address } = useAccount();
   const { num } = useCollectionItems(bucketData?.bucketInfo.bucketName, false);
 
+  const openListModal = useCallback(() => {
+    if (!bucketData || !objectData) return;
+    const initInfo = {
+      bucket_name: bucketData.bucketInfo.bucketName,
+      object_name: objectData.objectInfo.objectName,
+      create_at: bucketData.bucketInfo.createAt.low,
+      payload_size: objectData.objectInfo.payloadSize.low,
+    };
+    modalData.modalDispatch({
+      type: 'OPEN_LIST',
+      initInfo,
+    });
+  }, [bucketData, modalData, objectData]);
+
+  // auto open list modal
+  useEffect(() => {
+    const needOpenModal = p.get('openModal') as string;
+    if (!needOpenModal) return;
+    openListModal();
+  }, [p, bucketData, objectData]);
+
   if (!_.isEmpty(objectItemInfo)) {
     navigator(`/resource?id=${objectItemInfo.id}`, {
       replace: true,
     });
   }
 
-  // if (isLoading) {
-  //   return <Loader />;
-  // }
-
   if (!objectData || !bucketData) {
     return <NoData />;
   }
@@ -112,21 +130,7 @@ export const Object = () => {
           <ActionGroup gap={10} alignItems={'center'}>
             {address === objectData.objectInfo.owner &&
               _.isEmpty(objectItemInfo) && (
-                <Button
-                  size={'sm'}
-                  onClick={async () => {
-                    const initInfo = {
-                      bucket_name: bucketData.bucketInfo.bucketName,
-                      object_name: objectData.objectInfo.objectName,
-                      create_at: bucketData.bucketInfo.createAt.low,
-                      payload_size: objectData.objectInfo.payloadSize.low,
-                    };
-                    modalData.modalDispatch({
-                      type: 'OPEN_LIST',
-                      initInfo,
-                    });
-                  }}
-                >
+                <Button size={'sm'} onClick={openListModal}>
                   List
                 </Button>
               )}

diff --git a/src/components/modal/DelistModal.tsx b/src/components/modal/DelistModal.tsx
@@ -60,7 +60,6 @@ export const DelistModal = (props: any) => {
 
   const [estimateGas, setEstimateGas] = useState('0');
   useEffect(() => {
-    console.log('groupId', groupId);
     if (!groupId) return;
 
     const estimate = async () => {