Introducing redux to manage tracks.

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>
       )}