set app status

browser/main/HomeContainer/Components/ArticleNavigator.js

@@ -1,14 +1,18 @@
 import React, { PropTypes } from 'react'
 import ProfileImage from '../../components/ProfileImage'
+import { findWhere } from 'lodash'
 
 export default class ArticleNavigator extends React.Component {
   render () {
-    let { user } = this.props
+    let { user, status } = this.props
     if (user == null) return (<div className='ArticleNavigator'/>)
-    console.log(user)
+    console.log(user.Folders)
+
+    let activeFolder = findWhere(user.Folders, {id: status.folderId})
+
     let folders = user.Folders.map(folder => {
       return (
-        <button key={'folder-' + folder.id}><i className='fa fa-fw fa-square'/> {folder.name}</button>
+        <button key={'folder-' + folder.id} className={activeFolder != null && activeFolder.id === folder.id ? 'active' : ''}><i className='fa fa-fw fa-square'/> {folder.name}</button>
       )
     })
 
@@ -41,7 +45,7 @@ export default class ArticleNavigator extends React.Component {
             <button className='addBtn'><i className='fa fa-fw fa-plus'/></button>
           </div>
           <div className='folderList'>
-            <button>All folders</button>
+            <button className={activeFolder == null ? 'active' : ''}>All folders</button>
             {folders}
           </div>
         </div>

browser/main/HomeContainer/actions.js

@@ -1,5 +1,6 @@
-export const PARAMS_CHANGE = 'PARAMS_CHANGE'
 export const USER_UPDATE = 'USER_UPDATE'
+export const SWITCH_USER = 'SWITCH_USER'
+export const SWITCH_FOLDER = 'SWITCH_FOLDER'
 
 export function updateUser (user) {
   return {
@@ -8,9 +9,16 @@ export function updateUser (user) {
   }
 }
 
-export function switchParams (params) {
+export function switchUser (userId) {
   return {
-    type: PARAMS_CHANGE,
-    data: params
+    type: SWITCH_USER,
+    data: userId
+  }
+}
+
+export function switchFolder (folderId) {
+  return {
+    type: SWITCH_FOLDER,
+    data: folderId
   }
 }

browser/main/HomeContainer/index.js

@@ -1,6 +1,6 @@
 import React, { PropTypes} from 'react'
 import { connect } from 'react-redux'
-import { switchParams } from './actions'
+import { switchUser } from './actions'
 import UserNavigator from './Components/UserNavigator'
 import ArticleNavigator from './Components/ArticleNavigator'
 import ArticleTopBar from './Components/ArticleTopBar'
@@ -13,26 +13,26 @@ import { findWhere } from 'lodash'
 
 class HomeContainer extends React.Component {
   componentDidMount () {
-    const { dispatch, params } = this.props
-    console.log(params)
-    dispatch(switchParams(params))
+    const { dispatch } = this.props
+
+    dispatch(switchUser(this.props.params.userId))
   }
 
   componentWillReceiveProps (nextProps) {
-    const { dispatch } = this.props
-    if (nextProps.params.userId !== this.props.params.userId) {
-      let params = nextProps.params
-      dispatch(switchParams(params))
+    const { dispatch, status } = this.props
+
+    if (nextProps.params.userId !== status.userId) {
+      dispatch(switchUser(nextProps.params.userId))
     }
   }
 
   render () {
-    const { users, user } = this.props
+    const { users, user, status } = this.props
 
     return (
       <div className='HomeContainer'>
         <UserNavigator users={users} />
-        <ArticleNavigator user={user}/>
+        <ArticleNavigator user={user} status={status}/>
         <ArticleTopBar/>
         <ArticleList/>
         <ArticleDetail/>
@@ -42,15 +42,18 @@ class HomeContainer extends React.Component {
 }
 
 function remap (state) {
+  let status = state.status
+
   let currentUser = state.currentUser
   let teams = Array.isArray(currentUser.Teams) ? currentUser.Teams : []
 
   let users = [currentUser, ...teams]
-  let user = findWhere(users, {id: parseInt(state.params.userId, 10)})
+  let user = findWhere(users, {id: parseInt(status.userId, 10)})
 
   return {
     users,
-    user
+    user,
+    status
   }
 }
 
@@ -60,6 +63,10 @@ HomeContainer.propTypes = {
   params: PropTypes.shape({
     userId: PropTypes.string
   }),
+  status: PropTypes.shape({
+    userId: PropTypes.string,
+    folderId: PropTypes.number
+  }),
   dispatch: PropTypes.func
 }
 

browser/main/HomeContainer/reducer.js

@@ -1,5 +1,5 @@
 import { combineReducers } from 'redux'
-import { PARAMS_CHANGE, USER_UPDATE } from './actions'
+import { SWITCH_USER, SWITCH_FOLDER, USER_UPDATE } from './actions'
 
 const initialCurrentUser = JSON.parse(localStorage.getItem('currentUser'))
 const initialParams = {}
@@ -16,10 +16,16 @@ function currentUser (state, action) {
   }
 }
 
-function params (state, action) {
+function status (state, action) {
   switch (action.type) {
-    case PARAMS_CHANGE:
-      return action.data
+    case SWITCH_USER:
+      state.userId = action.data
+      console.log(action)
+      state.folderId = null
+      return state
+    case SWITCH_FOLDER:
+      state.folderId = action.data
+      return state
     default:
       if (state == null) return initialParams
       return state
@@ -28,5 +34,5 @@ function params (state, action) {
 
 export default combineReducers({
   currentUser,
-  params
+  status
 })