fix: remove toast on route change, vehicle marker pane z-index.

packages/components/src/toast/mod.tsx

@@ -15,15 +15,14 @@ type Positions =
  | 'botom right'
 type Variant = 'filled' | 'standard' | 'outlined'
 interface ToasterProps {
- type: 'info' | 'success' | 'warning' | 'error'
- message: string
+ type?: 'info' | 'success' | 'warning' | 'error'
+ message?: string
  position?: Positions
  variant?: Variant
  timeout?: number
+ open?: boolean
 }
-interface ToasterState extends ToasterProps {
- open: boolean
-}
+type ToasterState = ToasterProps
 
 const defaultState: ToasterState = {
  open: false,
@@ -54,27 +53,27 @@ const Toaster: FC<{ anchor?: Positions; kind?: Variant }> = ({ anchor, kind }) =
  const pos = { vertical, horizontal } as SnackbarOrigin
 
  useEffect(() => {
- const onOpen = (evt: CustomEvent) => {
+ const onToast = (evt: CustomEvent) => {
  setState(prev => ({
  ...prev,
  ...evt.detail,
- open: true
+ open: evt.detail.open ?? true
  }))
  }
 
- window.addEventListener(EVENT_NAME, onOpen as EventListener)
+ window.addEventListener(EVENT_NAME, onToast as EventListener)
 
  return () => {
- window.removeEventListener(EVENT_NAME, onOpen as EventListener)
+ window.removeEventListener(EVENT_NAME, onToast as EventListener)
  }
  }, [])
 
  return (
  <Snackbar open={open} autoHideDuration={timeout} anchorOrigin={pos} onClose={onClose}>
  <Alert
- type={type}
+ type={type ?? 'info'}
  variant={variant ?? kind ?? 'standard'}
- message={message}
+ message={message ?? ''}
  onClose={onClose}
  />
  </Snackbar>

packages/ui/src/components/formItem.tsx

@@ -44,17 +44,6 @@ const getGap = ({ direction, gap }: LabelProps) => {
 
  return '8px'
 }
-const getGrow = ({ direction, grow }: LabelProps) => {
- if (typeof grow === 'number') {
- return grow
- }
-
- if (direction === 'vertical') {
- return 0
- }
-
- return 1
-}
 const getJustifyContent = ({ direction, justifyContent }: LabelProps) => {
  if (justifyContent) {
  return justifyContent
@@ -79,7 +68,6 @@ const Label = styled.label<LabelProps>`
  }
  span:last-child {
  display: flex;
- flex-grow: ${getGrow};
  }
 `
 

packages/ui/src/home.tsx

@@ -69,9 +69,9 @@ const Home: FC<HomeProps> = () => {
  refetchInterval: 10_000,
  onSuccess(data) {
  update({ type: 'predictions', value: data })
+ dispatch({ type: 'timestamp', value: Date.now() })
  // Reset vehicles based on changed predicted vehicles
  vehiclesDispatch({ type: 'reset' })
- dispatch({ type: 'timestamp', value: Date.now() })
  }
  }
  )
@@ -90,10 +90,12 @@ const Home: FC<HomeProps> = () => {
  onSuccess(data) {
  vehiclesDispatch({ type: 'set', value: data })
 
- if (!data.length) {
+ if (!data.filter(({ predictable }) => predictable).length) {
  toast({
  type: 'info',
- message: 'No vehicles running'
+ message: 'No vehicles on route.',
+ // Keep open until the user closes
+ timeout: undefined
  })
  }
  }

packages/ui/src/hooks/common.ts

@@ -52,4 +52,5 @@ class VehicleMarker extends Marker {
  }
 }
 
+export const VEHICLE_PANE = 'busmap-vehicle-pane'
 export { VehicleMarker }

packages/ui/src/hooks/useInitMap.ts

@@ -1,6 +1,8 @@
 import { useEffect, useRef, useState } from 'react'
 import L from 'leaflet'
 
+import { VEHICLE_PANE } from './common.js'
+
 import { useGlobals } from '../globals.js'
 
 import type { Map, LayerGroup } from 'leaflet'
@@ -19,6 +21,7 @@ const useInitMap = () => {
  mapRef.current = L.map(document.querySelector('main') as HTMLElement, {
  zoomControl: false
  })
+ mapRef.current.createPane(VEHICLE_PANE).style.zIndex = '700'
  popupRef.current.setContent(selectionRef.current)
  popupRef.current.on('remove', () => {
  dispatch({ type: 'selected', value: undefined })

packages/ui/src/hooks/usePrevious.ts

@@ -0,0 +1,13 @@
+import { useRef, useEffect } from 'react'
+
+const usePrevious = <T>(value: T) => {
+ const ref = useRef(value)
+
+ useEffect(() => {
+ ref.current = value
+ }, [value])
+
+ return ref.current
+}
+
+export { usePrevious }

packages/ui/src/hooks/useVehiclesLayer.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react'
 import L from 'leaflet'
 
-import { VehicleMarker } from './common.js'
+import { VehicleMarker, VEHICLE_PANE } from './common.js'
 
 import { useGlobals } from '../globals.js'
 import { useVehicles } from '../contexts/vehicles.js'
@@ -236,7 +236,8 @@ const useVehiclesLayer = ({ vehiclesLayer }: UseVehiclesLayer) => {
  vehicle.directionId !== direction?.id
  },
  {
- icon
+ icon,
+ pane: VEHICLE_PANE
  }
  )
  const popup = L.popup({

packages/ui/src/root.tsx

@@ -1,11 +1,18 @@
-import { Outlet } from 'react-router-dom'
-import { Toaster } from '@busmap/components/toast'
+import { useEffect } from 'react'
+import { Outlet, useLocation } from 'react-router-dom'
+import { Toaster, toast } from '@busmap/components/toast'
 
 import { Layout } from './layout.js'
 import { ErrorBoundary } from './components/errorBoundary.js'
 
 // TODO: Should fetch agencies here and set it in context
 const Root = () => {
+ const location = useLocation()
+
+ useEffect(() => {
+ toast({ open: false })
+ }, [location])
+
  return (
  <ErrorBoundary>
  <Toaster anchor="top left" />