use webpack & add some styles

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
   }