Add username in navbar

src/public/js/actions/actionCreators.js

@@ -1,5 +1,6 @@
 export const ADD_MOVIES = 'ADD_MOVIES'
 export const SELECT_MOVIE = 'SELECT_MOVIE'
+export const IS_USER_LOGGED_IN = 'IS_USER_LOGGED_IN'
 
 // Select Movie
 export function selectMovie(index) {
@@ -15,3 +16,9 @@ export function addMovies(movies) {
     movies
   }
 }
+
+export function isUserLoggedIn() {
+  return {
+    type: IS_USER_LOGGED_IN,
+  }
+}

src/public/js/app.js

@@ -19,7 +19,7 @@ class Main extends React.Component {
     return (
       <div>
         <div className="navbar navbar-inverse navbar-fixed-top">
-          <NavBar />
+          <NavBar {...this.props}/>
         </div>
         <div className="container-fluid">
           <div className="container">

src/public/js/components/navbar.jsx

@@ -1,8 +1,15 @@
 import React from 'react'
 import { Link } from 'react-router'
+import { store } from '../store'
+import { isUserLoggedIn } from '../actions/actionCreators'
 
 export default class NavBar extends React.Component {
+  componentDidMount() {
+    this.props.isUserLoggedIn()
+  }
   render() {
+    const username = this.props.userStore.username;
+    const isLoggedIn = username !== "" ? true : false;
     return (
       <div className="container-fluid">
         <div className="navbar-header">
@@ -14,10 +21,20 @@ export default class NavBar extends React.Component {
           </button>
           <a className="navbar-brand" href="#">Canape</a>
         </div>
-        <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+        <div className="collapse navbar-collapse">
           <ul className="nav navbar-nav">
             <li><Link to="/movies/popular">Movies</Link></li>
+          </ul>
+          <ul className="nav navbar-nav navbar-right">
+            {isLoggedIn &&
+              <li><Link to="/users/details">{username} / Edit</Link></li>
+            }
+            {isLoggedIn ||
               <li><Link to="/users/login">Login</Link></li>
+            }
+            {isLoggedIn &&
+              <li><Link to="/users/logout">Logout</Link></li>
+            }
           </ul>
         </div>
       </div>

src/public/js/reducers/users.js

@@ -1,5 +1,10 @@
+import { IS_USER_LOGGED_IN } from '../actions/actionCreators'
+import jwtDecode from 'jwt-decode'
+
 const defaultState = {
   userLoading: false,
+  username: "",
+  isAdmin: false,
 };
 
 // This actions are generated from the promise middleware
@@ -11,10 +16,32 @@ export default function userStore(state = defaultState, action) {
         userLoading: true,
       })
     case 'USER_LOGIN_FULFILLED':
-      return Object.assign({}, state, {
-        userLoading: false,
-      })
+      if (action.payload.data.type === "error") {
+        return logoutUser(state)
+      }
+      return updateFromToken(state, action.payload.data.token)
+    case IS_USER_LOGGED_IN:
+      let localToken = localStorage.getItem('token');
+      if (localToken === "") {
+        return state;
+      }
+      return updateFromToken(state, localToken)
     default:
       return state;
   }
 }
+
+function logoutUser(state) {
+  localStorage.removeItem('token');
+  return Object.assign({}, state, defaultState)
+}
+
+function updateFromToken(state, token) {
+  const decodedToken = jwtDecode(token);
+  localStorage.setItem('token', token);
+  return Object.assign({}, state, {
+    userLoading: false,
+    isAdmin: decodedToken.isAdmin,
+    username: decodedToken.username,
+  })
+}