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 (
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()} />
©
);
}
}
Thanks members