Building a Blog With Reactjs And Laravel Admin Posts

Building a Blog With Reactjs And Laravel Part7: Admin Posts

In this tutorial of the series ‘creating blog with Laravel and Reactjs’ we continue by processing posts crud with redux, then connecting this to the UI.

 

 

 

As we did with tags and categories in previous lessons we will use the same approach when processing posts. So let’s start with creating the apis.

Create resources/js/admin/apis/Post.js with the code below:

This is the basic CRUD apis for posts. Here in the add() and edit() i modified the code to use javascript FormData(), that’s because we have file upload and tags[] and also i specified Content-type header of ‘multipart/form-data’.

 

Manipulating Redux Store

Open resources/js/admin/store/actionTypes/PostTypes.js and update it with this code:

This is action types we will need to manipulate redux for posts. Now we will create the actions for posts so open resources/js/admin/store/actions/PostActions.js and add this code:

I won’t go through all these actions as they are the same like categories except that handleFieldChange() and resetFields(). handleFieldChange() triggered when any field in the post form changed. resetFields() triggered after and add or update operation to reset fields to default values.

 

Open resources/js/admin/store/reducers/PostReducer.js and update it with this code:

As we did with any other reducer, the post reducer checks for the action type and then updating the related state data. In the initial state object we have posts which is an object to contain the posts in the listing page. Also the post object have attributes like id, title, slug etc. will store the post data when processing create and update.

The HANDLE_FIELD_CHANGE action check for the field then updating that field value accordingly, this is where the handleFieldChange() function do, for fields like title, category_id, content, image, and published we update the field normally as we done in categories, but for tags because this is an array of tag ids we check if the incoming value is already exist in the array or not  then appending or removing it.



The final update to do is updating the root reducer.

Update resources/js/admin/store/reducers/RootReducer.js

Here we add the postReducer with an alias of post so we can access post store in any component by using props like this ‘this.props.post‘. In the next section we will create the components for listing, create, update, and delete.

 

Posts Components

List All Posts

Open resources/js/admin/components/pages/posts/Index.js and update it like this:

Create this file resources/js/admin/components/pages/posts/Row.js and update with this code:



Creating Posts

To create new posts we will use CKEditor rich text editor plugin, you can install the plugin using this command:

This command installs ckeditor for react and you can pick a build to install, in this case i chosen the classic build.

Next we need to create a special style to control the styling for the editor. Create new directory css/ inside of resources/js/admin/ and create this file resources/js/admin/css/editor.css then add this style:

 

Now let’s imagine the post form we need to implement, the screenshot shown below represent the form we will build next

React Laravel blog - post form

The post form composed of two parts, the first contain the title and content. The other part contain category, tags, image and two buttons for publish or saving draft. Note here beside categories dropdown there is a button to create new category so it can show instantly in the dropdown, this is also the case for tags.

 

First let’s return back to categories and tags, we need to add a new component to show a modal when the user click on add new category and add new tag.

Create resources/js/admin/components/pages/categories/AddModal.js and update it like this:

Also create resources/js/admin/components/pages/tags/AddModal.js with this code:

These two modals represent the same component of adding new categories and new tags so i used the same partial component for each modal which is the CategoryForm and TagForm.



Now after i added the modals for creating categories and tags, update resources/js/admin/components/pages/posts/Add.js

Create this file resources/js/admin/components/pages/posts/PostForm.js with the code shown below:

The post form is too big, in the constructor i added a state object which have two attributes which controls showing or hiding the add category and add tag modal.

In the componentDidMount() hook first is called setPostDefaults() and resetFields(), this is an essential operation to reset fields when i navigate each time to add new post, then i called listAllCategories() and listAllTags() to fetch categories to be displayed in the dropdown and tags to be displayed in checkbox groups. 

I added multiple functions to control the modals visibility like openAddCategoryModal(), openAddTagModal(), closeAddCategoryModal(), closeAddTagModal(). Those functions triggered when user clicks on add new category or add new tag.

The handleFieldChange() checks for the field name, then calling handleFieldChange prop coming from the store. handleCkeditor() function the same as handleFieldChange() but used only in case of ckeditor. Finally the handleSubmit() triggered when the user submit the form and save the post.

handleSave() function used to set the published field to whether 1 or 2 depending on whether the user click published or save draft buttons, after that we trigger click on the button using this.submitRef.current.click().

In the render() function i extracted the form into a partial component <PostForm/> and passed to it a lot of props like shown above like the post object, spinners, categories, etc. Then i displayed the <AddCategoryModal /> and <AddTagModal /> components.



Updating Posts

Update resources/js/admin/components/pages/posts/Edit.js as follows:

The Edit component is the same as the Add component except that we fetch the current using the id in the componentDidMount().

 

Great now let’s try this open terminal and run

 

 

Continue to part8: Admin Comments

 

 

Share this: