From 900df351743885cead1e4b153370fd5001f30911 Mon Sep 17 00:00:00 2001
From: Ivan Akulov <gxoptg@gmail.com>
Date: Thu, 18 Jan 2018 19:59:54 +0300
Subject: [PATCH] Split the app by routes

---
 .babelrc                     |  3 ++-
 package.json                 |  1 +
 src/components/User/index.js | 15 +++++++++------
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/.babelrc b/.babelrc
index b56c72f..767e352 100644
--- a/.babelrc
+++ b/.babelrc
@@ -5,5 +5,6 @@
     },
     "modules": false,
     "useBuiltIns": true
-  }]]
+  }]],
+  "plugins": ["syntax-dynamic-import"]
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 6ce85dc..624d242 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
   "devDependencies": {
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.4",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-preset-env": "^1.6.1",
     "chalk": "^2.3.0",
     "cross-env": "^5.1.1",
diff --git a/src/components/User/index.js b/src/components/User/index.js
index 51c9bff..6454754 100644
--- a/src/components/User/index.js
+++ b/src/components/User/index.js
@@ -25,9 +25,6 @@ import createHashRouter from 'hash-router';
 import createPlainComponent from '../../utils/createPlainComponent';
 import renderUserHeader from '../UserHeader';
 import renderUsernameInput from '../UsernameInput';
-import renderUserProfile from '../UserProfile';
-import renderUserFollowers from '../UserFollowers';
-import renderUserFollowing from '../UserFollowing';
 import './style.css';
 
 const Route = {
@@ -91,7 +88,9 @@ const render = target => {
     routerTarget.innerHTML = '';
     renderUsername(routerTarget, { username });
     renderNavigation(routerTarget, { username, currentRoute: Route.USERNAME });
-    renderUserProfile(routerTarget, { username });
+    import('../UserProfile').then(UserProfile => {
+      UserProfile.default(routerTarget, { username });
+    });
   });
 
   router.addRoute('#/:username/followers', (hash, options) => {
@@ -100,7 +99,9 @@ const render = target => {
     routerTarget.innerHTML = '';
     renderUsername(routerTarget, { username });
     renderNavigation(routerTarget, { username, currentRoute: Route.FOLLOWERS });
-    renderUserFollowers(routerTarget, { username });
+    import('../UserFollowers').then(UserFollowers => {
+      UserFollowers.default(routerTarget, { username });
+    });
   });
 
   router.addRoute('#/:username/following', (hash, options) => {
@@ -109,7 +110,9 @@ const render = target => {
     routerTarget.innerHTML = '';
     renderUsername(routerTarget, { username });
     renderNavigation(routerTarget, { username, currentRoute: Route.FOLLOWING });
-    renderUserFollowing(routerTarget, { username });
+    import('../UserFollowing').then(UserFollowing => {
+      UserFollowing.default(routerTarget, { username });
+    });
   });
 
   window.addEventListener('hashchange', router);