You're most likely not getting these errors, but if you are it doesn't even matter. It's just an image. Don't worry about it. Everything else is functional when we create new items. What we need to do in this video is we need to display the amount of pending, in progress, and complete requests, and then filter them based on that.

Let's go into our requestsGrid.js and this is where we're going to be doing it because the boxes are here. There's a couple of ways we can do this. We could do it straight in here and pass it into the boxes or we can just do it straight in boxes.

Let's just go to requestsBoxes.js. We'll just do it in here. We want to display count based on how many are pending, in progress, and complete. The way we're going to keep track of in-progress just by progress. We are just going to say if it's progress it's +=1.

Let's import connect to get our data. Let's say import connect from 'react-redux';. Then let's say RequestsBoxes = connect(mapStateToProps)(RequestsBoxes);. We don't want actions, we want it to bind to RequestsBoxes.

This is going to be a little complex, not too complex, but more complex than what we've been doing in mapStateToProps. First, we're going to get our all of our items with const requestItems. Let's say:

requestsBoxes.js

function mapStateToProps(state) {
    const { requests } = state.requests

    return {

    }
}

Now we just need to map over these and then count them. There are three types. We have in-progress, complete, and pending. So we need to say:

requestsBoxes.js

function mapStateToProps(state) {
    const { requests } = state.requests

    var pendingCount = 0;
    var progressCount = 0;
    var completeCount = 0;

    requests.map(request => {
        if(request.status == 'pending') {

        } else if(request.status == 'progress') {

        } else if(request.status == 'complete') {

        }
    })

We could put it in the Reducers, that's probably a better idea, but this is quicker. Let's basically increment to these based on value. So let's say:

requestsBoxes.js

function mapStateToProps(state) {
    const { requests } = state.requests

    var pendingCount = 0;
    var progressCount = 0;
    var completeCount = 0;

    requests.map(request => {
        if(request.status == 'pending') {
            pendingCount += 1;
        } else if(request.status == 'progress') {
            progressCount += 1;
        } else if(request.status == 'complete') {
            completeCount += 1;
        }
    })

That's pretty straightforward. It's just a lot of code, so just write that in. Then we want to return it.

requestsBoxes.js

    requests.map(request => {
        if(request.status == 'pending') {
            pendingCount += 1;
        } else if(request.status == 'progress') {
            progressCount += 1;
        } else if(request.status == 'complete') {
            completeCount += 1;
        }
    })

    return {
        pendingCount,
        progressCount,
        completeCount
    }
}

Now, we want to actually reference these. Let's go into here and let's say:

requestsBoxes.js

class RequestsBoxes extends Component {
    render() {
        return (
            <div className='requests-boxes'>
                <RequestsBox title={'pending'} count={this.props.pendingCount}/>
                <RequestsBox title={'in-progress'} count={this.props.progressCount}/>
                <RequestsBox title={'complete'} count={this.props.completeCount}/>
            </div>
        )
    }
}

That's a lot of code, but it's pretty straightforward logic here. Just get this all in. Wasn't too much logic, just a lot of lines. Basically, everything you see here. Get this working, and we will check it out in the browser right now. There's a chance it could display an error, but I'm pretty sure it won't.

You'll see three pending and I have one complete. The reason I have 1 complete is because this hello one, the one that is giving me my image error, it was set in my complete because I tried making a route to complete or to move them. That's why it's down there. That's doing that properly.

Now, we just need to go quickly filter over these items and render them based on the status. We'll do that in the next video because it's a little bit more of a separate thing. Let's commit our code, and do it the next video.

Let's commit our code. Let's say git status, git add ., and let's say git commit -m "put correct item count in boxes for requests feature". I'll see you in the next video where we will continue and we will filter out these items based on their status, and which one we have selected. Really simple logic, we'll do that in the next video.

Resources

• Source Code