feat(localization): minimal localization support

Guya-LTD · Sep 27, 2020 · 12dd4e2 · 12dd4e2
1 parent 55e4eb1
commit 12dd4e2
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 17 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 # dev files
 public/dev-lib
+gcss-v0.1.0-dev/
 
 # Logs
 logs

diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "react-dom": "^16.13.1",
     "react-icons": "^3.11.0",
     "react-router-dom": "^5.2.0",
-    "react-router-i18n": "^0.3.0",
+    "react-router-i18n": "^1.0.0",
     "react-scripts": "3.4.1"
   },
   "devDependencies": {

diff --git a/public/index.html b/public/index.html
@@ -24,9 +24,10 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-	<title>Guya Admin Panle</title>
+    <link rel="stylesheet" href="/gcss-v0.1.0-dev/gcss.css">
+	<title>Guya Admin Panel</title>
   </head>
-  <body>
+  <body style="background: #f2f4fb">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
@@ -40,4 +41,5 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
+  <script src='/gcss-v0.1.0-dev/gcss.js'></script>
 </html>
diff --git a/src/I18n/am/app.js b/src/I18n/am/app.js
@@ -0,0 +1,5 @@
+const app = {
+    name: 'Am Name'
+}
+
+export default app;
diff --git a/src/I18n/en/app.js b/src/I18n/en/app.js
@@ -0,0 +1,5 @@
+const app = {
+    name: 'Name'
+}
+
+export default app;
diff --git a/src/I18n/index.js b/src/I18n/index.js
@@ -0,0 +1,26 @@
+import { createI18n } from 'react-router-i18n';
+
+import appEn from './en/app';
+import appAm from './am/app';
+
+// Array of supported locales
+// The first in the array is treated as the default locale
+const locales = ['en', 'am'];
+
+const translations = {
+    en: {
+        app: appEn
+    },
+    am: {
+        app: appAm
+    }
+}
+
+console.log(translations)
+
+const I18n = createI18n(
+    locales,
+    translations,
+  );
+
+  export default I18n;
diff --git a/src/index.js b/src/index.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Route from 'routes/ServiceRoute';
+import RouteService from 'routes/ServiceRoute';
 
 ReactDOM.render(
   <React.StrictMode>
-	<div> Admin Panel- Modified - second time </div>
+    <RouteService />
   </React.StrictMode>,
   document.getElementById('root')
 );
diff --git a/src/pages/Login/Login.js b/src/pages/Login/Login.js
@@ -1,8 +1,11 @@
 import React, { useState } from 'react';
 import { useAsync } from 'react-async';
+import LoginTemplate from '@bit/guya-ltd.gcss.templates.landing.login';
+import Card from '@bit/guya-ltd.gcss.organisms.card';
 
 
 import Authorization from 'hocs/Authorization';
+import I18n from 'I18n';
 
 const Login = () => {
     /* Rest API Authenticator function */
@@ -26,13 +29,19 @@ const Login = () => {
     }
 
     return (
-        <form onSubmit={handleLogin}>
-            <input type='text' value={email} onChange={event => setEmail(event.target.value)} />
-            <br />
-            <input type='password' value={password} onChange={event => setPassword(event.target.value)} />
-            <br />
-            <button type='submit' disabled={isPending}>Login</button>
-        </form>
+        <LoginTemplate 
+            header={<h1><I18n t="app.name" /></h1>}
+            footer={{right: <p>Right</p>, left: <p>Left</p>}}>
+            <Card>
+                <form onSubmit={handleLogin}>
+                <input type='text' value={email} onChange={event => setEmail(event.target.value)} />
+                <br />
+                <input type='password' value={password} onChange={event => setPassword(event.target.value)} />
+                <br />
+                <button type='submit' disabled={isPending}>Login</button>
+            </form>
+            </Card>
+	</LoginTemplate>
     )
 }
 

diff --git a/src/routes/ServiceRoute.js b/src/routes/ServiceRoute.js
@@ -9,12 +9,15 @@ import IndexPage from 'pages/Index';
 import LoginPage from 'pages/Login';
 import Error404Page from 'pages/Error404';
 
+// Match locales with regular expression containing each locale separated by `|`
+const base = '/:locale(en|am)?';
+
 // <Route path='/home/dashboards/support' component={LoginPage} />
 const ServiceRoute = () => (
     <Router>
         <Switch>
           <Route exact path="/" component={IndexPage} />
-          <Route path="/login" component={LoginPage} />
+          <Route path={`${base}/login`} component={LoginPage} />
           <Route path="*" component={Error404Page} />
         </Switch>
     </Router>

diff --git a/yarn.lock b/yarn.lock
@@ -11108,10 +11108,10 @@ react-router-dom@^5.2.0:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-router-i18n@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/react-router-i18n/-/react-router-i18n-0.3.0.tgz#bb7a229a60cf08fc9da566eca4b02f8a6bf57388"
-  integrity sha512-Fgz4Dw1KU3JwRWMfz0pgRbQQvH1sh0XJObhiIqp/orG52d8RhAWlpwGRjQcZteZwuE4hBzQfWBPPAqFLIv0FAw==
+react-router-i18n@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/react-router-i18n/-/react-router-i18n-1.0.0.tgz#42a4d69ed22aeb761ab758f7470fcc3bc40b9dd5"
+  integrity sha512-W2hYN27Tr7/rDauj+7VTpMWyi+erI7J6hYUg68vnWqVr/uiVbSJg9Ghimy+ai5fKzbXYKYk+5DCilhzszzLd4g==
   dependencies:
     prop-types "^15.7.2"