use webpack & add some styles

browser/main/Components/ExternalLink.js

@@ -0,0 +1,19 @@
+import React, { PropTypes } from 'react'
+import shell from 'shell'
+
+export default class ExternalLink extends React.Component {
+  handleClick (e) {
+    shell.openExternal(this.props.href)
+    e.preventDefault()
+  }
+
+  render () {
+    return (
+      <a onClick={e => this.handleClick(e)} {...this.props}/>
+    )
+  }
+}
+
+ExternalLink.propTypes = {
+  href: PropTypes.string
+}

browser/main/Components/ProfileImage.js

@@ -0,0 +1,24 @@
+import React, { PropTypes} from 'react'
+import md5 from 'md5'
+
+export default class ProfileImage extends React.Component {
+  render () {
+    let className = this.props.className == null ? 'ProfileImage' : 'ProfileImage ' + this.props.className
+    let email = this.props.email != null ? this.props.email : ''
+    let src = 'http://www.gravatar.com/avatar/' + md5(email.trim().toLowerCase()) + '?s=' + this.props.size
+
+    return (
+      <img
+        className={className}
+        width={this.props.size}
+        height={this.props.size}
+        src={src}/>
+    )
+  }
+}
+
+ProfileImage.propTypes = {
+  email: PropTypes.string,
+  size: PropTypes.string,
+  className: PropTypes.string
+}

browser/main/Components/ProfileImage.jsx

@@ -1,15 +0,0 @@
-var React = require('react')
-var md5 = require('md5')
-
-module.exports = React.createClass({
-  propTypes: {
-    email: React.PropTypes.string,
-    size: React.PropTypes.string,
-    className: React.PropTypes.string
-  },
-  render: function () {
-    return (
-      <img className={this.props.className} width={this.props.size} height={this.props.size} src={'http://www.gravatar.com/avatar/' + md5(this.props.email.trim().toLowerCase()) + '?s=' + this.props.size}/>
-    )
-  }
-})

browser/main/HomeContainer/Components/ArticleDetail.js

@@ -3,7 +3,7 @@ import React, { PropTypes } from 'react'
 export default class ArticleDetail extends React.Component {
   render () {
     return (
-      <div></div>
+      <div className='ArticleDetail'></div>
     )
   }
 }

browser/main/HomeContainer/Components/UserNavigator.js

@@ -1,21 +1,24 @@
 import React, { Component, PropTypes } from 'react'
 import { Link } from 'react-router'
+import ProfileImage from '../../components/ProfileImage'
 
 export default class UserNavigator extends Component {
 
   renderUserList () {
-    var users = this.props.users.map(user => (
+    var users = this.props.users.map((user, index) => (
       <li key={'user-' + user.id}>
         <Link to={'/users/' + user.id}>
+          <ProfileImage email={user.email} size='44'/>
           <div className='userTooltip'>{user.name}</div>
+          <div className='keyLabel'>{'⌘' + (index + 1)}</div>
         </Link>
       </li>
     ))
 
     return (
-      <div className='userList'>
+      <ul className='userList'>
         {users}
-      </div>
+      </ul>
     )
   }
 

browser/main/HomeContainer/actions.js

@@ -1,10 +1,8 @@
-function updateUser (user) {
+export const USER_UPDATE = 'USER_UPDATE'
+
+export function updateUser (user) {
   return {
     type: 'USER_UPDATE',
     data: user
   }
 }
-
-module.exports = {
-  updateUser: updateUser
-}

browser/main/HomeContainer/components/ArticleTopBar.js

@@ -0,0 +1,27 @@
+import React, { PropTypes } from 'react'
+import ExternalLink from '../../components/ExternalLink'
+
+const ArticleTopBar = React.createClass({
+  render () {
+    return (
+      <div className='ArticleTopBar'>
+        <div className='left'>
+          <div className='search'>
+            <i className='fa fa-search fa-fw' />
+            <input placeholder='Search' type='text'/>
+          </div>
+          <button className='refreshBtn'><i className='fa fa-fw fa-refresh'/></button>
+        </div>
+        <div className='right'>
+          <button>?</button>
+          <button>i</button>
+          <ExternalLink className='logo' href='http://b00st.io'>
+            <img src='../../resources/favicon-230x230.png' width='44' height='44'/>
+          </ExternalLink>
+        </div>
+      </div>
+    )
+  }
+})
+
+export default ArticleTopBar

browser/main/HomeContainer/index.js

@@ -1,8 +1,9 @@
-import React from 'react'
-// import { connect } from 'react-redux'
+import React, { PropTypes} from 'react'
+import { connect } from 'react-redux'
 // import actionss....
 import UserNavigator from './Components/UserNavigator'
 import ArticleNavigator from './Components/ArticleNavigator'
+import ArticleTopBar from './Components/ArticleTopBar'
 import ArticleList from './Components/ArticleList'
 import ArticleDetail from './Components/ArticleDetail'
 
@@ -10,30 +11,13 @@ import ArticleDetail from './Components/ArticleDetail'
 // var KeyCaster = require('../Mixins/KeyCaster')
 
 class HomeContainer extends React.Component {
-  componentDidMount () {
-    // if (!this.isActive('user')) {
-    //   console.log('redirect to user home')
-    //   var user = JSON.parse(localStorage.getItem('currentUser'))
-    //   this.transitionTo('userHome', {userId: user.id})
-    // }
-  }
   render () {
-    let users = [
-      {
-        id: 1,
-        name: 'me',
-        email: 'fll@eme.com'
-      },
-      {
-        id: 2,
-        name: 'me',
-        email: 'fll@eme.com'
-      }
-    ]
+    const { users } = this.props
     return (
       <div className='HomeContainer'>
         <UserNavigator users={users} />
         <ArticleNavigator/>
+        <ArticleTopBar/>
         <ArticleList/>
         <ArticleDetail/>
       </div>
@@ -41,10 +25,19 @@ class HomeContainer extends React.Component {
   }
 }
 
-// function remap (state) {
-//   console.log('mapped')
-//   console.log(state)
-//   return {}
-// }
+function remap (state) {
+  let currentUser = state.currentUser
+  let teams = Array.isArray(currentUser.Teams) ? currentUser.Teams : []
 
-export default HomeContainer
+  let users = [currentUser, ...teams]
+
+  return {
+    users
+  }
+}
+
+HomeContainer.propTypes = {
+  users: PropTypes.array
+}
+
+export default connect(remap, {})(HomeContainer)

browser/main/HomeContainer/reducer.js

@@ -1,10 +1,14 @@
-import {combineReducers} from 'redux'
+import { combineReducers } from 'redux'
+import { USER_UPDATE } from './actions'
 
 const initialCurrentUser = JSON.parse(localStorage.getItem('currentUser'))
 
 function currentUser (state, action) {
   switch (action.type) {
-
+    case USER_UPDATE:
+      let user = action.data
+      localStorage.setItem('currentUser', JSON.stringify(user))
+      return user
     default:
       return initialCurrentUser
   }

browser/main/index.html

@@ -6,7 +6,7 @@
 
   <link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css" media="screen" charset="utf-8">
   <link rel="stylesheet" href="../../node_modules/devicon/devicon.min.css">
-  <link rel="stylesheet" href="../styles/main/index.css" media="screen" charset="utf-8">
+  <!-- <link rel="stylesheet" href="../styles/main/index.css" media="screen" charset="utf-8"> -->
   <link rel="shortcut icon" href="favicon.ico">
 
   <style>
@@ -46,7 +46,7 @@
 </head>
 <body>
   <div id="loadingCover">
-    <img src="resources/favicon-230x230.png">
+    <img src="../../resources/favicon-230x230.png">
     <div class='message'>Loading...</div>
   </div>
 
@@ -57,8 +57,9 @@
     var version = require('remote').require('app').getVersion()
     global.version = version
     document.title = 'Boost' + ((version == null || version.length === 0) ? ' DEV' : '')
-    require("babel-core/register")
-    require('./index')
+    // require("babel-core/register")
+    // require('./index')
   </script>
+  <script src="http://localhost:8080/assets/main.js"></script>
 </body>
 </html>

browser/main/index.js

@@ -1,9 +1,15 @@
 import React from 'react'
+import { createStore } from 'redux'
+import { Provider } from 'react-redux'
+import { updateUser } from './HomeContainer/actions'
+import reducer from './HomeContainer/reducer'
+import Hq from './Services/Hq'
 import { Router, Route, IndexRoute } from 'react-router'
 import MainContainer from './Containers/MainContainer'
 import LoginContainer from './Containers/LoginContainer'
 import SignupContainer from './Containers/SignupContainer'
 import HomeContainer from './HomeContainer'
+require('../styles/main/index.styl')
 
 function onlyUser (state, replaceState) {
   var currentUser = JSON.parse(localStorage.getItem('currentUser'))
@@ -15,15 +21,48 @@ let routes = (
 
     <Route name='login' path='login' component={LoginContainer}/>
     <Route name='signup' path='signup' component={SignupContainer}/>
-    <IndexRoute name='home' component={HomeContainer} onEnter={onlyUser}>
-      <IndexRoute name='homeDefault'/>
-      <Route name='user' path=':userId'/>
-    </IndexRoute>
+    <IndexRoute name='home' component={HomeContainer} onEnter={onlyUser}/>
+    <Route name='user' path='/users/:userId' component={HomeContainer} onEnter={onlyUser}/>
   </Route>
 )
 
+// with Dev
+import { compose } from 'redux'
+// Redux DevTools store enhancers
+import { devTools, persistState } from 'redux-devtools'
+// React components for Redux DevTools
+import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react'
+
+// let finalCreateStore = compose(devTools(), persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)))(createStore)
+// let store = finalCreateStore(reducer)
+// let devEl = (
+//   <DebugPanel top right bottom>
+//     <DevTools store={store} monitor={LogMonitor} />
+//   </DebugPanel>
+// )
+
+// On production
+let store = createStore(reducer)
+
 let el = document.getElementById('content')
-React.render(<Router>{routes}</Router>, el, function () {
+
+React.render((
+  <div>
+    <Provider store={store}>
+      {() => <Router>{routes}</Router>}
+    </Provider>
+  </div>
+), el, function () {
   let loadingCover = document.getElementById('loadingCover')
   loadingCover.parentNode.removeChild(loadingCover)
+
+  // Refresh user information
+  Hq.getUser()
+    .then(function (res) {
+      store.dispatch(updateUser(res.body))
+    })
+    .catch(function (err) {
+      console.error(err.message)
+      console.log('Fetch failed')
+    })
 })