Big refactoring to adapt it to the new packages

.gitignore

@@ -31,3 +31,5 @@ public
 
 # Ignore my .mertrc file
 .mertrc
+# Sublime projects
+*.sublime*

package.json

@@ -1,64 +1,62 @@
 {
-  "name": "react-webpack-babel",
-  "version": "0.0.3",
-  "description": "React Webpack Babel Starter Kit",
+  "name": "react-mobx-router5-example",
+  "version": "0.0.1",
+  "description": "Example of React Integration with MobX and Router5",
   "main": "''",
-  "scripts": {
-    "build": "webpack --config webpack.production.config.js --progress --profile --colors",
-    "start": "webpack-dev-server --progress --profile",
-    "lint": "eslint --ext js --ext jsx src || exit 0",
-    "dev": "webpack-dashboard -- webpack-dev-server --progress --profile --colors"
-  },
   "repository": {
     "type": "git",
-    "url": "https://github.com/LeonardoGentile/react-webpack-babel-simple-starter"
+    "url": "https://github.com/LeonardoGentile/react-mobx-router5-example"
   },
   "author": "Leonardo Gentile",
   "license": "MIT",
-  "homepage": "https://github.com/LeonardoGentile/react-webpack-babel-simple-starter#readme",
+  "homepage": "https://github.com/LeonardoGentile/react-mobx-router5-example#readme",
   "dependencies": {
-    "axios": "^0.15.3",
-    "classnames": "^2.2.5",
-    "js-cookie": "^2.1.3",
+    "axios": "0.16.2",
     "mobx": "3.1.0",
     "mobx-react": "^4.1.0",
+    "mobx-router5": "^2.0.1",
     "react": "15.4.1",
     "react-dom": "15.4.1",
-    "react-router5": "^4.0.1",
+    "react-mobx-router5": "^2.0.3",
     "router5": "^4.5.1"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.2",
-    "babel-core": "6.17.0",
+    "babel-core": "6.23.1",
     "babel-eslint": "^6.1.2",
-    "babel-loader": "6.2.7",
+    "babel-loader": "6.3.2",
     "babel-plugin-react-html-attrs": "^2.0.0",
     "babel-plugin-transform-class-properties": "^6.16.0",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-runtime": "^6.15.0",
-    "babel-polyfill": "^6.16.0",
-    "babel-preset-es2015": "6.16.0",
-    "babel-preset-react": "6.16.0",
+    "babel-preset-es2015": "6.22.0",
+    "babel-preset-react": "6.23.0",
     "babel-preset-stage-3": "^6.22.0",
-    "babel-runtime": "^6.11.6",
+    "babel-runtime": "^6.22.0",
     "css-loader": "0.26.0",
     "eslint": "^3.16.0",
     "eslint-plugin-react": "^6.10.0",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "0.9.0",
-    "html-webpack-plugin": "^2.22.0",
-    "lost": "^8.0.0",
+    "extract-text-webpack-plugin": "^2.0.1",
+    "file-loader": "0.10.0",
+    "html-webpack-plugin": "^2.26.0",
     "mobx-react-devtools": "^4.2.10",
-    "node-sass": "^3.10.1",
+    "node-sass": "^4.0.0",
     "postcss-loader": "^1.3.0",
     "react-hot-loader": "^3.0.0-beta.6",
-    "sass-loader": "^4.0.2",
+    "sass-loader": "^6.0.2",
     "sass-resources-loader": "^1.2.0",
+    "source-map-loader": "^0.2.1",
     "style-loader": "0.13.1",
     "url-loader": "0.5.7",
-    "webpack": "1.13.2",
-    "webpack-cleanup-plugin": "^0.4.1",
+    "webpack": "2.3.2",
+    "webpack-cleanup-plugin": "^0.4.2",
     "webpack-dashboard": "^0.3.0",
-    "webpack-dev-server": "1.16.3"
+    "webpack-dev-server": "2.4.2"
+  },
+  "scripts": {
+    "build": "webpack --config webpack.production.config.js --progress --profile --colors",
+    "start": "webpack-dev-server --progress --profile",
+    "lint": "eslint --ext js --ext jsx src || exit 0",
+    "dev": "webpack-dashboard -- webpack-dev-server --progress --profile --colors"
   }
 }

src/actions/auth.js

@@ -1,18 +1,16 @@
 import axios from 'axios';
-import Cookies from 'js-cookie';
 import querystring  from 'querystring';
 import userStore from  '../stores/UserStore'
 
 // TODO:
 function _handleErrors(response) {
   if (response.data && response.data.success !== true) {
-      throw Error(response);
+    throw Error(response);
   }
   return response;
 }
 
-
-export function login(formData, callback=undefined){
+export function login(formData, callback = undefined) {
   axios({
     method: 'post',
     url: '/login',
@@ -21,33 +19,37 @@ export function login(formData, callback=undefined){
     },
     data: querystring.stringify(formData)
   })
-  .then(_handleErrors)
-  .then((response) => {
-    console.log(response);
-    userStore.setUser(response.data.data);
-  })
-  .catch((error) => {
-    // optional callback
-    typeof callback == "function" && callback(error);
-    // TODO: _handleErrors(error, callback)
-    console.log(error);
-  });
+    .then(_handleErrors)
+    .then((response) => {
+      console.log(response);
+      userStore.setUser(response.data.data);
+    })
+    .catch((error) => {
+      // optional callback
+      typeof callback === "function" && callback(error);
+      // TODO: _handleErrors(error, callback)
+      console.log(error);
+    });
 }
 
-
-
-export function logout(){
+export function logout() {
   axios.get("/logout")
-  .then((res) => {
+    .then((res) => {
+      // or setUser(res.data.data) basically the same
+      userStore.resetUser();
+    })
+}
 
-    // TODO:
-    //  - Remove cookies (also disclaimer)
-    //  - Remove stored tabs
-    //  - remove last finder link
-    //  - remove watchlist
-    //  - go to home page
+export function fakeLogin() {
+  const user = {
+    "level": "M",
+    "status": "A",
+    "name": "Leo",
+    "job": "Buttons Pusher"
+  };
+  userStore.setUser(user);
+}
 
-    // or setUser(res.data.data) basically the same
-    userStore.resetUser();
-  })
+export function fakeLogout() {
+  userStore.resetUser();
 }

src/app.jsx

@@ -1,28 +1,23 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Provider } from 'mobx-react';
-import { RouterProvider } from 'react-router5';
-import Layout from './components/Layout'
+import {Provider} from 'mobx-react';
 
 // Local imports
-import * as config from './config';
+import config from './config';
 import * as stores from './stores'; // mobx stores
 import createRouter from './create-router5' // Router5
+import Layout from './components/Layout'
 
-//  =================
-//  = Global Styles =
-//  =================
+// Global Styles
 import './styles/base/_reset.sass';
 import './styles/base/_commons.sass';
 
 const router = createRouter(true);
 
-// RouterProvider will add your router instance in context.
+// Provider will add your router instance in context.
 const wrappedApp = (
   <Provider { ...stores } >
-      <RouterProvider router= { router }>
-          <Layout/>
-      </RouterProvider>
+      <Layout/>
   </Provider>
 );
 

src/components/Home/Home.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import {inject} from 'mobx-react';
+import {BaseLink} from "react-mobx-router5";
+
+@inject('routerStore')
+class Home extends React.Component {
+  constructor(props){
+    super(props);
+    this.onClick = this.onClick.bind(this);
+  }
+
+  onClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    console.log("Someone pushed me");
+  }
+
+  render() {
+    return (
+        <div>
+          <h2>Home Page</h2>
+          <br/>
+          <p>Examples of the different uses of BaseLink. <br/>
+            Remember that BaseLink does not re-render on route changes and so it's not aware when it is `active`.</p>
+          <br/>
+
+          <BaseLink
+            routeName={'section.subsection.index'}
+            routeParams={{'id': 1}}
+            routerStore={this.props.routerStore}>
+            BaseLink using the routerStore for computing the link --> /index/1
+          </BaseLink> <br/> <br/>
+
+          <BaseLink
+            routeName={'section.subsection.index'}
+            routeParams={{'id': 2}}
+            router={this.props.routerStore.router}>
+            BaseLink using the router5 instance for computing the link --> /index/2
+          </BaseLink> <br/> <br/>
+
+          <BaseLink
+            onClick={this.onClick}>
+            BaseLink using the `onClick` callback prop, it doesn't need router, routerStore and routeName props --> prints to console
+          </BaseLink> <br/>
+
+        </div>
+    );
+  }
+}
+
+export default Home;

src/components/Home/index.js

@@ -0,0 +1 @@
+export { default as Home}from "./Home";