Re-implementing the background geolocation (not yet stored in a track)

src/components/map/gpx-record.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+
+import { useDB } from 'react-pouchdb';
+
+import GPX from '../../lib/gpx-parser-builder';
+
+import '../../theme/get-location.css';
+import { IonButton, IonIcon, IonItem } from '@ionic/react';
+import { recordingOutline, recording } from 'ionicons/icons';
+import { pushTrack } from '../../db/tracks';
+import {
+  startBackgroundGeolocation,
+  stopBackgroundGeolocation,
+} from '../../lib/background-geolocation';
+
+const GpxRecord: React.FC<{}> = () => {
+  const db = useDB();
+
+  const [isRecording, setIsRecording] = useState(false);
+
+  const [watcher_id, setWatcher_id] = useState();
+
+  const toggleIsRecording = () => {
+    if (isRecording) {
+      stopBackgroundGeolocation(watcher_id);
+    } else {
+      startBackgroundGeolocation().then((result) => {
+        setWatcher_id(result);
+      });
+    }
+    setIsRecording(!isRecording);
+  };
+
+  return (
+    <IonButton onClick={toggleIsRecording}>
+      {isRecording && (
+        <IonIcon slot='icon-only' icon={recording} style={{ color: 'red' }} />
+      )}
+      {!isRecording && <IonIcon slot='icon-only' icon={recordingOutline} />}
+    </IonButton>
+  );
+};
+
+export default GpxRecord;

src/components/map/map.tsx

@@ -20,6 +20,7 @@ import {
 
 import GpxImport from './gpx-import';
 import Tracks from './tracks';
+import GpxRecord from './gpx-record';
 
 const Map: react.FC<{}> = (props: {}) => {
   const dispatch = useDispatch();
@@ -55,6 +56,7 @@ const Map: react.FC<{}> = (props: {}) => {
       <IonHeader className='ion-no-border' translucent={true}>
         <IonToolbar>
           <IonButtons slot='end'>
+            <GpxRecord />
             <GpxImport />
           </IonButtons>
         </IonToolbar>