Move the current location on the map while recording (#12)

src/components/map/GpxRecord.tsx

@@ -23,8 +23,10 @@ import {
   startBackgroundGeolocation,
   stopBackgroundGeolocation,
 } from '../../lib/background-geolocation';
-import { deleteCurrent, saveCurrent } from '../../db/gpx';
+import { appendTrkpt, deleteCurrent, saveCurrent } from '../../db/gpx';
 import { enterAnimation, leaveAnimation } from '../../lib/animation';
+import { useDispatch } from 'react-redux';
+import { mapActions } from '../../store/map';
 
 const GpxRecord: React.FC<{}> = () => {
   const db = useDB();
@@ -54,8 +56,31 @@ const GpxRecord: React.FC<{}> = () => {
     modal.current?.dismiss();
   };
 
+  const dispatch = useDispatch();
+
+  const newLocationHandler = (location: any) => {
+    appendTrkpt(db, {
+      $: {
+        lat: location.latitude,
+        lon: location.longitude,
+      },
+      ele: location.altitude,
+      time: new Date(location.time).toISOString(),
+      extensions: {
+        speed: location.speed,
+        accuracy: location.accuracy,
+      },
+    });
+    dispatch(
+      mapActions.setCurrent({
+        lat: location.latitude,
+        lon: location.longitude,
+      })
+    );
+  };
+
   const startRecording = () => {
-    startBackgroundGeolocation(db).then((result) => {
+    startBackgroundGeolocation(newLocationHandler).then((result) => {
       setWatcher_id(result);
     });
     setIsRecording(true);
@@ -80,7 +105,6 @@ const GpxRecord: React.FC<{}> = () => {
     pauseRecording();
   };
 
-
   return (
     <Fragment>
       <IonButton id='open-RecordDialog'>