Let's go ahead and test out this entire redux flow that we just built. Let's go into requestBox.js and what we want to do in here is we want to dispatch this action now.

requestBox.js

import React, { Component } from 'react';

import { connect } from 'react-redux';
import * as actions from '../../actions';

class RequestsBox extends Component {
    render() {
        const { count, title } = this.props;
        return (
            <a onClick={(title) => this.props.changeSelectedRequestType(title)} className='requests-box requests-box-inactive'>
                <div className='requests-box__count'>{count}</div>
                <div className='requests-box__title'>{title}</div>
                <div className='requests-box__point'></div>
            </a>
        )
    }
}

RequestsBox = connect(null, actions)(RequestsBox);

export default RequestsBox;

So let's look at the flow of this. We'll click on the box that we want to select, and it will trigger redux to go to our actions/index.js where it will find the action. From there it will go to the action, and it will trigger our function, that sends out our dispatch to the requestsReducer.js, which will set our selected box to the title being sent through.

I'm going to reload the page and I'm going to try selecting a box, and when I selected it, nothing's happening. So what we want to do is look at our code because nothing's happening. So we start off in requestsBox.js and we are saying this.props.changeSelectedRequestType. We're importing our actions and connecting it so we are good. Let's just make sure this is the same title.

It is the same function because I literally just copied and pasted it over and it didn't change. Let's just see if we're hitting this by console logging something inside of our action.

Lets go in our application and select one of these boxes and see what it does.

And it says that it's trying to work. So that's good. Now Redux dev tools are frozen so I assume something is going wrong. So during that time we know that it's hitting the action creator, and everything looks like it should be working in our reducer. Let's console log in here to see if we're actually getting anything.

THis should give us our log, but also should log our payload to the console. Let's see if it worked.

Okay so it worked, and it gives us the action.payload, but it looks like the action.payload is a proxy which is not right. It should be printing 'pending', 'in-progress', or 'complete'. So something is terribly wrong here.

Let's go check in requests.js and check the action creator to see what we're sending through the payload because it should be a name. My theory is that it's passing the event through. So let's go and console log our box.type. This will probably print out the same thing, and yep, it gives us the proxy because it's passing in the button or the 'a' tag. That's not what we want.

So let's go into our request box and we're doing something wrong. We're passing in the title, but clearly it's not passing in the title. So let's get rid of this initial title right here because it thinks that we're trying to pass in the event of the function. We want to pass in the title of our props.

requestBox.js

class RequestsBox extends Component {
    render() {
        const { count, title } = this.props;
        return (
            <a onClick={() => this.props.changeSelectedRequestType(title)} className='requests-box requests-box-inactive'>
                <div className='requests-box__count'>{count}</div>
                <div className='requests-box__title'>{title}</div>
                <div className='requests-box__point'></div>
            </a>
        )
    }
}

So now it should work. Let's go into our requests in the browser.

You'll see it says tryna work pending So that works. Let's go get rid of our console log statements in our files. Let's see if it's changing our state. Well, my redux dev tools aren't working, so I'm going to close Chrome completely, and reopen our application. Let's test it again.

Now it's working. The redux dev tools were just broken, most likely because the proxy was trying to store the event. I assume that's what was going on. So now that that's working what we need to do is we need to basically apply a certain className based on the status based, based on a static boolean that we'll create for the selected requests type.

OK I'm going to rename this to selected requests type

requestsReducer.js

import {
    CHANGE_SELECTED_REQUEST_TYPE
} from '../actions/types';

const INITIAL_STATE = {
    requests: [],
    selectedRequestType: 'pending'
}

export default function(state = INITIAL_STATE, action) {
    switch (action.type) {
        case CHANGE_SELECTED_REQUEST_TYPE:
            const boxType = action.payload
            return {
                ...state,
                selectedRequestType: boxType
            }
        default: return state;
    }
}

Now let's hook up our requestsbox to mapStateToProps, We want it to say that our selected title is the active box, and that the others are inactive. So let's add that in to requestsbox.js.

requestBox.js

import React, { Component } from 'react';

import { connect } from 'react-redux';
import * as actions from '../../actions';

class RequestsBox extends Component {
    render() {
        const { count, title } = this.props;
        return (
            <a onClick={() => this.props.changeSelectedRequestType(title)} className='requests-box requests-box-inactive'>
                <div className='requests-box__count'>{count}</div>
                <div className='requests-box__title'>{title}</div>
                <div className='requests-box__point'></div>
            </a>
        )
    }
}

function mapStateToProps(state) {
    const { selectedRequestType } = state.requests; 
    return { selectedRequestType };
}

RequestsBox = connect(mapStateToProps, actions)(RequestsBox);

export default RequestsBox;

So what we need to do now is basically go into our class name here and say that if the title is equal to the selected request type we will say it's active, else we'll say it's inactive okay. So what I want to do is just take this entire class name out and provide an object, and then let's provide a constant for the logic.

requestBox.js

import React, { Component } from 'react';

import { connect } from 'react-redux';
import * as actions from '../../actions';

class RequestsBox extends Component {
    render() {
        const { count, title } = this.props;
        const className = `requests-box ${this.props.selectedRequestType == title ? 'requests-box-active' : 'requests-box-inactive'}`
        return (
            <a onClick={() => this.props.changeSelectedRequestType(title)} className={className}>
                <div className='requests-box__count'>{count}</div>
                <div className='requests-box__title'>{title}</div>
                <div className='requests-box__point'></div>
            </a>
        )
    }
}

function mapStateToProps(state) {
    const { selectedRequestType } = state.requests; 
    return { selectedRequestType };
}

RequestsBox = connect(mapStateToProps, actions)(RequestsBox);

export default RequestsBox;

Okay now we already brought in the styles, so we know that it looks good. Let's go into our application and check this out.

You'll see that pending is active by default and the other's aren't. Let's click on one of the others.

Now complete contains the styles and so on. Sweet. We just implemented all the logic behind that and it works. So now since we have access to select the request type in here we don't have to perform this logic anywhere else. We can always get access to it with these 4 or 5 lines.

So that means when we move on to the next video and build out these request components, we can really easily say hey there's this item passed up as the selected type. If it's the right type, let's go ahead and display them. It's just going to render things really easy.

So let's commit our code.

git status
git add .
git commit -m "changed styles based on selectedrequesttype in store and fixed the payload bug on the changeselectedrequesttype"

In the next video we'll move on and build the other request components. I'll you in see next video.

Code at this stage