update dependencies

Update dependencies and replace `react-loadable` with regular
JavaScript.

package.json

@@ -1,27 +1,25 @@
 {
   "name": "greek-conjugator-js",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": true,
   "homepage": "https://perseids-project.github.io/greek-conjugator-js",
   "dependencies": {
-    "@githubprimer/octicons-react": "^8.5.0",
     "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "bootstrap": "^4.3.1",
+    "@testing-library/react": "^9.4.0",
+    "bootstrap": "^4.4.1",
     "eslint-config-airbnb": "^18.0.1",
-    "eslint-plugin-jest": "^23.0.4",
-    "gh-pages": "^2.1.1",
+    "eslint-plugin-jest": "^23.3.0",
+    "gh-pages": "^2.2.0",
     "localforage": "^1.7.2",
-    "perseids-react-components": "^0.2.0",
+    "perseids-react-components": "^0.2.1",
     "prop-types": "^15.7.2",
     "query-string": "^6.9.0",
     "react": "^16.12.0",
     "react-app-rewired": "^2.1.5",
     "react-dom": "^16.12.0",
-    "react-loadable": "^5.4.0",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.2.0",
-    "reactstrap": "^8.1.1",
+    "react-scripts": "3.3.0",
+    "reactstrap": "^8.2.0",
     "typeface-arimo": "^0.0.72",
     "typeface-tinos": "^0.0.72"
   },

src/components/AsyncLookup/AsyncLookup.js

@@ -1,5 +1,4 @@
-import React from 'react';
-import Loadable from 'react-loadable';
+import React, { Component } from 'react';
 import localForage from 'localforage';
 
 import Loading from '../Loading';
@@ -10,37 +9,49 @@ const DICTIONARY_VERSION = 'woodhouse-0.0.1';
 const cacheDictionary = (loaded) => {
   const dictionary = loaded.default;
 
-  localForage.clear().then(() => localForage.setItem(DICTIONARY_VERSION, dictionary));
+  localForage.setItem(DICTIONARY_VERSION, dictionary);
 
   return dictionary;
 };
 
-const lookupDictionary = () => (
-  localForage.getItem(DICTIONARY_VERSION).then((d) => (
-    { success: !!d, dictionary: d }
-  )).catch(() => (
-    { success: false }
-  ))
-);
-
-const WaitForDownload = Loadable({
-  loader: () => import('../../lib/Dictionary').then(cacheDictionary),
-  loading: () => <Loading text="Downloading dictionary..." />,
-  render(dictionary, props) {
-    return <Lookup {...props} dictionary={dictionary} />;
-  },
-});
-
-const AsyncLookup = Loadable({
-  loader: lookupDictionary,
-  loading: () => <Loading text="Loading dictionary from cache..." />,
-  render(loaded, props) {
-    if (loaded.success) {
-      return <Lookup {...props} dictionary={loaded.dictionary} />;
+class AsyncLookup extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      loadingText: 'Loading dictionary from cache...',
+      dictionary: null,
+    };
+  }
+
+  componentDidMount() {
+    localForage.getItem(DICTIONARY_VERSION).then((dictionary) => {
+      if (dictionary) {
+        this.setState({ dictionary });
+      } else {
+        this.setState({ loadingText: 'Downloading dictionary...' }, this.asyncImport);
+      }
+    });
+  }
+
+  asyncImport() {
+    import('../../lib/Dictionary').then(cacheDictionary).then((dictionary) => {
+      this.setState({ dictionary });
+    });
+  }
+
+  render() {
+    const {
+      loadingText,
+      dictionary,
+    } = this.state;
+
+    if (dictionary === null) {
+      return <Loading text={loadingText} />;
     }
 
-    return <WaitForDownload {...props} />;
-  },
-});
+    return <Lookup {...this.props} dictionary={dictionary} />;
+  }
+}
 
 export default AsyncLookup;