From 04a47c3716a959c85d84ad111874d8cbc21366af Mon Sep 17 00:00:00 2001
From: Joseph Lee <joeylee0925@gmail.com>
Date: Fri, 19 Feb 2021 16:25:50 -0500
Subject: [PATCH] Merge pull request #63 from AudiusProject/jowlee-hash-router

Hash Routing
---
 packages/protocol-dashboard/src/App.tsx       |  4 ++--
 .../src/components/Header/Header.tsx          |  3 +++
 .../src/components/Nav/Nav.tsx                |  5 ++++-
 .../src/hooks/useRerouteLegacy.ts             | 22 +++++++++++++++++++
 4 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 packages/protocol-dashboard/src/hooks/useRerouteLegacy.ts

diff --git a/packages/protocol-dashboard/src/App.tsx b/packages/protocol-dashboard/src/App.tsx
index ebf65213c82..0ffdaeaa841 100644
--- a/packages/protocol-dashboard/src/App.tsx
+++ b/packages/protocol-dashboard/src/App.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { Provider } from 'react-redux'
 import { ConnectedRouter } from 'connected-react-router'
 import { Switch, Route } from 'react-router'
-import { createBrowserHistory } from 'history'
+import { createHashHistory } from 'history'
 
 import Header from 'components/Header'
 import Home from 'containers/Home'
@@ -26,7 +26,7 @@ import Proposal from 'containers/Proposal'
 import { createStyles } from 'utils/mobile'
 
 const styles = createStyles({ desktopStyles, mobileStyles })
-const history = createBrowserHistory()
+const history = createHashHistory()
 const store = createStore(history)
 
 const Root = () => (
diff --git a/packages/protocol-dashboard/src/components/Header/Header.tsx b/packages/protocol-dashboard/src/components/Header/Header.tsx
index d8c1568d24e..a0d2fc57eb7 100644
--- a/packages/protocol-dashboard/src/components/Header/Header.tsx
+++ b/packages/protocol-dashboard/src/components/Header/Header.tsx
@@ -11,6 +11,7 @@ import desktopStyles from './Header.module.css'
 import mobileStyles from './HeaderMobile.module.css'
 import { createStyles } from 'utils/mobile'
 import MobileNav from 'components/MobileNav'
+import useRerouteLegacy from 'hooks/useRerouteLegacy'
 
 const styles = createStyles({ desktopStyles, mobileStyles })
 
@@ -23,6 +24,8 @@ const Header: React.FC<HeaderProps> = ({ className }) => {
   const isMobile = useIsMobile()
   const [showMobileNav, setShowMobileNav] = useState(false)
 
+  useRerouteLegacy()
+
   return (
     <div className={clsx(styles.container, { [className!]: !!className })}>
       {isMobile && (
diff --git a/packages/protocol-dashboard/src/components/Nav/Nav.tsx b/packages/protocol-dashboard/src/components/Nav/Nav.tsx
index bffb5a550ec..48e925b3c5c 100644
--- a/packages/protocol-dashboard/src/components/Nav/Nav.tsx
+++ b/packages/protocol-dashboard/src/components/Nav/Nav.tsx
@@ -9,6 +9,7 @@ import { AppState } from 'store/types'
 import styles from './Nav.module.css'
 import * as routes from 'utils/routes'
 import { Button, ButtonType } from '@audius/stems'
+import { useLocation } from 'react-router-dom'
 
 const navRoutes = [
   { matchParams: { path: routes.HOME, exact: true }, text: 'OVERVIEW' },
@@ -32,7 +33,9 @@ const NavButton = (props: NavButtonProps) => {
     pushRoute,
     matchParams: { path }
   } = props
-  const isActiveRoute = !!matchPath(window.location.pathname, props.matchParams)
+  const location = useLocation()
+
+  const isActiveRoute = !!matchPath(location.pathname, props.matchParams)
   const onButtonClick = useCallback(() => pushRoute(path), [path, pushRoute])
 
   return (
diff --git a/packages/protocol-dashboard/src/hooks/useRerouteLegacy.ts b/packages/protocol-dashboard/src/hooks/useRerouteLegacy.ts
new file mode 100644
index 00000000000..68cad3563f2
--- /dev/null
+++ b/packages/protocol-dashboard/src/hooks/useRerouteLegacy.ts
@@ -0,0 +1,22 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
+/**
+ * NOTE: updated the route from the legacy url structure to hash routing.
+ * ie. /services/service-providers => /#/services/service-providers
+ *
+ * NOTE: When switching to being served from ipfs, this needs to be updated for the
+ * client to be loaded via ipns
+ */
+
+// -------------------------------- Hooks  --------------------------------
+export const useRerouteLegacy = () => {
+  const location = useLocation()
+  useEffect(() => {
+    if (window.location.pathname !== '/') {
+      window.history.replaceState({}, '', `/#${window.location.pathname}`)
+    }
+  }, [location])
+}
+
+export default useRerouteLegacy