Cleanup indexes at start time and waith till the cleanup is done before rendering the whiteboard.

src/components/map/map.tsx

@@ -1,4 +1,4 @@
-import react, { useMemo, useEffect } from 'react';
+import react, { useMemo, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { mapActions } from '../../store/map';
 import _ from 'lodash';
@@ -36,9 +36,12 @@ const Map: react.FC<{}> = (props: {}) => {
   );
 
   const db = useDB();
+
+  const [dbReady, setDbReady] = useState(false);
+
   useEffect(() => {
     window.addEventListener('resize', debouncedResizeHandler);
-    initDb(db);
+    initDb(db, setDbReady);
   }, []);
 
   return (
@@ -48,7 +51,7 @@ const Map: react.FC<{}> = (props: {}) => {
           <Slippy>
             <Whiteboard>
               <CurrentLocation />
-              <Gpxes />
+              dbReady && <Gpxes />
             </Whiteboard>
             <Layer>
               <TiledMap />

src/db/index.ts

@@ -1,3 +1,5 @@
+import _ from 'lodash';
+
 const DBDEFINITION = '--db-definition--';
 
 const dbDefinition = {
@@ -6,7 +8,7 @@ const dbDefinition = {
   version: '0.000001',
 };
 
-export const initDb = async (db: any) => {
+export const initDb = async (db: any, setDbReady: any) => {
   try {
     await db.get(DBDEFINITION);
     // TODO: support migrations
@@ -19,29 +21,54 @@ export const initDb = async (db: any) => {
     }
   }
 
-  await db.createIndex({
+  // WARNING: defs must use the canonical form andbe identical to what will be returned by db.getIndexes
-    index: {
+  const requiredIndexes: any = [
+    {
       name: 'type',
-      fields: ['type'],
+      def: {
-    },
+        fields: [{ type: 'asc' }],
-  });
-
-  await db.createIndex({
-    index: {
-      name: 'trkpt-time',
-      fields: ['trkpt.time'],
-      partial_filter_selector: {
-        type: 'trkpt',
       },
     },
-  });
+    {
-
+      name: 'type-trkpt-gpx-time',
-  await db.createIndex({
+      def: {
-    index: {
+        fields: [{ type: 'asc' }, { gpx: 'asc' }, { 'trkpt.time': 'asc' }],
-      name: 'type-trkpt-gpx-time3',
+      },
-      fields: ['type', 'gpx', 'trkpt.time'],
     },
-  });
+  ];
+
+  const existingIndexes = (await db.getIndexes()).indexes;
+
+  const pruneIndex = ({ name, def }: any) => ({ name, def });
+
+  const isSameIndex = (idx1: any, idx2: any) => {
+    return _.isEqual(pruneIndex(idx1), pruneIndex(idx2));
+  };
+
+  const findIndex = (targetIndexes: any, index: any) =>
+    targetIndexes.find((targetIndex: any) => {
+      return isSameIndex(targetIndex, index);
+    });
+
+  for (var index of existingIndexes) {
+    if (index.type === 'json') {
+      // Non system indexes
+      console.log(`Checking existing index :${JSON.stringify(index)}`);
+      if (!findIndex(requiredIndexes, index)) {
+        console.log(`db.deleteIndex(${JSON.stringify(index)})`);
+        await db.deleteIndex(index);
+      }
+    }
+  }
+
+  for (var index of requiredIndexes) {
+    if (!findIndex(existingIndexes, index)) {
+      console.log(`db.createIndex(${JSON.stringify(index)})`);
+      await db.createIndex({ name: index.name, ...index.def });
+    }
+  }
+
+  setDbReady(true);
 
   const indexes = await db.getIndexes();
   console.log(`indexes: ${JSON.stringify(indexes)}`);