From fe8ede7f16e4591d1d6e97e36abf844f269b8ec6 Mon Sep 17 00:00:00 2001
From: Johannes Schmidt <devshred@tigerflanke.de>
Date: Tue, 11 Jun 2024 18:28:52 +0200
Subject: [PATCH] feat(backend): persist trackname to the backend

---
 src/components/track/DownloadLink.tsx | 16 ++--------------
 src/components/track/MarkerSearch.tsx |  2 +-
 src/components/track/TrackHeader.tsx  | 22 +++-------------------
 src/pages/TrackScreen.tsx             | 26 ++++++++++++++++++++++++--
 4 files changed, 30 insertions(+), 36 deletions(-)

diff --git a/src/components/track/DownloadLink.tsx b/src/components/track/DownloadLink.tsx
index 50f40c4..8729f09 100644
--- a/src/components/track/DownloadLink.tsx
+++ b/src/components/track/DownloadLink.tsx
@@ -1,25 +1,15 @@
 import React from 'react'
 import { FiDownload } from 'react-icons/fi'
-import { GeoJsonObject } from 'geojson'
-import { encodeToBase64 } from '../../utils/tools'
 import useLanguage from '../../hooks/useLanguage'
 import { Link } from 'react-router-dom'
 
 type DownloadLinkProps = {
   trackId: string
   type: string
-  trackname: string
   optimizeWaypoints: boolean
-  geoJson?: GeoJsonObject | null
 }
 
-const DownloadLink: React.FC<DownloadLinkProps> = ({
-  trackId,
-  type,
-  trackname,
-  optimizeWaypoints,
-  geoJson,
-}) => {
+const DownloadLink: React.FC<DownloadLinkProps> = ({ trackId, type, optimizeWaypoints }) => {
   const { getMessage } = useLanguage()
   const baseUrl = import.meta.env.VITE_BACKEND_BASE_URL
   const linkTo: string =
@@ -28,9 +18,7 @@ const DownloadLink: React.FC<DownloadLinkProps> = ({
     trackId +
     '?mode=dl&type=' +
     type +
-    (optimizeWaypoints ? '&mode=opt' : '') +
-    (trackname.length > 0 ? `&name=${encodeToBase64(trackname)}` : '') +
-    (geoJson != null ? `&wp=${encodeToBase64(JSON.stringify(geoJson))}` : '')
+    (optimizeWaypoints ? '&mode=opt' : '')
 
   return (
     <>
diff --git a/src/components/track/MarkerSearch.tsx b/src/components/track/MarkerSearch.tsx
index e559fa4..dce3acc 100644
--- a/src/components/track/MarkerSearch.tsx
+++ b/src/components/track/MarkerSearch.tsx
@@ -14,7 +14,7 @@ type MarkerSearchProps = {
 
 const MarkerSearch: React.FC<MarkerSearchProps> = ({ setMarkerPositions }) => {
   const [searchTerm, setSearchTerm] = useState('')
-  const debouncedSearchTerm = useDebounce(searchTerm, 1000)
+  const debouncedSearchTerm = useDebounce(searchTerm, 500)
   const [results, setResults] = useState<Feature[]>([])
   const dropdownDivRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
diff --git a/src/components/track/TrackHeader.tsx b/src/components/track/TrackHeader.tsx
index 952972f..59d36a0 100644
--- a/src/components/track/TrackHeader.tsx
+++ b/src/components/track/TrackHeader.tsx
@@ -2,13 +2,11 @@ import DownloadLink from './DownloadLink'
 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 { generateFeatureCollection, sanitizeFilename } from '../../utils/tools'
+import { sanitizeFilename } from '../../utils/tools'
 import useLanguage from '../../hooks/useLanguage'
 
 type TrackHeaderProps = {
   trackId: string
-  markerPositions: WayPoint[]
   trackname: string
   setTrackname: React.Dispatch<React.SetStateAction<string>>
   showPolyline: boolean
@@ -17,7 +15,6 @@ type TrackHeaderProps = {
 
 const TrackHeader: React.FC<TrackHeaderProps> = ({
   trackId,
-  markerPositions,
   trackname,
   setTrackname,
   showPolyline,
@@ -27,7 +24,6 @@ const TrackHeader: React.FC<TrackHeaderProps> = ({
   const tracknameInputFieldRef: React.RefObject<HTMLElement> = useRef(null)
   const tracknameRef = useRef('')
   const { getMessage } = useLanguage()
-  const markerGeoJson = useMemo(() => generateFeatureCollection(markerPositions), [markerPositions])
 
   useMemo(() => {
     tracknameRef.current = trackname
@@ -73,20 +69,8 @@ const TrackHeader: React.FC<TrackHeaderProps> = ({
       </div>
       <div className="flex-1 flex mb-4 justify-end items-center">
         <div className="flex flex-row flex-1 justify-end items-center">
-          <DownloadLink
-            trackId={trackId}
-            type="gpx"
-            trackname={trackname}
-            optimizeWaypoints={optimizeWaypoints}
-            geoJson={markerGeoJson}
-          />
-          <DownloadLink
-            trackId={trackId}
-            type="tcx"
-            trackname={trackname}
-            optimizeWaypoints={optimizeWaypoints}
-            geoJson={markerGeoJson}
-          />
+          <DownloadLink trackId={trackId} type="gpx" optimizeWaypoints={optimizeWaypoints} />
+          <DownloadLink trackId={trackId} type="tcx" optimizeWaypoints={optimizeWaypoints} />
         </div>
         <div className="ml-3 mr-5">
           <input
diff --git a/src/pages/TrackScreen.tsx b/src/pages/TrackScreen.tsx
index b6d8077..1649eda 100644
--- a/src/pages/TrackScreen.tsx
+++ b/src/pages/TrackScreen.tsx
@@ -134,7 +134,7 @@ const TrackScreen = () => {
       })
   }, [trackId])
 
-  const throttledMarkerPositions = useThrottle(markerPositions, 0)
+  const throttledMarkerPositions = useThrottle(markerPositions, 500)
   useEffect(() => {
     if (throttledMarkerPositions !== undefined && !isLoading) {
       const featureCollection = generateFeatureCollection(markerPositions)
@@ -148,6 +148,29 @@ const TrackScreen = () => {
     }
   }, [throttledMarkerPositions])
 
+  const throttledTrackname = useThrottle(trackname, 500)
+  useEffect(() => {
+    if (throttledTrackname !== undefined && !isLoading) {
+      const feature = {
+        type: 'Feature',
+        properties: {
+          name: throttledTrackname,
+        },
+        geometry: {
+          type: 'LineString',
+          coordinates: [],
+        },
+      }
+      API.patch(`/tracks/${trackId}`, feature, {
+        headers: {
+          'Content-Type': 'application/geo+json',
+        },
+      }).catch((error) => {
+        console.error('Failed to update waypoint', error)
+      })
+    }
+  }, [throttledTrackname])
+
   return (
     <>
       {isLoading ? (
@@ -156,7 +179,6 @@ const TrackScreen = () => {
         <div className="flex flex-col" style={{ height: '100%' }}>
           <TrackHeader
             trackId={trackId}
-            markerPositions={markerPositions}
             trackname={trackname}
             setTrackname={setTrackname}
             showPolyline={showPolyline}