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"
+  }
+}

frontend/src/pages/NotFoundPage/i18n/en.json renamed to frontend/public/locales/en/notFoundPage.json

@@ -0,0 +1,4 @@
+{
+  "title": "Parallax Page",
+  "description": "Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling."
+}

frontend/public/locales/en/parallaxPage.json

@@ -0,0 +1,18 @@
+{
+  "title": "React Page",
+  "fetchNote": {
+    "asyncCalls": "async calls",
+    "fetchAllNotes": "Fetch All Notes From DB"
+  },
+  "todoLayout": {
+    "title": "todos",
+    "todoFooter": {
+      "all": "All",
+      "active": "Active",
+      "completed": "Completed"
+    },
+    "todoInput": {
+      "addTodo": "Add todo"
+    }
+  }
+}

frontend/public/locales/en/reactPage.json

@@ -0,0 +1,20 @@
+{
+  "header": {
+    "react": "React",
+    "dropdown": "ドロップダウンリスト",
+    "notfound": "404"
+  },
+  "footer": {
+    "title": "フッターコンテンツ",
+    "content": "ここでは行と列を使用してフッターのコンテンツを整理できます。",
+    "links": "リンク",
+    "linkOne": "リンク 1",
+    "linkTwo": "リンク 2",
+    "linkThree": "リンク 3",
+    "linkFour": "リンク 4",
+    "moreLinks": "その他のリンク"
+  },
+  "dropdown": {
+    "parallax": "視差"
+  }
+}

frontend/public/locales/jp/common.json

@@ -0,0 +1,26 @@
+{
+  "title": "ホームページ",
+  "carousel": {
+    "focusButtonText": "フォーカス!",
+    "firstPanelTitle": "最初のパネル",
+    "secondPanelTitle": "第2のパネル",
+    "thirdPanelTitle": "第3のパネル",
+    "fourthPanelTitle": "第4のパネル",
+    "firstPanelDescription": "これはあなたの最初のパネルです、それをスワイプしよう！",
+    "secondPanelDescription": "これはあなたの第2のパネルです、それをスワイプしよう！",
+    "thirdPanelDescription": "これはあなたの第3のパネルです、それをスワイプしよう！",
+    "fourthPanelDescription": "これはあなたの第4のパネルです、それをスワイプしよう！",
+    "tooltipText": "クリック! >. <",
+    "toastText": "私はトーストです！"
+  },
+  "pushpin": {
+    "green": "緑",
+    "blue": "青",
+    "orange": "橙",
+    "red": "赤",
+    "purple": "紫",
+    "cyan": "シアン",
+    "linkOne": "リンク 1",
+    "linkTwo": "リンク 2"
+  }
+}

frontend/public/locales/jp/homePage.json

@@ -0,0 +1,4 @@
+{
+  "title": "視差ページ",
+  "description": "Parallax(パララックス)は、この場合のバックグラウンドコンテンツまたは画像がスクロール中にフォアグラウンドコンテンツとは異なる速度で移動される場合の効果です。"
+}

frontend/src/pages/NotFoundPage/i18n/jp.json renamed to frontend/public/locales/jp/notFoundPage.json

@@ -0,0 +1,18 @@
+{
+  "title": "Reactページ",
+  "fetchNote": {
+    "asyncCalls": "非同期関数",
+    "fetchAllNotes": "DB内のメモを取得する"
+  },
+  "todoLayout": {
+    "title": "todoリスト",
+    "todoFooter": {
+      "all": "全部",
+      "active": "アクティブ",
+      "completed": "完成した"
+    },
+    "todoInput": {
+      "addTodo": "追加する"
+    }
+  }
+}

frontend/public/locales/jp/parallaxPage.json

@@ -0,0 +1,20 @@
+{
+  "header": {
+    "react": "React",
+    "dropdown": "下拉列表",
+    "notfound": "404"
+  },
+  "footer": {
+    "title": "页脚内容",
+    "content": "你可以在这里使用行或者列来编辑的页脚内容.",
+    "links": "链接",
+    "linkOne": "链接 1",
+    "linkTwo": "链接 2",
+    "linkThree": "链接 3",
+    "linkFour": "链接 4",
+    "moreLinks": "更多链接"
+  },
+  "dropdown": {
+    "parallax": "视差"
+  }
+}

frontend/public/locales/jp/reactPage.json

@@ -0,0 +1,26 @@
+{
+  "title": "首页",
+  "carousel": {
+    "focusButtonText": "看我看我!",
+    "firstPanelTitle": "第一个面板",
+    "secondPanelTitle": "第二个面板",
+    "thirdPanelTitle": "第三个面板",
+    "fourthPanelTitle": "第四个面板",
+    "firstPanelDescription": "这是你的第一个面板，试试左右滑动它！",
+    "secondPanelDescription": "这是你的第二个面板，试试左右滑动它！",
+    "thirdPanelDescription": "这是你的第三个面板，试试左右滑动它！",
+    "fourthPanelDescription": "这是你的第四个面板，试试左右滑动它！",
+    "tooltipText": "戳我! >. <",
+    "toastText": "哇我是一个toast!"
+  },
+  "pushpin": {
+    "green": "绿色",
+    "blue": "蓝色",
+    "orange": "橘色",
+    "red": "红色",
+    "purple": "紫色",
+    "cyan": "青色",
+    "linkOne": "链接 1",
+    "linkTwo": "链接 2"
+  }
+}

frontend/public/locales/zh/common.json

@@ -0,0 +1,4 @@
+{
+  "title": "视差页面",
+  "description": "Parallax(视差) 是指一种背景内容或图像在滚动时以与前景内容不同的速度移动的效果。"
+}

frontend/public/locales/zh/homePage.json

@@ -0,0 +1,18 @@
+{
+  "title": "React页面",
+  "fetchNote": {
+    "asyncCalls": "异步函数",
+    "fetchAllNotes": "获取数据库所有笔记"
+  },
+  "todoLayout": {
+    "title": "待办事项",
+    "todoFooter": {
+      "all": "全部",
+      "active": "待办",
+      "completed": "已完成"
+    },
+    "todoInput": {
+      "addTodo": "添加待办事项"
+    }
+  }
+}

frontend/src/pages/NotFoundPage/i18n/zh.json renamed to frontend/public/locales/zh/notFoundPage.json

@@ -9,12 +9,12 @@
   "description": "Full-stack boilerplate that using express with webpack, react and typescript!",
   "icons": [
     {
-      "src": "android-chrome-192x192.png",
+      "src": "icons/android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "android-chrome-512x512.png",
+      "src": "icons/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
     }

frontend/public/locales/zh/parallaxPage.json

@@ -1,11 +1,9 @@
-import { ConnectedRouter } from 'connected-react-router';
+import { ConnectedRouter } from 'connected-react-router/immutable';
 import { History } from 'history';
 import React from 'react';
-import { I18nextProvider } from 'react-i18next';
 import { Provider } from 'react-redux';
 import { Store } from 'redux';
 
-import i18n from 'i18n';
 import router from 'router';
 import { IGlobalState } from 'types/global';
 
@@ -15,11 +13,9 @@ interface IAppProps {
 }
 
 export default (props: IAppProps) => (
-  <I18nextProvider i18n={i18n}>
-    <Provider store={props.store}>
-      <ConnectedRouter history={props.history}>
-        {router}
-      </ConnectedRouter>
-    </Provider>
-  </I18nextProvider>
+  <Provider store={props.store}>
+    <ConnectedRouter history={props.history}>
+      {router}
+    </ConnectedRouter>
+  </Provider>
 );

frontend/public/locales/zh/reactPage.json

@@ -11,7 +11,7 @@ exports[`Dropdown should renders correctly 1`] = `
         href="/dropdown"
         onClick={[Function]}
       >
-        dropdown
+        dropdown.dropdown
       </a>
     </li>
   </ul>