on making usernavigator

browser/main/HomeContainer/Components/ArticleNavigator.js

@@ -1,12 +1,61 @@
 import React, { PropTypes } from 'react'
 
-class ArticleNavigator extends React.Component {
+export default class ArticleNavigator extends React.Component {
   render () {
+    let { user } = this.props
+    if (user == null) return (<div className='ArticleNavigator'/>)
+    console.log(user)
+    let folders = user.Folders.map(folder => {
+      return (
+        <button key={'folder-' + folder.id}><i className='fa fa-fw fa-square'/> {folder.name}</button>
+      )
+    })
+
+    let members = Array.isArray(user.Members) ? user.Members.map(member => {
+      return (
+        <div>{member.profileName}</div>
+      )
+    }) : null
+
     return (
       <div className='ArticleNavigator'>
+        <div className='userInfo'>
+          <div className='userProfileName'>{user.profileName}</div>
+          <div className='userName'>{user.name}</div>
+          <i className='fa fa-fw fa-chevron-down'/>
+        </div>
+
+        <div className='controlSection'>
+          <button className='newPostBtn'>New Post</button>
+        </div>
+
+        <div className='folders'>
+          <div className='foldersHeader'>
+            <div className='folderTitle'>Folders</div>
+            <button className='addFolderBtn'><i className='fa fa-fw fa-plus'/></button>
+          </div>
+          <div className='folderList'>
+            <button>All folders</button>
+            {folders}
+          </div>
+        </div>
+
+        {user.userType === 'team' ? (
+          <div className='members'>
+            <div className='header'>
+              <div className='title'></div>
+            </div>
+            <div className='memberList'>
+              {members}
+            </div>
+          </div>
+        ) : null}
+
       </div>
     )
   }
 }
 
-export default ArticleNavigator
+ArticleNavigator.propTypes = {
+  user: PropTypes.object
+}

browser/main/HomeContainer/Components/UserNavigator.js

@@ -11,7 +11,7 @@ export default class UserNavigator extends Component {
 
   // for dev
   componentDidMount () {
-    openModal(CreateNewTeam)
+    // openModal(CreateNewTeam)
   }
 
   renderUserList () {

browser/main/HomeContainer/actions.js

@@ -1,8 +1,16 @@
+export const PARAMS_CHANGE = 'PARAMS_CHANGE'
 export const USER_UPDATE = 'USER_UPDATE'
 
 export function updateUser (user) {
   return {
-    type: 'USER_UPDATE',
+    type: USER_UPDATE,
     data: user
   }
 }
+
+export function switchParams (params) {
+  return {
+    type: PARAMS_CHANGE,
+    data: params
+  }
+}

browser/main/HomeContainer/index.js

@@ -1,22 +1,38 @@
 import React, { PropTypes} from 'react'
 import { connect } from 'react-redux'
-// import actionss....
+import { switchParams } from './actions'
 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'
+import { findWhere } from 'lodash'
 
 // var AuthFilter = require('../Mixins/AuthFilter')
 // var KeyCaster = require('../Mixins/KeyCaster')
 
 class HomeContainer extends React.Component {
+  componentDidMount () {
+    const { dispatch, params } = this.props
+    console.log(params)
+    dispatch(switchParams(params))
+  }
+
+  componentWillReceiveProps (nextProps) {
+    const { dispatch } = this.props
+    if (nextProps.params.userId !== this.props.params.userId) {
+      let params = nextProps.params
+      dispatch(switchParams(params))
+    }
+  }
+
   render () {
-    const { users } = this.props
+    const { users, user } = this.props
+
     return (
       <div className='HomeContainer'>
         <UserNavigator users={users} />
-        <ArticleNavigator/>
+        <ArticleNavigator user={user}/>
         <ArticleTopBar/>
         <ArticleList/>
         <ArticleDetail/>
@@ -30,14 +46,21 @@ function remap (state) {
   let teams = Array.isArray(currentUser.Teams) ? currentUser.Teams : []
 
   let users = [currentUser, ...teams]
+  let user = findWhere(users, {id: parseInt(state.params.userId, 10)})
 
   return {
-    users
+    users,
+    user
   }
 }
 
 HomeContainer.propTypes = {
-  users: PropTypes.array
+  users: PropTypes.array,
+  user: PropTypes.object,
+  params: PropTypes.shape({
+    userId: PropTypes.string
+  }),
+  dispatch: PropTypes.func
 }
 
-export default connect(remap, {})(HomeContainer)
+export default connect(remap)(HomeContainer)

browser/main/HomeContainer/reducer.js

@@ -1,7 +1,8 @@
 import { combineReducers } from 'redux'
-import { USER_UPDATE } from './actions'
+import { PARAMS_CHANGE, USER_UPDATE } from './actions'
 
 const initialCurrentUser = JSON.parse(localStorage.getItem('currentUser'))
+const initialParams = {}
 
 function currentUser (state, action) {
   switch (action.type) {
@@ -10,10 +11,22 @@ function currentUser (state, action) {
       localStorage.setItem('currentUser', JSON.stringify(user))
       return user
     default:
-      return initialCurrentUser
+      if (state == null) return initialCurrentUser
+      return state
+  }
+}
+
+function params (state, action) {
+  switch (action.type) {
+    case PARAMS_CHANGE:
+      return action.data
+    default:
+      if (state == null) return initialParams
+      return state
   }
 }
 
 export default combineReducers({
-  currentUser
+  currentUser,
+  params
 })

browser/main/index.js

@@ -27,22 +27,22 @@ let routes = (
 )
 
 // with Dev
-// import { compose } from 'redux'
+import { compose } from 'redux'
-// // Redux DevTools store enhancers
+// Redux DevTools store enhancers
-// import { devTools, persistState } from 'redux-devtools'
+import { devTools, persistState } from 'redux-devtools'
-// // React components for Redux DevTools
+// React components for Redux DevTools
-// import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react'
+import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react'
 
-// let finalCreateStore = compose(devTools(), persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)))(createStore)
+let finalCreateStore = compose(devTools(), persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)))(createStore)
-// let store = finalCreateStore(reducer)
+let store = finalCreateStore(reducer)
-// let devEl = (
+let devEl = (
-//   <DebugPanel top right bottom>
+  <DebugPanel left right bottom>
-//     <DevTools store={store} monitor={LogMonitor} />
+    <DevTools store={store} monitor={LogMonitor} />
-//   </DebugPanel>
+  </DebugPanel>
-// )
+)
 
 // On production
-let store = createStore(reducer)
+// let store = createStore(reducer)
 
 let el = document.getElementById('content')
 
@@ -51,6 +51,7 @@ React.render((
     <Provider store={store}>
       {() => <Router>{routes}</Router>}
     </Provider>
+    {devEl}
   </div>
 ), el, function () {
   let loadingCover = document.getElementById('loadingCover')

package.json

@@ -35,7 +35,6 @@
   },
   "homepage": "https://github.com/Rokt33r/codexen-app#readme",
   "dependencies": {
-    "babel-core": "^5.8.25",
     "devicon": "^2.0.0",
     "font-awesome": "^4.3.0",
     "fs-jetpack": "^0.7.0",
@@ -52,8 +51,7 @@
     "reflux": "^0.2.8",
     "socket.io-client": "^1.3.6",
     "superagent": "^1.2.0",
-    "superagent-promise": "^1.0.3",
+    "superagent-promise": "^1.0.3"
-    "titlebar": "^1.3.0"
   },
   "devDependencies": {
     "babel-loader": "^5.3.2",

webpack.config.js

@@ -25,8 +25,8 @@ module.exports = {
     ]
   },
   plugins: [
-    new webpack.HotModuleReplacementPlugin(),
+    new webpack.HotModuleReplacementPlugin()
-    new webpack.NoErrorsPlugin()
+    // new webpack.NoErrorsPlugin()
   ],
   externals: [
     'socket.io-client',