[Fix] #94, repair overwriting the last data point

Type-Style · Aug 19, 2024 · 6e87449 · 6e87449
1 parent 0de8b24
commit 6e87449
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 27 deletions.
diff --git a/src/client/components/Map.tsx b/src/client/components/Map.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react'
-import { MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet'
+import { MapContainer, Marker,  Popup, TileLayer, useMap } from 'react-leaflet'
 import 'leaflet/dist/leaflet.css';
 import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses images from ~leaflet package
 // import L from 'leaflet';
 import 'leaflet-defaulticon-compatibility';
-import * as css from "../css/map.module.css";
+import "../css/map.css";
 
 
 // Used to recenter the map to new coordinates
@@ -27,20 +27,25 @@ function Map({ entries }: { entries: Models.IEntry[] }) {
 	const lastEntry = entries.at(-1);
 	const cleanEntries = entries.filter((entry) => !entry.ignore);
 
+
 	return (
-		<MapContainer className={css.mapContainer} center={[lastEntry.lat, lastEntry.lon]} zoom={13} scrollWheelZoom={false}>
+		<MapContainer className="mapContainer" center={[lastEntry.lat, lastEntry.lon]} zoom={13} scrollWheelZoom={false}>
 			<MapRecenter lat={lastEntry.lat} lon={lastEntry.lon} zoom={13} />
 			<TileLayer
 				attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
 				url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
 			/>
-			{cleanEntries.map((entry) =>
-				<Marker key={entry.index} position={[entry.lat, entry.lon]}>
-					<Popup>
-						<pre>{JSON.stringify(entry, null, 2)}</pre>
-					</Popup>
-				</Marker>
-			)}
+			{cleanEntries.map((entry) => {
+				console.log(entry.index);
+				return (
+					<Marker key={entry.index} position={[entry.lat, entry.lon]}>
+						<Popup>
+							<pre>{JSON.stringify(entry, null, 2)}</pre>
+						</Popup>
+					</Marker>
+				)
+			})}
+
 
 		</MapContainer>
 	)

diff --git a/src/client/css/map.module.css b/src/client/css/map.module.css
diff --git a/src/client/pages/Start.tsx b/src/client/pages/Start.tsx
@@ -70,36 +70,39 @@ function Start() {
 
       const newEntries = response.data.entries;
 
-      if (newEntries.length == 1) {
-        setEntries(newEntries);
-      }
-
-      if (newEntries.length > 1) {
+      if (newEntries.length) {
         setEntries((prevEntries) => {
-          const allButLastPrevEntries = prevEntries.slice(0, prevEntries.length -1);
-          const mergedEntries = [...allButLastPrevEntries, ...newEntries];
-          index.current = mergedEntries.length;
+          let allButLastPrevEntries, mergedEntries = [];
+
+          if (prevEntries.length) {
+            allButLastPrevEntries = prevEntries.slice(0, prevEntries.length - 1);
+            mergedEntries = [...allButLastPrevEntries, ...newEntries];
+          } else {
+            mergedEntries = newEntries;
+          }
 
+          index.current = mergedEntries.length;
+
           return mergedEntries;
         });
-        
-      }     
+
+      }
 
       setMessageObj({ isError: null, status: null, message: null });
       setNextFetch(new Date().getTime() + fetchIntervalMs);
     } catch (error) {
       console.log("error fetching data %o", error);
-      
+
       if (!error.response) {
         setMessageObj({ isError: true, status: 499, message: error.message || "offline" });
         setNextFetch(new Date().getTime() + fetchIntervalMs);
         return;
       }
-      
+
       if (error.response.status == 403) { setLogin(false) }
-      
+
       setMessageObj({ isError: true, status: error.response.data.status || error.response.status, message: error.response.data.message || error.message });
-      
+
       clearInterval(intervalID.current); intervalID.current = null;
       console.info("cleared Interval");
       setNextFetch(null);