diff --git a/frontend/package-lock.json b/frontend/package-lock.json index eed0d4b9..c63badcf 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -25,10 +25,12 @@ "i18next-browser-languagedetector": "^7.2.0", "i18next-http-backend": "^2.4.2", "json5": "^2.2.3", + "leaflet": "^1.9.4", "react": "^18.3.1", "react-dom": "^18.3.1", "react-i18next": "^13.5.0", "react-lazyload": "github:twobin/react-lazyload", + "react-leaflet": "^4.2.1", "react-markdown": "^9.0.1", "react-oauth2-code-pkce": "^1.18.0", "react-redux": "^9.0.4", @@ -48,6 +50,7 @@ "@testing-library/react": "^14.1.2", "@testing-library/user-event": "^14.5.1", "@types/country-flag-icons": "^1.2.2", + "@types/leaflet": "^1.9.12", "@types/node-fetch": "^2.6.9", "@types/react": "^18.2.45", "@types/react-dom": "^18.2.17", @@ -2240,6 +2243,16 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@react-leaflet/core": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz", + "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==", + "peerDependencies": { + "leaflet": "^1.9.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, "node_modules/@reduxjs/toolkit": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.1.tgz", @@ -3049,6 +3062,15 @@ "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.7.tgz", "integrity": "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==" }, + "node_modules/@types/leaflet": { + "version": "1.9.12", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.12.tgz", + "integrity": "sha512-BK7XS+NyRI291HIo0HCfE18Lp8oA30H1gpi1tf0mF3TgiCEzanQjOqNZ4x126SXzzi2oNSZhZ5axJp1k0iM6jg==", + "dev": true, + "dependencies": { + "@types/geojson": "*" + } + }, "node_modules/@types/mdast": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.3.tgz", @@ -7758,6 +7780,11 @@ "json-buffer": "3.0.1" } }, + "node_modules/leaflet": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", + "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==" + }, "node_modules/levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -7890,6 +7917,23 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "dev": true + }, + "node_modules/lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" + }, + "node_modules/lodash.merge": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", + "dev": true + }, "node_modules/log-update": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.0.0.tgz", @@ -9698,6 +9742,19 @@ "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-leaflet": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz", + "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==", + "dependencies": { + "@react-leaflet/core": "^2.1.0" + }, + "peerDependencies": { + "leaflet": "^1.9.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, "node_modules/react-markdown": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.0.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 5e3a01e3..7837b8ef 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -50,10 +50,12 @@ "i18next-browser-languagedetector": "^7.2.0", "i18next-http-backend": "^2.4.2", "json5": "^2.2.3", + "leaflet": "^1.9.4", "react": "^18.3.1", "react-dom": "^18.3.1", "react-i18next": "^13.5.0", "react-lazyload": "github:twobin/react-lazyload", + "react-leaflet": "^4.2.1", "react-markdown": "^9.0.1", "react-oauth2-code-pkce": "^1.18.0", "react-redux": "^9.0.4", @@ -73,6 +75,7 @@ "@testing-library/react": "^14.1.2", "@testing-library/user-event": "^14.5.1", "@types/country-flag-icons": "^1.2.2", + "@types/leaflet": "^1.9.12", "@types/node-fetch": "^2.6.9", "@types/react": "^18.2.45", "@types/react-dom": "^18.2.17", diff --git a/frontend/src/components/InspireGridComponents/BaseLayerTest.tsx b/frontend/src/components/InspireGridComponents/BaseLayerTest.tsx index 6fd97ff1..1546ac43 100644 --- a/frontend/src/components/InspireGridComponents/BaseLayerTest.tsx +++ b/frontend/src/components/InspireGridComponents/BaseLayerTest.tsx @@ -1,144 +1,146 @@ -import React, { useEffect } from 'react'; -import { LayerGroup, LayersControl, MapContainer, TileLayer, useMap, Polyline } from 'react-leaflet'; -import "leaflet/dist/leaflet.css"; -import { getGrid, getCellFromPosition } from "./inspire"; -import { LatLngExpression } from 'leaflet'; +import React, {useEffect} from 'react'; +import {LayerGroup, LayersControl, MapContainer, TileLayer, useMap, Polyline} from 'react-leaflet'; +import 'leaflet/dist/leaflet.css'; +import {getGrid, getCellFromPosition} from './inspire'; +import {LatLngExpression} from 'leaflet'; type MapBounds = [[number, number], [number, number]]; type MapCenter = [number, number]; interface BaseLayerProps { - mapZoom?: number; - mapBounds?: MapBounds; - maxBounds?: MapBounds; - mapCenter?: MapCenter; - inspireGrid?: boolean; - inspireGridLevel?: number; - setMapZoom: (zoom: number) => void; - setMapBounds: (bounds: MapBounds) => void; - setMapCenter: (center: MapCenter) => void; + mapZoom?: number; + mapBounds?: MapBounds; + maxBounds?: MapBounds; + mapCenter?: MapCenter; + inspireGrid?: boolean; + inspireGridLevel?: number; + setMapZoom: (zoom: number) => void; + setMapBounds: (bounds: MapBounds) => void; + setMapCenter: (center: MapCenter) => void; } -function MapEventsHandler({ - setMapZoom, - setMapBounds, - setMapCenter, -}: BaseLayerProps) { - const map = useMap(); - - const minZoom = map.getBoundsZoom([[52.248, 10.477], [52.273, 10.572]]); - map.setMinZoom(minZoom); - - useEffect(() => { - const bounds: MapBounds = [[52.248, 10.477], [52.273, 10.572]]; - map.setMaxBounds(bounds); - - const handleZoomEnd = () => { - const zoom = map.getZoom(); - setMapZoom(zoom); - }; - - const handleMoveEnd = () => { - const bounds = map.getBounds(); - const center = map.getCenter(); - setMapBounds([ - [bounds.getSouthWest().lat, bounds.getSouthWest().lng], - [bounds.getNorthEast().lat, bounds.getNorthEast().lng], - ]); - setMapCenter([center.lat, center.lng]); - }; - - const handleMouseClick = (position: any) => { - const clickedPosition = position.latlng; - console.log(getCellFromPosition([clickedPosition.lat, clickedPosition.lng], getResolutionFromZoom(map.getZoom()))); // change level to include level - } - - map.on('zoomend', handleZoomEnd); - map.on('moveend', handleMoveEnd); - map.on('click', handleMouseClick); - - return () => { - map.off('zoomend', handleZoomEnd); - map.off('moveend', handleMoveEnd); - map.off('click', handleMouseClick); - }; - }, [map, setMapZoom, setMapBounds, setMapCenter]); - - return null; +function MapEventsHandler({setMapZoom, setMapBounds, setMapCenter}: BaseLayerProps) { + const map = useMap(); + + const minZoom = map.getBoundsZoom([ + [52.248, 10.477], + [52.273, 10.572], + ]); + map.setMinZoom(minZoom); + + useEffect(() => { + const bounds: MapBounds = [ + [52.248, 10.477], + [52.273, 10.572], + ]; + map.setMaxBounds(bounds); + + const handleZoomEnd = () => { + const zoom = map.getZoom(); + setMapZoom(zoom); + }; + + const handleMoveEnd = () => { + const bounds = map.getBounds(); + const center = map.getCenter(); + setMapBounds([ + [bounds.getSouthWest().lat, bounds.getSouthWest().lng], + [bounds.getNorthEast().lat, bounds.getNorthEast().lng], + ]); + console.log(bounds); + setMapCenter([center.lat, center.lng]); + }; + + const handleMouseClick = (position: any) => { + const clickedPosition = position.latlng; + console.log( + getCellFromPosition([clickedPosition.lat, clickedPosition.lng], getResolutionFromZoom(map.getZoom())) + ); // change level to include level + }; + + map.on('zoomend', handleZoomEnd); + map.on('moveend', handleMoveEnd); + map.on('click', handleMouseClick); + + return () => { + map.off('zoomend', handleZoomEnd); + map.off('moveend', handleMoveEnd); + map.off('click', handleMouseClick); + }; + }, [map, setMapZoom, setMapBounds, setMapCenter]); + + return null; } function getResolutionFromZoom(input: number): number { - const inputStart = 14; - const inputEnd = 18; - const outputStart = 10; - const outputEnd = 14; + const inputStart = 14; + const inputEnd = 18; + const outputStart = 8; + const outputEnd = 12; - if (input < inputStart || input > inputEnd) { - throw new Error("Input value out of range"); - } + if (input < inputStart || input > inputEnd) { + throw new Error('Input value out of range'); + } - - const output = Math.round(outputStart + ((input - inputStart) * (outputEnd - outputStart)) / (inputEnd - inputStart)); - return output; + const output = Math.round(outputStart + ((input - inputStart) * (outputEnd - outputStart)) / (inputEnd - inputStart)); + return output; } - export default function BaseLayer({ - mapZoom = 14, - mapBounds = [[52.248, 10.477], [52.273, 10.572]], - mapCenter = [52.260, 10.525], - inspireGrid = true, - inspireGridLevel = 10, - setMapZoom, - setMapBounds, - setMapCenter, + mapZoom = 14, + mapBounds = [ + [52.248, 10.477], + [52.273, 10.572], + ], + mapCenter = [52.26, 10.525], + inspireGrid = true, + inspireGridLevel = 10, + setMapZoom, + setMapBounds, + setMapCenter, }: BaseLayerProps): JSX.Element { - - let multiPolyline: LatLngExpression[][] = []; - inspireGridLevel = getResolutionFromZoom(mapZoom); - - if (inspireGrid) { - const gridData = getGrid(mapBounds, inspireGridLevel); - const latitudes = gridData.latitudes.map(line => - line.map(coord => [coord[1], coord[0]]) as LatLngExpression[] - ); - const longitudes = gridData.longitudes.map(line => - line.map(coord => [coord[1], coord[0]]) as LatLngExpression[] - ); - - multiPolyline = [...latitudes, ...longitudes]; - } - - return ( - - - - - - {multiPolyline.map((polyline, index) => ( - - ))} - - - - - - + let multiPolyline: LatLngExpression[][] = []; + inspireGridLevel = getResolutionFromZoom(mapZoom); + + if (inspireGrid) { + const gridData = getGrid(mapBounds, inspireGridLevel); + const latitudes = gridData.latitudes.map((line) => line.map((coord) => [coord[1], coord[0]]) as LatLngExpression[]); + const longitudes = gridData.longitudes.map( + (line) => line.map((coord) => [coord[1], coord[0]]) as LatLngExpression[] ); + + multiPolyline = [...latitudes, ...longitudes]; + } + + return ( + + + + + + {multiPolyline.map((polyline, index) => ( + + ))} + + + + + + + ); } diff --git a/frontend/src/components/InspireGridComponents/inspire.ts b/frontend/src/components/InspireGridComponents/inspire.ts index 22f3ad68..3805355c 100644 --- a/frontend/src/components/InspireGridComponents/inspire.ts +++ b/frontend/src/components/InspireGridComponents/inspire.ts @@ -20,113 +20,112 @@ export function getGrid(bounds: [[number, number], [number, number]], level: num const lonMinNew: number = values[1]; const lonMaxNew: number = lonMax + lonMax % scalingFactorLong; - return { - latitudes: latitudeCoordinates(latMinNew, latMaxNew, lonMinNew, lonMaxNew, level), - longitudes: longitudeCoordinates(latMinNew, latMaxNew, lonMinNew, lonMaxNew, level), - }; + return { + latitudes: latitudeCoordinates(latMinNew, latMaxNew, lonMinNew, lonMaxNew, level), + longitudes: longitudeCoordinates(latMinNew, latMaxNew, lonMinNew, lonMaxNew, level), + }; } function latitudeCoordinates(latMin: number, latMax: number, lonMin: number, lonMax: number, level: number) { - const linesLat = []; + const linesLat = []; - for (let lat = latMin; lat <= (latMax + latitudeSpacing[level] / 3600); lat += latitudeSpacing[level] / 3600) { - const { factor } = getLongitudinalFactorAndZone(lat); - const latSpacing = (factor * latitudeSpacing[level]) / 3600; + for (let lat = latMin; lat <= latMax + latitudeSpacing[level] / 3600; lat += latitudeSpacing[level] / 3600) { + const {factor} = getLongitudinalFactorAndZone(lat); + const lonSpacing = (factor * latitudeSpacing[level]) / 3600; - const latLine: Array<[number, number]> = []; - const lonRange = range(lonMin, lonMax, latSpacing); + const latLine: Array<[number, number]> = []; + const lonRange = range(lonMin, lonMax, lonSpacing); - for (let lon of lonRange) { - latLine.push([lon, lat]); - } - linesLat.push(latLine); + for (const lon of lonRange) { + latLine.push([lon, lat]); } + linesLat.push(latLine); + } - return linesLat; + return linesLat; } function longitudeCoordinates(latMin: number, latMax: number, lonMin: number, lonMax: number, level: number) { - const linesLong = []; - const lonSpacing = (latitudeSpacing[level]) / 3600; - - for (let lat = latMin; lat <= latMax + lonSpacing; lat += lonSpacing) { - - const lonRange = range(lonMin, lonMax, lonSpacing); - for (let lon of lonRange) { - linesLong.push([ - [lon, lat], - [lon, lat + lonSpacing], - ]); - } + const linesLong = []; + const lonSpacing = latitudeSpacing[level] / 3600; + + for (let lat = latMin; lat <= latMax + lonSpacing; lat += lonSpacing) { + const lonRange = range(lonMin, lonMax, lonSpacing); + for (const lon of lonRange) { + linesLong.push([ + [lon, lat], + [lon, lat + lonSpacing], + ]); } + } - return linesLong; + return linesLong; } export function getCellFromPosition(position: [number, number], level: number): InspireGridCell { - const [pointLat, pointLon] = position; - - const { factor, zone } = getLongitudinalFactorAndZone(pointLat); - - const unit = cellSize[level].unit; - const value = cellSize[level].value; - const latDirection = pointLat >= 0 ? 'N' : 'S'; - const lonDirection = pointLon >= 0 ? 'E' : 'W'; - const latId = Math.round(degreesToUnit(Math.abs(pointLat), unit, value)); - const lonId = Math.round(degreesToUnit(Math.abs(pointLon), unit, value * factor)); - - const minLat = unitToDegrees(latId, unit, value) * (latDirection === 'N' ? 1 : -1); - const minLon = unitToDegrees(lonId, unit, value) * (lonDirection === 'E' ? 1 : -1) * factor; - - const latIncrement = latitudeSpacing[level] / 3600; - const maxLat = minLat + latIncrement * (latDirection === 'N' ? 1 : -1); - const maxLon = (minLon + latIncrement * factor) * (lonDirection === 'E' ? 1 : -1); - - return { - id: `Grid_ETRS89-GRS80_z${zone}_${value}${unit}_${latDirection}${latId}_${lonDirection}${lonId}`, - bounds: { - min: { lat: minLat, lon: minLon }, - max: { lat: maxLat, lon: maxLon }, - }, - zone: zone, - level: level, - }; + const [pointLat, pointLon] = position; + + const {factor, zone} = getLongitudinalFactorAndZone(pointLat); + + const unit = cellSize[level].unit; + const value = cellSize[level].value; + const latDirection = pointLat >= 0 ? 'N' : 'S'; + const lonDirection = pointLon >= 0 ? 'E' : 'W'; + const latId = Math.round(degreesToUnit(Math.abs(pointLat), unit, value)); + const lonId = Math.round(degreesToUnit(Math.abs(pointLon), unit, value * factor)); + + const minLat = unitToDegrees(latId, unit, value) * (latDirection === 'N' ? 1 : -1); + const minLon = unitToDegrees(lonId, unit, value) * (lonDirection === 'E' ? 1 : -1) * factor; + + const latIncrement = latitudeSpacing[level] / 3600; + const maxLat = minLat + latIncrement * (latDirection === 'N' ? 1 : -1); + const maxLon = (minLon + latIncrement * factor) * (lonDirection === 'E' ? 1 : -1); + + return { + id: `Grid_ETRS89-GRS80_z${zone}_${value}${unit}_${latDirection}${latId}_${lonDirection}${lonId}`, + bounds: { + min: {lat: minLat, lon: minLon}, + max: {lat: maxLat, lon: maxLon}, + }, + zone: zone, + level: level, + }; } export function cellBoundsFromId(cellIdentifier: string): Array> | null { - const regex = /^Grid_ETRS89-GRS80_z(\d+)_(\d+[A-Z]+)_([NS])(\d+\.*\d*)_([EW])(\d+\.*\d*)$/; - const match = RegExp(regex).exec(cellIdentifier); + const regex = /^Grid_ETRS89-GRS80_z(\d+)_(\d+[A-Z]+)_([NS])(\d+\.*\d*)_([EW])(\d+\.*\d*)$/; + const match = RegExp(regex).exec(cellIdentifier); - if (match) { - const [, zone, resStr, latDirection, latValue, lonDirection, lonValue] = match; + if (match) { + const [, zone, resStr, latDirection, latValue, lonDirection, lonValue] = match; - const unit = RegExp(/\D+/).exec(resStr)[0]; - const value = parseInt(resStr); - const factor = factorPerZone[zone]; + const unit = RegExp(/\D+/).exec(resStr)[0]; + const value = parseInt(resStr); + const factor = factorPerZone[zone]; - const minLat = unitToDegrees(parseFloat(latValue), unit, value) * (latDirection === 'N' ? 1 : -1); - const minLon = unitToDegrees(parseFloat(lonValue), unit, value) * (lonDirection === 'E' ? 1 : -1) * factor; + const minLat = unitToDegrees(parseFloat(latValue), unit, value) * (latDirection === 'N' ? 1 : -1); + const minLon = unitToDegrees(parseFloat(lonValue), unit, value) * (lonDirection === 'E' ? 1 : -1) * factor; - let resolution: string | null = null; + let resolution: string | null = null; - for (const key in cellSize) { - if (cellSize[key].value + cellSize[key].unit === resStr) { - resolution = key; - break; - } - } + for (const key in cellSize) { + if (cellSize[key].value + cellSize[key].unit === resStr) { + resolution = key; + break; + } + } - const latIncrement = latitudeSpacing[resolution] / 3600; - const maxLat = minLat + latIncrement * (latDirection === 'N' ? 1 : -1); - const maxLon = (minLon + latIncrement * parseInt(factor)) * (lonDirection === 'E' ? 1 : -1); + const latIncrement = latitudeSpacing[resolution] / 3600; + const maxLat = minLat + latIncrement * (latDirection === 'N' ? 1 : -1); + const maxLon = (minLon + latIncrement * parseInt(factor)) * (lonDirection === 'E' ? 1 : -1); - return [ - [minLat, minLon], - [maxLat, maxLon], - ]; - } + return [ + [minLat, minLon], + [maxLat, maxLon], + ]; + } - return null; + return null; } function closestAdjustedCoordinates( diff --git a/frontend/src/components/InspireGridContainer.tsx b/frontend/src/components/InspireGridContainer.tsx index bb57ffa8..bab70886 100644 --- a/frontend/src/components/InspireGridContainer.tsx +++ b/frontend/src/components/InspireGridContainer.tsx @@ -1,34 +1,43 @@ -import React, {useContext, useEffect, useMemo, useState} from 'react'; +import React from 'react'; import LoadingContainer from './shared/LoadingContainer'; import {useTheme} from '@mui/material'; import BaseLayer from './InspireGridComponents/BaseLayerTest'; import {useAppDispatch, useAppSelector} from 'store/hooks'; -import {setMapZoom, setMapBounds, setMapCenter} from 'store/inspireGridSlice' +import {setMapZoom, setMapBounds, setMapCenter} from 'store/inspireGridSlice'; import Box from '@mui/material/Box'; export default function InspireGridContainer() { const theme = useTheme(); const dispatch = useAppDispatch(); - + const mapZoom = useAppSelector((state) => state.inspireGrid.zoom); const mapBounds = useAppSelector((state) => state.inspireGrid.bounds); const mapCenter = useAppSelector((state) => state.inspireGrid.center); - const handleSetMapZoom = React.useCallback((zoom: number) => { - dispatch(setMapZoom(zoom)); - }, [dispatch]); + const handleSetMapZoom = React.useCallback( + (zoom: number) => { + dispatch(setMapZoom(zoom)); + }, + [dispatch] + ); - const handleSetMapBounds = React.useCallback((bounds: [[number, number], [number, number]]) => { - dispatch(setMapBounds(bounds)); - }, [dispatch]); + const handleSetMapBounds = React.useCallback( + (bounds: [[number, number], [number, number]]) => { + dispatch(setMapBounds(bounds)); + }, + [dispatch] + ); - const handleSetMapCenter = React.useCallback((center: [number, number]) => { - dispatch(setMapCenter(center)); - }, [dispatch]); + const handleSetMapCenter = React.useCallback( + (center: [number, number]) => { + dispatch(setMapCenter(center)); + }, + [dispatch] + ); return ( @@ -46,7 +55,7 @@ export default function InspireGridContainer() { flexDirection: 'column', }} > - ); - -} \ No newline at end of file +} diff --git a/frontend/src/store/index.ts b/frontend/src/store/index.ts index c2817317..2f36469e 100644 --- a/frontend/src/store/index.ts +++ b/frontend/src/store/index.ts @@ -12,6 +12,7 @@ import storage from 'redux-persist/lib/storage'; import {groupApi} from './services/groupApi'; import LayoutReducer from './LayoutSlice'; import RealmReducer from './RealmSlice'; +import InspireReducer from './inspireGridSlice'; const persistConfig = { key: 'root', @@ -24,6 +25,7 @@ const rootReducer = combineReducers({ scenarioList: ScenarioReducer, userPreference: UserPreferenceReducer, layoutSlice: LayoutReducer, + inspireGrid: InspireReducer, realm: RealmReducer, [caseDataApi.reducerPath]: caseDataApi.reducer, [scenarioApi.reducerPath]: scenarioApi.reducer,