Then we'll fix up a couple of styles here and be done with this feature. We need to throw in the endpoints for this and then we'll be done with the app. Oh, and then fix the title, of course, and then throw in permissions. There's always more. Anyway, what we want to do is hustle.

Let's go in here, and what we need to do is almost do the same thing but in a different component. The component we need to head into is requests.js in our requests folder, not the one in actions.

What we want to do is check the status, select a box, and only filter it if this matches it. Now, this should be pretty simple, so go ahead try this yourself. Pause the video, and do it on your own. I'm going to do it right now too, so let's do this.

Let's open up the Redux-Devtools and you'll see that, if you remember, we have a selected request type that we put together like 40 videos ago or however many. Basically, what this is saying is this is this is the pending item.

If we click on in-progress and go back to the Devtools, you'll see it's complete. I'm going to select in-progress and you'll see it's now in-progress and so on.

One thing I want to do is change this in-progress one to not say in-progress. We want to say progress or it's going to filter it wrong. We don't have any in-progress items right now, but we want to change it to progress.

I'm going to hit command + shift f and search in-progress. It looks like it's in requestsBoxes.js. Let's not worry about that right now. What we'll do is just check it with in-progress.

In requests.js, we need to snatch our status. It's called selectedRequestType. We need to snatch that as well. So let's say:

requests.js

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

Now we just need to perform a check here and say if this is the selectedRequestType then render it. If not, don't render it. Really simple and pretty awesome. Let's just say:

requests.js

            <div className='requests'>
                {
                    this.props.requests.map(requestItem => {
                        if(requestItem.status = selectedRequestType) {
                            return <RequestsItem {...requestItem} key={requestItem._id}/>
                        }
                    })
                }
            </div>

What we want to do is check it out. It should be working. Let's hit requests and you'll see that it's still not working. What I'm going to do is reference selectedRequestType correctly, because you'll see that I'm using selectedRequestType. We need to say this.props before selectedRequestType or it's not going to work.

requests.js

            <div className='requests'>
                {
                    this.props.requests.map(requestItem => {
                        if(requestItem.status = this.props.selectedRequestType) {
                            return <RequestsItem {...requestItem} key={requestItem._id}/>
                        }
                    })
                }
            </div>

Let's go into our application in the browser, let's log in, go to requests, and you'll see it's going all over the place.

Okay, that's what is happening. We're assigning it. We are literally changing requestsItem. That's why it's freaking out when you make sure there's a == sign here.

requests.js

            <div className='requests'>
                {
                    this.props.requests.map(requestItem => {
                        if(requestItem.status == this.props.selectedRequestType) {
                            return <RequestsItem {...requestItem} key={requestItem._id}/>
                        }
                    })
                }
            </div>

There we go. That's what I wanted to see. I was really worried there for a second, because I was terribly wrong. That's working now. It's only rendering the certain status types. Now, you're likely only seeing items in pending.

Actually, you're pretty much guaranteed to only be seeing pending items, unless you messed around with the server. If you've been following along, you'll only see pending items. What we need to do is learn how we can move these now. That's the last thing we need to do.

Then we'll fix the styles and move on to finish newsletter and then the rest of our application. This is all working now. It's really quite amazing. Let's commit our code. Let's say git status, git add ., and let's say git commit -m "filtering items based on selected request type in redux store".

Resources

• Source Code