fix routing on data visualizer

Author: Jesperpaulsen

firebase.json

@@ -8,6 +8,12 @@
       "firebase.json",
       "**/.*",
       "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
     ]
   },
   "emulators": {

packages/data-visualizer/src/components/common/Modal.tsx

@@ -7,7 +7,7 @@ interface Props {
 const Modal: FunctionalComponent<Props> = ({ close, children }) => {
   return (
     <div
-      className="fixed top-0 left-0 w-screen h-screen flex items-center justify-center backdrop-filter backdrop-blur-sm"
+      className="fixed top-0 left-0 w-screen h-screen flex items-center justify-center backdrop-filter backdrop-blur-sm z-50"
       onClick={close}>
       <div className="bg-white p-4 pt-10 rounded-lg text-black relative">
         <button

packages/data-visualizer/src/router/Layout.tsx

@@ -9,26 +9,33 @@ import { UserContext } from '../contexts/User/UserContext'
 
 import { routeComponents } from './Router'
 
+const className = (activated: boolean) =>
+  activated ? 'text-primary' : 'text-black hover:text-primary cursor-pointer'
+
 const Layout: FunctionComponent = ({ children }) => {
   const { userState } = useContext(UserContext)
   const { usageState } = useContext(UsageContext)
 
   return (
     <div className="flex justify-start">
-      <div className="hidden md:block w-40 min-w-40 bg-secondary text-center h-screen pt-10">
+      <div className="hidden md:block w-40 min-w-40 bg-white text-center h-screen pt-10">
         {Object.entries(routeComponents).map(([key, value]) => {
           if (!value.label) return null
           return (
             <div className="pt-5 text-sm" key={key}>
-              <Link
-                className={
-                  window.location.pathname === key
-                    ? 'text-primary'
-                    : 'text-black hover:text-primary cursor-pointer'
-                }
-                href={key}>
-                {value.label}
-              </Link>
+              {value.external ? (
+                <div
+                  className={className(false)}
+                  onClick={() => window.open(value.external, '_blank')}>
+                  {value.label}
+                </div>
+              ) : (
+                <Link
+                  className={className(window.location.pathname === key)}
+                  href={key}>
+                  {value.label}
+                </Link>
+              )}
             </div>
           )
         })}

packages/data-visualizer/src/router/Router.tsx

@@ -26,6 +26,7 @@ export const routeComponents: {
     requireAuth?: boolean
     component: FunctionComponent
     label?: string
+    external?: string
   }
 } = {
   [ROUTES.DASHBOARD]: {
@@ -47,10 +48,8 @@ export const routeComponents: {
   [ROUTES.ABOUT]: {
     requireAuth: true,
     label: 'About',
-    component: () => {
-      window.open('https://climate.jesper.no/about', '_blank')
-      return null
-    }
+    external: 'https://climate.jesper.no/about',
+    component: () => null
   },
   [ROUTES.SIGN_OUT]: {
     requireAuth: false,