Fixed randomize routing

damienallen · May 26, 2024 · 2e4d93a · 2e4d93a
1 parent 3078347
commit 2e4d93a
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 38 deletions.
diff --git a/app/src/components/ProcessingStatus.tsx b/app/src/components/ProcessingStatus.tsx
@@ -1,6 +1,6 @@
 import { Buildings } from '@phosphor-icons/react/Buildings'
+import { DiceThree } from '@phosphor-icons/react/DiceThree'
 import { Gear } from '@phosphor-icons/react/Gear'
-
 import { Tooltip } from '@mantine/core'
 import { createUseStyles } from 'react-jss'
 import { observer } from 'mobx-react'
@@ -15,9 +15,26 @@ const useStyles = createUseStyles({
         userSelect: 'none',
         padding: '0 8px',
     },
-    spin: {
+    gear: {
         animation: 'spin 5s linear infinite',
     },
+    icon: {
+        '& .dice': {
+            display: 'none',
+        },
+        '& .city': {
+            display: 'inline-block',
+        },
+        '&:hover': {
+            '& .dice': {
+                display: 'inline-block',
+            },
+            '& .city': {
+                display: 'none',
+            },
+            cursor: 'pointer',
+        },
+    },
 })
 
 export const ProcessingStatus = observer(() => {
@@ -28,10 +45,15 @@ export const ProcessingStatus = observer(() => {
         <div className={classes.container}>
             {contours.areProcessing ? (
                 <Tooltip label="Generating contours...">
-                    <Gear size={28} weight="duotone" className={classes.spin} />
+                    <Gear size={28} weight="duotone" className={classes.gear} />
                 </Tooltip>
             ) : (
-                <Buildings size={28} weight="duotone" />
+                <Tooltip label="Randomize" className={classes.icon}>
+                    <span onClick={() => contours.randomizeFeature()}>
+                        <DiceThree size={28} weight="duotone" className="dice" />
+                        <Buildings size={28} weight="duotone" className="city" />
+                    </span>
+                </Tooltip>
             )}
         </div>
     )

diff --git a/app/src/components/RouteChangeHandler.tsx b/app/src/components/RouteChangeHandler.tsx
@@ -10,7 +10,11 @@ export const RouteChangeHandler = observer(() => {
 
     useEffect(() => {
         if (app.features) {
-            contours.featureFromPath(location.pathname)
+            if (location.pathname === '/') {
+                contours.randomizeFeature(false)
+            } else {
+                contours.featureFromPath(location.pathname)
+            }
         }
     }, [app.features, location])
 

diff --git a/app/src/index.tsx b/app/src/index.tsx
@@ -1,15 +1,7 @@
 import './index.css'
 
-import { RouterProvider, createBrowserRouter } from 'react-router-dom'
-
-import { App } from './components/App.tsx'
 import ReactDOM from 'react-dom/client'
-
-const router = createBrowserRouter([
-    {
-        path: '*',
-        element: <App />,
-    },
-])
+import { RouterProvider } from 'react-router-dom'
+import { router } from './router'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(<RouterProvider router={router} />)
diff --git a/app/src/router.tsx b/app/src/router.tsx
@@ -0,0 +1,9 @@
+import { App } from './components/App.tsx'
+import { createBrowserRouter } from 'react-router-dom'
+
+export const router = createBrowserRouter([
+    {
+        path: '*',
+        element: <App />,
+    },
+])
diff --git a/app/src/stores.tsx b/app/src/stores.tsx
@@ -5,6 +5,7 @@ import { MapGeoJSONFeature } from 'maplibre-gl'
 import React from 'react'
 import { makeAutoObservable } from 'mobx'
 import packageJson from '../package.json'
+import { router } from './router'
 
 const worker = new Worker(new URL('./contour.worker.ts', import.meta.url), {
     type: 'module',
@@ -200,34 +201,34 @@ export class ContoursStore {
         return this.data?.url
     }
 
-    randomizeFeature = () => {
-        this.setSelected({
-            URAU_CODE: 'NL037C',
-            URAU_CATG: 'C',
-            CNTR_CODE: 'NL',
-            URAU_NAME: 'Rotterdam ',
-            CITY_CPTL: null,
-            FUA_CODE: 'NL037F',
-            AREA_SQM: 562733118.219429,
-            NUTS3_2021: 'NL33C',
-            FID: 'NL037C',
-        })
+    randomizeFeature = (setPath: boolean = true) => {
+        if (setPath) {
+            router.navigate(`/rotterdam`)
+        } else {
+            this.setSelected({
+                URAU_CODE: 'NL037C',
+                URAU_CATG: 'C',
+                CNTR_CODE: 'NL',
+                URAU_NAME: 'Rotterdam ',
+                CITY_CPTL: null,
+                FUA_CODE: 'NL037F',
+                AREA_SQM: 562733118.219429,
+                NUTS3_2021: 'NL33C',
+                FID: 'NL037C',
+            })
+        }
     }
 
     featureFromPath = (path: string) => {
         const cityName = path.replace('/', '')
-        if (cityName === '') {
-            this.randomizeFeature()
-        }
-
         const feature = this.root.app.features.find(
             (feat: MapGeoJSONFeature) => slugify(feat.properties.URAU_NAME) === cityName
         )
         if (feature) {
             this.setSelected(feature.properties)
         } else {
             console.log(`Unable to find city '${cityName}', randomizing...`)
-            this.randomizeFeature()
+            router.navigate('/')
         }
     }
 
@@ -346,9 +347,3 @@ export const StoreProvider = ({ children }: { children: any }) => (
 )
 
 export const useStores = () => React.useContext(StoreContext)
-
-let timer: number
-const debounce = (func: any, timeout = 350) => {
-    clearTimeout(timer)
-    timer = setTimeout(func, timeout)
-}