dyomedea/src/components/dialogs/GpxImport.tsx

import React from 'react';

import GPX from '../../lib/gpx-parser-builder/src/gpx';

import css from './GpxImport.module.css';
import { IonIcon, IonItem } from '@ionic/react';
import { cloudUpload } from 'ionicons/icons';
import { findStartTime } from '../../lib/gpx';
import dispatch from '../../workers/dispatcher-main';
import { intToGpxId } from '../../lib/ids';

const GpxImport: React.FC<{}> = () => {
  const onChangeHandler = (event: any) => {
    console.log('On change handler');
    const file: File = event.target.files[0];
    const fileReader = new FileReader();
    fileReader.readAsText(file);

    fileReader.addEventListener(
      'load',
      () => {
        // this will then display a text file
        console.log(fileReader.result);
        const gpx = GPX.parse(fileReader.result);
        console.log(`gpx: ${JSON.stringify(gpx)}`);
        const startTime = new Date(findStartTime(gpx)!);
        dispatch({
          action: 'pruneAndSaveImportedGpx',
          params: { id: { gpx: intToGpxId(startTime.valueOf()) }, gpx: gpx },
        });
        // pushGpx(db, {
        //   gpx,
        //   metadata: {
        //     lastModified: new Date(file.lastModified).toISOString(),
        //     importDate: new Date().toISOString(),
        //     name: file.name,
        //     size: file.size,
        //     type: file.type,
        //   },
        // });
      },
      false
    );
  };

  return (
    <IonItem>
      <input
        type='file'
        id='gpx-import'
        className={css.inputFile}
        accept='.gpx'
        onChange={onChangeHandler}
      />
      <label htmlFor='gpx-import'>
        <IonIcon slot='icon-only' icon={cloudUpload} title='import' />
      </label>
    </IonItem>
  );
};

export default GpxImport;