Building a Blog With Reactjs And Laravel Admin Comments

Building a Blog With Reactjs And Laravel Part8: Admin Comments

In this article of this series i will add comments CRUD to the React admin panel so i will begin by creating the store then integrate this store into the components.

 

 

 

Let’s start by creating the apis to interact with the server so create the api file resources/js/admin/apis/Comment.js and add this code:

 

Preparing Store

Let’s create the redux store using for the comments so we will add the action types first.

Update resources/js/admin/store/actionTypes/CommentTypes.js

Here we have little actions as we will display, edit and remove comments only.

Next we need to add the real actions in resources/js/admin/store/actions/CommentActions.js

As you see in the above code we have three actions listComments, editComment, deleteComment. The missing part is to create the reducer to update the state, this is can be done in resources/js/admin/store/reducers/CommentReducer.js

Now update the root reducer to add the comments. Open resources/js/admin/store/reducers/RootReducer.js and add this code:

We added one more item to the root reducer which is the commentReducer with an alias of ‘comment‘ you already have an idea of how to access the comments now in components.



Updating Components

Update resources/js/admin/components/pages/comments/Index.js:

This component display all comments using a partial component <Row />. The <Row/> component being called inside of map() function takes a single comment and display it.

 

Create this component resources/js/admin/components/pages/comments/Row.js and add this code:



The <Row/> component above displays single row in addition to that it makes use of two other partial components <ControlButtons /> and <EditForm />. The <ControlButtons />  componentdisplays buttons like approve, disapprove, edit and trash. We pass props to <ControlButtons /> such as the comment, onDelete event, edit_mode, onEnableEdit and onDisable events.

The <EditForm /> prop displays edit form so that we can edit the comment inline instead of creating a separate edit page. The component also takes props such as edit_mode, comment_text, onDisableEdit and other props.

So you can think of it as follows when we display the grid the EditForm of all rows is hidden then when the user click the edit button of any row it toggles the display of the EditForm of that row.

 

Let’s add the code of control buttons, create resources/js/admin/components/pages/comments/ControlButtons.js with this code:

This component displays list of buttons, we add a class for each button so that we can give different style for each button. In the case of approve button i check if the the comment is pending or disapproved then i display it. Also for the disapprove button i check if the comment is pending or approved then i display it.

 

Create resources/js/admin/components/pages/comments/EditForm.js with the below code:

The EditForm component has a simple form with a textarea and two buttons for saving the form or cancel. For saving the form we use the event passed as a prop from the <Row /> component which is this.props.onSubmit. Also we display the validation errors using this.props.validation_errors prop.



resources/js/admin/css/comment.css

Now to try this in the terminal run

Great the comments is working now.

 

 

Continue to part9: Admin Users

 

 

Share this: