Starting to refactor to store track points independently from their tracks (WIP) (#3)

src/components/map/gpx-import.tsx

@@ -7,7 +7,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 { pushTrack } from '../../db/tracks';
+import { pushGpx } from '../../db/gpx';
 
 const GpxImport: React.FC<{}> = () => {
   const db = useDB();
@@ -23,9 +23,9 @@ const GpxImport: React.FC<{}> = () => {
       () => {
         // this will then display a text file
         console.log(fileReader.result);
-        const track = GPX.parse(fileReader.result);
-        pushTrack(db, {
-          track: JSON.parse(JSON.stringify(track)),
+        const gpx = GPX.parse(fileReader.result);
+        pushGpx(db, {
+          gpx,
           metadata: {
             lastModified: new Date(file.lastModified).toISOString(),
             importDate: new Date().toISOString(),

src/components/map/gpx-record.tsx

@@ -2,12 +2,10 @@ import React, { useState } from 'react';
 
 import { useDB } from 'react-pouchdb';
 
-import GPX from '../../lib/gpx-parser-builder';
 
 import '../../theme/get-location.css';
-import { IonButton, IonIcon, IonItem } from '@ionic/react';
+import { IonButton, IonIcon } from '@ionic/react';
 import { recordingOutline, recording } from 'ionicons/icons';
-import { pushTrack } from '../../db/tracks';
 import {
   startBackgroundGeolocation,
   stopBackgroundGeolocation,

src/components/map/gpx.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { useFind } from 'react-pouchdb';
+
+import { lat2tile, lon2tile } from '../../lib/geo';
+import { zoom0 } from '../../store/map';
+
+const Gpx: React.FC<{ gpx: any }> = (props) => {
+  console.log('gpx');
+
+  var gpxes: any[] = [];
+
+  gpxes = useFind({
+    selector: {
+      type: 'trkpt',
+      gpx: props.gpx._id,
+    },
+    //   sort: ['trkpt.time'],
+    //   use_index: 'type-trkpt-gpx-time3',
+  });
+
+  gpxes.sort((first: any, second: any) =>
+    first.trkpt.time.localeCompare(second.trkpt.time)
+  );
+
+  const d = gpxes.reduce((previous: string, current: any, index: number) => {
+    const action = index === 0 ? 'M' : index === 1 ? 'L' : '';
+    const trkpt = current.trkpt;
+    return `${previous} ${action} ${lon2tile(trkpt.$.lon, zoom0)}, ${lat2tile(
+      trkpt.$.lat,
+      zoom0
+    )}`;
+  }, '');
+
+  return <path d={d} className='track' />;
+};
+
+export default Gpx;

src/components/map/gpxes.tsx

@@ -0,0 +1,20 @@
+import React, { Suspense } from 'react';
+
+import { useFind } from 'react-pouchdb';
+
+import Gpx from './gpx';
+
+const Gpxes: React.FC<{}> = () => {
+  const gpxes = useFind({
+    selector: {
+      type: 'gpx',
+    },
+  });
+
+  return gpxes.map((gpx: any) => {
+    console.log('doc');
+    return <Gpx key={gpx._id} gpx={gpx} />;
+  });
+};
+
+export default Gpxes;

src/components/map/map.tsx

@@ -2,6 +2,7 @@ import react, { useMemo, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { mapActions } from '../../store/map';
 import _ from 'lodash';
+import { useDB } from 'react-pouchdb';
 
 import Layer from '../slippy/layer';
 import Slippy from '../slippy/slippy';
@@ -19,8 +20,9 @@ import {
 } from '@ionic/react';
 
 import GpxImport from './gpx-import';
-import Tracks from './tracks';
+import Gpxes from './gpxes';
 import GpxRecord from './gpx-record';
+import { initDb } from '../../db';
 
 const Map: react.FC<{}> = (props: {}) => {
   const dispatch = useDispatch();
@@ -33,9 +35,10 @@ const Map: react.FC<{}> = (props: {}) => {
     []
   );
 
+  const db = useDB();
   useEffect(() => {
     window.addEventListener('resize', debouncedResizeHandler);
-    //    dispatch(mapActions.shift({ x: -50, y: 0 }));
+    initDb(db);
   }, []);
 
   return (
@@ -45,7 +48,7 @@ const Map: react.FC<{}> = (props: {}) => {
           <Slippy>
             <Whiteboard>
               <CurrentLocation />
-              <Tracks />
+              <Gpxes />
             </Whiteboard>
             <Layer>
               <TiledMap />

src/components/map/track.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-import { lat2tile, lon2tile } from '../../lib/geo';
-import { zoom0 } from '../../store/map';
-
-const Track: React.FC<{ track: any }> = (props) => {
-  console.log('track');
-  const trkseg = props.track.track.trk[0].trkseg[0];
-  const d = trkseg.trkpt.reduce(
-    (previous: string, current: any, index: number) => {
-      const action = index === 0 ? 'M' : index === 1 ? 'L' : '';
-      return `${previous} ${action} ${lon2tile(
-        current.$.lon,
-        zoom0
-      )}, ${lat2tile(current.$.lat, zoom0)}`;
-    },
-    ''
-  );
-
-  return <path d={d} className='track' />;
-};
-
-export default Track;

src/components/map/tracks.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-import { useFind } from 'react-pouchdb';
-
-import Track from './track';
-
-const Tracks: React.FC<{}> = () => {
-  const tracks = useFind({
-    selector: {
-      type: 'Track',
-    },
-  });
-
-  return tracks.map((track: any) => {
-    console.log('doc');
-    return <Track key={track._id} track={track} />;
-  });
-};
-
-export default Tracks;