From 1c65845ee9afc22dd89170cb740b68c6e4cf1cfe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Quo=CC=82=CC=81c=20Hu=CC=9Bng=20Le=CC=82?=
 <lequochung@me.com>
Date: Thu, 10 Aug 2017 12:50:19 +0700
Subject: [PATCH] Redirect to Create Receipt Page on startup

---
 app/App.jsx                            | 26 +++++------------------
 app/components/shared/AppMain.jsx      | 26 +++++++++++++++++++++++
 app/components/shared/AppNav.jsx       | 29 +++++++++++++-------------
 app/containers/Receipts.jsx            |  4 ++--
 app/index.js                           |  8 ++++++-
 modal/index.html                       |  2 +-
 modal/{modal.js => modal_index.js}     |  0
 preview/index.html                     |  2 +-
 preview/{index.js => preview_index.js} |  0
 9 files changed, 56 insertions(+), 41 deletions(-)
 create mode 100644 app/components/shared/AppMain.jsx
 rename modal/{modal.js => modal_index.js} (100%)
 rename preview/{index.js => preview_index.js} (100%)

diff --git a/app/App.jsx b/app/App.jsx
index 62adb763..cf19d311 100644
--- a/app/App.jsx
+++ b/app/App.jsx
@@ -1,33 +1,17 @@
 // Libraries
 import React, {Component} from 'react';
 
-// React Router
-import {browserHistory} from 'history';
-import {BrowserRouter as Router, Route} from 'react-router-dom';
-
 // Custom Components
 import AppNav from './components/shared/AppNav.jsx';
-import Form from './containers/Form.jsx';
-import Receipts from './containers/Receipts.jsx';
-import Settings from './containers/Settings.jsx';
-import Contacts from './containers/Contacts.jsx';
+import AppMain from './components/shared/AppMain.jsx';
 
 // Components
 class App extends Component {
   render = () =>
-    <Router history={browserHistory}>
-      <div className="appWrapper">
-        <div className="sideBarWrapper">
-          <AppNav />
-        </div>
-        <div className="mainContentWrapper">
-          <Route exact path="/" component={Receipts} />
-          <Route path="/form" component={Form} />
-          <Route path="/contacts" component={Contacts} />
-          <Route path="/settings" component={Settings} />
-        </div>
-      </div>
-    </Router>;
+    <div className="appWrapper">
+      <AppNav />
+      <AppMain/>
+    </div>;
 }
 
 export default App;
diff --git a/app/components/shared/AppMain.jsx b/app/components/shared/AppMain.jsx
new file mode 100644
index 00000000..0d40b487
--- /dev/null
+++ b/app/components/shared/AppMain.jsx
@@ -0,0 +1,26 @@
+// Libraries
+import React, {Component} from 'react';
+
+// React Router
+import {Redirect, Switch, Route} from 'react-router-dom';
+
+// Custom Components
+import Form from '../../containers/Form.jsx';
+import Receipts from '../../containers/Receipts.jsx';
+import Settings from '../../containers/Settings.jsx';
+import Contacts from '../../containers/Contacts.jsx';
+
+class AppMain extends Component {
+  render = () =>
+    <div className='mainContentWrapper'>
+      <Redirect to='/form'/>
+      <Switch>
+        <Route path='/form' component={Form} />
+        <Route path='/receipts' component={Receipts} />
+        <Route path='/contacts' component={Contacts} />
+        <Route path='/settings' component={Settings} />
+      </Switch>
+    </div>;
+}
+
+export default AppMain;
diff --git a/app/components/shared/AppNav.jsx b/app/components/shared/AppNav.jsx
index bcf14e72..78a8b615 100644
--- a/app/components/shared/AppNav.jsx
+++ b/app/components/shared/AppNav.jsx
@@ -3,36 +3,35 @@ import React, {Component} from 'react';
 import {NavLink} from 'react-router-dom';
 
 class AppNav extends Component {
-  render() {
-    return (
-      <ul className="sideBar">
+  render = () =>
+    <div className='sideBarWrapper'>
+      <ul className='sideBar'>
         <li>
-          <NavLink exact to="/">
-            <i id="icon-archive" className="ion-ios-box" />
-            Receipts
+          <NavLink to='/form'>
+            <i id='icon-form' className='ion-android-list' />
+            Create
           </NavLink>
         </li>
         <li>
-          <NavLink exact to="/form">
-            <i id="icon-form" className="ion-android-list" />
-            New Receipt
+          <NavLink to='/receipts'>
+            <i id='icon-archive' className='ion-ios-box' />
+            Receipts
           </NavLink>
         </li>
         <li>
-          <NavLink exact to="/contacts">
-            <i id="icon-contacts" className="ion-person" />
+          <NavLink to='/contacts'>
+            <i id='icon-contacts' className='ion-person' />
             Contacts
           </NavLink>
         </li>
         <li>
-          <NavLink exact to="/settings">
-            <i id="icon-settings" className="ion-ios-gear" />
+          <NavLink to='/settings'>
+            <i id='icon-settings' className='ion-ios-gear' />
             Settings
           </NavLink>
         </li>
       </ul>
-    );
-  }
+    </div>;
 }
 
 export default AppNav;
diff --git a/app/containers/Receipts.jsx b/app/containers/Receipts.jsx
index 7fca7276..6074cf5f 100644
--- a/app/containers/Receipts.jsx
+++ b/app/containers/Receipts.jsx
@@ -15,7 +15,7 @@ import Receipt from '../components/receipts/Receipt.jsx';
 import EmptyMessage from '../components/shared/EmptyMessage.jsx';
 
 // Component
-class Receipts extends Component {
+class List extends Component {
   state = { openPrevWinHint: false };
 
   // Will Mount
@@ -113,4 +113,4 @@ class Receipts extends Component {
 
 export default connect(state => ({
   receipts: state.ReceiptsReducer,
-}))(Receipts);
+}))(List);
diff --git a/app/index.js b/app/index.js
index e8a05256..549128bd 100644
--- a/app/index.js
+++ b/app/index.js
@@ -22,13 +22,19 @@ const AppStore = createStore(
   composeEnhancers(applyMiddleware(ReduxThunk, Logger))
 );
 
+// React Router
+import {browserHistory} from 'history';
+import {BrowserRouter as Router} from 'react-router-dom';
+
 // Main App
 import App from './App';
 
 // Render App
 ReactDOM.render(
   <Provider store={AppStore}>
-    <App />
+    <Router history={browserHistory}>
+      <App />
+    </Router>
   </Provider>,
   document.getElementById('root')
 );
diff --git a/modal/index.html b/modal/index.html
index 5377eae3..781fbfa6 100644
--- a/modal/index.html
+++ b/modal/index.html
@@ -26,7 +26,7 @@ <h4 id="modalTitle"></h4>
     </script>
 
     <!-- Renderer -->
-    <script src="./modal.js"></script>
+    <script src="./modal_index.js"></script>
 
     <script>if (window.module) module = window.module;</script>
   </body>
diff --git a/modal/modal.js b/modal/modal_index.js
similarity index 100%
rename from modal/modal.js
rename to modal/modal_index.js
diff --git a/preview/index.html b/preview/index.html
index 6c5d2c84..bfa83c34 100644
--- a/preview/index.html
+++ b/preview/index.html
@@ -30,7 +30,7 @@
     </script>
 
     <!-- Renderer -->
-    <script src="./index.js"></script>
+    <script src="./preview_index.js"></script>
 
     <script>if (window.module) module = window.module;</script>
   </body>
diff --git a/preview/index.js b/preview/preview_index.js
similarity index 100%
rename from preview/index.js
rename to preview/preview_index.js