Adding the possibility to delete tracks, moving the import button into the track browser, changing the background geolocation precision to 5m and adding a couple of calls to db.compact() and db.viewCleanup().

src/components/map/TracksBrowser.tsx

@@ -2,16 +2,20 @@ import {
   IonButton,
   IonButtons,
   IonContent,
+  IonIcon,
   IonItem,
   IonList,
   IonModal,
   IonTitle,
   IonToolbar,
 } from '@ionic/react';
+import { trash } from 'ionicons/icons';
 import React, { Fragment, useRef } from 'react';
-import { useFind } from 'react-pouchdb';
+import { useFind, useDB } from 'react-pouchdb';
+import { deleteGps } from '../../db/gpx';
 import { enterAnimation, leaveAnimation } from '../../lib/animation';
 import phoneRoute from '../../theme/icons/font-gis/svg/routing/uEB08-phone-route-nons.svg';
+import GpxImport from './gpx-import';
 
 const TrackBrowser: React.FC<{}> = () => {
   const gpxes = useFind({
@@ -20,6 +24,8 @@ const TrackBrowser: React.FC<{}> = () => {
     },
   });
 
+  const db = useDB();
+
   const modal = useRef<HTMLIonModalElement>(null);
 
   const dismiss = () => {
@@ -40,15 +46,28 @@ const TrackBrowser: React.FC<{}> = () => {
         <IonToolbar>
           <IonTitle>Tracks</IonTitle>
           <IonButtons slot='end'>
+            <GpxImport />
             <IonButton onClick={() => dismiss()}>Close</IonButton>
           </IonButtons>
         </IonToolbar>
         <IonContent>
           <IonList>
             {gpxes.map((gpx: any) => {
-              return <IonItem key={gpx._id}>
-                <span>{gpx.gpx.metadata.time}</span>
-              </IonItem>;
+              return (
+                <IonItem key={gpx._id}>
+                  <span>{gpx.gpx.metadata.time}</span>
+                  <IonButtons slot='end'>
+                    <IonButton
+                      onClick={() => {
+                        deleteGps(db, { _id: gpx._id, _rev: gpx._rev });
+                      }}
+                      color='danger'
+                    >
+                      <IonIcon slot='icon-only' icon={trash} />
+                    </IonButton>
+                  </IonButtons>
+                </IonItem>
+              );
             })}
           </IonList>
         </IonContent>

src/components/map/map.tsx

@@ -19,7 +19,6 @@ import {
   IonToolbar,
 } from '@ionic/react';
 
-import GpxImport from './gpx-import';
 import Gpxes from './gpxes';
 import GpxRecord from './gpx-record';
 import { initDb } from '../../db';
@@ -68,7 +67,6 @@ const Map: react.FC<{}> = (props: {}) => {
           <IonButtons slot='end'>
             <TrackBrowser/>
             <GpxRecord />
-            <GpxImport />
             <TileServerChooserButton />
           </IonButtons>
         </IonToolbar>

src/db/gpx.ts

@@ -132,6 +132,29 @@ export const saveCurrent = async (db: any) => {
   }
 };
 
+export const deleteGps = async (
+  db: any,
+  gps: { _id: string; _rev: string }
+) => {
+  console.log(`Deleting document ${JSON.stringify(gps)}`);
+  await db.put({ _deleted: true, ...gps });
+  console.log(`done, id: ${gps}`);
+  const currentTrkpts = await db.find({
+    selector: {
+      type: 'trkpt',
+      gpx: gps._id,
+    },
+    fields: ['_id', '_rev'],
+  });
+  console.log(`deleteGps - db.find(trkpts) : ${JSON.stringify(currentTrkpts)}`);
+  const trkpts: { _id: string; _rev: string }[] = currentTrkpts.docs;
+  for (let j = 0; j < trkpts.length; j++) {
+    await db.put({ _deleted: true, ...trkpts[j] });
+  }
+  await await db.compact();
+  await db.viewCleanup();
+};
+
 export const deleteCurrent = async (db: any) => {
   const currents = await db.find({
     selector: {
@@ -144,21 +167,6 @@ export const deleteCurrent = async (db: any) => {
   const docs: { _id: string; _rev: string }[] = currents.docs;
   for (let i = 0; i < docs.length; i++) {
     console.log(`Deleting document ${JSON.stringify(docs[i])}`);
-    await db.put({ _deleted: true, ...docs[i] });
-    console.log(`done, id: ${docs[i]._id}`);
-    const currentTrkpts = await db.find({
-      selector: {
-        type: 'trkpt', 
-        gpx: docs[i]._id,
-      },
-      fields: ['_id', '_rev', 'type'],
-    });
-    console.log(
-      `deleteCurrent - db.find(trkpts) : ${JSON.stringify(currentTrkpts)}`
-    );
-    const trkpts: { _id: string; _rev: string }[] = currentTrkpts.docs;
-    for (let j = 0; j < trkpts.length; j++) {
-      await db.put({ _deleted: true, ...trkpts[j] });
-    }
+    await deleteGps(db, docs[i]);
   }
 };

src/db/index.ts

@@ -21,6 +21,9 @@ export const initDb = async (db: any, setDbReady: any) => {
     }
   }
 
+  await await db.compact();
+  await db.viewCleanup();
+
   // WARNING: defs must use the canonical form and be identical to what will be returned by db.getIndexes
   const requiredIndexes: any = [
     {

src/lib/background-geolocation.ts

@@ -32,7 +32,7 @@ const backgroundGeolocationConfig = {
 
   // The minimum number of metres between subsequent locations. Defaults
   // to 0.
-  distanceFilter: 1,
+  distanceFilter: 5,
 };
 
 export const startBackgroundGeolocation = async (db: any) => {