update welcome user name

Author: mosufy

public/js/bundle-fe171d326137a0373d66.js public/js/bundle-6cfad603b189059b2723.js

@@ -66,4 +66,17 @@ export const updateLoader = (progress) => {
     type: 'UPDATE_LOADER',
     progress
   }
+};
+
+export const saveUserData = (payload) => {
+  return {
+    type: 'SAVE_USER_DATA',
+    payload
+  }
+};
+
+export const removeUserData = () => {
+  return {
+    type: 'REMOVE_USER_DATA'
+  }
 };

resources/app/actions/index.js

@@ -6,7 +6,7 @@ export default class App extends React.Component {
   render() {
     return (
       <div className="container">
-        <Header pageTemplate={this.props.pageTemplate} logoutLink={this.props.logoutLink}/>
+        <Header pageTemplate={this.props.pageTemplate} logoutLink={this.props.logoutLink} user={this.props.user}/>
         {this.props.children}
         <Footer/>
       </div>

resources/app/components/App.js

@@ -7,7 +7,7 @@ export default class Header extends React.Component {
     return (
       <div className="header clearfix">
         <NavBar pageTemplate={this.props.pageTemplate} logoutLink={this.props.logoutLink}/>
-        <SiteLogo pageTemplate={this.props.pageTemplate}/>
+        <SiteLogo pageTemplate={this.props.pageTemplate} user={this.props.user}/>
       </div>
     );
   }

resources/app/components/Header.js

@@ -7,7 +7,11 @@ export default class SiteLogo extends React.Component {
     if (this.props.pageTemplate == 'public') {
       logoTitle = 'My TODOs';
     } else {
-      logoTitle = 'Welcome, User';
+      if (this.props.user.name == undefined) {
+        logoTitle = 'Welcome, User';
+      } else {
+        logoTitle = 'Welcome, ' + this.props.user.name;
+      }
     }
 
     return (

resources/app/components/SiteLogo.js

@@ -22,20 +22,27 @@ class AppContainer extends React.Component {
     }
 
     return (
-      <App pageTemplate={pageTemplate} {...this.props}/>
+      <App pageTemplate={pageTemplate} user={this.props.user} {...this.props}/>
     )
   }
 }
 
+const mapStateToProps = (state) => {
+  return {
+    user: state.user
+  }
+};
+
 const mapDispatchToProps = (dispatch) => {
   return {
     logoutLink: (e) => {
       e.preventDefault();
       dispatch(actionCreators.resetTodo());
+      dispatch(actionCreators.removeUserData());
       dispatch(actionCreators.logout());
       browserHistory.push('/');
     }
   };
 };
 
-export default connect(null, mapDispatchToProps)(AppContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(AppContainer);

resources/app/containers/AppContainer.js

@@ -10,7 +10,7 @@ import React from 'react';
 import {connect} from 'react-redux';
 import {browserHistory} from 'react-router';
 import * as actionCreators from './../actions';
-import {refreshToken} from './../helpers/sdk';
+import {refreshToken, getUserData} from './../helpers/sdk';
 
 /**
  * class AuthRequiredContainer
@@ -30,6 +30,12 @@ class AuthRequiredContainer extends React.Component {
         this.props.refreshToken(this.props.clientAccessToken, this.props.refreshTokenStr);
       }
     }
+
+    // Check if user data exists
+    if (this.props.user.id == undefined) {
+      // Fetch user data
+      this.props.getUserData(this.props.accessToken);
+    }
   }
 
   render() {
@@ -42,7 +48,9 @@ const mapStateToProps = (state) => {
     isAuthenticated: state.auth.isAuthenticated,
     tokenExpiresAt: state.auth.tokenExpiresAt,
     clientAccessToken: state.auth.clientAccessToken,
-    refreshTokenStr: state.auth.refreshToken
+    accessToken: state.auth.accessToken,
+    refreshTokenStr: state.auth.refreshToken,
+    user: state.user
   }
 };
 
@@ -55,6 +63,14 @@ const mapDispatchToProps = (dispatch) => {
         console.log('Failed refreshing access token. Please try again');
         console.log(error);
       });
+    },
+    getUserData: (accessToken) => {
+      getUserData(accessToken).then(function (response) {
+        dispatch(actionCreators.saveUserData(response));
+      }).catch(function (error) {
+        console.log('Failed getting user data');
+        console.log(error);
+      });
     }
   };
 };

resources/app/containers/AuthRequiredContainer.js

@@ -67,6 +67,16 @@ export function signup(clientAccessToken, email, password, name) {
   }, config(clientAccessToken));
 }
 
+/**
+ * Get user data
+ *
+ * @param accessToken
+ * @returns AxiosPromise
+ */
+export function getUserData(accessToken) {
+  return axios.get(Constant.apiUrl + '/account', config(accessToken));
+}
+
 /**
  * Refresh existing user access token
  *

resources/app/helpers/sdk.js

@@ -25,8 +25,9 @@ let store = createStore(TodoApp, persistedState);
 store.subscribe(throttle(() => {
   saveState({
     // Add more state objects as required for persistence
-    todos: store.getState().todos,
-    auth: store.getState().auth
+    auth: store.getState().auth,
+    user: store.getState().user,
+    todos: store.getState().todos
   })
 }, 1000));
 

resources/app/index.js

@@ -10,16 +10,18 @@
  */
 
 import {combineReducers} from 'redux';
+import auth from './auth';
+import user from './user';
 import todos from './todos';
 import visibilityFilter from './visibilityFilter';
-import auth from './auth';
 import loading from './loading';
 
 const TodoApp = combineReducers({
+  auth,
+  user,
   todos,
   visibilityFilter,
-  auth,
-  loading
+  loading,
 });
 
 export default TodoApp;

resources/app/reducers/index.js

@@ -0,0 +1,23 @@
+/**
+ * user
+ *
+ * @date 28/10/2016
+ * @author Mosufy <[email protected]>
+ * @copyright Copyright (c) Mosufy
+ */
+
+const user = (state = {}, action) => {
+  switch (action.type) {
+    case 'SAVE_USER_DATA':
+      return {
+        id: action.payload.data.data[0].attributes.uid,
+        name: action.payload.data.data[0].attributes.name
+      };
+    case 'REMOVE_USER_DATA':
+      return {};
+    default:
+      return state
+  }
+};
+
+export default user;

resources/app/reducers/user.js

@@ -1 +1 @@
-{"bundle":{"js":"bundle-fe171d326137a0373d66.js"}}
+{"bundle":{"js":"bundle-6cfad603b189059b2723.js"}}