Feature(lazy+suspense): use react lazy + suspense instead of react-lo…

…adable

README.md

@@ -39,7 +39,6 @@
 * [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 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
 * [x] [editorconfig](http://editorconfig.org/) - maintain consistent coding styles between different editors and IDEs

frontend/src/components/ContentLoader/__tests__/__snapshots__/contentLoader.spec.tsx.snap

@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BodyContentLoader should renders correctly 1`] = `
+<div
+  className="bodyContentLoader"
+>
+  <ContentLoader
+    height={200}
+    primaryColor="#f3f3f3"
+    secondaryColor="#d7d6d8"
+    speed={1}
+    width={400}
+  >
+    <rect
+      height="15.1"
+      rx="4"
+      ry="4"
+      width="76.63"
+      x="160.5"
+      y="11"
+    />
+    <rect
+      height="151.36"
+      rx="1"
+      ry="1"
+      width="275.4"
+      x="60.5"
+      y="35.05"
+    />
+  </ContentLoader>
+</div>
+`;
+
+exports[`FooterContentLoader should renders correctly 1`] = `
+<ContentLoader
+  height={400}
+  primaryColor="#f3f3f3"
+  secondaryColor="#d7d6d8"
+  speed={1}
+  width={2500}
+>
+  <rect
+    height="400"
+    width="2500"
+    x="0"
+    y="0"
+  />
+</ContentLoader>
+`;
+
+exports[`HeaderContentLoader should renders correctly 1`] = `
+<ContentLoader
+  height={95}
+  primaryColor="#f3f3f3"
+  secondaryColor="#d7d6d8"
+  speed={1}
+  width={2500}
+>
+  <rect
+    height="95"
+    width="2500"
+    x="0"
+    y="0"
+  />
+</ContentLoader>
+`;

frontend/src/components/ContentLoader/__tests__/contentLoader.spec.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import ShallowRenderer from 'react-test-renderer/shallow';
+
+import { BodyContentLoader, FooterContentLoader, HeaderContentLoader } from '../contentLoader';
+
+describe('HeaderContentLoader', () => {
+  it('should renders correctly', () => {
+    const renderer = ShallowRenderer.createRenderer();
+    const result = renderer.render(
+      <HeaderContentLoader />,
+    );
+    expect(result).toMatchSnapshot();
+    renderer.unmount();
+  });
+});
+
+describe('BodyContentLoader', () => {
+  it('should renders correctly', () => {
+    const renderer = ShallowRenderer.createRenderer();
+    const result = renderer.render(
+      <BodyContentLoader />,
+    );
+    expect(result).toMatchSnapshot();
+    renderer.unmount();
+  });
+});
+
+describe('FooterContentLoader', () => {
+  it('should renders correctly', () => {
+    const renderer = ShallowRenderer.createRenderer();
+    const result = renderer.render(
+      <FooterContentLoader />,
+    );
+    expect(result).toMatchSnapshot();
+    renderer.unmount();
+  });
+});

frontend/src/components/ContentLoader/contentLoader.scss

@@ -0,0 +1,3 @@
+.bodyContentLoader {
+  margin: auto;
+}

frontend/src/components/ContentLoader/contentLoader.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+const styles = require('./contentLoader.scss');
+
+export const BodyContentLoader = () => (
+  <div className={styles.bodyContentLoader}>
+    <ContentLoader
+      height={200}
+      width={400}
+      speed={1}
+      primaryColor='#f3f3f3'
+      secondaryColor='#d7d6d8'
+    >
+      <rect x='160.5' y='11' rx='4' ry='4' width='76.63' height='15.1' />
+      <rect x='60.5' y='35.05' rx='1' ry='1' width='275.4' height='151.36' />
+    </ContentLoader>
+  </div>
+);
+
+export const HeaderContentLoader = () => (
+  <ContentLoader
+    height={95}
+    width={2500}
+    speed={1}
+    primaryColor='#f3f3f3'
+    secondaryColor='#d7d6d8'
+  >
+    <rect x='0' y='0' width='2500' height='95' />
+  </ContentLoader>
+);
+
+export const FooterContentLoader = () => (
+  <ContentLoader
+    height={400}
+    width={2500}
+    speed={1}
+    primaryColor='#f3f3f3'
+    secondaryColor='#d7d6d8'
+  >
+    <rect x='0' y='0' width='2500' height='400' />
+  </ContentLoader>
+);

frontend/src/components/ContentLoader/index.tsx

@@ -0,0 +1 @@
+export { BodyContentLoader, HeaderContentLoader, FooterContentLoader } from './contentLoader';

frontend/src/components/Dropdown/__tests__/__snapshots__/dropdown.spec.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Dropdown should renders correctly 1`] = `
-<div>
+Array [
   <ul
     className="dropdown-content"
     id="id"
@@ -14,7 +14,7 @@ exports[`Dropdown should renders correctly 1`] = `
         dropdown.dropdown
       </a>
     </li>
-  </ul>
-  ,
-</div>
+  </ul>,
+  ",",
+]
 `;

frontend/src/components/Dropdown/__tests__/dropdown.spec.tsx

@@ -1,18 +1,18 @@
 import 'materialize-css';
-import React from 'react';
-import { MemoryRouter } from 'react-router';
+import React, { Fragment } from 'react';
+import { BrowserRouter } from 'react-router-dom';
 import TestRenderer from 'react-test-renderer';
 
 import { Dropdown } from '../dropdown';
 
 describe('Dropdown', () => {
   it('should renders correctly', () => {
     const renderer = TestRenderer.create(
-      <MemoryRouter>
-        <div>
+      <BrowserRouter>
+        <Fragment>
           <Dropdown id='id' dropdownLists={['dropdown']} />,
-        </div>
-      </MemoryRouter>,
+        </Fragment>
+      </BrowserRouter>,
     );
     expect(renderer).toMatchSnapshot();
     renderer.unmount();

frontend/src/components/Header/__tests__/__snapshots__/header.spec.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Header should renders correctly 1`] = `
-<div>
+Array [
   <div>
     <nav>
       <div
@@ -137,7 +137,7 @@ exports[`Header should renders correctly 1`] = `
         id="header-dropdown-mobile"
       />
     </ul>
-  </div>
-  ,
-</div>
+  </div>,
+  ",",
+]
 `;

frontend/src/components/Header/__tests__/header.spec.tsx

@@ -1,6 +1,6 @@
 import 'materialize-css';
-import React from 'react';
-import { MemoryRouter } from 'react-router';
+import React, { Fragment } from 'react';
+import { BrowserRouter } from 'react-router-dom';
 import TestRenderer from 'react-test-renderer';
 
 import { Header } from '../header';
@@ -10,11 +10,11 @@ jest.mock('components/Dropdown', () => 'Dropdown');
 describe('Header', () => {
   it('should renders correctly', () => {
     const renderer = TestRenderer.create(
-      <MemoryRouter>
-        <div>
+      <BrowserRouter>
+        <Fragment>
           <Header pathname='/parallax' />,
-        </div>
-      </MemoryRouter>,
+        </Fragment>
+      </BrowserRouter>,
     );
     expect(renderer).toMatchSnapshot();
     renderer.unmount();

frontend/src/i18n/index.tsx

@@ -1,14 +1,14 @@
 import i18n from 'i18next';
 import detector from 'i18next-browser-languagedetector';
 import backend from 'i18next-xhr-backend';
-import { reactI18nextModule } from 'react-i18next';
+import { initReactI18next } from 'react-i18next';
 
 import { isProduction } from 'utils';
 
 export default i18n
   .use(detector)
   .use(backend)
-  .use(reactI18nextModule)
+  .use(initReactI18next)
   .init({
     debug: !isProduction,
     backend: {

frontend/src/pages/HomePage/__tests__/__snapshots__/homePage.spec.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HomePage should renders correctly 1`] = `
-<div>
+Array [
   <div
     className="home-page-block"
   >
@@ -15,31 +15,31 @@ exports[`HomePage should renders correctly 1`] = `
     >
       <Carousel />
     </div>
-  </div>
+  </div>,
   <Pushpin
     color="blue"
     depth="lighten-1"
-  />
+  />,
   <Pushpin
     color="green"
     depth="lighten-1"
-  />
+  />,
   <Pushpin
     color="orange"
     depth="lighten-1"
-  />
+  />,
   <Pushpin
     color="red"
     depth="lighten-1"
-  />
+  />,
   <Pushpin
     color="purple"
     depth="lighten-1"
-  />
+  />,
   <Pushpin
     color="cyan"
     depth="lighten-1"
-  />
-  <TranslationButton />
-</div>
+  />,
+  <TranslationButton />,
+]
 `;