Drop hash router (#177)

Switching from HashRouter to BrowserRouter. This will switch urls from like https://near.social/#/mob.near/widget/Welcome to https://near.social/mob.near/widget/Welcome and automatically redirect.
NearSocial · Jul 28, 2023 · 5ff6b26 · 5ff6b26
1 parent db725d8
commit 5ff6b26
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 17 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

diff --git a/config/webpack.development.js b/config/webpack.development.js
@@ -43,6 +43,9 @@ module.exports = () => ({
     static: path.resolve(__dirname, "../dist"),
     port: 3000,
     compress: true,
+    historyApiFallback: {
+      disableDotRule: true,
+    },
   },
   plugins: [new HotModuleReplacementPlugin()],
 });
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "0.12.3",
+  "version": "0.13.0",
   "homepage": "/",
   "private": true,
   "dependencies": {

diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="favicon.png" />
+    <link rel="icon" href="/favicon.png" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
@@ -16,12 +16,12 @@
     <meta property="og:type" content="website">
     <meta property="og:title" content="Near Social" />
     <meta property="og:description" content="Social data protocol built on NEAR" />
-    <link rel="apple-touch-icon" href="favicon.png" />
+    <link rel="apple-touch-icon" href="/favicon.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <title>Near Social</title>
   </head>
   <body>

diff --git a/src/App.js b/src/App.js
@@ -6,7 +6,7 @@ import "react-bootstrap-typeahead/css/Typeahead.css";
 import "react-bootstrap-typeahead/css/Typeahead.bs5.css";
 import "bootstrap/dist/js/bootstrap.bundle";
 import "App.scss";
-import { HashRouter as Router, Link, Route, Switch } from "react-router-dom";
+import { BrowserRouter as Router, Link, Route, Switch } from "react-router-dom";
 import EditorPage from "./pages/EditorPage";
 import ViewPage from "./pages/ViewPage";
 import { setupWalletSelector } from "@near-wallet-selector/core";
@@ -47,9 +47,8 @@ function App(props) {
   const { initNear } = useInitNear();
   const near = useNear();
   const account = useAccount();
-  const accountId = account.accountId;
 
-  const location = window.location;
+  const accountId = account.accountId;
 
   useEffect(() => {
     initNear &&

diff --git a/src/hooks/useHashRouterLegacy.js b/src/hooks/useHashRouterLegacy.js
@@ -0,0 +1,37 @@
+import { useHistory } from "react-router-dom";
+import React, { useCallback, useEffect } from "react";
+
+export function useHashRouterLegacy() {
+  const history = useHistory();
+
+  const onHashChange = useCallback(
+    (event) => {
+      let url = event.newURL.split("#").pop() ?? "/";
+
+      if (url[0] === "/") {
+        history && history.replace(url);
+      }
+    },
+    [history]
+  );
+
+  useEffect(() => {
+    window.addEventListener("hashchange", onHashChange);
+
+    return () => {
+      window.removeEventListener("hashchange", onHashChange);
+    };
+  }, [onHashChange]);
+
+  useEffect(() => {
+    if (!history) {
+      return;
+    }
+    const currentUrl = window.location.href;
+
+    if (currentUrl.includes("#")) {
+      const path = currentUrl.split("#")[1];
+      history.replace(path);
+    }
+  }, [history]);
+}
diff --git a/src/hooks/useQuery.js b/src/hooks/useQuery.js
@@ -3,12 +3,5 @@ import React from "react";
 
 export function useQuery() {
   let { search } = useLocation();
-  if (location.search) {
-    if (!search) {
-      search = location.search;
-    } else {
-      search += `&${location.search.substring(1)}`;
-    }
-  }
   return React.useMemo(() => new URLSearchParams(search), [search]);
 }
diff --git a/src/pages/EditorPage.js b/src/pages/EditorPage.js
@@ -21,6 +21,7 @@ import {
   StorageType,
   toPath,
 } from "../components/Editor/FileTab";
+import { useHashRouterLegacy } from "../hooks/useHashRouterLegacy";
 
 const LsKey = "social.near:v01:";
 const EditorLayoutKey = LsKey + "editorLayout:";
@@ -41,6 +42,7 @@ const Layout = {
 };
 
 export default function EditorPage(props) {
+  useHashRouterLegacy();
   const { widgetSrc } = useParams();
   const history = useHistory();
   const setWidgetSrc = props.setWidgetSrc;
@@ -595,7 +597,7 @@ export default function EditorPage(props) {
                   {path && accountId && (
                     <a
                       className="btn btn-outline-primary"
-                      href={`#/${widgetPath}`}
+                      href={`/${widgetPath}`}
                       target="_blank"
                       rel="noopener noreferrer"
                     >

diff --git a/src/pages/EmbedPage.js b/src/pages/EmbedPage.js
@@ -2,12 +2,14 @@ import React, { useEffect, useState } from "react";
 import { Widget } from "near-social-vm";
 import { useParams } from "react-router-dom";
 import { useQuery } from "../hooks/useQuery";
+import { useHashRouterLegacy } from "../hooks/useHashRouterLegacy";
 
 export default function EmbedPage(props) {
+  useHashRouterLegacy();
+
   const { widgetSrc } = useParams();
   const query = useQuery();
   const [widgetProps, setWidgetProps] = useState({});
-
   const src = widgetSrc || props.widgets.default;
 
   useEffect(() => {

diff --git a/src/pages/ViewPage.js b/src/pages/ViewPage.js
@@ -2,8 +2,11 @@ import React, { useEffect, useState } from "react";
 import { Widget } from "near-social-vm";
 import { useParams } from "react-router-dom";
 import { useQuery } from "../hooks/useQuery";
+import { useHashRouterLegacy } from "../hooks/useHashRouterLegacy";
 
 export default function ViewPage(props) {
+  useHashRouterLegacy();
+
   const { widgetSrc } = useParams();
   const query = useQuery();
   const [widgetProps, setWidgetProps] = useState({});

diff --git a/webpack.config.js b/webpack.config.js
@@ -7,7 +7,6 @@ const HTMLWebpackPlugin = require("html-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const { merge } = require("webpack-merge");
 const loadPreset = require("./config/presets/loadPreset");
-const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
 const loadConfig = (mode) => require(`./config/webpack.${mode}.js`)(mode);
 
 module.exports = function (env) {
@@ -83,6 +82,7 @@ module.exports = function (env) {
           template: `${paths.publicPath}/index.html`,
           favicon: `${paths.publicPath}/favicon.png`,
           robots: `${paths.publicPath}/robots.txt`,
+          publicPath: "/",
         }),
         new webpack.ProgressPlugin(),
         new webpack.ProvidePlugin({
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,6 +10,7 @@ @@
     # production
     /build
+    /dist
     # misc
     .DS_Store
@@ Expand Down @@