Fixing bugs to make map page work again

package.json

@@ -5,30 +5,29 @@
   "type": "module",
   "homepage": "https://www.mobilelibraries.org",
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@fontsource/roboto": "^4.5.8",
-    "@mui/icons-material": "^5.15.13",
-    "@mui/material": "^5.15.13",
-    "@mui/x-data-grid": "^6.19.6",
-    "axios": "^1.7.4",
+    "@mui/icons-material": "^5.16.14",
+    "@mui/material": "^5.16.14",
+    "@mui/x-data-grid": "^6.20.4",
+    "axios": "^1.7.9",
     "maplibre-gl": "^2.4.0",
-    "markdown-to-jsx": "^7.4.3",
+    "markdown-to-jsx": "^7.7.3",
     "moment": "^2.30.1",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-carbonbadge": "^2.0.0",
-    "react-dom": "^18.2.0",
-    "react-map-gl": "^7.1.7",
-    "react-router-dom": "^6.22.3",
+    "react-dom": "^18.3.1",
+    "react-map-gl": "^7.1.9",
+    "react-router-dom": "^6.29.0",
     "rrule": "^2.8.1"
   },
   "scripts": {
     "start": "vite",
     "build": "vite build",
     "serve": "vite preview",
     "predeploy": "vite build",
-    "deploy": "gh-pages -d build",
-    "analyze": "source-map-explorer 'build/static/js/*.js'"
+    "deploy": "gh-pages -d build"
   },
   "eslintConfig": {
     "extends": "react-app",
@@ -39,7 +38,7 @@
     }
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.3.4",
     "gh-pages": "^5.0.0",
     "standard": "^16.0.4",
     "vite": "^5.4.14"

src/Footer.jsx

@@ -58,7 +58,7 @@ const Footer = () => {
       >
         <Carbonbadge />
       </Grid>
-      <Grid item xs={12} sm={12} md={3} lg={4} xl={4}></Grid>
+      <Grid item xs={12} sm={12} md={3} lg={4} xl={4} />
     </Grid>
   )
 }

src/Header.jsx

@@ -44,7 +44,7 @@ const Header = () => {
         <Tab
           icon={<ManageSearchRoundedIcon />}
           iconPosition='start'
-          label={'Search'}
+          label='Search'
           value='/'
           component={Link}
           to='/'
@@ -59,7 +59,7 @@ const Header = () => {
         <Tab
           icon={<AirportShuttleRoundedIcon />}
           iconPosition='start'
-          label={'Tracker'}
+          label='Tracker'
           value='/mobiles'
           component={Link}
           to='/mobiles'
@@ -74,7 +74,7 @@ const Header = () => {
         <Tab
           icon={<PlaceRoundedIcon />}
           iconPosition='start'
-          label={'Map'}
+          label='Map'
           value='/map'
           component={Link}
           to='/map'

src/MobileCard.jsx

@@ -103,16 +103,11 @@ const MobileCard = props => {
   let statusMessage = null
   if (location) {
     const status = location.getStatus()
-    if (status && status.type === 'offRoad')
-      statusMessage = offRoadMessage(status)
-    if (status && status.type === 'preRoute')
-      statusMessage = preRouteMessage(status)
-    if (status && status.type === 'atStop')
-      statusMessage = atStopMessage(status)
-    if (status && status.type === 'betweenStops')
-      statusMessage = betweenStopsMessage(status)
-    if (status && status.type === 'postRoute')
-      statusMessage = postRouteMessage(status)
+    if (status && status.type === 'offRoad') { statusMessage = offRoadMessage(status) }
+    if (status && status.type === 'preRoute') { statusMessage = preRouteMessage(status) }
+    if (status && status.type === 'atStop') { statusMessage = atStopMessage(status) }
+    if (status && status.type === 'betweenStops') { statusMessage = betweenStopsMessage(status) }
+    if (status && status.type === 'postRoute') { statusMessage = postRouteMessage(status) }
   }
 
   const bull = <span>•</span>
@@ -156,16 +151,18 @@ const MobileCard = props => {
             View stops
           </Button>
         </Tooltip>
-        {mobile.timetable ? (
-          <>
-            <Divider />
-            <Tooltip title='Website timetable'>
-              <IconButton onClick={() => this.goToWebsite()} size='large'>
-                <WebIcon />
-              </IconButton>
-            </Tooltip>
-          </>
-        ) : null}
+        {mobile.timetable
+          ? (
+            <>
+              <Divider />
+              <Tooltip title='Website timetable'>
+                <IconButton onClick={() => this.goToWebsite()} size='large'>
+                  <WebIcon />
+                </IconButton>
+              </Tooltip>
+            </>
+            )
+          : null}
       </CardActions>
     </Card>
   )

src/MobileLibraryDetails.jsx

@@ -25,8 +25,7 @@ const MobileLibraryDetails = () => {
   const [mobileLibrary, setMobileLibrary] = useState({})
 
   useEffect(() => {
-    if (currentMobileLibraryId != null && mobileLookup)
-      setMobileLibrary(mobileLookup[currentMobileLibraryId])
+    if (currentMobileLibraryId != null && mobileLookup) { setMobileLibrary(mobileLookup[currentMobileLibraryId]) }
   }, [currentMobileLibraryId, mobileLookup])
 
   const close = () => {
@@ -48,17 +47,19 @@ const MobileLibraryDetails = () => {
       BackdropProps={{ invisible: true }}
       PaperProps={{ elevation: 0 }}
     >
-      {mobileLibrary ? (
-        <>
-          <DialogTitle id='dlg-title'>{mobileLibrary.name}</DialogTitle>
-          <DialogContent>
-            <ListSubheader disableSticky>Actions</ListSubheader>
-            <div />
-          </DialogContent>
-        </>
-      ) : (
-        <CircularProgress color='primary' size={30} />
-      )}
+      {mobileLibrary
+        ? (
+          <>
+            <DialogTitle id='dlg-title'>{mobileLibrary.name}</DialogTitle>
+            <DialogContent>
+              <ListSubheader disableSticky>Actions</ListSubheader>
+              <div />
+            </DialogContent>
+          </>
+          )
+        : (
+          <CircularProgress color='primary' size={30} />
+          )}
       <DialogActions>
         <Button
           onClick={() => close()}

src/MobileMap.jsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from 'react'
 
+import moment from 'moment'
+
 import Box from '@mui/material/Box'
 import Fab from '@mui/material/Fab'
 import Tooltip from '@mui/material/Tooltip'
@@ -151,19 +153,22 @@ const MobileMap = () => {
                   const millisecondsPassed = moment(Date.now()).diff(l.updated)
                   const index = Math.round(millisecondsPassed / 500)
                   const coords = l.routeSection.coordinates
-                  if (coords.length > index && index > 0)
+                  if (coords.length > index && index > 0) {
                     locationPoint = coords[index]
-                  if (coords.length <= index && index > 0)
+                  }
+                  if (coords.length <= index && index > 0) {
                     locationPoint = coords[coords.length - 1]
+                  }
                 }
                 const mobile = mobileLookup[l.mobileId]
                 const organisation = mobile
                   ? organisationLookup[mobile.organisationId]
                   : null
                 return (
                   <Marker
-                    key={'mkr_' + l.id}
-                    coordinates={locationPoint}
+                    key={'mkr_' + l.mobileId}
+                    longitude={locationPoint[0]}
+                    latitude={locationPoint[1]}
                     anchor='bottom'
                   >
                     <MobileAvatar

src/Mobiles.jsx

@@ -24,8 +24,7 @@ const Mobiles = () => {
       mobileLocationLookup,
       mobilesNearestLookup,
       routeLookup
-    },
-    dispatchApplication
+    }
   ] = useApplicationStateValue() //eslint-disable-line
   const [
     {
@@ -35,8 +34,7 @@ const Mobiles = () => {
       searchType,
       searchDistance,
       searchPostcode
-    },
-    dispatchSearch
+    }
   ] = useSearchStateValue() //eslint-disable-line
   const [{ loadingMobileLocations }, dispatchView] = useViewStateValue() //eslint-disable-line
 
@@ -85,21 +83,24 @@ const Mobiles = () => {
     routeFilter.length > 0 ? routeLookup[routeFilter[0]].name : ''
 
   let title = 'Mobile libraries'
-  if (organisationName !== '')
+  if (organisationName !== '') {
     title = 'Mobile libraries serving ' + organisationName
+  }
   if (mobileName !== '') title = organisationName + ' ' + mobileName
   if (routeName !== '') title = organisationName + ' ' + routeName
-  if (searchPostcode !== '')
+  if (searchPostcode !== '') {
     title =
       'Mobile libraries with stops within ' +
       Math.round(searchDistance / 1609) +
       ' mile(s) of ' +
       searchPostcode
-  if (searchType === 'gps')
+  }
+  if (searchType === 'gps') {
     title =
       'Mobile libraries with stops within ' +
       Math.round(searchDistance / 1609) +
       ' mile(s) of your location'
+  }
 
   const displayMobiles = openTab === 0 ? activeMobiles : filteredMobiles
   const mobilesView = displayMobiles

src/PostcodeSearch.jsx

@@ -163,55 +163,61 @@ const PostcodeSearch = () => {
           fontWeight: 700
         }}
       />
-      {!loadingPostcode && !loadingLocation ? (
-        <Tooltip title='Search by postcode'>
-          <IconButton
-            aria-label='Search'
-            color='inherit'
-            onClick={() => postcodeSearch()}
-            size='large'
-            disabled={loadingPostcode || loadingLocation}
-          >
-            <SearchIcon />
-          </IconButton>
-        </Tooltip>
-      ) : (
-        <SearchBox>
-          <CircularProgress color='inherit' size={22} />
-        </SearchBox>
-      )}
-      <Tooltip title='Use your current location'>
-        <>
-          {!loadingLocation && !loadingPostcode ? (
+      {!loadingPostcode && !loadingLocation
+        ? (
+          <Tooltip title='Search by postcode'>
             <IconButton
-              aria-label='Search by current location'
+              aria-label='Search'
               color='inherit'
-              onClick={() => getLocation()}
+              onClick={() => postcodeSearch()}
               size='large'
               disabled={loadingPostcode || loadingLocation}
             >
-              <MyLocationIcon />
+              <SearchIcon />
             </IconButton>
-          ) : (
-            <SearchBox>
-              <CircularProgress color='inherit' size={22} />
-            </SearchBox>
+          </Tooltip>
+          )
+        : (
+          <SearchBox>
+            <CircularProgress color='inherit' size={22} />
+          </SearchBox>
           )}
+      <Tooltip title='Use your current location'>
+        <>
+          {!loadingLocation && !loadingPostcode
+            ? (
+              <IconButton
+                aria-label='Search by current location'
+                color='inherit'
+                onClick={() => getLocation()}
+                size='large'
+                disabled={loadingPostcode || loadingLocation}
+              >
+                <MyLocationIcon />
+              </IconButton>
+              )
+            : (
+              <SearchBox>
+                <CircularProgress color='inherit' size={22} />
+              </SearchBox>
+              )}
         </>
       </Tooltip>
-      {searchType === 'postcode' ? (
-        <Tooltip title='Clear search'>
-          <IconButton
-            color='inherit'
-            aria-label='Clear search'
-            onClick={() => clearSearch()}
-            size='large'
-            disabled={loadingPostcode || loadingLocation}
-          >
-            <ClearIcon />
-          </IconButton>
-        </Tooltip>
-      ) : null}
+      {searchType === 'postcode'
+        ? (
+          <Tooltip title='Clear search'>
+            <IconButton
+              color='inherit'
+              aria-label='Clear search'
+              onClick={() => clearSearch()}
+              size='large'
+              disabled={loadingPostcode || loadingLocation}
+            >
+              <ClearIcon />
+            </IconButton>
+          </Tooltip>
+          )
+        : null}
     </Box>
   )
 }