Removing localforage and friends.

package.json

@@ -29,14 +29,12 @@
     "@types/react-router-dom": "^5.1.7",
     "buffer": "^6.0.3",
     "cordova-plugin-geolocation": "^4.1.0",
-    "cordova-sqlite-storage": "^6.0.0",
     "crypto-browserify": "^3.12.0",
     "git": "^0.1.5",
     "ionicons": "^6.0.3",
     "isomorphic-xml2js": "^0.1.3",
-    "localforage": "^1.10.0",
-    "localforage-cordovasqlitedriver": "^1.8.0",
     "lodash": "^4.17.21",
+    "pouchdb": "^7.3.0",
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.2.0",
@@ -44,6 +42,7 @@
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "^5.0.0",
+    "redux-pouchdb": "^1.0.0-rc.3",
     "status": "^0.0.13",
     "stream-browserify": "^3.0.0",
     "typescript": "^4.8.3",

src/App.tsx

@@ -1,4 +1,5 @@
 import { IonApp, setupIonicReact } from '@ionic/react';
+
 import store from './store/index';
 import { Provider } from 'react-redux';
 
@@ -22,16 +23,13 @@ import '@ionic/react/css/display.css';
 import './theme/variables.css';
 
 import Map from './components/map/map';
-import DbContextProvider from './db/db-context-provider';
 
 setupIonicReact();
 
 const App: React.FC = () => (
   <IonApp>
     <Provider store={store}>
-      <DbContextProvider>
       <Map />
-      </DbContextProvider>
     </Provider>
   </IonApp>
 );

src/components/map/map.tsx

@@ -19,7 +19,6 @@ import {
 } from '@ionic/react';
 
 import GpxImport from './gpx-import';
-import Track from './track';
 import Tracks from './tracks';
 
 const Map: react.FC<{}> = (props: {}) => {

src/components/map/track.tsx

@@ -1,30 +1,9 @@
-import React, { useContext, useEffect } from 'react';
+import React, {  } from 'react';
 
-import { DbContext } from '../../db/db-context-provider';
 import { lat2tile, lon2tile } from '../../lib/geo';
 import { zoom0 } from '../../store/map';
 
 const Track: React.FC<{ track: any; id: string }> = (props) => {
-  const dbContext = useContext(DbContext);
-
-  useEffect(() => {
-    const store = dbContext.tracksStore;
-    const checkDb = async () => {
-      store.getItem(props.id).then((value) => {
-        if (value === null) {
-          store.setItem(props.id, props.track).then((value) => {
-            console.log(
-              `Track ${props.id} saved in the ${store.driver()} Database.`
-            );
-          });
-        }
-      });
-    };
-    if (dbContext.ready) {
-      checkDb();
-    }
-  }, [dbContext, props]);
-
   const trkseg = props.track.track.trk[0].trkseg[0];
   const d = trkseg.trkpt.reduce(
     (previous: string, current: any, index: number) => {

src/db/db-context-provider.tsx

@@ -1,42 +0,0 @@
-import react, { useEffect, useState } from 'react';
-
-import * as CordovaSQLiteDriver from 'localforage-cordovasqlitedriver';
-import localforage from 'localforage';
-
-const initialDbContext = { ready: false, tracksStore: localforage };
-export const DbContext = react.createContext(initialDbContext);
-
-const DbContextProvider: react.FC<{
-  children?: JSX.Element;
-}> = (props: { children?: JSX.Element }) => {
-  const [store, setStore] = useState(localforage);
-  const [ready, setReady] = useState(false);
-
-  useEffect(() => {
-    localforage.defineDriver(CordovaSQLiteDriver).then(() => {
-      const config = {
-        name: 'dyomedea',
-        driver: [
-          CordovaSQLiteDriver._driver,
-          localforage.INDEXEDDB,
-          localforage.WEBSQL,
-          localforage.LOCALSTORAGE,
-        ],
-      };
-      const newStore = localforage.createInstance({
-        storeName: 'tracks',
-        ...config,
-      });
-      setStore(newStore);
-      setReady(true);
-    });
-  }, []);
-
-  return (
-    <DbContext.Provider value={{ ready, tracksStore: store }}>
-      {props.children}
-    </DbContext.Provider>
-  );
-};
-
-export default DbContextProvider;