Using pouchdb instead of redux to store tracks.

src/App.tsx

@@ -2,6 +2,8 @@ import { IonApp, setupIonicReact } from '@ionic/react';
 
 import store from './store/index';
 import { Provider } from 'react-redux';
+import { Suspense } from 'react';
+import { PouchDB, Find } from 'react-pouchdb';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
@@ -26,12 +28,18 @@ import Map from './components/map/map';
 
 setupIonicReact();
 
-const App: React.FC = () => (
-  <IonApp>
-    <Provider store={store}>
-      <Map />
-    </Provider>
-  </IonApp>
-);
+const App: React.FC = () => {
+  return (
+    <IonApp>
+      <Provider store={store}>
+        <PouchDB name='dyomedea'>
+          <Suspense fallback='loading...'>
+            <Map />
+          </Suspense>
+        </PouchDB>
+      </Provider>
+    </IonApp>
+  );
+};
 
 export default App;

src/components/map/gpx-import.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 
-import { useDispatch } from 'react-redux';
+import { useDB } from 'react-pouchdb';
 
 import GPX from '../../lib/gpx-parser-builder';
 
 import '../../theme/get-location.css';
 import { IonIcon, IonItem } from '@ionic/react';
 import { downloadSharp } from 'ionicons/icons';
-import { tracksActions } from '../../store/tracks';
+import { pushTrack } from '../../db/tracks';
 
 const GpxImport: React.FC<{}> = () => {
-  const dispatch = useDispatch();
+  const db = useDB();
 
   const onChangeHandler = (event: any) => {
     console.log('On change handler');
@@ -24,18 +24,16 @@ const GpxImport: React.FC<{}> = () => {
         // this will then display a text file
         console.log(fileReader.result);
         const track = GPX.parse(fileReader.result);
-        dispatch(
-          tracksActions.push({
-            track: JSON.parse(JSON.stringify(track)),
-            metadata: {
-              lastModified: new Date(file.lastModified).toISOString(),
-              importDate: new Date().toISOString(),
-              name: file.name,
-              size: file.size,
-              type: file.type,
-            },
-          })
-        );
+        pushTrack(db, {
+          track: JSON.parse(JSON.stringify(track)),
+          metadata: {
+            lastModified: new Date(file.lastModified).toISOString(),
+            importDate: new Date().toISOString(),
+            name: file.name,
+            size: file.size,
+            type: file.type,
+          },
+        });
       },
       false
     );

src/components/map/track.tsx

@@ -1,9 +1,10 @@
-import React, {  } from 'react';
+import React from 'react';
 
 import { lat2tile, lon2tile } from '../../lib/geo';
 import { zoom0 } from '../../store/map';
 
-const Track: React.FC<{ track: any; id: string }> = (props) => {
+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) => {

src/components/map/tracks.tsx

@@ -1,18 +1,20 @@
-import React, { Fragment, useContext } from 'react';
+import React from 'react';
 
-import { useSelector } from 'react-redux';
+import { useFind } from 'react-pouchdb';
 
 import Track from './track';
 
 const Tracks: React.FC<{}> = () => {
-  const tracks = useSelector((state: { tracks: any }) => state.tracks.tracks);
-  return (
-    <Fragment>
-      {Object.keys(tracks).map((key: any) => (
-        <Track key={key} id={key} track={tracks[key]} />
-      ))}
-    </Fragment>
-  );
+  const tracks = useFind({
+    selector: {
+      type: 'Track',
+    },
+  });
+
+  return tracks.map((track: any) => {
+    console.log('doc');
+    return <Track key={track._id} track={track} />;
+  });
 };
 
 export default Tracks;

src/db/react.couchdb.d.ts

@@ -0,0 +1 @@
+declare module 'react-pouchdb';

src/db/tracks.ts

@@ -0,0 +1,22 @@
+import {
+  Sha256,
+  Sha512,
+  string_to_bytes,
+  bytes_to_base64,
+} from '@openpgp/asmcrypto.js';
+
+export const pushTrack = (db: any, payload: any) => {
+  const sha = new Sha256();
+  const result = sha
+    .process(string_to_bytes(JSON.stringify(payload.track)))
+    .finish().result;
+  var _id;
+  if (result === null) {
+    console.log(`Can't hash`);
+    _id = crypto.randomUUID();
+  } else {
+    _id = bytes_to_base64(result);
+    console.log(`Digest: ${_id}`);
+  }
+  db.put({ _id, type: 'Track', ...payload });
+};

src/store/index.ts

@@ -1,10 +1,9 @@
 import { configureStore } from '@reduxjs/toolkit';
 
 import mapReducer from './map';
-import tracksReducer from './tracks';
 
 const store = configureStore({
-  reducer: { map: mapReducer, tracks: tracksReducer },
+  reducer: { map: mapReducer },
 });
 
 export default store;

src/store/tracks.ts

@@ -1,52 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit';
-
-import {
-  Sha256,
-  Sha512,
-  string_to_bytes,
-  bytes_to_base64,
-} from '@openpgp/asmcrypto.js';
-
-interface TracksState {
-  tracks: { [index: string]: any };
-}
-
-const initialTracks: TracksState = {
-  tracks: {},
-};
-
-const tracksSlice = createSlice({
-  name: 'tracks',
-  initialState: initialTracks,
-  reducers: {
-    add: (state, action) => {
-      const { id, ...data } = action.payload;
-      state.tracks[action.payload.id] = data;
-    },
-    push: (state, action) => {
-      const sha = new Sha512();
-      const result = sha
-        .process(string_to_bytes(JSON.stringify(action.payload.track)))
-        .finish().result;
-      var id;
-      if (result === null) {
-        console.log(`Can't hash`);
-        id = crypto.randomUUID();
-      } else {
-        id = bytes_to_base64(result);
-        console.log(`Digest: ${id}`);
-      }
-      if (state.tracks.hasOwnProperty(id)) {
-        console.log('Track had already been imported');
-      } else {
-        state.tracks[id] = {
-          ...action.payload,
-        };
-      }
-    },
-  },
-});
-
-export const tracksActions = tracksSlice.actions;
-
-export default tracksSlice.reducer;