From 6ebedcab46b04ef3ac8e9789fb8fc6fb09b15d83 Mon Sep 17 00:00:00 2001
From: Dave <8709533+DaveBathnes@users.noreply.github.com>
Date: Mon, 24 Feb 2025 13:41:37 +0000
Subject: [PATCH] Fixing bugs in table refreshing (#122)

---
 src/MobileMap.jsx     | 138 +++++++++++++++++++++---------------------
 src/Stops.jsx         |  41 ++++---------
 src/models/mobiles.js |   3 +
 src/models/routes.js  |   3 +
 src/models/stops.js   |   3 +
 5 files changed, 88 insertions(+), 100 deletions(-)

diff --git a/src/MobileMap.jsx b/src/MobileMap.jsx
index 0845e4a..6ed6f88 100644
--- a/src/MobileMap.jsx
+++ b/src/MobileMap.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 
 import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
 
 import Box from '@mui/material/Box'
 import Fab from '@mui/material/Fab'
@@ -26,6 +27,8 @@ import PostcodeSearch from './PostcodeSearch'
 
 import config from './helpers/config.json'
 
+dayjs.extend(relativeTime)
+
 const libraryAuthorityTiles = config.libraryAuthorityTiles
 const mobileTiles = config.mobileTiles
 
@@ -147,38 +150,38 @@ const MobileMap = () => {
           // The mobile library locations
           mobileLocations && mobileLocations.length > 0
             ? mobileLocations.map(l => {
-              if (!l.geoX || !l.geoY) return null
-              let locationPoint = [l.geoX, l.geoY]
-              if (l.routeSection && l.routeSection.coordinates && l.updated) {
-                const millisecondsPassed = dayjs(Date.now()).diff(l.updated)
-                const index = Math.round(millisecondsPassed / 500)
-                const coords = l.routeSection.coordinates
-                if (coords.length > index && index > 0) {
-                  locationPoint = coords[index]
-                }
-                if (coords.length <= index && index > 0) {
-                  locationPoint = coords[coords.length - 1]
+                if (!l.geoX || !l.geoY) return null
+                let locationPoint = [l.geoX, l.geoY]
+                if (l.routeSection && l.routeSection.coordinates && l.updated) {
+                  const millisecondsPassed = dayjs(Date.now()).diff(l.updated)
+                  const index = Math.round(millisecondsPassed / 500)
+                  const coords = l.routeSection.coordinates
+                  if (coords.length > index && index > 0) {
+                    locationPoint = coords[index]
+                  }
+                  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.mobileId}
-                  longitude={locationPoint[0]}
-                  latitude={locationPoint[1]}
-                  anchor='bottom'
-                >
-                  <MobileAvatar
-                    organisation={organisation}
-                    location={l}
-                    zoom={map ? map.getZoom() : 0}
-                  />
-                </Marker>
-              )
-            })
+                const mobile = mobileLookup[l.mobileId]
+                const organisation = mobile
+                  ? organisationLookup[mobile.organisationId]
+                  : null
+                return (
+                  <Marker
+                    key={'mkr_' + l.mobileId}
+                    longitude={locationPoint[0]}
+                    latitude={locationPoint[1]}
+                    anchor='bottom'
+                  >
+                    <MobileAvatar
+                      organisation={organisation}
+                      location={l}
+                      zoom={map ? map.getZoom() : 0}
+                    />
+                  </Marker>
+                )
+              })
             : null
         }
         {currentService && currentService.geojson && (
@@ -195,37 +198,33 @@ const MobileMap = () => {
         )}
 
         <Source type='vector' tiles={[libraryAuthorityTiles]}>
-          {mapSettings.authorityBoundary
-            ? (
-              <Layer
-                type='line'
-                source-layer='library_authority_boundaries'
-                minzoom={6}
-                layout={{
-                  'line-join': 'round',
-                  'line-cap': 'square'
-                }}
-                paint={{
-                  'line-color': '#a7a39b',
-                  'line-opacity': 1,
-                  'line-width': ['interpolate', ['linear'], ['zoom'], 6, 1, 18, 4]
-                }}
-              />
-              )
-            : null}
-          {mapSettings.authorityBoundary
-            ? (
-              <Layer
-                type='fill'
-                source-layer='library_authority_boundaries'
-                minzoom={6}
-                paint={{
-                  'fill-color': '#ccc',
-                  'fill-opacity': 0.1
-                }}
-              />
-              )
-            : null}
+          {mapSettings.authorityBoundary ? (
+            <Layer
+              type='line'
+              source-layer='library_authority_boundaries'
+              minzoom={6}
+              layout={{
+                'line-join': 'round',
+                'line-cap': 'square'
+              }}
+              paint={{
+                'line-color': '#a7a39b',
+                'line-opacity': 1,
+                'line-width': ['interpolate', ['linear'], ['zoom'], 6, 1, 18, 4]
+              }}
+            />
+          ) : null}
+          {mapSettings.authorityBoundary ? (
+            <Layer
+              type='fill'
+              source-layer='library_authority_boundaries'
+              minzoom={6}
+              paint={{
+                'fill-color': '#ccc',
+                'fill-opacity': 0.1
+              }}
+            />
+          ) : null}
         </Source>
 
         <Source type='vector' tiles={[mobileTiles]} maxzoom={14}>
@@ -353,13 +352,11 @@ const MobileMap = () => {
             }}
           />
         </Source>
-        {searchPosition && searchPosition.length > 1
-          ? (
-            <Marker longitude={searchPosition[0]} latitude={searchPosition[1]}>
-              <MeAvatar searchType={searchType} />
-            </Marker>
-            )
-          : null}
+        {searchPosition && searchPosition.length > 1 ? (
+          <Marker longitude={searchPosition[0]} latitude={searchPosition[1]}>
+            <MeAvatar searchType={searchType} />
+          </Marker>
+        ) : null}
         <NavigationControl position='bottom-left' />
       </Map>
       <Tooltip title='Map settings'>
@@ -376,7 +373,8 @@ const MobileMap = () => {
             dispatchView({
               type: 'SetMapSettingsDialog',
               mapSettingsDialogOpen: true
-            })}
+            })
+          }
         >
           <LayersIcon />
         </Fab>
diff --git a/src/Stops.jsx b/src/Stops.jsx
index 4a4a6c9..e96836d 100644
--- a/src/Stops.jsx
+++ b/src/Stops.jsx
@@ -33,7 +33,6 @@ const Stops = () => {
   const prevPosition = usePrevious(searchPosition)
 
   const initialSortModel = [{ field: 'name', sort: 'asc' }]
-
   const [sortModel, setSortModel] = useState(initialSortModel)
   const [filterModel, setFilterModel] = useState({
     items: [
@@ -49,24 +48,9 @@ const Stops = () => {
     pageSize: 5
   })
 
-  const initialState = {
-    sorting: {
-      sortModel
-    },
-    pagination: {
-      paginationModel,
-      rowCount: 0
-    },
-    filter: filterModel
-  }
-
   const { loadingMobileStops, mobileStops, pageInfo, getMobileStopsFromQuery } =
     useMobileStopsQuery()
 
-  const [rowCountState, setRowCountState] = React.useState(
-    pageInfo?.totalRowCount || 0
-  )
-
   const fetchStops = useCallback(() => {
     if (
       prevPosition &&
@@ -91,7 +75,6 @@ const Stops = () => {
       mobileFilter,
       routeFilter
     })
-    // eslint-disable-next-line
   }, [
     paginationModel,
     sortModel,
@@ -104,14 +87,6 @@ const Stops = () => {
 
   useEffect(() => fetchStops(), [fetchStops])
 
-  React.useEffect(() => {
-    setRowCountState(prevRowCountState =>
-      pageInfo?.totalRowCount !== undefined
-        ? pageInfo?.totalRowCount
-        : prevRowCountState
-    )
-  }, [pageInfo?.totalRowCount, setRowCountState])
-
   const selectStop = stop => {
     dispatchSearch({ type: 'SetCurrentStop', currentStopId: stop.id })
     dispatchView({ type: 'SetStopDialog', stopDialogOpen: true })
@@ -146,6 +121,15 @@ const Stops = () => {
     }
   ]
 
+  const rowCountRef = React.useRef(pageInfo?.totalRowCount || 0)
+
+  const rowCount = React.useMemo(() => {
+    if (pageInfo?.totalRowCount !== undefined) {
+      rowCountRef.current = pageInfo.totalRowCount
+    }
+    return rowCountRef.current
+  }, [pageInfo?.totalRowCount])
+
   return (
     <>
       <ListSubheader disableSticky disableGutters sx={{ textAlign: 'center' }}>
@@ -154,7 +138,6 @@ const Stops = () => {
       <div style={{ display: 'flex', height: '100%' }}>
         <div style={{ flexGrow: 1 }}>
           <DataGrid
-            autoPageSize
             sx={{
               backgroundColor: 'white',
               border: 2,
@@ -179,16 +162,15 @@ const Stops = () => {
             filterMode='server'
             filterModel={filterModel}
             loading={loadingMobileStops}
-            page={paginationModel.page}
-            pageSize={paginationModel.pageSize}
             pageSizeOptions={[5]}
             pagination
             paginationMode='server'
+            paginationModel={paginationModel}
             onPaginationModelChange={newPaginationModel => {
               setPaginationModel(newPaginationModel)
             }}
             rows={mobileStops}
-            rowCount={rowCountState}
+            rowCount={rowCount}
             sortingMode='server'
             sortModel={sortModel}
             onFilterModelChange={newFilterModel =>
@@ -203,7 +185,6 @@ const Stops = () => {
             }}
             onRowClick={params => selectStop(params.row)}
             columns={columns}
-            initialState={initialState}
           />
         </div>
       </div>
diff --git a/src/models/mobiles.js b/src/models/mobiles.js
index 711269c..a280e6c 100644
--- a/src/models/mobiles.js
+++ b/src/models/mobiles.js
@@ -1,8 +1,11 @@
 import axios from 'axios'
 import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
 
 import config from '../helpers/config.json'
 
+dayjs.extend(relativeTime)
+
 export class Mobile {
   constructor (obj) {
     Object.assign(this, obj)
diff --git a/src/models/routes.js b/src/models/routes.js
index 040e946..9e0dbac 100644
--- a/src/models/routes.js
+++ b/src/models/routes.js
@@ -1,8 +1,11 @@
 import axios from 'axios'
 import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
 
 import config from '../helpers/config.json'
 
+dayjs.extend(relativeTime)
+
 export class Route {
   constructor (obj) {
     Object.assign(this, obj)
diff --git a/src/models/stops.js b/src/models/stops.js
index ee50547..9bb8b3d 100644
--- a/src/models/stops.js
+++ b/src/models/stops.js
@@ -1,10 +1,13 @@
 import axios from 'axios'
 import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
 
 import { getText } from '../helpers/rrule'
 
 import config from '../helpers/config.json'
 
+dayjs.extend(relativeTime)
+
 export class Stop {
   constructor (obj) {
     Object.assign(this, obj)