update dependencies

package.json

@@ -5,16 +5,16 @@
   "homepage": "https://perseids-project.github.io/greek-latin-demixer/",
   "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.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-plugin-jest": "^23.0.4",
+    "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-scripts": "^3.0.1",
-    "react-tippy": "^1.2.3"
+    "react": "^16.12.0",
+    "react-clipboard.js": "^2.0.16",
+    "react-dom": "^16.12.0",
+    "react-scripts": "^3.2.0",
+    "react-tippy": "^1.3.1"
   },
   "scripts": {
     "deploy": "yarn deploy-github && yarn deploy-perseids",

src/components/App/App.js

@@ -25,7 +25,7 @@ class App extends Component {
     const { text } = this.state;
 
     return (
-      <React.Fragment>
+      <>
         <PerseidsHeader>
           Greek Latin Demixer
           <ul className="navbar-nav ml-auto">
@@ -47,7 +47,7 @@ class App extends Component {
           github="https://github.com/perseids-project/greek-latin-demixer"
           report="https://github.com/perseids-project/greek-latin-demixer/issues"
         />
-      </React.Fragment>
+      </>
     );
   }
 }

src/components/ContentLine/ContentLine.js

@@ -5,12 +5,6 @@ import ContentWord from '../ContentWord';
 import Delimit from '../../lib/delimit';
 
 class ContentLine extends Component {
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-    selectActiveWord: PropTypes.func.isRequired,
-    focusCustomInput: PropTypes.func.isRequired,
-  }
-
   constructor(props) {
     super(props);
 
@@ -50,4 +44,10 @@ class ContentLine extends Component {
   }
 }
 
+ContentLine.propTypes = {
+  children: PropTypes.node.isRequired,
+  selectActiveWord: PropTypes.func.isRequired,
+  focusCustomInput: PropTypes.func.isRequired,
+};
+
 export default ContentLine;

src/components/ContentWord/ContentWord.js

@@ -13,15 +13,9 @@ const convertChar = (char, key) => {
   return char;
 };
 
-const convertWord = word => word.split('').map((a, i) => convertChar(a, i));
+const convertWord = (word) => word.split('').map((a, i) => convertChar(a, i));
 
 class ContentWord extends Component {
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-    selectActiveWord: PropTypes.func.isRequired,
-    focusCustomInput: PropTypes.func.isRequired,
-  }
-
   constructor(props) {
     super(props);
 
@@ -104,4 +98,11 @@ class ContentWord extends Component {
   }
 }
 
+ContentWord.propTypes = {
+  children: PropTypes.node.isRequired,
+  selectActiveWord: PropTypes.func.isRequired,
+  focusCustomInput: PropTypes.func.isRequired,
+};
+
+
 export default ContentWord;

src/components/EditXml/EditXml.js

@@ -8,10 +8,6 @@ import Word from '../../lib/Word';
 import styles from './EditXml.module.css';
 
 class EditXml extends Component {
-  static propTypes = {
-    text: PropTypes.string.isRequired,
-  }
-
   constructor(props) {
     super(props);
 
@@ -82,4 +78,9 @@ class EditXml extends Component {
   }
 }
 
+EditXml.propTypes = {
+  text: PropTypes.string.isRequired,
+};
+
+
 export default EditXml;

src/components/InputXml/InputXml.js

@@ -4,10 +4,6 @@ import PropTypes from 'prop-types';
 import styles from './InputXml.module.css';
 
 class InputXml extends Component {
-  static propTypes = {
-    onSubmit: PropTypes.func.isRequired,
-  }
-
   constructor(props) {
     super(props);
 
@@ -62,4 +58,8 @@ class InputXml extends Component {
   }
 }
 
+InputXml.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+};
+
 export default InputXml;

src/components/WordPanel/WordPanel.js

@@ -9,19 +9,26 @@ import { RefType } from '../../lib/types';
 
 import styles from './WordPanel.module.css';
 
-const handleClipboardSuccess = event => event.clearSelection();
+const handleClipboardSuccess = (event) => event.clearSelection();
 
 class WordPanel extends Component {
-  static propTypes = {
-    word: PropTypes.instanceOf(Word).isRequired,
-    customInputFocusRef: RefType.isRequired,
+  static getDerivedStateFromProps(props, state) {
+    const { word: { text } } = props;
+    const { previousText } = state;
+
+    if (text !== previousText) {
+      return { customText: text, previousText: text };
+    }
+
+    return null;
   }
 
   constructor(props) {
     super(props);
 
     this.state = {
-      customText: '',
+      customText: null,
+      previousText: null,
     };
 
     this.handleCustomChange = this.handleCustomChange.bind(this);
@@ -37,12 +44,6 @@ class WordPanel extends Component {
     this.renderCustomTooltip = this.renderCustomTooltip.bind(this);
   }
 
-  componentWillReceiveProps(props) {
-    const { word: { text } } = props;
-
-    this.setState({ customText: text });
-  }
-
   handleCustomChange(event) {
     this.setState({ customText: event.target.value });
   }
@@ -222,4 +223,9 @@ class WordPanel extends Component {
   }
 }
 
+WordPanel.propTypes = {
+  word: PropTypes.instanceOf(Word).isRequired,
+  customInputFocusRef: RefType.isRequired,
+};
+
 export default WordPanel;

src/lib/convert.js

@@ -68,7 +68,7 @@ const latinRegExp = new RegExp(`[${charRange.latin}]`);
 const mixtureRegExp = new RegExp(`([${charRange.greek}][${charRange.latin}])|([${charRange.latin}][${charRange.greek}])`);
 
 const ltgFactory = (dict, regExp) => (
-  string => string.split('').map(a => (regExp.test(a) ? a : (dict[a] || '?'))).join('')
+  (string) => string.split('').map((a) => (regExp.test(a) ? a : (dict[a] || '?'))).join('')
 );
 
 const Convert = {

src/lib/delimit.js

@@ -3,8 +3,8 @@
 // eslint-disable-next-line no-useless-escape
 const splitRegExp = /([\s\/\\\(\)"'\:\,\.;<>~\!@#\$%\^&\*\|\+\=\[\]\{\}`\?\-…]+)/;
 
-const split = line => (
-  line.split(splitRegExp).map(string => (
+const split = (line) => (
+  line.split(splitRegExp).map((string) => (
     splitRegExp.test(string) ? { type: 'delimiter', string } : { type: 'word', string }
   )).filter(({ string }) => string !== '')
 );