When we perform a search we want it to not only go to our results page, we also want it to pull data from our API. I'm going to open up Postman, and I'm going to pull up the documentation for the API (link below).

Once we get to that site, what we want to do is click on the "Search for Posts" button under "Query Posts". This should open up a window on the side.

The code that it shows is a bit different than what we want but it does the same exact thing. Let's copy the GET request URL at the top and go into postman, open up a new tab and put it in. Now I'm just going to hit send. We should get back some results.

We received lots of posts with the query Rails, but basically, the idea is you type something in, like Rails, and query the posts and it'll return some data. If you type in JavaScript, and we get back Javascript courses. You get the idea.

Unlike the recent posts, it will query them by the search, so we can easily implement this. We'll need to remember this request for later, and it is https://dailysmarty.com/watch?q=python. Super simple.

Let's go back to our code and let's see what we did for the recent posts. Open up your actions/index.js. We're going to copy and modify our fetchRecentPosts function to be a fetchPostsWithQuery function.

actions/index.js

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

Now, the response should be about the same but we'll need a different dispatch eventally, but for now, we'er going to comment it out and see if we're getting the data back appropriately. We also need somewhere to call this function, and we need to do this when we hit return our search bar. Open up searchBar.js.

It's going to say handleFormSubmit and then it's going to say this.props.onSubmit(query). Since we have the same search bar in both of our pages, in both cases we could just put the logic on here but the reason we're having to do it this way is once I can teach you how to make our application scalable.

We'll be building this out in our home.js and our results.js. Let's start with home.js. So we already know it's printing out trying to handle submit for query, so let's just get rid of that. We already know it's pushing so we don't need to tell that.

What we need to do instead is call the action that will allow us to search. Our recentPosts.js is connected with our redux, but we need to connect our home to redux, so we can do that in here now. Let's go ahead and connect it.

Now, we won't even be using mapsStateToProps because we don't need any data in this file. We'll be using it in our searchResults.js.

Now all we need to do is call the function we made earlier, this.props.fetchPostsWithQuery. So, this should work great we should get our data back which should be pushed to results. Let's go and see if it's logging the correct information. I'll search for rails.

Now you'll see we get our data back and that's awesome, but you may of also noticed that it loads the results page before we even get our data back. So if you can imagine what's going to happen when we try and render this data. It's going to come here take a second and then it will render.

What we'll do first is we'll actually implement that component, so we can render the components for the posts and then we will be able to see what I'm talking abou,t with it having to wait for second and then we'll fix that problem.

So, what we want to do is real quick let's add in the same functionality to the search results search bar and then we'll hop into the next guide where we will finally put together our results component and render it on the results page.

Let's go to our results.js and add in the functionality.

Okay so this should work now, we just need to get rid of this console log. Now we are fetching it and each one of these files the results

Let's load that had back up and try and perform a search on the results page. It looks like we're getting some data.

The next thing we need to do is put together the supposed components, but let's commit our code.

git status
git commit -m "put together fetchPostsWithQuery action to receive queried posts"

See you in the next video!

Resources

Code at this stage

Daily Smarty documentation