# Update the state when the user successfully login

**URL:** https://forum.kirupa.com/t/update-the-state-when-the-user-successfully-login/638279
**Category:** web dev
**Created:** [May 27, 2018, 3:19am UTC](https://forum.kirupa.com/t/update-the-state-when-the-user-successfully-login/638279 "2018-05-27T03:19:59Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![123411](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/123411/32/9133_2.png) [@123411](https://forum.kirupa.com/u/123411)
#### Post date: [May 27, 2018, 3:19am UTC](https://forum.kirupa.com/t/update-the-state-when-the-user-successfully-login/638279/1 "2018-05-27T03:19:59Z")

</div>

Hello; i want to update the state when the login has been success and i was thinking to add a boolean flag and I then give the menu a class hide/show depending on if the user has successfully logged in  
The code that is navigating to the sales page upon successful login is line code i have highlighted in code 1 and that is where I want to control.

Can someone here help me how i can achieve that.  
here are my two codes that am working with.

**code 1;**  
import React, { Component } from ‘react’;  
import { connect } from ‘react-redux’;  
import { Route, Router, Redirect } from “react-router”;  
import { createHashHistory } from ‘history’;  
import classNames from ‘classnames’;

// Resources  
import ‘./App.css’;  
// Views  
import { LoginView, SaleView, PurchaseView, ProductView } from ‘./components/index’;  
// Actions  
import { createSaleAction, createSale, getSaleAction } from ‘./actions/sale-actions’;  
import { createProductAction, createProduct, getProductsAction } from ‘./actions/product-actions’;  
import { createPurchaseAction, createPurchase, getPurchaseAction } from ‘./actions/purchase-actions’;  
import { createUserAction, getUserAction } from ‘./actions/user-actions’;  
import { createUserSessionAction } from ‘./actions/user-session-actions’;

const Purchase = (props) =\> {  
const actions = {  
createPurchaseAction: props.createPurchaseAction,  
getPurchaseAction: props.getPurchaseAction  
};  
const viewProps = {actions, products: props.products, session: props.session, purchases: props.purchases};

return (\<PurchaseView {…viewProps} /\>);  
};

const Sale = (props) =\> {  
const actions = {  
createSaleAction: props.createSaleAction,  
createSale: props.createSale,  
getSaleAction: props.getSaleAction  
};  
return ();  
};

const Login = (props) =\> {  
const actions = {  
createUserSessionAction: props.createUserSessionAction,  
getUserAction: props.getUserAction,  
**onSuccess: (session) =\> {**  
\*\* console.log(‘Logging in…’);\*\*  
\*\* props.getProductsAction(session);\*\*  
\*\* props.history.push("/sale");\*\*  
\*\* props.main.setState(Object.assign({}, props.main.state, {location: ‘/sale’}));\*\*  
\*\* }\*\*  
};

return ();  
};

const Product = (props) =\> {  
console.log(props.products);  
const actions = {  
createProductAction: props.createProductAction  
};  
return ();  
};  
export class Main extends Component {  
constructor(props) {  
super(props);  
this.state = {  
current: {  
view: ‘views’  
},  
location: ‘/’  
}  
}

toggleMenu() {  
const view = this.state.current.view === ‘views’ ? ‘menu’ : ‘views’;  
const current = Object.assign({}, this.state.current, {view})  
this.setState(Object.assign({}, this.state, {current}))  
}

navigateTo(history, path) {  
const location = `/${path}`;  
history.push(location);  
this.toggleMenu();  
}

logout(history) {  
history.push("/");  
this.setState(Object.assign({}, this.state, {location: ‘/’}));  
this.toggleMenu();  
}

render() {  
const history = createHashHistory();  
const menuClass = classNames({  
‘show’: this.state.current.view === ‘menu’,  
‘hide’: this.state.current.view !== ‘menu’  
});  
const viewsClass = classNames({  
‘show’: this.state.current.view === ‘views’,  
‘hide’: this.state.current.view !== ‘views’  
});  
const menuButton = classNames({  
‘show’: this.state.location !== ‘/’ || history.location !== ‘/’,  
‘hide’: this.state.location === ‘/’ || history.location === ‘/’,  
});

```
return (
  <Router history={history}>
    <div>
      <div><span className="menuButton" onClick={() => this.toggleMenu()}></span></div>
      <div id="menu" className={menuClass} >
       <img src={logo} className="app-logo4" alt="logo" />
       <img src={Icon} className="delete_icon" alt="Icon" />
        <div id="salesMenuItem" className="menuItem sale" onClick={() => this.navigateTo(history, 'sale')}>Record Sales</div>
        <div id="purchaseMenuItem" className="menuItem purchase" onClick={() => this.navigateTo(history, 'purchase')}>Record Purchase</div>
        <div id="productsMenuItem" className="menuItem productItem" onClick={() => this.navigateTo(history, 'product')}>Record Products</div>
        <div id="salesReport" className="menuItem salesReport" onClick={() => this.navigateTo(history, 'salesReport')}>Sales Report</div>
        <div id="purchaseReport" className="menuItem purchaseReport" onClick={() => this.navigateTo(history, 'purchaseReport')}>Purchase Report</div>
        <div id="logoutMenuItem" className="menuItem logout" onClick={() => this.logout(history)}>Logout
        <img src={Icon} className="delete_icon2" alt="Icon" />
        </div>
      </div>
      <div id="views" className={viewsClass}>
        <Route exact path="/" render={routerProps => <Login {...routerProps} {...this.props} main={this}/>}/>
        <Route path="/sale" render={routerProps => <Sale {...routerProps} {...this.props}/>}/>
        <Route path="/product" render={routerProps => <Product {...routerProps} {...this.props}/>}/>
        <Route path="/purchase" render={routerProps => <Purchase {...routerProps} {...this.props}/>}/>
      </div>
    </div>
  </Router>
);

```

}  
}

const mapStateToProps = (state, ownProps) =\> {  
console.log(`State: ${new Date()} ${JSON.stringify(state.saleReducer)}`);  
// console.log(`Own props: ${JSON.stringify(ownProps)}`);  
return Object.assign({}, ownProps,  
{  
sales: state.saleReducer,  
products: state.productReducer,  
session: state.userSessionReducer,  
purchases: state.purchaseReducer  
});  
};

const mapDispatchToProps = {  
createUserAction,  
getUserAction,  
createSaleAction,  
createSale,  
getPurchaseAction,  
createPurchaseAction,  
createPurchase,  
createUserSessionAction,  
getProductsAction,  
createProductAction  
};

const MainContainer = connect(  
mapStateToProps,  
mapDispatchToProps  
)(Main);

export default MainContainer

**code 2:**

import React, { Component } from ‘react’;  
import { Redirect } from “react-router”;  
import classNames from ‘classnames’;  
import ‘…/App.css’;  
export class Login extends Component {

constructor(props) {  
super(props);  
this.state = {  
message: {  
type: null,  
value: null  
},  
session: {  
name: null,  
password: null  
},  
loggingIn: false  
};  
}

update(name, e) {  
const session = Object.assign({}, this.state.session, {[name]: e.target.value});  
this.setState(Object.assign({}, this.state, {session}));  
}

displayMessage(value, type=‘INFO’) {  
const message = Object.assign({}, this.state.message, {value, type});  
this.setState(Object.assign({}, this.state, {message}));  
}

createSession() {  
if (!this.state.session.name || this.state.session.name === ‘’) {  
this.displayMessage(‘Username not supplied’, ‘ERROR’);  
return;  
}

```
if (!this.state.session.password || this.state.session.password === '') {
  this.displayMessage('Password not supplied', 'ERROR');
  return;
}

this.displayMessage(null);

this.setState(Object.assign({}, this.state, {loggingIn: true}));
this.props.actions.createUserSessionAction(this.state.session);

```

}

componentWillReceiveProps(nextProps) {  
const session = nextProps.session;  
if (session.id) {  
this.props.actions.onSuccess(session);  
} else {  
this.displayMessage(‘Invalid login or password’, ‘ERROR’);  
}  
// this.setState(Object.assign({}, this.state, {loggingIn: false}));  
}

render() {  
const props = this.props;  
var notificationClass = classNames({  
‘message’: true,  
‘message-info’: this.state.message.type === ‘INFO’,  
‘message-error’: this.state.message.type === ‘ERROR’,  
‘show’: this.state.message.value !== null,  
‘hide’: this.state.message.value === null  
});  
return (

  
 ![logo]()  

{this.state.message.value}
  

# Sign in

  

  

  

  
\<input id=“username” className=“text-input text-with-100pct login” type=“text” placeholder=“Email or Phone number” onChange={(e) =\> this.update(“name”, e)} /\>  
   

  

  

  

  
\<input id=“password” className=“text-input text-with-100pct login pass” type=“password” placeholder=“Password” onChange={(e) =\> this.update(“password”, e)} /\>  

  

  

  

  

  
Remember me  

  

  

  

  
\<input id=“button” className=“button3 login” type=“button” disabled={this.state.loggingIn} value=“Login” onClick={() =\> this.createSession()} /\>  

  
&copy  

  

  
);  
}  
}

Thanks members