Remove homepage relative, add reroute logic and fix nav

package.json

@@ -2,7 +2,6 @@
   "name": "audius-protocol-dashboard",
   "version": "0.1.0",
   "private": true,
-  "homepage": ".",
   "dependencies": {
     "@apollo/client": "^3.3.7",
     "@audius/libs": "1.1.5",

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 && (

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 (

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