You'll see that when we move it, it doesn't re-render our items, but when you go back it does. What we need to do is fix this problem by basically re-fetching our items after we send it. Let's go to our application.

Let's go into requestsItem.js, and in here instead of just throwing the this.props.changeStatus directly in this callback, let's take it out and let's paste it in a function right here. We'll call it this.handleStatus().

Let's go up here, and I'm going to write:

requestsItem.js

handleStatus = () => {
    this.props.changeStatus({_id, status})
}

We still need to get access to _id and status. We can either pass it through as a parameter or we can just say this.props({_id, status}). Let's go with the second option by saying:

requestsItem.js

handleStatus = () => {
    const { _id, status } = this.props;
    this.props.changeStatus({_id, status})
}

Now, let's get rid of the status here and the _id here.

requestsItem.js

render() {
    const { title, body, date, imageUrl } = this.props;
    const parsedDate = new Date(date);
    return (
        <div id='requests-item' className='requests-item'>

Now, what we're going to do is we're going to implement a callback in this changeStatus function, so we can fetch the items. Let's put a comma after this object and put in a callback function.

requestsItem.js

handleStatus = () => {
    const { _id, status } = this.props;
    this.props.changeStatus({_id, status}, () => {
        this.props.fetchRequests();
    })
}

This will go out and re-fetch our requests right after we get the response back saying we've successfully updated the status. That will be good because then it will re-distribute your data through the DOM, which is good.

Let's go to requests.js in our actions folder, and we need to implement this callback in our changeStatus. So let's say:

requests.js

export function changeStatus({_id, status}, success) {
    const token = localStorage.getItem('token');
    return function() {
        axios.post(`${ROOT_URL}/requests/update-status`, {_id, status}, {
            headers: { authorization: token }
        })
            .then(response => {
                console.log(response.data);
                success();
            })

Once we get the response back, we'll say success(). Now, let's go ahead and test this out. Let's log in, go to requests. They're all they're all in progress. Let's go and move one. You'll see it automatically moves it to complete.

If you move it again, it moves it up to pending. That's all implemented. All we need to do now to finish up the requests is handle a couple of styles and then we'll be good to go. We also need the styles to be a border around this.

We need to make it so it displays this as open on all of the items. When we open these we want them to display this white color. The next thing we need to do is we need to change up these icons when we're on different screens. We want it to display different icons.

Now, the next thing we need to do is we need to display hover actions. When we are hover over these we need to display the icon in a little bit of a different style. Basically, the next few videos are going to be all about styling the rest of this and finishing up styles.

Then we'll move on to newsletter and get these all taken care of. Let's commit our code.

Terminal

git status
git add .
git commit -m "implemented callback into changeStatus to re-fetch items upon change status completion"

I'll see you in the next video.

Resources

• Source Code