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

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;