|
1 | | -import { useEffect, useState } from 'react'; |
| 1 | +import { useEffect, useState, type JSX } from 'react'; |
2 | 2 | import { Header } from '@/components/Layout/Header'; |
3 | 3 | import { MapContainer } from '@/components/Map/MapContainer'; |
4 | | -import { MapLegend } from '@/components/Map/MapLegend'; |
5 | 4 | import { LayerControls } from '@/components/Map/LayerControls'; |
6 | | -import '@/styles/globals.css'; |
7 | | -import '@/styles/map.css'; |
| 5 | +import { Box } from '@mui/material'; |
| 6 | +import { GlobalStyles, useTheme } from '@mui/material'; |
| 7 | +import '@/styles/reset.css'; |
| 8 | +import '@/styles/palette-layouts.css'; |
| 9 | +import '@/styles/components.css'; |
8 | 10 | import { FixtureReader } from './data/fixture-reader'; |
9 | 11 | import type { LayerVisibilityMap } from './types/map'; |
10 | 12 | import type { FeatureCollection } from './types/geometry'; |
11 | 13 |
|
| 14 | + |
12 | 15 | /** |
13 | | - * Main application component that composes the entire UI |
14 | | - * Manages the map state and renders the map with its controls |
| 16 | + * Main application component that composes the entire UI. |
| 17 | + * Manages the map state and renders the map with its controls. |
| 18 | + * Map uses GeoJSON (docs) => https://geojson.readthedocs.io/en/latest/ |
15 | 19 | * @component |
16 | | - * @returns {JSX.Element} The complete application layout with header and map interface |
| 20 | + * @returns {JSX.Element} The complete application layout with header and map interface. |
17 | 21 | */ |
18 | | -function App() { |
| 22 | +function App(): JSX.Element { |
| 23 | + |
| 24 | + /* |
| 25 | + * layers: an array of map feature collections (initially empty) |
| 26 | + * - FeatureCollection items contain geo-spatial types (points, lines, polygons) with coordinates |
| 27 | + * setLayers: function to update the layers array, based on previous state |
| 28 | + */ |
19 | 29 | const [layers, setLayers] = useState<FeatureCollection[]>([]) |
| 30 | + |
| 31 | + |
| 32 | + /* |
| 33 | + * layerVisibility: an object mapping each layer name to a boolean indicating whether it is visible on the map |
| 34 | + * - Keys are layer names (strings) |
| 35 | + * - Values are booleans (true = visible, false = hidden) |
| 36 | + * setLayerVisibility: function to update the visibility map, based on previous state |
| 37 | + */ |
20 | 38 | const [layerVisibility, setLayerVisibility] = useState<LayerVisibilityMap>({}) |
21 | 39 |
|
| 40 | + |
| 41 | + /* Access the current MUI theme (light/dark mode) */ |
| 42 | + const theme = useTheme(); |
| 43 | + |
| 44 | + |
| 45 | + /* Load map feature collections once on component mount */ |
22 | 46 | useEffect(() => { |
23 | | - FixtureReader.collections() |
24 | | - .then(collections => { |
25 | | - setLayers([...collections]) |
| 47 | + |
| 48 | + async function loadCollections() { |
| 49 | + |
| 50 | + /* Fetch feature collections and save layers to state */ |
| 51 | + const collections: FeatureCollection[] = await FixtureReader.collections(); |
| 52 | + const allLayers = [... collections]; |
| 53 | + setLayers(allLayers); |
| 54 | + |
| 55 | + /* Extract layer names */ |
| 56 | + const layerNames = allLayers.map((layer) => layer.name); |
| 57 | + |
| 58 | + /* Build initial visibility map */ |
| 59 | + const initialVisibility: LayerVisibilityMap = layerNames.reduce( |
| 60 | + (map, name) => { |
| 61 | + map[name] = true; |
| 62 | + return map; |
| 63 | + }, |
| 64 | + {} as LayerVisibilityMap |
| 65 | + ); |
26 | 66 |
|
27 | | - // Take the name property of each collection and set it's initial visibility to true |
28 | | - const layerNames = collections.map((fc) => fc.name ) |
29 | | - const visibilityMap = layerNames.reduce((map, name) => { map[name] = true; return map }, {} as LayerVisibilityMap) |
30 | | - setLayerVisibility({...visibilityMap}) |
31 | | - },) |
32 | | - }, []) |
| 67 | + /* Save visibility map to state */ |
| 68 | + setLayerVisibility(initialVisibility); |
| 69 | + } |
33 | 70 |
|
34 | | - const layersToRender = layers.filter((fc) => layerVisibility[fc.name]) |
| 71 | + loadCollections(); |
| 72 | + }, |
| 73 | + [] // dependency array |
| 74 | + ) |
| 75 | + |
| 76 | + /* Logic to only render layers with visibility of `true` */ |
| 77 | + const layersToRender = layers.filter((layer) => layerVisibility[layer.name]) |
35 | 78 |
|
36 | 79 | return ( |
37 | | - <div className="app-container"> |
38 | | - <Header /> |
39 | | - <main className="main-content"> |
40 | | - <MapContainer layers={layersToRender} /> |
41 | | - {/*<MapLegend />*/} |
42 | | - <LayerControls |
43 | | - visibilityMap={layerVisibility} |
44 | | - onLayerChange={setLayerVisibility} |
45 | | - /> |
46 | | - </main> |
47 | | - </div> |
| 80 | + <> |
| 81 | + <GlobalStyles |
| 82 | + styles={{ |
| 83 | + '.app-wrapper': { |
| 84 | + background: theme.palette.background.paper, |
| 85 | + boxShadow: 'var(--box-shadow)', |
| 86 | + }, |
| 87 | + }} |
| 88 | + /> |
| 89 | + |
| 90 | + <Box |
| 91 | + className="app-wrapper flex-column" |
| 92 | + sx={{ |
| 93 | + height: '100vh', |
| 94 | + }} |
| 95 | + > |
| 96 | + <Header /> |
| 97 | + <Box |
| 98 | + component="main" |
| 99 | + className="main-wrapper" |
| 100 | + sx={{ |
| 101 | + flex: 1, |
| 102 | + position: 'relative', |
| 103 | + overflow: 'hidden', |
| 104 | + }} |
| 105 | + > |
| 106 | + <MapContainer layers={layersToRender} /> |
| 107 | + {/*<MapLegend />*/} |
| 108 | + <LayerControls |
| 109 | + visibilityMap={layerVisibility} |
| 110 | + onLayerChange={setLayerVisibility} |
| 111 | + /> |
| 112 | + </Box> |
| 113 | + </Box> |
| 114 | + </> |
48 | 115 | ); |
49 | 116 | } |
50 | 117 |
|
|
0 commit comments