I trying to learn react but I'm stuck on getting the header component to re-render when I set the authenticated prop. I been reading about it a lot but there are so many different coding styles I don't seem to be able to implement any of them effectively. I'm trying to get it to re-render when this.props.authenticated changes. This is my latest attempt, I couldn't get it to work on smaller sections of the code so I thought I'd do the whole block.
import React, { Component, PropTypes } from 'react';
import logo from '../logo.svg';
import { Link } from 'react-router-dom';
import {connect} from 'react-redux';
import * as Actions from '../actions/auth';
class Header extends Component {
constructor() {
super();
this.state = { authenticated: false };
}
handleSignout() {
this.props.signOutUser();
}
logOut(event) {
event.preventDefault();
this.props.actions.logOutUser();
}
render() {
if (this.props.authenticated){
return (
<div>
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Student Assist App</h2>
</div>
</div>
<div className="navMenu">
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/PhoneNumbers">PhoneNumbers</Link></li>
<li><Link to="/Addresses" > Addresses</Link></li>
<li><Link to="/Credits" > Credits</Link></li>
</ul>
</div>
<div className="authMenu">
<ul className="list-inline">
{/*<li><img src={profile.picture} height="40px" /></li>
<li><span>Welcome, {profile.nickname}</span></li>*/}
<Link to="/Home" > logout</Link>
</ul>
</div>
</div>
);
}else{
return (
<div>
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Student Assist App</h2>
</div>
</div>
<div className="navMenu">
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/PhoneNumbers">PhoneNumbers</Link></li>
<li><Link to="/Addresses" > Addresses</Link></li>
<li><Link to="/Credits" > Credits</Link></li>
</ul>
</div>
<div className="authMenu">
<ul className="list-inline">
<li><Link to="/SignUp" > Sign Up</Link></li>
<li><Link to="/Login" > Login</Link></li>
</ul>
</div>
</div>
);
}
}
}
Header.propTypes = {
actions: PropTypes.object.isRequired
}
function mapStateToProps(state, ownProps) {
return {
authenticated: state.authenticated
}
}
export default connect(mapStateToProps, Actions)(Header);
The header is in the app container.
import React, { Component, PropTypes } from 'react';
import { ConnectedRouter } from 'react-router-redux';
import { connect } from 'react-redux'
import { history } from '../store/configureStore';
import { Route, Redirect } from 'react-router-dom';
import Header from '../components/header'
import Home from '../components/home'
import Addresses from '../containers/addresses'
import PhoneNumbers from '../containers/phoneNumbers'
import NotAuthroised from '../components/notAuthorised'
import Credits from '../components/credits'
import LogInPage from '../components/logInPage'
import LogIn from '../components/logInPage'
import SignUp from '../containers/signup'
import '../css/App.css';
const PrivateRoute = ({component: Component, authenticated, ...props}) => {
return (
<Route
{...props}
render={(props) => authenticated === true
? <Component {...props} />
: <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
/>
);
};
class App extends Component {
constructor(props) {
super(props)
this.handleLoginClick = this.handleLoginClick.bind(this)
this.handleLogoutClick = this.handleLogoutClick.bind(this)
}
handleLoginClick() {
this.props.login()
}
handleLogoutClick() {
this.props.logout()
}
render() {
const { authenticated, profile } = this.props
return (
<ConnectedRouter history={history}>
<div>
<Header
authenticated={authenticated}
profile={profile}
onLoginClick={this.handleLoginClick}
onLogoutClick={this.handleLogoutClick}
/>
<Route exact={true} path="/" component={Home}/>
<Route path="/Home" component={Home}/>
<Route path="/PhoneNumbers" component={PhoneNumbers}/>
<PrivateRoute authenticated={this.props.authenticated } path="/Addresses" component={Addresses}/>
<Route path="/NotAuthroised" component={NotAuthroised}/>
<Route path="/Credits" component={Credits}/>
<Route path="/Login" component={LogIn}/>
<Route path="/SignUp" component={SignUp}/>
</div>
</ConnectedRouter>
);
}
}
const mapStateToProps = (state) => {
return { authenticated: state.auth.authenticated };
};
export default connect(mapStateToProps)(App);
The app container is called in index.js
import './index.css';
import { Provider } from 'react-redux';
import { configureStore } from './store/configureStore'
import App from './containers/App';
import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
const store = configureStore()
//store.dispatch(loadAddresses());
ReactDOM.render(<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'));
registerServiceWorker();
The login component that is changing the value of authenticated is
import React, {PropTypes} from 'react';
import TextInput from './common/textInput';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as sessionActions from '../actions/auth';
class LogInPage extends React.Component {
constructor(props) {
super(props);
this.state = {credentials: {email: '', password: ''}}
this.onChange = this.onChange.bind(this);
this.onSave = this.onSave.bind(this);
}
onChange(event) {
const field = event.target.name;
const credentials = this.state.credentials;
credentials[field] = event.target.value;
return this.setState({credentials: credentials});
}
onSave(event) {
event.preventDefault();
this.props.actions.signInUser(this.state.credentials);
}
render() {
return (
< div>
< form>
< TextInput
name="username"
label="Username"
value={this.state.credentials.username}
onChange={this.onChange}/>
< TextInput
name="password"
label="password"
type="password"
value={this.state.credentials.password}
onChange={this.onChange}/>
< input
type="submit"
className="btn btn-primary"
onClick={this.onSave}/>
</form>
</div>
);
}
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(sessionActions, dispatch)
};
}
export default connect(null, mapDispatchToProps)(LogInPage);
the signInUser method is in actions/auth.js
import * as types from './actionTypes';
import decode from 'jwt-decode';
import sessionApi from '../api/authApi';
const ID_TOKEN_KEY = 'jwt'
export function signOutUser() {
sessionStorage.removeItem(ID_TOKEN_KEY);
return {
type: types.SIGN_OUT_USER
}
}
export function signInUser(credentials) {
console.log('singing user is with credentials ' + credentials);
return function(dispatch) {
return sessionApi.login(credentials).then(response => {
sessionStorage.setItem(ID_TOKEN_KEY, response.access_token);
dispatch(authUser());
}).catch(error => {
console.log('we caught an error ' + error)
dispatch(authError(error));
});
};
}
export function isLoggedIn() {
return function(dispatch) {
const idToken = getIdToken()
if (!!idToken && !isTokenExpired(idToken)){
dispatch(authUser());
}else{
console.log('is logged in issue ')
dispatch(authError('Not logged in'));
}
}
}
export function getIdToken() {
console.log('the token is now ' + sessionStorage.getItem(ID_TOKEN_KEY));
return sessionStorage.getItem(ID_TOKEN_KEY);
}
function getTokenExpirationDate(encodedToken) {
console.log('in get Exp date with encoded token ' + encodedToken);
const token = decode(encodedToken);
if (!token.exp) { return null; }
const date = new Date(0);
date.setUTCSeconds(token.exp);
return date;
}
function isTokenExpired(token) {
console.log('were in isTokenExpired');
const expirationDate = getTokenExpirationDate(token);
return expirationDate < new Date();
}
export function authUser() {
return {
type: types.AUTH_USER
}
}
export function authError(error) {
return {
type: types.AUTH_ERROR,
payload: error
}
}
the authentication reducer is
import * as types from '../actions/actionTypes';
import initialState from './initialState';
//import history from '../history'
export default function auth(state = initialState, action) {
switch (action.type) {
case types.AUTH_USER:
console.log('we have an auth user request')
return {
authenticated: true,
error : null
};
case types.SIGN_OUT_USER:
console.log('we have an sign out request')
return {
authenticated: false,
error : null
};
case types.AUTH_ERROR:
console.log('we have an auth error request')
return {
error: action.payload.message
};
default:
return state;
}
}
and the combined reducer is rootReducer
import * as ActionTypes from '../actions/auth'
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
import { reducer } from 'redux-form';
import phoneNumbers from './phoneNumbers';
import addresses from './addresses';
import auth from './auth';
const rootReducer = combineReducers({
auth,
addresses,
phoneNumbers,
routerReducer,
reducer
});
export default rootReducer;
configure store looks like
import { isLoggedIn } from '../actions/auth';
import {createStore, compose, applyMiddleware} from 'redux';
import { routerMiddleware } from 'react-router-redux';
import rootReducer from '../reducers/rootReducer';
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';
import ReduxPromise from 'redux-promise'
export const history = createHistory();
export function configureStore(initialState) {
const store = createStore(
rootReducer,
initialState,
compose (
applyMiddleware(thunk, ReduxPromise, routerMiddleware(history)),
window.devToolsExtension ? window.devToolsExtension() : f => f
)
);
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept('../reducers/rootReducer', () => {
const nextRootReducer = require('../reducers/rootReducer').default;
store.replaceReducer(nextRootReducer);
});
}
store.dispatch(isLoggedIn());
return store;
}
and initialState.js looks like this.
import { isLoggedIn } from '../actions/auth';
import {createStore, compose, applyMiddleware} from 'redux';
import { routerMiddleware } from 'react-router-redux';
import rootReducer from '../reducers/rootReducer';
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';
import ReduxPromise from 'redux-promise'
export const history = createHistory();
export function configureStore(initialState) {
const store = createStore(
rootReducer,
initialState,
compose (
applyMiddleware(thunk, ReduxPromise, routerMiddleware(history)),
window.devToolsExtension ? window.devToolsExtension() : f => f
)
);
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept('../reducers/rootReducer', () => {
const nextRootReducer = require('../reducers/rootReducer').default;
store.replaceReducer(nextRootReducer);
});
}
store.dispatch(isLoggedIn());
return store;
}
Sorry about all the code, but I feel like i've been following the code through these files and I've got no idea why it's not working, given I can fetch data from an api, both when authentication is required and when it's not. I assume I've make a silly beginners mistake, but would be really greatfull if someone could let me know what that mistake is.
This was the process I went through to create the app and other modules i've installed while working on it.
run create-react-app
run insatll react-router-dom --save
run intstall auth0-lock --save
run install redux --save
run install redux-thunk --save
npm install redux-logger --save
npm install react-redux --save
npm install react-router-redux@next --save //this needs to be v5 to be compatible with react-router-dom v4
npm install jwt-decode --save
npm install redux-promise --save
npm install history --save
npm install --save redux-form
Thank you for your help..
I finally got it working. this was the problem was in the header container where I had.
function mapStateToProps(state, ownProps) {
return {
authenticated: state.authenticated
}
}
the function should have been
function mapStateToProps(state, ownProps) {
return {
authenticated: state.auth.authenticated
}
}
I would love to understand where the .auth came from in the state.auth... currently i'm assuming it's from the auth reducer auth.js that contains this line
export default function auth(state = initialState, action)
another reducer I have for phoneNumbers has
export default function phoneNumbers(state = initialState.phoneNumbers, action)
and I can access phoneNumber from state.phoneNumbers. it'd be great is someone could confirm my suspicions, or alternatively point me in the right direction? Thank you