Skip to content

Commit 6ebedca

Browse files
DaveBathnesDaveBathnes
authored
Fixing bugs in table refreshing (#122)
1 parent b1d6521 commit 6ebedca

File tree

5 files changed

+88
-100
lines changed

5 files changed

+88
-100
lines changed

‎src/MobileMap.jsx‎

Lines changed: 68 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useEffect, useState } from 'react'
22

33
import dayjs from 'dayjs'
4+
import relativeTime from 'dayjs/plugin/relativeTime'
45

56
import Box from '@mui/material/Box'
67
import Fab from '@mui/material/Fab'
@@ -26,6 +27,8 @@ import PostcodeSearch from './PostcodeSearch'
2627

2728
import config from './helpers/config.json'
2829

30+
dayjs.extend(relativeTime)
31+
2932
const libraryAuthorityTiles = config.libraryAuthorityTiles
3033
const mobileTiles = config.mobileTiles
3134

@@ -147,38 +150,38 @@ const MobileMap = () => {
147150
// The mobile library locations
148151
mobileLocations && mobileLocations.length > 0
149152
? mobileLocations.map(l => {
150-
if (!l.geoX || !l.geoY) return null
151-
let locationPoint = [l.geoX, l.geoY]
152-
if (l.routeSection && l.routeSection.coordinates && l.updated) {
153-
const millisecondsPassed = dayjs(Date.now()).diff(l.updated)
154-
const index = Math.round(millisecondsPassed / 500)
155-
const coords = l.routeSection.coordinates
156-
if (coords.length > index && index > 0) {
157-
locationPoint = coords[index]
158-
}
159-
if (coords.length <= index && index > 0) {
160-
locationPoint = coords[coords.length - 1]
153+
if (!l.geoX || !l.geoY) return null
154+
let locationPoint = [l.geoX, l.geoY]
155+
if (l.routeSection && l.routeSection.coordinates && l.updated) {
156+
const millisecondsPassed = dayjs(Date.now()).diff(l.updated)
157+
const index = Math.round(millisecondsPassed / 500)
158+
const coords = l.routeSection.coordinates
159+
if (coords.length > index && index > 0) {
160+
locationPoint = coords[index]
161+
}
162+
if (coords.length <= index && index > 0) {
163+
locationPoint = coords[coords.length - 1]
164+
}
161165
}
162-
}
163-
const mobile = mobileLookup[l.mobileId]
164-
const organisation = mobile
165-
? organisationLookup[mobile.organisationId]
166-
: null
167-
return (
168-
<Marker
169-
key={'mkr_' + l.mobileId}
170-
longitude={locationPoint[0]}
171-
latitude={locationPoint[1]}
172-
anchor='bottom'
173-
>
174-
<MobileAvatar
175-
organisation={organisation}
176-
location={l}
177-
zoom={map ? map.getZoom() : 0}
178-
/>
179-
</Marker>
180-
)
181-
})
166+
const mobile = mobileLookup[l.mobileId]
167+
const organisation = mobile
168+
? organisationLookup[mobile.organisationId]
169+
: null
170+
return (
171+
<Marker
172+
key={'mkr_' + l.mobileId}
173+
longitude={locationPoint[0]}
174+
latitude={locationPoint[1]}
175+
anchor='bottom'
176+
>
177+
<MobileAvatar
178+
organisation={organisation}
179+
location={l}
180+
zoom={map ? map.getZoom() : 0}
181+
/>
182+
</Marker>
183+
)
184+
})
182185
: null
183186
}
184187
{currentService && currentService.geojson && (
@@ -195,37 +198,33 @@ const MobileMap = () => {
195198
)}
196199

197200
<Source type='vector' tiles={[libraryAuthorityTiles]}>
198-
{mapSettings.authorityBoundary
199-
? (
200-
<Layer
201-
type='line'
202-
source-layer='library_authority_boundaries'
203-
minzoom={6}
204-
layout={{
205-
'line-join': 'round',
206-
'line-cap': 'square'
207-
}}
208-
paint={{
209-
'line-color': '#a7a39b',
210-
'line-opacity': 1,
211-
'line-width': ['interpolate', ['linear'], ['zoom'], 6, 1, 18, 4]
212-
}}
213-
/>
214-
)
215-
: null}
216-
{mapSettings.authorityBoundary
217-
? (
218-
<Layer
219-
type='fill'
220-
source-layer='library_authority_boundaries'
221-
minzoom={6}
222-
paint={{
223-
'fill-color': '#ccc',
224-
'fill-opacity': 0.1
225-
}}
226-
/>
227-
)
228-
: null}
201+
{mapSettings.authorityBoundary ? (
202+
<Layer
203+
type='line'
204+
source-layer='library_authority_boundaries'
205+
minzoom={6}
206+
layout={{
207+
'line-join': 'round',
208+
'line-cap': 'square'
209+
}}
210+
paint={{
211+
'line-color': '#a7a39b',
212+
'line-opacity': 1,
213+
'line-width': ['interpolate', ['linear'], ['zoom'], 6, 1, 18, 4]
214+
}}
215+
/>
216+
) : null}
217+
{mapSettings.authorityBoundary ? (
218+
<Layer
219+
type='fill'
220+
source-layer='library_authority_boundaries'
221+
minzoom={6}
222+
paint={{
223+
'fill-color': '#ccc',
224+
'fill-opacity': 0.1
225+
}}
226+
/>
227+
) : null}
229228
</Source>
230229

231230
<Source type='vector' tiles={[mobileTiles]} maxzoom={14}>
@@ -353,13 +352,11 @@ const MobileMap = () => {
353352
}}
354353
/>
355354
</Source>
356-
{searchPosition && searchPosition.length > 1
357-
? (
358-
<Marker longitude={searchPosition[0]} latitude={searchPosition[1]}>
359-
<MeAvatar searchType={searchType} />
360-
</Marker>
361-
)
362-
: null}
355+
{searchPosition && searchPosition.length > 1 ? (
356+
<Marker longitude={searchPosition[0]} latitude={searchPosition[1]}>
357+
<MeAvatar searchType={searchType} />
358+
</Marker>
359+
) : null}
363360
<NavigationControl position='bottom-left' />
364361
</Map>
365362
<Tooltip title='Map settings'>
@@ -376,7 +373,8 @@ const MobileMap = () => {
376373
dispatchView({
377374
type: 'SetMapSettingsDialog',
378375
mapSettingsDialogOpen: true
379-
})}
376+
})
377+
}
380378
>
381379
<LayersIcon />
382380
</Fab>

‎src/Stops.jsx‎

Lines changed: 11 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ const Stops = () => {
3333
const prevPosition = usePrevious(searchPosition)
3434

3535
const initialSortModel = [{ field: 'name', sort: 'asc' }]
36-
3736
const [sortModel, setSortModel] = useState(initialSortModel)
3837
const [filterModel, setFilterModel] = useState({
3938
items: [
@@ -49,24 +48,9 @@ const Stops = () => {
4948
pageSize: 5
5049
})
5150

52-
const initialState = {
53-
sorting: {
54-
sortModel
55-
},
56-
pagination: {
57-
paginationModel,
58-
rowCount: 0
59-
},
60-
filter: filterModel
61-
}
62-
6351
const { loadingMobileStops, mobileStops, pageInfo, getMobileStopsFromQuery } =
6452
useMobileStopsQuery()
6553

66-
const [rowCountState, setRowCountState] = React.useState(
67-
pageInfo?.totalRowCount || 0
68-
)
69-
7054
const fetchStops = useCallback(() => {
7155
if (
7256
prevPosition &&
@@ -91,7 +75,6 @@ const Stops = () => {
9175
mobileFilter,
9276
routeFilter
9377
})
94-
// eslint-disable-next-line
9578
}, [
9679
paginationModel,
9780
sortModel,
@@ -104,14 +87,6 @@ const Stops = () => {
10487

10588
useEffect(() => fetchStops(), [fetchStops])
10689

107-
React.useEffect(() => {
108-
setRowCountState(prevRowCountState =>
109-
pageInfo?.totalRowCount !== undefined
110-
? pageInfo?.totalRowCount
111-
: prevRowCountState
112-
)
113-
}, [pageInfo?.totalRowCount, setRowCountState])
114-
11590
const selectStop = stop => {
11691
dispatchSearch({ type: 'SetCurrentStop', currentStopId: stop.id })
11792
dispatchView({ type: 'SetStopDialog', stopDialogOpen: true })
@@ -146,6 +121,15 @@ const Stops = () => {
146121
}
147122
]
148123

124+
const rowCountRef = React.useRef(pageInfo?.totalRowCount || 0)
125+
126+
const rowCount = React.useMemo(() => {
127+
if (pageInfo?.totalRowCount !== undefined) {
128+
rowCountRef.current = pageInfo.totalRowCount
129+
}
130+
return rowCountRef.current
131+
}, [pageInfo?.totalRowCount])
132+
149133
return (
150134
<>
151135
<ListSubheader disableSticky disableGutters sx={{ textAlign: 'center' }}>
@@ -154,7 +138,6 @@ const Stops = () => {
154138
<div style={{ display: 'flex', height: '100%' }}>
155139
<div style={{ flexGrow: 1 }}>
156140
<DataGrid
157-
autoPageSize
158141
sx={{
159142
backgroundColor: 'white',
160143
border: 2,
@@ -179,16 +162,15 @@ const Stops = () => {
179162
filterMode='server'
180163
filterModel={filterModel}
181164
loading={loadingMobileStops}
182-
page={paginationModel.page}
183-
pageSize={paginationModel.pageSize}
184165
pageSizeOptions={[5]}
185166
pagination
186167
paginationMode='server'
168+
paginationModel={paginationModel}
187169
onPaginationModelChange={newPaginationModel => {
188170
setPaginationModel(newPaginationModel)
189171
}}
190172
rows={mobileStops}
191-
rowCount={rowCountState}
173+
rowCount={rowCount}
192174
sortingMode='server'
193175
sortModel={sortModel}
194176
onFilterModelChange={newFilterModel =>
@@ -203,7 +185,6 @@ const Stops = () => {
203185
}}
204186
onRowClick={params => selectStop(params.row)}
205187
columns={columns}
206-
initialState={initialState}
207188
/>
208189
</div>
209190
</div>

‎src/models/mobiles.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import axios from 'axios'
22
import dayjs from 'dayjs'
3+
import relativeTime from 'dayjs/plugin/relativeTime'
34

45
import config from '../helpers/config.json'
56

7+
dayjs.extend(relativeTime)
8+
69
export class Mobile {
710
constructor (obj) {
811
Object.assign(this, obj)

‎src/models/routes.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import axios from 'axios'
22
import dayjs from 'dayjs'
3+
import relativeTime from 'dayjs/plugin/relativeTime'
34

45
import config from '../helpers/config.json'
56

7+
dayjs.extend(relativeTime)
8+
69
export class Route {
710
constructor (obj) {
811
Object.assign(this, obj)

‎src/models/stops.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import axios from 'axios'
22
import dayjs from 'dayjs'
3+
import relativeTime from 'dayjs/plugin/relativeTime'
34

45
import { getText } from '../helpers/rrule'
56

67
import config from '../helpers/config.json'
78

9+
dayjs.extend(relativeTime)
10+
811
export class Stop {
912
constructor (obj) {
1013
Object.assign(this, obj)

0 commit comments

Comments
 (0)