Auth, Higher Order Component Starter

authReducer.js

//authReducer.js
// keep in store.js
const INITIAL_AUTH_STATE = {
    authenticated: false
}

export  function authReducer(state = INITIAL_AUTH_STATE, action) {
    switch(action.type) {
        case "LOGGED_IN": 
            return Object.assign({}, state, {authenticated: true})
        case  "LOGGED_OUT":
                        return Object.assign({}, state, {authenticated: false});
        default:
            return state;
    }
}

Header.js

import React from 'react';
import {NavLink, Link} from 'react-router-dom'; 
import {withRouter} from 'react-router-dom';
import {connect} from 'react-redux';

// first argument always props for functional comp
// props are immutable
function Header(props) {

    
    console.log('Header called');
    // WRONG
    // props.title = 'react';
    // deconstruct/destructuring
    const {title} = props; // title = props.title
    return (
        <div>
            <h2>{title}</h2>
            {/* comments inside JSX
                navigation here
            */}
            <NavLink to="/" className="button" activeClassName="success" exact> Home </NavLink>
            <NavLink to="/cart" className="button" activeClassName="success" > Cart </NavLink>
            <NavLink to="/contact" className="button" activeClassName="success"> Contact </NavLink>
            
            <NavLink to="/redux-counter" 
                     className="button" 
                     activeClassName="success"> Redux Counter </NavLink>

            <NavLink to="/redux-cart" 
                     className="button" 
                     activeClassName="success"> Redux Cart </NavLink>

            
            
            <Link to="/login" > Login </Link>

        {props.authenticated && <button onClick={props.logout}>Logout</button> }
            <hr />
        </div>
    )
}

// instrument the Header component


function mapStateToProps (state) {
    return {
        authenticated: state.auth.authenticated
    }
}

function mapDispatchToProps(dispatch) {
    return {
        logout: () => {
            dispatch({type: 'LOGGED_OUT'});
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps) (Header);

Login.js

// goes inside app/components/Login.js
// contains redux code inline

import React from 'react';
import {connect} from 'react-redux';

function Login(props) {
    return (
        <div>
           {!props.authenticated && 
            <button onClick={props.login}> Login </button>
           }
          { props.authenticated && 
            <button onClick={props.logout}> Logout </button>
          }
        </div>
    )
}

function mapStateToProps (state) {
    return {
        authenticated: state.auth.authenticated
    }
}

function mapDispatchToProps(dispatch) {
    return {
        login: () => {
            dispatch({type: 'LOGGED_IN'});
        },
        logout: () => {
            dispatch({type: 'LOGGED_OUT'});
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps) (Login);

PrivateRoute.js

// PrivateRoute.js
// goes inside app/components/PrivateRoute.js
import React from 'react';
import {connect} from 'react-redux';

import {Redirect} from 'react-router-dom';


function PrivateRoute(props) {
    return (
         <React.Fragment>

         </React.Fragment>
    )
}

function mapStateToProps (state) {
    return {
        authenticated: state.auth.authenticated
    }
}
 

export default connect(mapStateToProps, null) (PrivateRoute);