Show multiple nearest libraries on map when doing postcode search (#139)

* Showing multiple nearest libraries and adding distance slider

* Updating to material ui 7

* Ensuring search runs when updating radius

* Implementing abort signal in searches

* Adding search results summary into mask

* Fixing display of library lines

* Fixing use of abort controller in library search

* Adding debouncing to radius slider

Author: DaveBathnes

package-lock.json

@@ -34,30 +34,29 @@
       "last 1 safari version"
     ]
   },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.5.2",
+    "gh-pages": "^6.3.0",
+    "sitemap": "^8.0.0",
+    "standard": "^17.1.2",
+    "vite": "^6.3.5"
+  },
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@fontsource/roboto": "^5.2.5",
-    "@mui/icons-material": "^6.4.11",
-    "@mui/material": "^6.4.11",
-    "@mui/x-data-grid": "^7.29.1",
+    "@fontsource/roboto": "^5.2.6",
+    "@mui/icons-material": "^7.1.1",
+    "@mui/material": "^7.1.1",
+    "@mui/x-data-grid": "^8.5.1",
     "@turf/turf": "^7.2.0",
     "axios": "^1.9.0",
-    "maplibre-gl": "^5.4.0",
+    "maplibre-gl": "^5.6.0",
     "markdown-to-jsx": "^7.7.6",
     "moment": "^2.30.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-map-gl": "^8.0.4",
-    "react-router-dom": "^7.5.2",
-    "react-websitecarbon-badge": "^1.0.6",
+    "react-router-dom": "^7.6.2",
     "rrule": "^2.8.1"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-react": "^4.4.1",
-    "gh-pages": "^6.3.0",
-    "sitemap": "^8.0.0",
-    "standard": "^17.1.2",
-    "vite": "^6.3.3"
   }
 }

package.json

@@ -9,7 +9,7 @@ import DialogTitle from '@mui/material/DialogTitle'
 import useMediaQuery from '@mui/material/useMediaQuery'
 import { useTheme } from '@mui/material/styles'
 
-import grey from '@mui/material/colors/grey'
+import { grey } from '@mui/material/colors'
 
 import CancelIcon from '@mui/icons-material/CancelRounded'
 

src/BuiltUpAreaPopup.jsx

@@ -11,8 +11,6 @@ import FavoriteIcon from '@mui/icons-material/FavoriteRounded'
 
 import { grey } from '@mui/material/colors'
 
-import { WebsiteCarbonBadge } from 'react-websitecarbon-badge'
-
 function Footer () {
   const mapPage = useMatch('/map')
   return (
@@ -27,7 +25,7 @@ function Footer () {
     >
       <Container>
         <Grid container spacing={2}>
-          <Grid item xs={12} sm={12} md={4} lg={4} xl={4}>
+          <Grid xs={12} sm={12} md={4} lg={4} xl={4}>
             <Typography component='p' variant='h6'>
               <MaterialLink
                 component={Link}
@@ -54,18 +52,7 @@ function Footer () {
               </MaterialLink>
             </Typography>
           </Grid>
-          <Grid
-            item
-            xs={12}
-            sm={12}
-            md={4}
-            lg={4}
-            xl={4}
-            sx={{ display: mapPage ? 'none' : 'block' }}
-          >
-            <WebsiteCarbonBadge url={window.location.href} />
-          </Grid>
-          <Grid item xs={12} sm={12} md={4} lg={4} xl={4}>
+          <Grid xs={12} sm={12} md={4} lg={4} xl={4}>
             <Typography component='p' variant='body1'>
               In memory of Paul Rowe
               <FavoriteIcon

src/Footer.jsx

@@ -4,7 +4,7 @@ import { Link, useMatch } from 'react-router-dom'
 
 import { alpha } from '@mui/material'
 
-import grey from '@mui/material/colors/grey'
+import { grey } from '@mui/material/colors'
 
 import AppBar from '@mui/material/AppBar'
 import Box from '@mui/material/Box'

src/Header.jsx

@@ -39,10 +39,10 @@ function Home () {
         <Search />
       </Box>
       <Grid container spacing={2}>
-        <Grid item xs={12} sm={6}>
+        <Grid xs={12} sm={6}>
           <PostcodeInfo />
         </Grid>
-        <Grid item xs={12} sm={6}>
+        <Grid xs={12} sm={6}>
           <PostcodeServiceInfo />
         </Grid>
       </Grid>

src/Home.jsx

@@ -19,12 +19,7 @@ import usePrevious from './hooks/usePrevious'
 
 function Libraries () {
   const [
-    {
-      displayClosedLibraries,
-      librarySearchDistance,
-      searchPosition,
-      serviceFilter
-    },
+    { displayClosedLibraries, searchDistance, searchPosition, serviceFilter },
     dispatchSearch
   ] = useSearchStateValue() //eslint-disable-line
   const [{}, dispatchView] = useViewStateValue() //eslint-disable-line
@@ -89,7 +84,7 @@ function Libraries () {
       pageSize: paginationModel.pageSize,
       sortModel,
       searchPosition,
-      searchDistance: librarySearchDistance,
+      searchDistance,
       serviceFilter,
       displayClosedLibraries
     })
@@ -99,7 +94,7 @@ function Libraries () {
     paginationModel.pageSize,
     sortModel,
     searchPosition,
-    librarySearchDistance,
+    searchDistance,
     serviceFilter,
     displayClosedLibraries
   ])

src/Libraries.jsx

@@ -13,7 +13,7 @@ import LibraryDetails from './LibraryDetails'
 import LibraryMap from './LibraryMap'
 import SiteBreadcrumbs from './SiteBreadcrumbs'
 
-import grey from '@mui/material/colors/grey'
+import { grey } from '@mui/material/colors'
 
 import { useApplicationStateValue } from './context/applicationState'
 import { useViewStateValue } from './context/viewState'
@@ -64,10 +64,10 @@ function Library () {
               </Typography>
             </Box>
             <Grid container spacing={2}>
-              <Grid item xs={6}>
+              <Grid xs={6}>
                 <LibraryDetails library={library} />
               </Grid>
-              <Grid item xs={6}>
+              <Grid xs={6}>
                 <Box sx={{ border: '1px solid', borderColor: grey[200] }}>
                   <LibraryMap
                     containerStyle={{