Several updates

.babelrc

@@ -1,26 +1,66 @@
 // Babel config for NodeJS (server-side). Frontend Babel configuration is embed
 // inside Webpack config.
 {
+  "env": {
+    "development": {
+      "plugins": [
+        ["css-modules-transform", {
+          "extensions": [".css", ".scss"],
+          "generateScopedName": "[path][name]___[local]"
+        }],
+        ["react-css-modules", {
+          "filetypes": {
+            ".scss": {
+              "syntax": "postcss-scss"
+            }
+          },
+          "generateScopedName": "[path][name]___[local]"
+        }]
+      ]
+    },
+    "production": {
+      "plugins": [
+        ["css-modules-transform", {
+          "extensions": [".css", ".scss"],
+          "generateScopedName": "[hash:base64:6]"
+        }],
+        ["react-css-modules", {
+          "filetypes": {
+            ".scss": {
+              "syntax": "postcss-scss"
+            }
+          },
+          "generateScopedName": "[hash:base64:6]"
+        }]
+      ]
+    },
+    "test": {
+      "plugins": [
+        ["css-modules-transform", {
+          "extensions": [".css", ".scss"],
+          "generateScopedName": "[path]___[name]__[local]___[hash:base64:5]"
+        }],
+        ["react-css-modules", {
+          "filetypes": {
+            ".scss": {
+              "syntax": "postcss-scss"
+            }
+          }
+        }]
+      ]
+    }
+  },
   "presets": ["env", "react", "stage-2"],
   "plugins": [
-    ["css-modules-transform", {
-      "extensions": [".css", ".scss"],
-      "generateScopedName": "[path]___[name]__[local]___[hash:base64:5]"
-    }],
+    "dynamic-import-node",
     "inline-react-svg",
     ["module-resolver", {
       "extensions": [".js", ".jsx"],
       "root": [
         "./src/shared",
         "./src"
-      ]
-    }],
-    ["react-css-modules", {
-      "filetypes": {
-        ".scss": {
-          "syntax": "postcss-scss"
-        }
-      }
+      ],
+      "transformFunctions": ["resolveWeak"]
     }],
     ["transform-assets", {
       "extensions": ["gif", "jpeg", "jpg", "png"],

.eslintrc

@@ -1,5 +1,6 @@
 {
   "extends": "airbnb",
+  "parser": "babel-eslint",
   "settings": {
     "import/resolver": {
       "babel-module": {}

Dockerfile

@@ -11,6 +11,7 @@ RUN npm install
 ADD . /opt/app
 
 ARG BUILD_ENV=prod
+ENV BABEL_ENV=production
 ENV NODE_ENV=$BUILD_ENV
 RUN npm run build
 

README.md

@@ -63,6 +63,7 @@ We use [https://logentries.com](https://logentries.com) to track the logs. Log E
 
 ### Development Notes
 -   [Challenge Listing - Notes from winning submission](docs/challenge-listing-notes.md)
+-   [**Code Splitting**](docs/code-splitting.md)
 -   [**How to Add a New Topcoder Community?**](docs/how-to-add-a-new-topcoder-community.md)
 -   [Leaderboard - Notes from the winning submission](docs/leaderboard-notes.md)
 -   [**Why Reducer Factories and How to Use Them?**](docs/why-reducer-factories-and-how-to-use-them.md)

__tests__/server/server.js

@@ -12,6 +12,7 @@ jest.setMock(require.resolve('server/renderer'), (req, res, next) => next());
 afterAll(() => {
   delete process.env.DEV_TOOLS;
   delete process.env.FRONT_END;
+  delete process.env.NODE_ENV_REAL;
 });
 
 beforeEach(() => {

__tests__/shared/components/examples/Content.jsx → __tests__/shared/components/Content.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Renderer from 'react-test-renderer/shallow';
-import Content from 'components/examples/Content';
+import Content from 'components/Content';
 
 test('Matches shallow shapshot', () => {
   const renderer = new Renderer();

__tests__/shared/components/Dashboard/__snapshots__/SubtrackStats.jsx.snap

@@ -77,18 +77,8 @@ exports[`Matches shallow shapshot 1`] = `
         centerMode={true}
         dots={false}
         infinite={false}
-        nextArrow={
-          <NavButton
-            currentSlide={null}
-            slideCount={null}
-          />
-        }
-        prevArrow={
-          <NavButton
-            currentSlide={null}
-            slideCount={null}
-          />
-        }
+        nextArrow={<NavButton />}
+        prevArrow={<NavButton />}
         slidesToScroll={1}
         slidesToShow={1}
         speed={500}

__tests__/shared/components/Modal.jsx

@@ -27,16 +27,16 @@ const render = TU.renderIntoDocument((
 
 test('onCancel', () => {
   const obj = TU.findAllInRenderedTree(render, item =>
-    item && item.className && item.className.match('bg-overlay'))[0];
+    item && item.className && item.className.match('overlay'))[0];
   TU.Simulate.click(obj);
   expect(mockOnCancel).toHaveBeenCalled();
 });
 
 test('onWheel', () => {
   const container = TU.findAllInRenderedTree(render, item =>
-    item && item.className && item.className.match('modal-container'))[0];
+    item && item.className && item.className.match('container'))[0];
   TU.Simulate.wheel(container);
   const overlay = TU.findAllInRenderedTree(render, item =>
-    item && item.className && item.className.match('bg-overlay'))[0];
+    item && item.className && item.className.match('overlay'))[0];
   TU.Simulate.wheel(overlay);
 });

__tests__/shared/components/examples/__snapshots__/Content.jsx.snap → __tests__/shared/components/__snapshots__/Content.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Matches shallow shapshot 1`] = `
 <div
-  className="src-shared-components-examples-Content-___style__Content___3X7yY"
+  className="src-shared-components-Content-___style__Content___aJySd"
 >
   <h1>
     Topcoder Community App
@@ -205,7 +205,7 @@ exports[`Matches shallow shapshot 1`] = `
       >
         design challenge 2
       </Link>
-      ,
+      .
     </li>
     <li>
       <Link
@@ -296,6 +296,14 @@ exports[`Matches shallow shapshot 1`] = `
         TopGear (Wipro) community
       </Link>
     </li>
+    <li>
+      <Link
+        replace={false}
+        to="/community/veterans/"
+      >
+        Veterans Community
+      </Link>
+    </li>
   </ul>
   <h3>
     Misc Examples
@@ -314,6 +322,14 @@ exports[`Matches shallow shapshot 1`] = `
       </code>
       .
     </li>
+    <li>
+      <Link
+        replace={false}
+        to="/examples/code-splitting"
+      >
+        Code Splitting
+      </Link>
+    </li>
     <li>
       <Link
         replace={false}

__tests__/shared/components/__snapshots__/Modal.jsx.snap

@@ -1,15 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Snapshot match 1`] = `
-<div>
-  <div
-    className="src-shared-components-Modal-___styles__modal-container___2m4KB"
-    onWheel={[Function]}
-  />
-  <button
-    className="src-shared-components-Modal-___styles__bg-overlay___2xty_"
-    onClick={[Function]}
-    onWheel={[Function]}
-  />
-</div>
+<Modal
+  onCancel={[Function]}
+  theme={
+    Object {
+      "container": "src-shared-components-Modal-___styles__container___2HN2G",
+      "overlay": "src-shared-components-Modal-___styles__overlay___36ZAX",
+    }
+  }
+/>
 `;

__tests__/shared/components/challenge-listing/ChallengeCard/__snapshots__/index.jsx.snap

@@ -58,6 +58,7 @@ exports[`Matches shallow shapshot shapshot 1 1`] = `
       <Prize
         bonuses={Array []}
         label="Purse"
+        points={null}
         prizeUnitSymbol="$"
         prizes={
           Array [
@@ -168,6 +169,7 @@ exports[`Matches shallow shapshot shapshot 2 1`] = `
       <Prize
         bonuses={Array []}
         label="Purse"
+        points={null}
         prizeUnitSymbol="$"
         prizes={
           Array [
@@ -273,6 +275,7 @@ exports[`Matches shallow shapshot shapshot 3 1`] = `
       <Prize
         bonuses={Array []}
         label="Purse"
+        points={null}
         prizeUnitSymbol="$"
         prizes={
           Array [

__tests__/shared/components/tc-communities/__snapshots__/JoinCommunity.jsx.snap

@@ -8,8 +8,11 @@ exports[`Matches shallow shapshot 1`] = `
   >
     Join Community
   </button>
-  <Modal
+  <ThemedModal
+    composeTheme="deeply"
+    mapThemrProps={[Function]}
     onCancel={[Function]}
+    theme={Object {}}
   >
     <p
       className="src-shared-components-tc-communities-JoinCommunity-___style__confirmMsg___3Urx0"
@@ -34,7 +37,7 @@ exports[`Matches shallow shapshot 1`] = `
         Cancel
       </button>
     </div>
-  </Modal>
+  </ThemedModal>
 </div>
 `;
 
@@ -76,8 +79,11 @@ exports[`Matches shallow shapshot 4`] = `
   >
     Join Community
   </button>
-  <Modal
+  <ThemedModal
+    composeTheme="deeply"
+    mapThemrProps={[Function]}
     onCancel={[Function]}
+    theme={Object {}}
   >
     <h1
       className="src-shared-components-tc-communities-JoinCommunity-___style__modalTitle___1U_iw"
@@ -97,7 +103,7 @@ exports[`Matches shallow shapshot 4`] = `
     >
       Return to the Community
     </button>
-  </Modal>
+  </ThemedModal>
 </div>
 `;
 
@@ -109,8 +115,11 @@ exports[`Matches shallow shapshot 5`] = `
   >
     Join Community
   </button>
-  <Modal
+  <ThemedModal
+    composeTheme="deeply"
+    mapThemrProps={[Function]}
     onCancel={[Function]}
+    theme={Object {}}
   >
     <p
       className="src-shared-components-tc-communities-JoinCommunity-___style__confirmMsg___3Urx0"
@@ -135,6 +144,6 @@ exports[`Matches shallow shapshot 5`] = `
         Cancel
       </button>
     </div>
-  </Modal>
+  </ThemedModal>
 </div>
 `;