Upgrade to idb v3

package.json

@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "eslint-config-prettier": "^3.3.0",
-    "idb": "^2.1.3",
+    "idb": "^3.0.2",
     "preact": "^8.2.6",
     "preact-compat": "^3.17.0",
     "preact-router": "^2.5.7",

src/components/app.js

@@ -1,9 +1,8 @@
 import { h, Component } from 'preact';
 import { Router } from 'preact-router';
-import idb from 'idb';
+import { openDb } from 'idb';
 import { sendBeacon } from '../utils/beacon';
 import Header from './Header';
-import { DB } from '../utils/db';
 
 import Home from '../routes/home';
 import Day from '../routes/day';
@@ -14,33 +13,11 @@ import GetStarted from '../routes/get-started';
 import Highlights from '../routes/highlights';
 import About from '../routes/about';
 import NotFound from '../routes/not-found';
-import { fudgeDates, ymd } from '../utils/date';
 import { getDefaultTheme } from '../utils/theme';
 import { connect } from 'unistore/preact';
 import { actions } from '../store/actions';
 
 const userTheme = localStorage.getItem('journalbook_theme');
-
-const tables = [
-  () => {},
-  db => {
-    db.createObjectStore('questions');
-  },
-  db => {
-    db.createObjectStore('entries');
-  },
-  db => {
-    db.createObjectStore('highlights');
-  },
-  db => {
-    db.createObjectStore('settings');
-    if (userTheme !== null) {
-      const database = new DB();
-      database.set('settings', 'theme', userTheme);
-    }
-  },
-];
-
 const isOnboarded = () => !!localStorage.getItem('journalbook_onboarded');
 const isMigrated = () => !!localStorage.getItem('journalbook_dates_migrated');
 
@@ -58,46 +35,24 @@ class App extends Component {
       });
     }
 
-    const version = tables.length - 1;
-    idb.open('entries-store', version, upgradeDB => {
-      for (let index = upgradeDB.oldVersion + 1; index <= version; index++) {
-        tables[index] && tables[index](upgradeDB);
+    const version = 4;
+    const dbPromise = openDb('entries-store', version, udb => {
+      switch (udb.oldVersion) {
+        case 0:
+          udb.createObjectStore('questions');
+        case 1:
+          udb.createObjectStore('entries');
+        case 2:
+          udb.createObjectStore('highlights');
+        case 3:
+          udb.createObjectStore('settings', {
+            theme: userTheme || '',
+          });
       }
     });
 
-    if (!isMigrated()) {
-      const db = new DB();
-      const table = 'entries';
-      // Get the existing keys
-      db.keys(table).then(keys => {
-        if (!keys.length) {
-          localStorage.setItem('journalbook_dates_migrated', true);
-          return;
-        }
-
-        Promise.all(
-          keys.map(key => {
-            // Get each item, parse the date and create a new key
-            return db.get(table, key).then(value => {
-              const oldKey = key.split('_');
-              const { year, month, day } = fudgeDates(oldKey[0]);
-              const newKey = ymd(new Date(year, month, day)) + '_' + oldKey[1];
-
-              // Set the new entry & delete the old entry
-              return db
-                .set(table, newKey, value)
-                .then(() => db.delete(table, key));
-            });
-          })
-        ).then(() => {
-          // Flag it up and reload
-          localStorage.setItem('journalbook_dates_migrated', true);
-          window.location.reload();
-        });
-      });
-    }
-
-    await this.props.getSettings();
+    await dbPromise;
+    await this.props.boot(dbPromise);
   }
 
   handleRoute = () => {

src/store/actions.js

@@ -1,30 +1,26 @@
 import { DB } from '../utils/db';
-const db = new DB();
 
 export const actions = store => ({
-  updateSetting: (state, { key = '', value = '' }) => {
-    const settings = { ...state.settings };
-    settings[key] = value;
-
-    db.set('settings', key, value);
+  boot: async (state, dbPromise) => {
+    const db = new DB(dbPromise);
 
-    return {
-      settings,
-    };
-  },
-
-  getSettings: async state => {
     const settingKeys = await db.keys('settings');
     const savedSettings = await settingKeys.reduce(async (current, key) => {
       current[key] = await db.get('settings', key);
       return current;
     }, {});
 
-    return {
-      settings: {
-        ...state.settings,
-        ...savedSettings,
-      },
-    };
+    return { db, settings: { ...state.settings, ...savedSettings } };
+  },
+
+  updateSetting: (state, { key = '', value = '' }) => {
+    if (!state.db) return;
+
+    const settings = { ...state.settings };
+    settings[key] = value;
+
+    state.db.set('settings', key, value);
+
+    return { settings };
   },
 });

src/store/index.js

@@ -4,6 +4,7 @@ const store = {
   settings: {
     theme: '',
   },
+  db: null,
 };
 
 export default createStore(store);

src/utils/db.js

@@ -1,10 +1,10 @@
-import idb from 'idb';
+import { openDb } from 'idb';
 
 export class DB {
   db;
 
-  constructor(db) {
-    this.db = idb.open('entries-store');
+  constructor(dbPromise) {
+    this.db = dbPromise || openDb('entries-store');
   }
 
   get(table, key) {