Feature(i18n): better i18n support

* better i18n support
* better immutable support
* upgrade dependencies

Fixes #328

Author: Armour

.appveyor.yml

@@ -1,5 +1,5 @@
 environment:
-  nodejs_version: "10"
+  nodejs_version: "11"
 
 install:
   - ps: Install-Product node $env:nodejs_version

.babelrc

@@ -1,16 +1,19 @@
 {
   "presets": [
     "@babel/preset-env",
-    "@babel/preset-react"
+    "@babel/preset-react",
+    "@babel/preset-typescript"
   ],
-  "env": {
-    "development": {
-      "plugins": [
-        "react-hot-loader/babel"
-      ]
-    }
-  },
   "plugins": [
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true,
+      }
+    ],
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-transform-runtime",
+    "react-hot-loader/babel",
     [
       "prismjs",
       {
@@ -37,7 +40,6 @@
         "theme": "default",
         "css": true
       }
-    ],
-    "@babel/plugin-syntax-dynamic-import"
+    ]
   ]
 }

.circleci/config.yml

@@ -9,25 +9,22 @@ jobs:
   build:
     working_directory: ~
     docker:
-      - image: circleci/node:10
+      - image: circleci/node:11
     steps:
       - checkout
-      - run:
-          name: Install System Dependencies
-          command: sudo apt-get update && sudo apt-get install gcc make libpng12-dev nasm -y
       - run:
           name: Install Docker client
           command: |
             set -x
-            VER="18.06.1-ce"
-            curl -L -o /tmp/docker-$VER.tgz https://download.docker.com/linux/static/stable/x86_64/docker-$VER.tgz
-            tar -xz -C /tmp -f /tmp/docker-$VER.tgz
+            VER="18.09.1"
+            curl -L -o /tmp/docker.tgz https://download.docker.com/linux/static/stable/x86_64/docker-$VER.tgz
+            tar -xz -C /tmp -f /tmp/docker.tgz
             sudo cp -r /tmp/docker/* /usr/bin
       - run:
           name: Install Docker Compose
           command: |
             set -x
-            VER="1.22.0"
+            VER="1.23.2"
             curl -L https://github.com/docker/compose/releases/download/$VER/docker-compose-`uname -s`-`uname -m` > /tmp/docker-compose
             sudo cp /tmp/docker-compose /usr/local/bin/docker-compose
             sudo chmod +x /usr/local/bin/docker-compose

.dockerignore

@@ -31,8 +31,12 @@ coverage/
 .coveralls.yml
 
 # Misc
-.awcache/
+__mocks__/
+.circleci/
 .github/
 node_modules/
 dist/
+.appveyor.yml
+.*lintrc*
+.*lintignore*
 yarn.lock

.gitignore

@@ -31,7 +31,6 @@ coverage/
 .coveralls.yml
 
 # Misc
-.awcache/
 node_modules/
 dist/
 

Dockerfile

@@ -5,7 +5,7 @@ ARG PORT=${PORT}
 WORKDIR /usr/src/app
 COPY . /usr/src/app/
 
-RUN apk add --no-cache --update make gcc g++ libc-dev libpng-dev automake autoconf libtool nasm
+RUN apk add --no-cache --update make gcc libc-dev libpng-dev automake autoconf libtool nasm
 RUN yarn install
 RUN yarn build
 

README.md

@@ -36,9 +36,9 @@
 * [x] [react](https://facebook.github.io/react/) - a JavaScript library for building user interfaces
 * [x] [react-hot-loader 4](https://github.com/gaearon/react-hot-loader) - hot module reload!
 * [x] [react-router 4](https://github.com/ReactTraining/react-router) - declarative routing for React
-* [x] [react-redux](https://github.com/reactjs/react-redux) - the official react bindings for [redux 4](https://github.com/reactjs/redux) (a predictable state container for js apps)
+* [x] [react-redux 6](https://github.com/reactjs/react-redux) - the official react bindings for [redux 4](https://github.com/reactjs/redux) (a predictable state container for js apps)
 * [x] [react-saga](https://github.com/redux-saga/redux-saga/) - make redux asynchronous flows easy to read, write and test, the replacement for [redux-thunk](https://github.com/reduxjs/redux-thunk)
-* [x] [connected-react-router](https://github.com/supasate/connected-react-router) - a redux binding for react-router 4, the replacement for [react-router-redux v5](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux)
+* [x] [connected-react-router 6](https://github.com/supasate/connected-react-router) - a redux binding for react-router 4, the replacement for [react-router-redux v5](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux)
 * [x] [react-loadable](https://github.com/jamiebuilds/react-loadable) - better user experience for dynamic loading components
 * [x] [react-i18next](https://github.com/i18next/react-i18next) - internationalization for react done right
 * [x] [immutable.js](https://github.com/facebook/immutable-js/) - persistent Immutable data structures for react redux state management
@@ -106,7 +106,7 @@ On development (with hot reload):
 yarn dev
 ```
 
-On production (with uglify-js and other optimazitions):
+On production (with [terser](https://github.com/terser-js/terser) and other optimazitions):
 
 ```bash
 yarn prod

__mocks__/react-i18next.tsx

@@ -0,0 +1 @@
+export const NamespacesConsumer = ({ children }: any) => children((k: string) => k, { i18n: {} });

frontend/public/locales/en/common.json

@@ -0,0 +1,20 @@
+{
+  "header": {
+    "react": "React",
+    "dropdown": "Dropdown",
+    "notfound": "404"
+  },
+  "footer": {
+    "title": "Footer Content",
+    "content": "You can use rows and columns here to organize your footer content.",
+    "links": "Links",
+    "linkOne": "Link 1",
+    "linkTwo": "Link 2",
+    "linkThree": "Link 3",
+    "linkFour": "Link 4",
+    "moreLinks": "More Links"
+  },
+  "dropdown": {
+    "parallax": "Parallax"
+  }
+}

frontend/public/locales/en/homePage.json

@@ -0,0 +1,26 @@
+{
+  "title": "Home Page",
+  "carousel": {
+    "focusButtonText": "Focus me!",
+    "firstPanelTitle": "First Panel",
+    "secondPanelTitle": "Second Panel",
+    "thirdPanelTitle": "Third Panel",
+    "fourthPanelTitle": "Fourth Panel",
+    "firstPanelDescription": "This is your first panel, try to swipe it!",
+    "secondPanelDescription": "This is your second panel, try to swipe it!",
+    "thirdPanelDescription": "This is your third panel, try to swipe it!",
+    "fourthPanelDescription": "This is your fourth panel, try to swipe it!",
+    "tooltipText": "Click me! >. <",
+    "toastText": "I am a toast!"
+  },
+  "pushpin": {
+    "green": "Green",
+    "blue": "Blue",
+    "orange": "Orange",
+    "red": "Red",
+    "purple": "Purple",
+    "cyan": "Cyan",
+    "linkOne": "Link 1",
+    "linkTwo": "Link 2"
+  }
+}