Figuring how files can be downloaded to implement GPXexport (#9). Also changing the icon used for GPX import.

src/components/map/GpxExport.tsx

@@ -0,0 +1,45 @@
+import { IonButton, IonIcon } from '@ionic/react';
+import { cloudDownload } from 'ionicons/icons';
+import React, { Fragment, useLayoutEffect, useRef, useState } from 'react';
+import { useDB } from 'react-pouchdb';
+
+const GpxExport: React.FC<{ gpxId: string }> = (props: { gpxId: string }) => {
+  const db = useDB();
+
+  const hiddenLinkElement = useRef<HTMLAnchorElement>(null);
+
+  const [fileDownloadUrl, setFileDownloadUrl] = useState('');
+
+  useLayoutEffect(() => {
+    if (fileDownloadUrl !== '') {
+      hiddenLinkElement.current?.click();
+      URL.revokeObjectURL(fileDownloadUrl);
+      setFileDownloadUrl('');
+    }
+  }, [fileDownloadUrl]);
+
+  const download = (event: any) => {
+    event.preventDefault();
+    const blob = new Blob(['<gpx/>'], { type: 'application/gpx+xml' });
+    const fileDownloadUrl = URL.createObjectURL(blob);
+    setFileDownloadUrl(fileDownloadUrl);
+  };
+
+  return (
+    <Fragment>
+      <IonButton id='gpx-export-button' onClick={download}>
+        <IonIcon icon={cloudDownload} title='Export' slot='icon-only' />
+      </IonButton>
+      <a
+        className='hidden'
+        download={props.gpxId + '.gpx'}
+        href={fileDownloadUrl}
+        ref={hiddenLinkElement}
+      >
+        download it
+      </a>
+    </Fragment>
+  );
+};
+
+export default GpxExport;

src/components/map/TracksBrowser.tsx

@@ -16,6 +16,7 @@ import { deleteGps } from '../../db/gpx';
 import { enterAnimation, leaveAnimation } from '../../lib/animation';
 import phoneRoute from '../../theme/icons/font-gis/svg/routing/uEB08-phone-route-nons.svg';
 import GpxImport from './gpx-import';
+import GpxExport from './GpxExport';
 
 const TrackBrowser: React.FC<{}> = () => {
   const gpxes = useFind({
@@ -57,6 +58,7 @@ const TrackBrowser: React.FC<{}> = () => {
                 <IonItem key={gpx._id}>
                   <span>{gpx.gpx.metadata.time}</span>
                   <IonButtons slot='end'>
+                    <GpxExport gpxId={gpx._id} />
                     <IonButton
                       onClick={() => {
                         deleteGps(db, { _id: gpx._id, _rev: gpx._rev });

src/components/map/gpx-import.tsx

@@ -6,7 +6,7 @@ import GPX from '../../lib/gpx-parser-builder';
 
 import '../../theme/get-location.css';
 import { IonIcon, IonItem } from '@ionic/react';
-import { downloadSharp } from 'ionicons/icons';
+import { cloudUpload } from 'ionicons/icons';
 import { pushGpx } from '../../db/gpx';
 
 const GpxImport: React.FC<{}> = () => {
@@ -49,7 +49,7 @@ const GpxImport: React.FC<{}> = () => {
         onChange={onChangeHandler}
       />
       <label htmlFor='gpx-import'>
-        <IonIcon slot='icon-only' icon={downloadSharp} />
+        <IonIcon slot='icon-only' icon={cloudUpload} title="import" />
       </label>
     </IonItem>
   );

src/theme/map.css

@@ -63,4 +63,8 @@ ion-modal ion-toolbar {
 ion-modal ion-content {
   background-color: rgba(255,255,255,.7)
   ;
+}
+
+.hidden {
+  display: none;
 }