Introducing redux to manage tracks.

src/App.tsx

@@ -16,24 +16,27 @@ import '@ionic/react/css/text-transformation.css';
 import '@ionic/react/css/flex-utils.css';
 import '@ionic/react/css/display.css';
 
+import { Provider } from 'react-redux';
+
 /* Theme variables */
 import './theme/variables.css';
 
 /* Components */
 
-import LiveMap from './components/live-map'
+import LiveMap from './components/live-map';
+import store from './store/index';
 import React from 'react';
 
 setupIonicReact();
 
-
 const App: React.FC = () => (
-
   <IonApp>
     <React.StrictMode>
-      <LiveMap />
+      <Provider store={store}>
+        <LiveMap />
+      </Provider>
     </React.StrictMode>
-   </IonApp>
+  </IonApp>
 );
 
 export default App;

src/components/gpx-overlay.tsx

@@ -1,10 +1,10 @@
 import { Overlay, MapState, Point } from 'pigeon-maps';
 import React from 'react';
+import { useSelector } from 'react-redux';
 
 const GPXOverlay: React.FC<{
   mapState: any;
   latLngToPixel: any;
-  track: any;
 }> = (props: {
   mapState: MapState;
   latLngToPixel:
@@ -14,8 +14,8 @@ const GPXOverlay: React.FC<{
         zoom?: number | undefined
       ) => Point)
     | undefined;
-  track: any;
 }) => {
+  const track = useSelector((state: { gpx: { current: any; }; }) => state.gpx.current.trk[0]);
   const trkToPolyline = (trk: any) => {
     const latLongs: string[] = trk.trkseg[0].trkpt.map((trkpt: any) => {
       if (props.latLngToPixel === undefined) {
@@ -40,10 +40,12 @@ const GPXOverlay: React.FC<{
           viewBox={'0 0 ' + props.mapState.width + ' ' + props.mapState.height}
           width={props.mapState.width}
           height={props.mapState.height}
-          >
+        >
           <polyline
-            points={trkToPolyline(props.track)}
-            stroke="black" strokeWidth="3" fill="none"
+            points={trkToPolyline(track)}
+            stroke='black'
+            strokeWidth='3'
+            fill='none'
           ></polyline>
         </svg>
       )}

src/components/live-map.tsx

@@ -1,9 +1,13 @@
-import react from 'react';
-import { useState, useEffect } from 'react';
+import react, { useEffect } from 'react';
+import { useState } from 'react';
 import { Map, Marker, ZoomControl } from 'pigeon-maps';
 import GPXOverlay from './gpx-overlay';
 import { registerPlugin } from '@capacitor/core';
 import { BackgroundGeolocationPlugin } from '@capacitor-community/background-geolocation';
+import { useDispatch } from 'react-redux';
+
+import { gpxActions } from '../store/gpx';
+
 const BackgroundGeolocation = registerPlugin<BackgroundGeolocationPlugin>(
   'BackgroundGeolocation'
 );
@@ -15,30 +19,32 @@ const LiveMap: react.FC = () => {
   const [position, setPosition] = useState(initialCenter);
   const [zoom, setZoom] = useState(initialZoom);
 
-  const emptyTrack: any = {
-    trkseg: [
-      {
-        trkpt: [
-          {
-            $: {
-              lat: 43.57154,
-              lon: 3.94351,
-            },
-          },
-          {
-            $: {
-              lat: 43.56922,
-              lon: 3.94228,
-            },
-          },
-        ],
-      },
-    ],
-  };
-
-  let [track, setTrack] = useState(emptyTrack);
+  const dispatch = useDispatch();
 
   useEffect(() => {
+    dispatch(
+      gpxActions.appendTrkpt({
+        trkKey: 'current',
+        trkpt: {
+          $: {
+            lat: 43.57154,
+            lon: 3.94351,
+          },
+        },
+      })
+    );
+    dispatch(
+      gpxActions.appendTrkpt({
+        trkKey: 'current',
+        trkpt: {
+          $: {
+            lat: 43.56922,
+            lon: 3.94228,
+          },
+        },
+      })
+    );
+
     console.log('com.dyomedea.dyomedea  LOG', ' - Adding the watcher');
     BackgroundGeolocation.addWatcher(
       {
@@ -98,10 +104,17 @@ const LiveMap: react.FC = () => {
         if (location !== undefined) {
           setCenter([location.latitude, location.longitude]);
           setPosition([location.latitude, location.longitude]);
-          track.trkseg[0].trkpt.push({
-            $: { lat: location.latitude, lon: location.longitude },
-          });
-          setTrack(track);
+          dispatch(
+            gpxActions.appendTrkpt({
+              trkKey: 'current',
+              trkpt: {
+                $: {
+                  lat: location.latitude,
+                  lon: location.longitude,
+                },
+              },
+            })
+          );
         }
 
         return console.log(
@@ -122,7 +135,7 @@ const LiveMap: react.FC = () => {
       .catch((reason) => {
         console.error('com.dyomedea.dyomedea  LOG', ' - reason: ', reason);
       });
-  }, [track]);
+  }, [dispatch]);
 
   return (
     <Map
@@ -134,11 +147,7 @@ const LiveMap: react.FC = () => {
       }}
       animate={true}
     >
-      <GPXOverlay
-        mapState={undefined}
-        latLngToPixel={undefined}
-        track={track}
-      />
+      <GPXOverlay mapState={undefined} latLngToPixel={undefined} />
       <Marker width={20} anchor={position} />
       <ZoomControl />
     </Map>

src/store/gpx.ts

@@ -0,0 +1,28 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState: any = {
+  current: {
+    $: {},
+    trk: [
+      {
+        trkseg: [{ trkpt: [] }],
+      },
+    ],
+  },
+};
+
+const slice = createSlice({
+  name: 'gpx',
+  initialState: initialState,
+  reducers: {
+    appendTrkpt(state, action) {
+      state[action.payload.trkKey].trk[0].trkseg[0].trkpt.push(
+        action.payload.trkpt
+      );
+    },
+  },
+});
+
+export const gpxActions = slice.actions;
+
+export default slice.reducer;

src/store/index.ts

@@ -0,0 +1,9 @@
+import { configureStore } from '@reduxjs/toolkit';
+
+import gpxReducer from './gpx';
+
+const store = configureStore({
+  reducer: { gpx: gpxReducer },
+});
+
+export default store;