Storing imported tracks in local "forage".

src/components/map/gpx-import.tsx

@@ -14,7 +14,7 @@ const GpxImport: React.FC<{}> = () => {
 
   const onChangeHandler = (event: any) => {
     console.log('On change handler');
-    const file = event.target.files[0];
+    const file: File = event.target.files[0];
     const fileReader = new FileReader();
     fileReader.readAsText(file);
 
@@ -24,7 +24,18 @@ const GpxImport: React.FC<{}> = () => {
         // this will then display a text file
         console.log(fileReader.result);
         const track = GPX.parse(fileReader.result);
-        dispatch(tracksActions.push(JSON.parse(JSON.stringify(track))));
+        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,
+            },
+          })
+        );
       },
       false
     );

src/components/map/track.tsx

@@ -1,11 +1,31 @@
-import React from 'react';
+import React, { useContext, useEffect } from 'react';
 
+import { DbContext } from '../../db/db-context-provider';
 import { lat2tile, lon2tile } from '../../lib/geo';
 import { zoom0 } from '../../store/map';
 
-const Track: React.FC<{ track: any }> = (props) => {
-  const trkseg = props.track.trk[0].trkseg[0];
+const Track: React.FC<{ track: any; id: string }> = (props) => {
+  const dbContext = useContext(DbContext);
 
+  useEffect(() => {
+    const store = dbContext.tracksStore;
+    const checkDb = async () => {
+      store.getItem(props.id).then((value) => {
+        if (value === null) {
+          store.setItem(props.id, props.track).then((value) => {
+            console.log(
+              `Track ${props.id} saved in the ${store.driver()} Database.`
+            );
+          });
+        }
+      });
+    };
+    if (dbContext.ready) {
+      checkDb();
+    }
+  }, [dbContext, props]);
+
+  const trkseg = props.track.track.trk[0].trkseg[0];
   const d = trkseg.trkpt.reduce(
     (previous: string, current: any, index: number) => {
       const action = index === 0 ? 'M' : index === 1 ? 'L' : '';

src/components/map/tracks.tsx

@@ -1,33 +1,15 @@
-import React, { Fragment, useEffect } from 'react';
+import React, { Fragment, useContext } from 'react';
 
 import { useSelector } from 'react-redux';
 
-import { Drivers, Storage } from '@ionic/storage';
-import * as CordovaSQLiteDriver from 'localforage-cordovasqlitedriver';
-
 import Track from './track';
 
-var store: Storage;
-
 const Tracks: React.FC<{}> = () => {
-  useEffect(() => {
-    store = new Storage({
-      driverOrder: [
-        CordovaSQLiteDriver._driver,
-        Drivers.IndexedDB,
-        Drivers.LocalStorage,
-      ],
-    });
-    store
-      .defineDriver(CordovaSQLiteDriver)
-      .then(() => console.log('CordovaSQLiteDriver registered'));
-  }, []);
-
   const tracks = useSelector((state: { tracks: any }) => state.tracks.tracks);
   return (
     <Fragment>
       {Object.keys(tracks).map((key: any) => (
-        <Track key={key} track={tracks[key]} />
+        <Track key={key} id={key} track={tracks[key]} />
       ))}
     </Fragment>
   );