update dependencies

* Update dependencies * Replace `react-loadable` with regular JavaScript * Tweak text
perseids-project · Jan 10, 2020 · df5109d · df5109d
1 parent d7036c2
commit df5109d
Show file tree

Hide file tree

Showing 6 changed files with 1,680 additions and 1,590 deletions.
diff --git a/package.json b/package.json
@@ -1,27 +1,26 @@
 {
   "name": "woodhouse-js",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "private": true,
   "homepage": "https://perseids-project.github.io/woodhouse-js/",
   "dependencies": {
-    "@githubprimer/octicons-react": "^8.5.0",
+    "@primer/octicons-react": "^9.3.1",
     "@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.4.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",
     "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-router-i18n": "^0.1.2",
-    "react-scripts": "3.2.0",
-    "reactstrap": "^8.1.1"
+    "react-scripts": "3.3.0",
+    "reactstrap": "^8.2.0"
   },
   "scripts": {
     "deploy": "yarn deploy-github && yarn deploy-perseids",

diff --git a/src/components/App/App.test.js b/src/components/App/App.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, waitForElement } from '@testing-library/react';
 
 import App from './App';
 
@@ -15,9 +15,9 @@ it('renders title', () => {
   expect(getByText('A Vocabulary of the Attic Language')).toBeInTheDocument();
 });
 
-it('looks up a word', () => {
+it('looks up a word', async () => {
   const { getByText, getByPlaceholderText } = render(<App />);
-  const lookupNode = getByPlaceholderText('Enter word...');
+  const lookupNode = await waitForElement(() => getByPlaceholderText('Enter word ...'));
 
   expect(window.location.pathname).toEqual('/');
 

diff --git a/src/components/AsyncRouter/AsyncRouter.js b/src/components/AsyncRouter/AsyncRouter.js
@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Loadable from 'react-loadable';
 import localForage from 'localforage';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
@@ -68,95 +67,78 @@ Router.propTypes = {
 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 }
-  ))
-);
+class AsyncRouter extends Component {
+  constructor(props) {
+    super(props);
 
-const WaitForDownload = Loadable({
-  loader: () => import('../../lib/Dictionary').then(cacheDictionary),
-  loading: () => (
-    <>
-      <DummyNavbar />
-      <div className="container text-center">
-        <BrowserRouter>
-          <Route
-            path={base}
-            render={() => (
-              <header>
-                <h1 className="h3 pt-4 mb-1 font-weight-normal">
-                  <I18n t="header.title" />
-                </h1>
-                <h4 className="h5 mb-2 font-weight-normal">
-                  <em>
-                    <I18n t="header.subtitle" />
-                  </em>
-                </h4>
-                <h5 className="h5 mb-3 font-weight-normal">
-                  <I18n t="header.author" />
-                </h5>
-              </header>
-            )}
-          />
-        </BrowserRouter>
-        <main>
-          <Loading text="Downloading dictionary..." />
-        </main>
-      </div>
-    </>
-  ),
-  render(dictionary, props) {
-    return <Router {...props} dictionary={dictionary} />;
-  },
-});
-
-const AsyncRouter = Loadable({
-  loader: lookupDictionary,
-  loading: () => (
-    <>
-      <DummyNavbar />
-      <div className="container text-center">
-        <BrowserRouter>
-          <Route
-            path={base}
-            render={() => (
-              <header>
-                <h1 className="h3 pt-4 mb-1 font-weight-normal">
-                  <I18n t="header.title" />
-                </h1>
-                <h4 className="h5 mb-2 font-weight-normal">
-                  <em>
-                    <I18n t="header.subtitle" />
-                  </em>
-                </h4>
-                <h5 className="h5 mb-3 font-weight-normal">
-                  <I18n t="header.author" />
-                </h5>
-              </header>
-            )}
-          />
-        </BrowserRouter>
-        <main>
-          <Loading text="Loading dictionary from cache..." />
-        </main>
-      </div>
-    </>
-  ),
-  render(loaded, props) {
-    if (loaded.success) {
-      return <Router {...props} dictionary={loaded.dictionary} />;
+    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 (
+        <>
+          <DummyNavbar />
+          <div className="container text-center">
+            <BrowserRouter>
+              <Route
+                path={base}
+                render={() => (
+                  <header>
+                    <h1 className="h3 pt-4 mb-1 font-weight-normal">
+                      <I18n t="header.title" />
+                    </h1>
+                    <h4 className="h5 mb-2 font-weight-normal">
+                      <em>
+                        <I18n t="header.subtitle" />
+                      </em>
+                    </h4>
+                    <h5 className="h5 mb-3 font-weight-normal">
+                      <I18n t="header.author" />
+                    </h5>
+                  </header>
+                )}
+              />
+            </BrowserRouter>
+            <main>
+              <Loading text={loadingText} />
+            </main>
+          </div>
+        </>
+      );
     }
 
-    return <WaitForDownload {...props} />;
-  },
-});
+    return <Router {...this.props} dictionary={dictionary} />;
+  }
+}
 
 export default AsyncRouter;
diff --git a/src/components/Browse/Browse.js b/src/components/Browse/Browse.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
-import Octicon, { ArrowUp, ArrowDown } from '@githubprimer/octicons-react';
+import Octicon, { ArrowUp, ArrowDown } from '@primer/octicons-react';
 
 import Parser from '../../lib/Parser';
 
@@ -116,7 +116,7 @@ class Browse extends Component {
       <div className="mt-4">
         <div className="row mb-2 mt-2">
           <div className="col-8 pr-0">
-            <input className="form-control" type="text" value={word} onChange={this.handleChange} placeholder="Enter word..." aria-label="lookup" />
+            <input className="form-control" type="text" value={word} onChange={this.handleChange} placeholder="Enter word ..." aria-label="lookup" />
           </div>
           <div className="col-2 pr-1">
             <Link to={`/b/${previous}`} className="btn btn-primary btn-block">

diff --git a/src/components/Lookup/Lookup.js b/src/components/Lookup/Lookup.js
@@ -37,7 +37,7 @@ class Lookup extends Component {
 
     return (
       <div className="mt-4">
-        <input className="form-control mb-4" type="text" value={word} onChange={this.handleChange} placeholder="Enter word..." aria-label="lookup" />
+        <input className="form-control mb-4" type="text" value={word} onChange={this.handleChange} placeholder="Enter word ..." aria-label="lookup" />
         {this.renderEntries(word)}
       </div>
     );