update dependencies

.tool-versions

@@ -1 +1 @@
-nodejs 11.9.0
+nodejs 12.9.1

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - v11.9.0
+  - v12.9.1
 before_install:
   - curl -o- -L https://yarnpkg.com/install.sh | bash
   - export PATH="$HOME/.yarn/bin:$PATH"

package.json

@@ -5,17 +5,17 @@
   "homepage": "https://perseids-project.github.io/polytonic-js/",
   "dependencies": {
     "bootstrap": "^4.3.1",
-    "eslint-config-airbnb": "^17.1.1",
-    "eslint-plugin-jest": "^22.7.2",
-    "gh-pages": "^2.0.1",
-    "perseids-react-components": "^0.1.1",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-plugin-jest": "^22.19.0",
+    "gh-pages": "^2.1.1",
+    "perseids-react-components": "^0.2.0",
     "prop-types": "^15.7.2",
-    "react": "^16.8.6",
-    "react-clipboard.js": "^2.0.13",
-    "react-dom": "^16.8.6",
-    "react-router-dom": "^5.0.1",
-    "react-scripts": "3.0.1",
-    "react-simple-keyboard": "^1.24.2",
+    "react": "^16.10.2",
+    "react-clipboard.js": "^2.0.16",
+    "react-dom": "^16.10.2",
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "3.2.0",
+    "react-simple-keyboard": "^2.0.15",
     "typeface-arimo": "^0.0.72",
     "typeface-tinos": "^0.0.72"
   },

src/components/App/App.js

@@ -6,7 +6,7 @@ import Input from '../Input';
 
 const App = () => (
   <Router basename={process.env.PUBLIC_URL}>
-    <React.Fragment>
+    <>
       <PerseidsHeader>
         Greek Polytonic Keyboard
       </PerseidsHeader>
@@ -21,7 +21,7 @@ const App = () => (
         report="https://github.com/perseids-project/polytonic-js"
         github="https://github.com/perseids-project/polytonic-js/issues"
       />
-    </React.Fragment>
+    </>
   </Router>
 );
 

src/components/Input/Input.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import Keyboard from 'react-simple-keyboard';
 
 // see https://github.com/yannickcr/eslint-plugin-react/issues/2209
@@ -34,15 +34,15 @@ const setCaret = (elem, pos) => {
 };
 
 class Input extends Component {
-  state = {
-    value: '',
-    layoutName: 'default',
-    shifted: false,
-  };
-
   constructor(props) {
     super(props);
 
+    this.state = {
+      value: '',
+      layoutName: 'default',
+      shifted: false,
+    };
+
     this.handleChange = this.handleChange.bind(this);
     this.handleKeyboardChange = this.handleKeyboardChange.bind(this);
     this.handleKeyPress = this.handleKeyPress.bind(this);
@@ -51,13 +51,13 @@ class Input extends Component {
 
   handleChange(event) {
     const { value } = event.target;
-    const { setInput } = this.keyboardRef.keyboard;
+    const { setInput } = this.keyboardRef;
 
     this.setState({ value }, () => setInput(value));
   }
 
   handleKeyboardChange(value) {
-    const { caretPosition } = this.keyboardRef.keyboard;
+    const { caretPosition } = this.keyboardRef;
 
     this.setState(({ shifted }) => {
       if (shifted) {
@@ -107,7 +107,7 @@ class Input extends Component {
     const { value, layoutName } = this.state;
 
     return (
-      <Fragment>
+      <>
         <div className="row pt-4 mb-3">
           <div className="col-12 text-center">
             <h1 className="h3 font-weight-normal">
@@ -133,7 +133,7 @@ class Input extends Component {
           </div>
           <div>
             <Keyboard
-              ref={(r) => { this.keyboardRef = r; }}
+              keyboardRef={(r) => { this.keyboardRef = r; }}
               onChange={this.handleKeyboardChange}
               onKeyPress={this.handleKeyPress}
               layout={layout}
@@ -145,7 +145,7 @@ class Input extends Component {
             />
           </div>
         </div>
-      </Fragment>
+      </>
     );
   }
 }