7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Filtering Posts

A list of categories is pretty useless if we don't have the ability to display the list of posts assigned to a given category. In this lesson, I'll show you how to retrieve a filtered list of posts (e.g. all the posts in a given category).

3.3 Filtering Posts

In the previous lesson we started incorporating our categories, so that we display them in a menu, and we have links there but they don't really do anything. That's because we didn't write that in the previous lesson, we saved that for this lesson. So what we want to do in this lesson is create a route to handle our category URL if you will. And then of course we need a component to handle that route. So let's go ahead and write that route. The path is going to be very similar to what have for the individual post. Because in this case we are just displaying an individual category. But functionality-wise it's going to be very similar to a PostList, because well, that's what we're doing. We are displaying a list of posts based upon a given category. So I'm going to call this category posts for the lack of a better term. And let's go ahead and import this because of we don't do this now I will definitely forget to do it later and we don't want to do that. So we'll call the file category posts to kinda keep in line with what we have with post-list. And I guess we could have done that with SiteNav but well, It's too late to do that. And let's just create that file. So this is a new file. We'll call it category-posts.js. And we're going to pull in some of the stuff that we have inside of our post-list file. Let's start with the imports. We need react and the api, but we do not need the link in this case, so let's just delete that. And we will have to export this, so let's say, export default class And, it's called categoryposts. Now, as I mentioned, the functionality is very similar to a post list. So, we have a couple of different options. The first would be to create some wrapper components around post lists. So that post list becomes a stateless component like it originally started with and the wrapper components would then be responsible for retrieving the appropriate data and then passing that to the post list. That is an option. Another option is to simply extend post list. That way we can re-use its render method, in fact we wouldn't have to touch the render method at all. And we would just need to make a request for the appropriate post data. But of course we need to import Postlist to do that. So let's go ahead and add that. And this is going to work at least it should. So, we need two things from post-list. We don't the render method but we do need the constructor and we do need the componentDidMount method. Because really the only method that's going to change is the component did mount method, because that is where we're going to specify the type of posts that we want to retrieve, but this brings us to a little roadblock, well it's not really a roadblock, it's a speed bump, because the way that we have designed the posts method, we either pass in at ID. Or are we passing nothing at all. So, we need a little bit more flexibility here. So, instead of ID, we're going to change this to be an options object. And we can go ahead and initialize that as an object, so we at least have something there to work with. So, if we are going to retrieve an individual post. We'll say, if options.id is not undefined, then we are going to add that to the URL. So not a big change there. And then we are adding the net flag, we want to leave that. And then we will add a check to see if we have a category. So if category is not undefined, then we are going to add to our query string and we do that with &categories. That is the query parameter that we need to use here, equals, and then the category ID's that we wanted. So we could have multiple categories here but let's just support one category. So we will our our category here, and that should be it. But because we have changed this, we need to go into PostList. And inside of the post classes, componentDidMount, we need to change this. We can't just pass in an ID. Instead we need to pass in an object that has an ID property. So let's just be lazy and do it like this. We'll say id: and there's that, and we're good to go as far as this post class is concerned. Now for the category posts, we are essentially going to to do the same thing, except that category is going to be the property that we use. But we are still retrieving the ID parameter from our URL so nothing has changed as far as that is concerned. And so now let's save this. Let's go to the browser. And we at least see something here, so we haven't broken it completely. Let's make sure that our existing routes still work, and they do. Now let's try to go to our categories. This is going to display the posts for the second category. And it does, that worked. Now, let's click on the uncategorized category, and nothing happens. Now, there's a reason for this. But just to make sure that this works, let's go to home so we can click on this Headless WordPress link. Then we can go back to uncategorized, and we see the post for that category. So the code is working, at least as far as displaying appropriate posts for the given category. What we need to do is update the category posts component whenever our query parameter changes. Not our query parameter, our URL parameter. Because if you notice it does change up here, but the problem is that it's not updating the component when that URL parameter changes. So this is really easy to fix. Essentially what we want to do is update. This component, whenever it receives new props. So we're going to say component will receive new props. We'll have our new props. Actually going to do what we did inside of componentDidMount. Except that in most case, we're not using this.props, we are just using the newProps. So, this is of course something that we want to refactor, but let's just make sure that this is going to work. So, if we click on, this is second category, then we see the post with that category. If we click on the uncategorized. Well, that still doesn't change. Did we get an error? Yes, and it's because I misspelled the method, great. Let's go back, paste that again, and now this should work. If we click on the link while we are displaying the category post component. We see that we get the correct behavior. So let's refactor this, let's create a method called fetch data. And here, all we really need is the categoryID. So we will take our code that we have from one of these methods and whenever we set the category option, we are just going to use our categoryID parameter so that inside of componentWillReceiveProps we'll say this.fetchData and then pass in our new ID. And we will essentially do the same thing for the componentDidMount. So it's slightly a bit more code. But we still have the behavior that we want. And everything is honkey-dorey, so let's change the value that we pass to fetch data, let's get rid of the old code and whenever we go back to the browser, of course, everything is going to work as it did before. But just to make sure, yes, it does. In the next lesson we're going to talk about authentication. Thus far we have just been retrieving information from the RESTful API, displaying that information and that's great. But in some cases we might want to add the ability for users that have the permission to do so to be able to log in and either edit or delete posts. And we will get started with that in the next lesson.

Back to the top