In this guide I'm going to make it so when we visit our application here and we search for an item. So when we go to the home and search for an item it is instantaneous when it renders the new information, instead of taking a second, you'll notice it takes a second.

So we want to process the data, get it back, and put it in our store before we even navigate to results. But this is pretty simple, we did it in the last app if you remember, and if you did that app we did this by putting in some callbacks into our actions, so pretty simple stuff.

All we have to do is close out all of the files basically, and let's just open up our home.js and basically what we're going to do is say OK fetchPostsWithQuery and then push the results. Now it is right after it, but the reason it's not working is because this will run, all this code will run, as it is fetching it.

Because it will go in here into our actions, index.js under actions and it will fetch the posts and do all this, and it will take a second to get it from the Internet. And during that second or however long it takes it will push us to results in our home.js

What we need to do is put a callback in here. So let's put a coma and then put a function, an arrow function, with a callback or just an arrow function and let's put this in here. Now this isn't going to work immediately because we don't even have this as a parameter yet, so let's go to index and let's add this in as a parameter.

Let's see what are we doing? Okay fetchPostsWithQuery, so we need to add it in as a parameter to fetchPostWithQuery. So let's put that in here and let's just call it callback. So this is a function we're literally passing in this entire function with this.props.history.push.

So what we need to do is we get the data we can get rid of these logs. We get the data and then we're dispatching it and then we can simply say callback. So it's going to call the function after we get the response, so it's going to get it, it's going to say okay .then we got the response, now let's push.

index.js

export function fetchPostsWithQuery(query, callback) {
    return function(dispatch) {
        axios.get(`https://api.dailysmarty.com/search?q=${query}`)
            .then(response => {
                console.log(response.data.posts);
                dispatch({
                    type: SET_RESULTS_POSTS,
                    payload: response.data.posts
                })
                callback()
            })
    }
} 

So let's go to our application, let's go to our home and let's search rails and we get the data.

Now I think it's working, let's head back to the home by clicking on the logo and search again to see if it's working for sure. Let's type in python this time and you'll notice it's automatically there.

Whether it's there before we get to the page, so this slows the app down in the sense that we don't get the results as quick but it's a much better user experience because we don't automatically go to it and then the data changes.

So we're not improving any speed here or anything, literally all we're doing is delaying the push to result. So I'm going to go home and do it again. I'm going to type in results and hit return, you'll notice it takes a second and then it goes over.

But the data doesn't flash to something different, so it's a much better user experience. I'm going to type in Python this time, and yeah it's working absolutely fantastically. All we need to do now is make the hover functionality which we'll do in the next guide, so let's commit our code. I'm just going to search in here one more time.

Okay, so basically we need to fix this real quick. It says callback is not a function.

So the reason it's doing that is because in our results.js when we're saying fetchPostsWithQuery we don't have a callback so you can either put one in there. Or since we don't even need one, what we can do in our index here is just say okay if the callback exists then we will call it, but if it doesn't exist we don't want to call it just to prevent that warning.

index.js

export function fetchPostsWithQuery(query, callback) {
    return function(dispatch) {
        axios.get(`https://api.dailysmarty.com/search?q=${query}`)
            .then(response => {
                console.log(response.data.posts);
                dispatch({
                    type: SET_RESULTS_POSTS,
                    payload: response.data.posts
                })
                if(callback) { callback() }
            })
    }
} 

So let's try that again, let's say rails and we don't get the error, okay so that's great. I'm going to search one more time so results just because I like all these links and we're going to go.

So yeah let's get into that hover animation in the next guide so it only shows links when we hover, and then we'll be done with the functionality. And I mean we're pretty much done with the functionality but let's just add that in and then start on the majority of the style.

Terminal

git status
git add .
git commit -m "modified fetchpostswithquery actionCreator to take in an optional callback"
git push origin master

Now the reason I'm calling it optional is because we don't really need to pass it in since we have this callback condition here. So go ahead and push that to our master and in the next guide we will hop into the styles. We're pretty much done with the functionality because this isn't really considered functionality this is still styling.

So yeah we're completely done with the functionality. In the next guide we will hop into the styles where we will first start with that hover animation and then we will get into CSS grid so I will see you then.

Resources

Source code