Building a Blog With Reactjs And Laravel website categories and posts

Building a Blog With Reactjs And Laravel Part12: Website Categories and Posts

In this part of this series we will display categories and posts in the website pages. I will start with categories display in navbar, footer and sidebar then i will move to posts.

 

 

 

Displaying Categories

Let’s update the Category model to include the number of posts attribute so we can display it in the sidebar of the website.

app/Category.php

Now the categories response include num_posts attribute. The next step is to create api handler to display all categories.

Create directory apis/ in resources/js/website/ and inside it add file Category.js and with the below code:

resources/js/website/apis/Category.js

In the above code i added functions getAll() and getById(), those are the functions we need.

There is one thing we need to think about displaying categories is that we need to display categories in multiple places like header, sidebar, and footer so we need a way to share data globally. To overcome this problem React provides a concept called “React Context“, you can read more about it in this article.

In short words Context enable us to share data to the entire application without using props so that all components can have access to these data in a concise way.

Let’s create resources/js/website/GlobalContext.js

In the code above i create a context for our global data using React.createContext(defaultvalue) function. The function takes one parameter which is the default value to use in this case i passed an object as the default value which have only ‘categories‘.

 

Applying the Context Using Provider

Next to use this context update resources/js/website/App.js like this:

As shown above to use the context you need to wrap the component that will access the global data between this <Context.Provider /> component, for the case of our application here in the render() function i enclosed it with <GlobalContext.Provider />. The component takes a value prop which is the real value to use in this case i updated the categories from this.state.categories.

 

Accessing the Context in Other Components

To access the context or in other words consume it there are multiple ways, i will stick with one way here let’s see it here in action:

Open resources/js/website/components/partials/Header.js and update it with this code:

As you see i used contextType property to assign the context to the Header component, then i accessed the categories in the render() function using this.context.categories, Great! now let’s update Sidebar and Footer components the same way.



Do the same thing for sidebar update resources/js/website/components/partials/Sidebar.js like this:

Also update resources/js/website/components/partials/Footer.js

Now if you run the website it will display the categories using in the three places using only one request.

In the Header component i added another update to make the menu link active for the current category as you see by splitting this.props.location.pathname and get the id of the category from the pathname and added it to the state:

 

Displaying Tags

We need to display list of tags in the sidebar so let’s create apis first

Create Tag.js in resources/js/website/apis/ directory

Next go to Sidebar component in resources/js/website/components/partials/Sidebar.js and update as shown below:

As you see i called the Tag service to fetch all tags and displayed them as links to tag details route.



Displaying Posts

The next step is to display posts and this is big section in this article but nothing to worry about i will simplify things as possible. So we need to display posts in home, category page, tag page, and post details page. For the homepage i will display the recent posts, for the category and tag i will display posts for category and tag respectively.

In resources/js/website/apis/ add Post.js with the following contents:

 

Home Posts

Open resources/js/website/components/pages/Home.js and modify it as follows:

For the gif loader image download any loader from this site and put it in the specified location as shown above.

resources/js/website/components/partials/Article.js



Displaying posts in category page

Open resources/js/website/components/pages/Category.js and update as shown below:

As shown in the stuff above i loaded the posts in componentDidMount() and componentDidUpdate() life cycle hooks because when you visit specific category the componentDidMount() fired only once so if you go to another category it’s not fired and this leads to the posts not updated so to handle such situation i load the post also in componentDidUpdate() which fired every time you navigate to the component and added a simple check to compare the current props with previous props and isLoaded==false so we don’t fetch the posts twice.

resources/js/website/components/partials/Pagination.js

resources/js/website/components/partials/PaginationItem.js

 

Displaying posts in tag page

Update resources/js/website/components/pages/Tag.js like this:



Displaying post detail page

First install this package:

This package used to display html text in react jsx templates, we will use it to display post content.

Open and update resources/js/website/components/pages/Post.js

resources/js/website/components/partials/Comments.js

 

Continue to part13: Post comments and wrapping up

 

Share this: