Revert "Moving to hashrouter"

This reverts commit cd42aa7.

Author: Yukthiw

Eplant/UI/Layout/ViewContainer/index.tsx

@@ -1,12 +1,13 @@
-import { useState } from 'react'
-import { Outlet } from 'react-router-dom'
+import { useEffect, useState } from 'react'
+import { Outlet, useLocation, useNavigate, useParams } from 'react-router-dom'
 
 import { useConfig } from '@eplant/config'
 import {
   useActiveGeneId,
   useActiveViewId,
   useGeneticElements,
   usePrinting,
+  useSpecies,
 } from '@eplant/state'
 import Modal from '@eplant/UI/Modal'
 import ErrorBoundary from '@eplant/util/ErrorBoundary'
@@ -36,9 +37,83 @@ export function ViewContainer<T, S, A>({ ...props }) {
   const [printing, setPrinting] = usePrinting()
   const [viewingCitations, setViewingCitations] = useState(false)
   const { views } = useConfig()
-  const [genes] = useGeneticElements()
-  const [activeGeneId] = useActiveGeneId()
-  const [activeViewId] = useActiveViewId()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const params = useParams()
+  const [speciesList] = useSpecies()
+  const [genes, setGenes] = useGeneticElements()
+  const [activeGeneId, setActiveGeneId] = useActiveGeneId()
+  const [activeViewId, setActiveViewId] = useActiveViewId()
+  const [geneNotFound, setGeneNotFound] = useState(false)
+
+  // On app url change, make sure loaded gene and view aligns with URL
+  useEffect(() => {
+    const loadGene = async (geneid: string) => {
+      // TODO: This is super jank, should probably write some better utilities for loading genes
+      const species = speciesList.find(
+        (species) => species.name === 'Arabidopsis'
+      )
+      const newGene = await species?.api.searchGene(geneid)
+      if (newGene) {
+        setGenes([...genes, newGene])
+      } else {
+        setGeneNotFound(true)
+        setActiveGeneId('')
+      }
+    }
+    if (params.geneid) {
+      if (params.geneid !== activeGeneId) {
+        if (!genes.find((g) => g.id === params.geneid)) {
+          loadGene(params.geneid)
+        }
+        if (!geneNotFound) setActiveGeneId(params.geneid)
+      }
+    } else {
+      // Set active gene to first available if one is already loaded
+      if (genes.length > 0) {
+        setActiveGeneId(genes[0].id)
+      } else {
+        setActiveGeneId('')
+      }
+    }
+
+    // Set activeview
+    const urlView =
+      views.find((view) => view.id === location.pathname.split('/')[1]) ??
+      GeneInfoViewMetadata
+
+    setActiveViewId(urlView.id)
+  }, [])
+
+  // On when the activegene or view changes, update path
+  useEffect(() => {
+    const oldPathSegments = location.pathname
+      .split('/')
+      .filter((segment) => segment !== '')
+
+    const newPathSegments = []
+    if (activeViewId) {
+      newPathSegments.push(activeViewId)
+    }
+    if (activeGeneId) {
+      newPathSegments.push(activeGeneId)
+    }
+
+    if (newPathSegments.length > 0) {
+      let newPath
+      if (
+        oldPathSegments.length > 0 &&
+        oldPathSegments[0] == newPathSegments[0]
+      ) {
+        // If the view is the same we want to retain quary params in url, else we can wipe
+        // them and have URLStateManager handle things
+        newPath = '/' + newPathSegments.join('/') + location.search
+      } else {
+        newPath = '/' + newPathSegments.join('/')
+      }
+      navigate(newPath)
+    }
+  }, [activeGeneId, activeViewId])
 
   // Get view and gene objects once everything resolves
   const activeView =

Eplant/main.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react'
 import { Provider } from 'jotai'
 import * as ReactDOM from 'react-dom/client'
-import { createHashRouter, Navigate, RouterProvider } from 'react-router-dom'
+import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom'
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
@@ -20,7 +20,7 @@ import { Config, defaultConfig } from './config'
 import Eplant from './Eplant'
 
 import './css/index.css'
-const router = createHashRouter(
+const router = createBrowserRouter(
   [
     {
       path: '/',