refactor: organize by feature module. (#59)

* refactor: favorites module.

* refactor: settings module.

.eslintrc.json

@@ -36,6 +36,7 @@
     "no-console": "error",
     "n/no-missing-import": "off",
     "n/no-unpublished-import": "off",
+    "import/no-unresolved": "off",
     "import/order": [
       "error",
       {

packages/ui/src/app.tsx

@@ -5,7 +5,7 @@ import { GlobalsProvider } from './globals.js'
 import { MapProvider } from './contexts/map.js'
 import { StorageProvider } from './contexts/storage.js'
 import { VehiclesProvider } from './contexts/vehicles.js'
-import { SettingsProvider } from './contexts/settings/index.js'
+import { SettingsProvider } from './modules/settings/contexts/settings.js'
 import { router } from './router.js'
 
 import type { FC } from 'react'

packages/ui/src/components/predictions.tsx

@@ -1,16 +1,16 @@
 import styled, { keyframes } from 'styled-components'
 import { PB50T, PB80T, PB70T } from '@busmap/components/colors'
 
-import { Locator } from './predForVehicleLocator.js'
+import { VehicleLocator } from './vehicleLocator.js'
 
 import { PredictedVehiclesColors } from '../common.js'
-import { useTheme } from '../contexts/settings/theme.js'
-import { useVehicleSettings } from '../contexts/settings/vehicle.js'
-import { usePredictionsSettings } from '../contexts/settings/predictions.js'
+import { useTheme } from '../modules/settings/contexts/theme.js'
+import { useVehicleSettings } from '../modules/settings/contexts/vehicle.js'
+import { usePredictionsSettings } from '../modules/settings/contexts/predictions.js'
 
 import type { FC } from 'react'
 import type { Prediction, Stop } from '../types.js'
-import type { Mode } from '../contexts/util.js'
+import type { Mode } from '../modules/settings/types.js'
 
 interface PredictionsProps {
   preds?: Prediction[]
@@ -233,14 +233,14 @@ const Predictions: FC<PredictionsProps> = ({ preds, stop, messages, timestamp })
                   {minutes === 0 ? (
                     <em key={epochTime}>{event}</em>
                   ) : markPredictedVehicles ? (
-                    <Locator vehicleId={vehicle.id}>
+                    <VehicleLocator vehicleId={vehicle.id}>
                       <Format
                         key={epochTime}
                         minutes={minutes}
                         epochTime={epochTime}
                         affectedByLayover={affectedByLayover}
                       />
-                    </Locator>
+                    </VehicleLocator>
                   ) : (
                     <Format
                       key={epochTime}

packages/ui/src/components/selectors/stops.tsx

@@ -3,7 +3,7 @@ import { AutoSuggest } from '@busmap/components/autoSuggest'
 import { useSelectorProps } from './useSelectorProps.js'
 
 import { StopLocator } from '../stopLocator.js'
-import { FavoriteStop } from '../favoriteStop.js'
+import { FavoriteStop } from '../../modules/favorites/components/favoriteStop.js'
 import { FormItem } from '../formItem.js'
 
 import type { FC } from 'react'

packages/ui/src/components/selectors/useSelectorProps.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
 import { DARK_MODE_FIELD, PB90T } from '@busmap/components/colors'
 
-import { useTheme } from '../../contexts/settings/theme.js'
+import { useTheme } from '../../modules/settings/contexts/theme.js'
 
 import type { AutoSuggestProps } from '@busmap/components/autoSuggest'
 

packages/ui/src/components/stopLocator.tsx

@@ -6,11 +6,11 @@ import { Locate } from '@busmap/components/icons/locate'
 import { PB60T, PB70T, PB90T } from '@busmap/components/colors'
 
 import { useMap } from '../contexts/map.js'
-import { useTheme } from '../contexts/settings/theme.js'
+import { useTheme } from '../modules/settings/contexts/theme.js'
 
 import type { FC } from 'react'
 import type { Stop } from '../types.js'
-import type { Mode } from '../contexts/util.js'
+import type { Mode } from '../modules/settings/types.js'
 
 interface StopLocatorProps {
   selected?: Stop

packages/ui/src/components/predForVehicleLocator.tsx → packages/ui/src/components/vehicleLocator.tsx

@@ -5,12 +5,12 @@ import { Locate } from '@busmap/components/icons/locate'
 import { PB60T, PB70T, PB90T } from '@busmap/components/colors'
 
 import { useGlobals } from '../globals.js'
-import { useTheme } from '../contexts/settings/theme.js'
+import { useTheme } from '../modules/settings/contexts/theme.js'
 import { useVehicles } from '../contexts/vehicles.js'
 
 import type { FC, ReactNode } from 'react'
 import type { Vehicle } from '../types.js'
-import type { Mode } from '../contexts/util.js'
+import type { Mode } from '../modules/settings/types.js'
 
 interface LocatorProps {
   children: ReactNode
@@ -38,7 +38,7 @@ const Button = styled.button<{ mode: Mode }>`
     color: ${({ mode }) => (mode === 'light' ? 'black' : PB90T)};
   }
 `
-const Locator: FC<LocatorProps> = ({ children, vehicleId }) => {
+const VehicleLocator: FC<LocatorProps> = ({ children, vehicleId }) => {
   const { dispatch } = useGlobals()
   const { mode } = useTheme()
   const vehicles = useVehicles()
@@ -64,4 +64,4 @@ const Locator: FC<LocatorProps> = ({ children, vehicleId }) => {
   )
 }
 
-export { Locator }
+export { VehicleLocator }

packages/ui/src/contexts/storage.tsx

@@ -1,17 +1,11 @@
 import { createContext, useContext, useEffect, useReducer, useMemo } from 'react'
 
-import { isAMode, isASpeedUnit, isAPredictionFormat } from './util.js'
+import { isAMode, isASpeedUnit, isAPredictionFormat } from '../modules/settings/util.js'
 
 import type { FC, ReactNode, Dispatch } from 'react'
-import type { Mode, SpeedUnit, PredictionFormat } from './util.js'
-import type { Agency, RouteName, DirectionName, Stop } from '../types.js'
-
-interface Favorite {
-  agency: Agency
-  route: RouteName
-  direction: DirectionName
-  stop: Stop
-}
+import type { Mode, SpeedUnit, PredictionFormat } from '../modules/settings/types.js'
+import type { Favorite } from '../modules/favorites/types.js'
+
 interface StorageState {
   predsFormat?: PredictionFormat
   vehicleSpeedUnit?: SpeedUnit

packages/ui/src/home.tsx

@@ -8,11 +8,11 @@ import styled from 'styled-components'
 
 import { useGlobals } from './globals.js'
 import { useVehiclesDispatch } from './contexts/vehicles.js'
-import { useTheme } from './contexts/settings/theme.js'
+import { useTheme } from './modules/settings/contexts/theme.js'
 import { BusSelector } from './components/busSelector.js'
 import { Loading } from './components/loading.js'
-import { Settings } from './components/settings/index.js'
-import { Favorites } from './components/favorites.js'
+import { Settings } from './modules/settings/components/settings.js'
+import { Favorites } from './modules/favorites/components/favorites.js'
 import { Info } from './components/info.js'
 import { Predictions } from './components/predictions.js'
 import { Anchor } from './components/anchor.js'

packages/ui/src/hooks/common.ts

@@ -2,7 +2,7 @@ import { Marker } from 'leaflet'
 
 import type { MarkerOptions, LatLng } from 'leaflet'
 import type { Vehicle } from '../types.js'
-import type { SpeedUnit } from '../contexts/util.js'
+import type { SpeedUnit } from '../modules/settings/types'
 
 interface VehicleMarkerConfig {
   vehicle: Vehicle

packages/ui/src/hooks/useBusSelectorBookmarks.ts

@@ -8,7 +8,7 @@ const useBusSelectorBookmark = () => {
   if (!bookmark.current) {
     const homeBus = matches.find(match => match.id === 'home-bus')
 
-    bookmark.current = { ...homeBus?.params } ?? {}
+    bookmark.current = { ...homeBus?.params }
   }
 
   return bookmark.current

packages/ui/src/hooks/useVehiclesLayer.ts

@@ -5,7 +5,7 @@ import { VehicleMarker, VEHICLE_PANE } from './common.js'
 
 import { useGlobals } from '../globals.js'
 import { useVehicles } from '../contexts/vehicles.js'
-import { useVehicleSettings } from '../contexts/settings/vehicle.js'
+import { useVehicleSettings } from '../modules/settings/contexts/vehicle.js'
 import { PredictedVehiclesColors } from '../common.js'
 
 import type { LayerGroup } from 'leaflet'

packages/ui/src/components/favoriteStop.tsx → packages/ui/src/modules/favorites/components/favoriteStop.tsx

@@ -4,11 +4,11 @@ import { Star } from '@busmap/components/icons/star'
 import { Tooltip } from '@busmap/components/tooltip'
 import { SY30T } from '@busmap/components/colors'
 
-import { useGlobals } from '../globals.js'
-import { useStorage, useStorageDispatch } from '../contexts/storage.js'
+import { useGlobals } from '../../../globals.js'
+import { useStorage, useStorageDispatch } from '../../../contexts/storage.js'
 
 import type { FC } from 'react'
-import type { Favorite } from '../contexts/storage.js'
+import type { Favorite } from '../../../contexts/storage.js'
 
 const Tip = styled(Tooltip)`
   display: flex;
@@ -19,7 +19,7 @@ const Button = styled.button`
   margin: 0;
   background: none;
 `
-const worker = new Worker(new URL('../workers/favorites.ts', import.meta.url), {
+const worker = new Worker(new URL('../worker.ts', import.meta.url), {
   type: 'module'
 })
 const FavoriteStop: FC = () => {
@@ -41,7 +41,7 @@ const FavoriteStop: FC = () => {
     } else if (agency && route && direction && stop) {
       const add: Favorite = {
         stop: stop,
-        agency: agency,
+        agency: { id: agency.id, title: agency.title, region: agency.region },
         route: { id: route.id, title: route.title ?? route.shortTitle },
         direction: { id: direction.id, title: direction.title ?? direction.shortTitle }
       }

packages/ui/src/components/favorites.tsx → packages/ui/src/modules/favorites/components/favorites.tsx

@@ -1,4 +1,4 @@
-import { useStorage } from '../contexts/storage.js'
+import { useStorage } from '../../../contexts/storage.js'
 
 import type { FC } from 'react'
 

packages/ui/src/modules/favorites/types.ts

@@ -0,0 +1,10 @@
+import type { Agency, RouteName, DirectionName, Stop } from '../../types.js'
+
+interface Favorite {
+  agency: Agency
+  route: RouteName
+  direction: DirectionName
+  stop: Stop
+}
+
+export type { Favorite }

packages/ui/src/modules/favorites/util.ts

@@ -0,0 +1,10 @@
+import type { Favorite } from './types.js'
+
+const same = (a: Favorite, b: Favorite): boolean => {
+  const comboA = `${a.route.id}${a.direction.id}${a.stop.id}`
+  const comboB = `${b.route.id}${b.direction.id}${b.stop.id}`
+
+  return comboA === comboB
+}
+
+export { same }

packages/ui/src/workers/favorites.ts → packages/ui/src/modules/favorites/worker.ts

@@ -1,4 +1,4 @@
-import type { Favorite } from '../contexts/storage.js'
+import type { Favorite } from '../../contexts/storage.js'
 
 interface FavoriteMessage {
   action: 'start' | 'stop' | 'close'

packages/ui/src/components/settings/predictions.tsx → packages/ui/src/modules/settings/components/predictions.tsx

@@ -1,10 +1,10 @@
 import styled from 'styled-components'
 import { useCallback } from 'react'
 
-import { FormItem } from '../formItem.js'
-import { useStorageDispatch } from '../../contexts/storage.js'
-import { usePredictionsSettings } from '../../contexts/settings/predictions.js'
-import { isAPredictionFormat } from '../../contexts/util.js'
+import { FormItem } from '../../../components/formItem.js'
+import { useStorageDispatch } from '../../../contexts/storage.js'
+import { usePredictionsSettings } from '../contexts/predictions.js'
+import { isAPredictionFormat } from '../util.js'
 
 import type { FC, ChangeEvent } from 'react'
 

packages/ui/src/components/settings/index.tsx → packages/ui/src/modules/settings/components/settings.tsx

@@ -6,7 +6,7 @@ import { ThemeSettings } from './theme.js'
 import { VehicleSettings } from './vehicle.js'
 import { PredictionsSettings } from './predictions.js'
 
-import { useTheme } from '../../contexts/settings/theme.js'
+import { useTheme } from '../contexts/theme.js'
 
 import type { FC } from 'react'
 

packages/ui/src/components/settings/theme.tsx → packages/ui/src/modules/settings/components/theme.tsx

@@ -1,10 +1,10 @@
 import styled from 'styled-components'
 import { useCallback } from 'react'
 
-import { FormItem } from '../formItem.js'
-import { useStorageDispatch } from '../../contexts/storage.js'
-import { useTheme } from '../../contexts/settings/theme.js'
-import { isAMode } from '../../contexts/util.js'
+import { FormItem } from '../../../components/formItem.js'
+import { useStorageDispatch } from '../../../contexts/storage.js'
+import { useTheme } from '../contexts/theme.js'
+import { isAMode } from '../util.js'
 
 import type { FC, ChangeEvent } from 'react'
 

packages/ui/src/components/settings/vehicle.tsx → packages/ui/src/modules/settings/components/vehicle.tsx

@@ -1,9 +1,9 @@
 import styled from 'styled-components'
 import { useCallback } from 'react'
 
-import { FormItem } from '../formItem.js'
-import { useStorageDispatch } from '../../contexts/storage.js'
-import { useVehicleSettings, isASpeedUnit } from '../../contexts/settings/vehicle.js'
+import { FormItem } from '../../../components/formItem.js'
+import { useStorageDispatch } from '../../../contexts/storage.js'
+import { useVehicleSettings, isASpeedUnit } from '../contexts/vehicle.js'
 
 import type { FC, ChangeEvent } from 'react'
 

packages/ui/src/contexts/settings/predictions.tsx → packages/ui/src/modules/settings/contexts/predictions.tsx

@@ -1,10 +1,10 @@
 import { createContext, useContext, useReducer, useMemo } from 'react'
 
-import { useStorage } from '../storage.js'
+import { useStorage } from '../../../contexts/storage.js'
 import { isAPredictionFormat } from '../util.js'
 
 import type { FC, ReactNode, Dispatch } from 'react'
-import type { PredictionFormat } from '../util.js'
+import type { PredictionFormat } from '../types.js'
 
 interface PredictionsSettingsState {
   format: PredictionFormat

packages/ui/src/contexts/settings/theme.tsx → packages/ui/src/modules/settings/contexts/theme.tsx

@@ -1,9 +1,9 @@
 import { useContext, createContext, useReducer, useMemo, useEffect } from 'react'
 
-import { useStorage, useStorageDispatch } from '../storage.js'
+import { useStorage, useStorageDispatch } from '../../../contexts/storage.js'
 
 import type { FC, ReactNode, Dispatch } from 'react'
-import type { Mode, isAMode } from '../util.js'
+import type { Mode } from '../types.js'
 
 interface ThemeAction {
   type: 'mode'
@@ -57,4 +57,4 @@ const ThemeProvider: FC<{ children: ReactNode }> = ({ children }) => {
   return <ThemeContext.Provider value={context}>{children}</ThemeContext.Provider>
 }
 
-export { ThemeProvider, useTheme, isAMode }
+export { ThemeProvider, useTheme }

packages/ui/src/contexts/settings/vehicle.tsx → packages/ui/src/modules/settings/contexts/vehicle.tsx

@@ -1,10 +1,10 @@
 import { createContext, useContext, useReducer, useMemo } from 'react'
 
-import { useStorage } from '../storage.js'
+import { useStorage } from '../../../contexts/storage.js'
 import { isASpeedUnit } from '../util.js'
 
 import type { FC, ReactNode, Dispatch } from 'react'
-import type { SpeedUnit } from '../util.js'
+import type { SpeedUnit } from '../types.js'
 
 interface VehicleSettingsState {
   visible: boolean

packages/ui/src/modules/settings/types.ts

@@ -0,0 +1,5 @@
+type Mode = 'light' | 'dark'
+type SpeedUnit = 'kph' | 'mph'
+type PredictionFormat = 'time' | 'minutes'
+
+export type { Mode, SpeedUnit, PredictionFormat }

packages/ui/src/contexts/util.ts → packages/ui/src/modules/settings/util.ts

@@ -1,6 +1,4 @@
-type Mode = 'light' | 'dark'
-type SpeedUnit = 'kph' | 'mph'
-type PredictionFormat = 'time' | 'minutes'
+import { Mode, SpeedUnit, PredictionFormat } from './types.js'
 
 const isAMode = (x: unknown): x is Mode => {
   if (x && typeof x === 'string' && ['dark', 'light'].includes(x)) {
@@ -25,4 +23,3 @@ const isAPredictionFormat = (x: unknown): x is PredictionFormat => {
 }
 
 export { isAMode, isASpeedUnit, isAPredictionFormat }
-export type { Mode, SpeedUnit, PredictionFormat }

packages/ui/src/root.tsx

@@ -5,7 +5,7 @@ import { Toaster, toast } from '@busmap/components/toast'
 import { Layout } from './layout.js'
 import { ErrorBoundary } from './components/errorBoundary.js'
 import { useMap } from './contexts/map.js'
-import { useTheme } from './contexts/settings/theme.js'
+import { useTheme } from './modules/settings/contexts/theme.js'
 
 // TODO: Should fetch agencies here and set it in context
 const Root = () => {

packages/ui/tsconfig.json

@@ -4,7 +4,11 @@
     "module": "ESNext",
     "moduleResolution": "Bundler",
     "jsx": "react-jsx",
-    "types": ["vite/client"]
+    "types": ["vite/client"],
+    "paths": {
+      "@core/*": ["./src/*"],
+      "@module/*": ["./src/modules/*"]
+    }
   },
   "include": ["vite.config.ts", "src"]
 }