adding I18n (#3)

* add i18n support

* update dependencies

Author: aonkonDey

package.json

@@ -7,15 +7,16 @@
     "beta-code-js": "^1.0.8",
     "bootstrap": "^4.3.1",
     "eslint-config-airbnb": "^18.0.1",
-    "eslint-plugin-jest": "^22.15.2",
+    "eslint-plugin-jest": "^23.0.4",
     "gh-pages": "^2.1.1",
-    "perseids-react-components": "^0.1.1",
+    "perseids-react-components": "^0.2.0",
     "prop-types": "^15.7.2",
-    "react": "^16.9.0",
-    "react-clipboard.js": "^2.0.13",
-    "react-dom": "^16.9.0",
-    "react-router-dom": "^5.0.1",
-    "react-scripts": "3.1.1",
+    "react": "^16.12.0",
+    "react-clipboard.js": "^2.0.16",
+    "react-dom": "^16.12.0",
+    "react-router-dom": "^5.1.2",
+    "react-router-i18n": "^0.1.2",
+    "react-scripts": "3.2.0",
     "typeface-tinos": "^0.0.72"
   },
   "scripts": {

src/components/App/App.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { PerseidsHeader, PerseidsFooter } from 'perseids-react-components';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
+import I18n from '../I18n';
+
 import styles from './App.module.css';
 
 import Converter from '../Converter';
@@ -10,7 +12,7 @@ const App = () => (
   <Router basename={process.env.PUBLIC_URL}>
     <>
       <PerseidsHeader>
-        Greek Beta Code Converter
+        <I18n t="header.title" />
       </PerseidsHeader>
       <main role="main" className={styles.main}>
         <div className={`container ${styles.container}`}>

src/components/Converter/Converter.js

@@ -1,7 +1,10 @@
 import React, { Component } from 'react';
+import { shape, string } from 'prop-types';
 import { greekToBetaCode, betaCodeToGreek } from 'beta-code-js';
 import Clipboard from 'react-clipboard.js';
 
+import I18n from '../I18n';
+
 import styles from './Converter.module.css';
 
 class Converter extends Component {
@@ -37,13 +40,14 @@ class Converter extends Component {
 
   render() {
     const { beta, unicode } = this.state;
+    const { location } = this.props;
 
     return (
       <>
         <div className="row pt-4 mb-3">
           <div className="col-12 text-center">
             <h1 className="h3 font-weight-normal">
-              Greek Beta Code Converter
+              <I18n t="converter.title" />
             </h1>
           </div>
         </div>
@@ -52,18 +56,18 @@ class Converter extends Component {
           <div className="col-6">
             <div className="d-block d-sm-none">
               <h4 className="text-center">
-                Unicode
+                <I18n t="converter.smallScreenUnicode" />
               </h4>
             </div>
             <div className="d-none d-sm-block">
               <h4 className="text-center">
-                 Greek Unicode
+                <I18n t="converter.unicode" />
               </h4>
             </div>
             <textarea
               className={`${styles.textarea} form-control input-lg clipboard-target-unicode`}
               type="text"
-              placeholder="μῆνιν ἄειδε θεὰ ..."
+              placeholder={I18n.getTranslation(location, 'converter.placeholderUnicode')}
               autoComplete="off"
               autoCorrect="off"
               autoCapitalize="off"
@@ -74,11 +78,13 @@ class Converter extends Component {
           </div>
 
           <div className="col-6">
-            <h4 className="text-center">Beta Code</h4>
+            <h4 className="text-center">
+              <I18n t="converter.betacode" />
+            </h4>
             <textarea
               className={`${styles.textarea} form-control input-lg clipboard-target-betacode`}
               type="text"
-              placeholder="mh=nin a)/eide qea\ ..."
+              placeholder={I18n.getTranslation(location, 'converter.placeholderBetacode')}
               autoComplete="off"
               autoCorrect="off"
               autoCapitalize="off"
@@ -95,7 +101,7 @@ class Converter extends Component {
               className="btn btn-block btn-success mb-4 mt-2"
               data-clipboard-target=".clipboard-target-unicode"
             >
-              Copy to Clipboard
+              <I18n t="converter.copy" />
             </Clipboard>
           </div>
           <div className="col-6">
@@ -104,7 +110,7 @@ class Converter extends Component {
               className="btn btn-block btn-success mb-4 mt-2"
               data-clipboard-target=".clipboard-target-betacode"
             >
-                Copy to Clipboard
+              <I18n t="converter.copy" />
             </Clipboard>
           </div>
         </div>
@@ -113,4 +119,10 @@ class Converter extends Component {
   }
 }
 
+Converter.propTypes = {
+  location: shape({
+    search: string.isRequired,
+  }).isRequired,
+};
+
 export default Converter;

src/components/Converter/Converter.test.js

@@ -1,9 +1,17 @@
 import React from 'react';
+import { MemoryRouter, Route } from 'react-router-dom';
 import { render } from 'react-dom';
 
 import Converter from './Converter';
 
 it('renders without crashing', () => {
   const div = window.document.createElement('div');
-  render(<Converter />, div);
+
+  const component = (
+    <MemoryRouter initialEntries={['/']}>
+      <Route path="/" component={Converter} />
+    </MemoryRouter>
+  );
+
+  render(component, div);
 });

src/components/I18n/I18n.js

@@ -0,0 +1,27 @@
+import { createI18n } from 'react-router-i18n';
+
+const locales = ['en'];
+
+const translations = {
+  en: {
+    header: {
+      title: 'Greek Beta Code Converter',
+    },
+    converter: {
+      title: 'Greek Beta Code Converter',
+      betacode: 'Beta Code',
+      unicode: 'Greek Unicode',
+      smallScreenUnicode: 'Unicode',
+      copy: 'Copy to Clipboard',
+      placeholderUnicode: 'μῆνιν ἄειδε θεὰ ...',
+      placeholderBetacode: 'mh=nin a)/eide qea ...',
+    },
+  },
+};
+
+const I18n = createI18n(
+  locales,
+  translations,
+);
+
+export default I18n;

src/components/I18n/index.js

@@ -0,0 +1,3 @@
+import I18n from './I18n';
+
+export default I18n;