feat(backend): persist waypoints to the backend

src/components/track/TrackHeader.tsx

@@ -3,7 +3,7 @@ import { FaCircleInfo, FaEye, FaEyeSlash, FaPenToSquare } from 'react-icons/fa6'
 import ContentEditable, { ContentEditableEvent } from 'react-contenteditable'
 import React, { useMemo, useRef, useState } from 'react'
 import { WayPoint } from '../../@types/gps'
-import { generateGeoJson, sanitizeFilename } from '../../utils/tools'
+import { generateFeatureCollection, sanitizeFilename } from '../../utils/tools'
 import useLanguage from '../../hooks/useLanguage'
 
 type TrackHeaderProps = {
@@ -27,7 +27,7 @@ const TrackHeader: React.FC<TrackHeaderProps> = ({
   const tracknameInputFieldRef: React.RefObject<HTMLElement> = useRef(null)
   const tracknameRef = useRef('')
   const { getMessage } = useLanguage()
-  const markerGeoJson = useMemo(() => generateGeoJson(markerPositions), [markerPositions])
+  const markerGeoJson = useMemo(() => generateFeatureCollection(markerPositions), [markerPositions])
 
   useMemo(() => {
     tracknameRef.current = trackname

src/pages/TrackScreen.tsx

@@ -5,12 +5,13 @@ import { FeatureCollection, LineString, Point } from 'geojson'
 import { PoiType, WayPoint } from '../@types/gps'
 import { v4 as uuidv4 } from 'uuid'
 import { LatLngBoundsExpression, LatLngExpression, LatLngTuple } from 'leaflet'
-import { sanitizeFilename } from '../utils/tools'
+import { generateFeatureCollection, sanitizeFilename } from '../utils/tools'
 import VisualizeTrack from '../components/track/VisualizeTrack'
 import TrackHeader from '../components/track/TrackHeader'
 import ResetButton from '../components/track/ResetButton'
 import { useFeedbackContext } from '../hooks/useFeedbackContext'
 import useLanguage from '../hooks/useLanguage'
+import { useThrottle } from '@uidotdev/usehooks'
 
 const TrackScreen = () => {
   const { id: trackId } = useParams()
@@ -133,6 +134,20 @@ const TrackScreen = () => {
       })
   }, [trackId])
 
+  const throttledMarkerPositions = useThrottle(markerPositions, 0)
+  useEffect(() => {
+    if (throttledMarkerPositions !== undefined && !isLoading) {
+      const featureCollection = generateFeatureCollection(markerPositions)
+      API.put(`/tracks/${trackId}/points`, featureCollection, {
+        headers: {
+          'Content-Type': 'application/geo+json',
+        },
+      }).catch((error) => {
+        console.error('Failed to update waypoint', error)
+      })
+    }
+  }, [throttledMarkerPositions])
+
   return (
     <>
       {isLoading ? (

src/utils/tools.test.ts

@@ -3,7 +3,7 @@ import {
   convertOsmToPoiType,
   decodeFromBase64,
   encodeToBase64,
-  generateGeoJson,
+  generateFeatureCollection,
   sanitizeFilename,
 } from './tools'
 import { WayPoint } from '../@types/gps'
@@ -75,7 +75,7 @@ describe('generate GeoJSON', () => {
     const given: WayPoint[] = [
       {
         id: id1,
-        position: [11, 12],
+        position: [11, 21],
         name: 'way point 1',
         type: 'GENERIC',
       },
@@ -86,18 +86,19 @@ describe('generate GeoJSON', () => {
         type: 'FOOD',
       },
     ]
-    const actual = generateGeoJson(given)
+    const actual = generateFeatureCollection(given)
 
     expect(actual).toEqual({
       features: [
         {
           geometry: {
-            coordinates: [12, 11],
+            coordinates: [21, 11],
             type: 'Point',
           },
           properties: {
             name: 'way point 1',
             type: 'GENERIC',
+            uuid: id1,
           },
           type: 'Feature',
         },
@@ -109,6 +110,7 @@ describe('generate GeoJSON', () => {
           properties: {
             name: 'way point 2',
             type: 'FOOD',
+            uuid: id2,
           },
           type: 'Feature',
         },

src/utils/tools.ts

@@ -35,23 +35,25 @@ export const encodeToBase64 = (input: string) => {
   return btoa(binString)
 }
 
-export const generateGeoJson = (markerPositions: WayPoint[]): FeatureCollection => {
+export const generateFeature = (waypoint: WayPoint): Feature => {
+  return {
+    type: 'Feature',
+    properties: {
+      name: waypoint.name,
+      type: waypoint.type,
+      uuid: waypoint.id,
+    },
+    geometry: {
+      type: 'Point',
+      coordinates: [waypoint.position[1], waypoint.position[0]],
+    },
+  } as Feature
+}
+
+export const generateFeatureCollection = (markerPositions: WayPoint[]): FeatureCollection => {
   return {
     type: 'FeatureCollection',
-    features: markerPositions.map(
-      (waypoint) =>
-        ({
-          type: 'Feature',
-          properties: {
-            name: waypoint.name,
-            type: waypoint.type,
-          },
-          geometry: {
-            type: 'Point',
-            coordinates: [waypoint.position[1], waypoint.position[0]],
-          },
-        }) as Feature,
-    ),
+    features: markerPositions.map((waypoint) => generateFeature(waypoint)),
   }
 }