Using pouchdb instead of redux to store tracks.

src/components/map/gpx-import.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 
-import { useDispatch } from 'react-redux';
+import { useDB } from 'react-pouchdb';
 
 import GPX from '../../lib/gpx-parser-builder';
 
 import '../../theme/get-location.css';
 import { IonIcon, IonItem } from '@ionic/react';
 import { downloadSharp } from 'ionicons/icons';
-import { tracksActions } from '../../store/tracks';
+import { pushTrack } from '../../db/tracks';
 
 const GpxImport: React.FC<{}> = () => {
-  const dispatch = useDispatch();
+  const db = useDB();
 
   const onChangeHandler = (event: any) => {
     console.log('On change handler');
@@ -24,18 +24,16 @@ const GpxImport: React.FC<{}> = () => {
         // this will then display a text file
         console.log(fileReader.result);
         const track = GPX.parse(fileReader.result);
-        dispatch(
-          tracksActions.push({
-            track: JSON.parse(JSON.stringify(track)),
-            metadata: {
-              lastModified: new Date(file.lastModified).toISOString(),
-              importDate: new Date().toISOString(),
-              name: file.name,
-              size: file.size,
-              type: file.type,
-            },
-          })
-        );
+        pushTrack(db, {
+          track: JSON.parse(JSON.stringify(track)),
+          metadata: {
+            lastModified: new Date(file.lastModified).toISOString(),
+            importDate: new Date().toISOString(),
+            name: file.name,
+            size: file.size,
+            type: file.type,
+          },
+        });
       },
       false
     );

src/components/map/track.tsx

@@ -1,9 +1,10 @@
-import React, {  } from 'react';
+import React from 'react';
 
 import { lat2tile, lon2tile } from '../../lib/geo';
 import { zoom0 } from '../../store/map';
 
-const Track: React.FC<{ track: any; id: string }> = (props) => {
+const Track: React.FC<{ track: any }> = (props) => {
+  console.log('track');
   const trkseg = props.track.track.trk[0].trkseg[0];
   const d = trkseg.trkpt.reduce(
     (previous: string, current: any, index: number) => {

src/components/map/tracks.tsx

@@ -1,18 +1,20 @@
-import React, { Fragment, useContext } from 'react';
+import React from 'react';
 
-import { useSelector } from 'react-redux';
+import { useFind } from 'react-pouchdb';
 
 import Track from './track';
 
 const Tracks: React.FC<{}> = () => {
-  const tracks = useSelector((state: { tracks: any }) => state.tracks.tracks);
-  return (
-    <Fragment>
-      {Object.keys(tracks).map((key: any) => (
-        <Track key={key} id={key} track={tracks[key]} />
-      ))}
-    </Fragment>
-  );
+  const tracks = useFind({
+    selector: {
+      type: 'Track',
+    },
+  });
+
+  return tracks.map((track: any) => {
+    console.log('doc');
+    return <Track key={track._id} track={track} />;
+  });
 };
 
 export default Tracks;