Make gpx name attribute string translatable

hotosm · Jul 17, 2023 · 30bf0dd · 30bf0dd
1 parent beb87bf
commit 30bf0dd
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/frontend/src/components/editor.js b/frontend/src/components/editor.js
@@ -1,12 +1,16 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
+import {  useIntl } from 'react-intl';
+import { gpx } from "@tmcw/togeojson"
 import * as iD from '@hotosm/id';
 import '@hotosm/id/dist/iD.css';
 
 import { OSM_CLIENT_ID, OSM_CLIENT_SECRET, OSM_REDIRECT_URI, OSM_SERVER_URL } from '../config';
+import messages from './messages';
 
 export default function Editor({ setDisable, comment, presets, imagery, gpxUrl }) {
   const dispatch = useDispatch();
+  const intl = useIntl();
   const session = useSelector((state) => state.auth.session);
   const iDContext = useSelector((state) => state.editor.context);
   const locale = useSelector((state) => state.preferences.locale);
@@ -82,7 +86,22 @@ export default function Editor({ setDisable, comment, presets, imagery, gpxUrl }
         iDContext.init();
       }
       if (gpxUrl) {
-        iDContext.layers().layer('data').url(gpxUrl, '.gpx');
+        try {
+          fetch(gpxUrl)
+            .then(response => response.text())
+            .then(data => {
+              let gpxData = new DOMParser().parseFromString(data, 'text/xml');
+              let nameNode = gpxData.getElementsByTagName('trk')[0].childNodes[0];
+              let projectId = nameNode.textContent.match(/\d+/g);
+              gpxData.getElementsByTagName('trk')[0].childNodes[0].textContent = intl.formatMessage(messages.gpxNameAttribute, { projectId: projectId[0] });
+              iDContext.layers().layer('data').geojson(gpx(gpxData));
+            })
+            .catch(error => {
+              console.error('Error loading GPX file');
+            });
+        } catch (error) {
+          console.error('Error processing GPX data');
+        }     
       }
 
       let osm = iDContext.connection();
@@ -106,6 +125,7 @@ export default function Editor({ setDisable, comment, presets, imagery, gpxUrl }
         }
       });
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [session, iDContext, setDisable, presets, locale, gpxUrl]);
 
   return <div className="w-100 vh-minus-69-ns" id="id-container"></div>;

diff --git a/frontend/src/components/messages.js b/frontend/src/components/messages.js
@@ -108,4 +108,8 @@ export default defineMessages({
     id: 'common.loading',
     defaultMessage: 'Loading...',
   },
+  gpxNameAttribute: {
+    id: 'editor.layer.gpx.name',
+    defaultMessage: 'Task for project {projectId}. Do not edit outside of this area!'
+  }
 });