Hotfix/routes

build/webpack.base.js

@@ -24,7 +24,15 @@ const {
 } = require("./util");
 
 const copies = [];
-
+const ViewerPages = ["address", "contract", "proposal"];
+const htmlPluginConfig = {
+  template: path.resolve(ROOT, "./template.ejs"),
+  chunks: isProdMode ? ["runtime.app", "vendors", "app"] : ["app"],
+  name: "app",
+  title: "AELF Block Explorer",
+  favicon: isTestNet ? "public/favicon.test.ico" : "public/favicon.main.ico",
+  hash: true,
+};
 const baseConfig = {
   // entry: ENTRIES,
   entry: {
@@ -136,29 +144,17 @@ const baseConfig = {
     ],
   },
   plugins: [
-    // ...PAGES.map(({ name, config }) => {
-    //   let chunks = [name];
-    //   const filename = path.resolve(OUTPUT_PATH, config.name || `${name}.html`);
-    //   if (isProdMode) {
-    //     const runtime = `runtime.${name}`;
-    //     chunks = [runtime, "vendors", name];
-    //   }
-    //   return new HtmlWebpackPlugin({
-    //     template: path.resolve(ROOT, "./template.ejs"),
-    //     filename,
-    //     chunks,
-    //     name,
-    //     title: config.title,
-    //   });
-    // }),
+    // Compatible with old url
+    ...ViewerPages.map((ele) => {
+      const filename = `viewer/${ele}.html`;
+      return new HtmlWebpackPlugin({
+        filename,
+        ...htmlPluginConfig,
+      });
+    }),
     new HtmlWebpackPlugin({
-      template: path.resolve(ROOT, "./template.ejs"),
       filename: "index.html",
-      chunks: isProdMode ? ["runtime.app", "vendors", "app"] : ["app"],
-      name: "app",
-      title: "AELF Block Explorer",
-      favicon: isTestNet ? 'public/favicon.test.ico' : 'public/favicon.main.ico',
-      hash: true
+      ...htmlPluginConfig,
     }),
     new webpack.ProvidePlugin({
       React: "react",

build/webpack.dev.js

@@ -71,29 +71,6 @@ const devConfig = {
     // inline: false,
     historyApiFallback: true,
     proxy: proxyServer,
-    // before(app) {
-    //   app.all("*", (req, res, next) => {
-    //     let mockFile = mockMapper[req.path];
-    //     if (isObject(mockFile)) {
-    //       mockFile = mockFile[req.query.path];
-    //     }
-    //     if (mockFile && devMode === "local") {
-    //       res.sendFile(
-    //         path.resolve(__dirname, mockFile),
-    //         {
-    //           headers: {
-    //             "Content-Type": "application/json; charset=utf-8",
-    //           },
-    //         },
-    //         (err) => {
-    //           err && console.error(err);
-    //         }
-    //       );
-    //     } else {
-    //       next();
-    //     }
-    //   });
-    // },
   },
 };
 

src/App.js

@@ -9,24 +9,23 @@ import HeaderBlank from "./components/Header/HeaderBlank";
 import BrowserFooter from "./components/Footer/Footer";
 import BrowserBreadcrumb from "./components/Breadcrumb/Breadcrumb";
 import Container from "./components/Container/Container";
-import { PageRouter } from "./routes/routes";
+import { PageRouter, RouterGurad } from "./routes/routes";
 import { useLocation } from "react-use";
 
 import "./App.less";
 
 function App() {
-  const { pathname } = useLocation()
-
+  const { pathname } = useLocation();
   const back2Top = useCallback(() => {
-    const app = document.querySelector('#app')
+    const app = document.querySelector("#app");
     if (app) {
-      app.scrollIntoView({ block: 'start', behavior: 'auto' })
+      app.scrollIntoView({ block: "start", behavior: "auto" });
     }
-  }, [])
+  }, []);
 
   useEffect(() => {
-    back2Top()
-  }, [pathname])
+    back2Top();
+  }, [pathname]);
 
   return (
     <Suspense fallback={null}>
@@ -36,16 +35,13 @@ function App() {
           <HeaderBlank />
           <BrowserBreadcrumb />
           <Container>
-            <PageRouter />
+            <RouterGurad routes={PageRouter}></RouterGurad>
           </Container>
           <BrowserFooter />
         </BrowserRouter>
       </div>
     </Suspense>
   );
 }
-// if (module.hot) {
-//   module.hot.accept();
-// }
-// export default hot(App);
+
 export default App;

src/routes/routes.js

@@ -3,58 +3,72 @@
  * @author huangzongzhe
  * TODO: details modified to Resource
  */
-import React, { lazy } from "react";
-import { Navigate, useRoutes } from "react-router";
-
+import React, { lazy, useEffect, useState } from "react";
+import { Navigate, useLocation, useNavigate, useRoutes } from "react-router";
 import { ProposalRouter } from "../pages/Proposal/routes";
+import { guard } from "utils/guard";
 
 // Notice: we need register the route in Breadcurmb.js.
 // If not, we will always turn to '/'
 const HomePage = lazy(() => import("../pages/Home/Home"));
 const BlocksPage = lazy(() => import("../pages/Blocks/BlockList"));
 const BlockDetailPage = lazy(() => import("../pages/BlockDetail/BlockDetail"));
 const TxsPage = lazy(() => import("../pages/Txs/TransactionList"));
-const TxsDetailPage = lazy(() => import("../pages/TxsDetail/TransactionDetail"));
+const TxsDetailPage = lazy(() =>
+  import("../pages/TxsDetail/TransactionDetail")
+);
 const VotePage = lazy(() => import("../pages/Vote/Vote"));
 const Resource = lazy(() => import("../pages/Resource/Resource"));
 const ResourceDetail = lazy(() =>
   import("../pages/ResourceDetail/ResourceDetail")
 );
 const Accounts = lazy(() => import("../pages/Accounts/Accounts"));
 const Contracts = lazy(() => import("../pages/Contracts/Contracts"));
-const AddressDetail = lazy(() => import("../pages/AddressDetail/AddressDetail"));
+const AddressDetail = lazy(() =>
+  import("../pages/AddressDetail/AddressDetail")
+);
 const Tokens = lazy(() => import("../pages/Tokens/Tokens"));
 const TokenInfo = lazy(() => import("../pages/Token/Token"));
 const SearchFailed = lazy(() => import("../pages/SearchFailed/SearchFailed"));
-const SearchInvalid = lazy(() => import("../pages/SearchInvalid/SearchInvalid"));
+const SearchInvalid = lazy(() =>
+  import("../pages/SearchInvalid/SearchInvalid")
+);
 
 // eslint-disable-next-line import/prefer-default-export
-export const PageRouter = () =>
-  useRoutes(
-    ProposalRouter.concat([
-      { path: "/", element: <HomePage /> },
-      { path: "/blocks", element: <BlocksPage /> },
-      { path: "/unconfirmedBlocks", element: <BlocksPage /> },
-      { path: "/block/:id", element: <BlockDetailPage /> },
-      { path: "/txs", element: <TxsPage /> },
-      { path: "/unconfirmedTxs", element: <TxsPage /> },
-      { path: "/txs/block", element: <TxsPage /> },
-      { path: "/tx/:id", element: <TxsDetailPage /> },
-      { path: "/vote", element: <Navigate to='/vote/election' /> },
-      { path: "/vote/*", element: <VotePage /> },
-      { path: "/resource", element: <Resource /> },
-      { path: "/resourceDetail/:id", element: <ResourceDetail /> },
-      { path: "/token", element: <Tokens /> },
-      { path: "/token/:symbol", element: <TokenInfo /> },
-      { path: "/search-invalid/:string", element: <SearchInvalid /> },
-      { path: "/search-invalid/*", element: <SearchInvalid /> },
-      { path: "/search-failed", element: <SearchFailed /> },
-      { path: "/accounts", element: <Accounts /> },
-      // { path: "/contract", element: <Accounts /> },
-      { path: "/address/:address", element: <AddressDetail /> },
-      { path: "/contract/:address", element: <AddressDetail /> },
-      { path: "/address/:address/:codeHash", element: <AddressDetail /> },
-      { path: "/contracts", element: <Contracts /> },
-      { path: "*", element: <Navigate to='/' /> },
-    ])
-  );
+export const PageRouter = ProposalRouter.concat([
+  { path: "/", element: <HomePage /> },
+  { path: "/blocks", element: <BlocksPage /> },
+  { path: "/unconfirmedBlocks", element: <BlocksPage /> },
+  { path: "/block/:id", element: <BlockDetailPage /> },
+  { path: "/txs", element: <TxsPage /> },
+  { path: "/unconfirmedTxs", element: <TxsPage /> },
+  { path: "/txs/block", element: <TxsPage /> },
+  { path: "/tx/:id", element: <TxsDetailPage /> },
+  { path: "/vote", element: <Navigate to='/vote/election' /> },
+  { path: "/vote/*", element: <VotePage /> },
+  { path: "/resource", element: <Resource /> },
+  { path: "/resourceDetail/:id", element: <ResourceDetail /> },
+  { path: "/token", element: <Tokens /> },
+  { path: "/token/:symbol", element: <TokenInfo /> },
+  { path: "/search-invalid/:string", element: <SearchInvalid /> },
+  { path: "/search-invalid/*", element: <SearchInvalid /> },
+  { path: "/search-failed", element: <SearchFailed /> },
+  { path: "/accounts", element: <Accounts /> },
+  // { path: "/contract", element: <Accounts /> },
+  { path: "/address/:address", element: <AddressDetail /> },
+  { path: "/contract/:address", element: <AddressDetail /> },
+  { path: "/address/:address/:codeHash", element: <AddressDetail /> },
+  { path: "/contracts", element: <Contracts /> },
+  { path: "*", element: <Navigate to='/' /> },
+]);
+
+export const RouterGurad = ({ routes }) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  let [bo, setBo] = useState(false);
+  useEffect(() => {
+    setBo(guard(location, navigate, routes));
+  }, [location, navigate, routes]);
+  const Route = useRoutes(routes);
+  return bo ? Route : null;
+};

src/utils/guard.js

@@ -0,0 +1,45 @@
+// v1.2.2 change some url so have to map it
+const RANDOM_URL_MAP = {
+  address: "accounts",
+  contract: "contracts",
+  token: "token",
+};
+//global routes guard
+export function guard(location, navigate) {
+  const { pathname } = location;
+  const hash = location.hash;
+  let url = "";
+  let _,
+    route = "",
+    rest = [];
+  let item = "";
+  //compatible with old url
+  if (hash) {
+    const decodeHash = decodeURIComponent(hash).substring(1);
+    if (decodeHash.indexOf("viewer") > -1) {
+      // handle url such as `/address?#http%3A%2F%2F10.147.20.67%3A8888%2Fviewer%2Faddress.html%23%2Faddress%2FYUW9zH5GhRboT5JK4vXp5BLAfCDv28rRmTQwo418FuaJmkSg8`
+      // and then jump to `/viewer/address.html#/address/YUW9zH5GhRboT5JK4vXp5BLAfCDv28rRmTQwo418FuaJmkSg8`
+      url = decodeHash;
+    } else if (pathname.indexOf("viewer") > -1) {
+      // handle url such as `/viewer/address.html#/address/YUW9zH5GhRboT5JK4vXp5BLAfCDv28rRmTQwo418FuaJmkSg8`
+      if (hash.indexOf("random") > -1) {
+        // handle url sunch as `/address?#http%3A%2F%2F10.147.20.67%3A8888%2Fviewer%2Faddress.html%23%2Faddress%3Frandom%3D9337b6a0`
+        // remove #/
+        route = hash.split("?")[0].substr(2);
+        url = RANDOM_URL_MAP[route];
+      } else if (pathname.indexOf("proposal") > -1) {
+        // handle proposal, becasue we add '/proposal' as parent url after repo merge
+        [_, route, ...rest] = hash.split("/");
+        item = rest.join("/");
+        url = `/proposal/${route}/${item}`;
+      } else {
+        [_, route, ...rest] = hash.split("/");
+        item = rest.join("/");
+        url = item ? `/${route}/${item}` : `/${route}`;
+      }
+    }
+    navigate(url);
+    return false;
+  }
+  return true;
+}