Coding a Comments Section that Requires Manual Content Approval
Right now, all the comments are public instantly. However, we may want to review the comments before showing them to other users. This is what we'll cover in this lesson.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the The newline Guide to Full Stack Comments with Hasura and React course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Full Stack Comments with Hasura and React, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:06] Right now, all the comments are public. It means that when a user has a comment, other people can see it instantly.
[00:07 - 00:16] However, we may not want to do it and we like to review the comments before showing them to other users. And that's what we're going to do in this lesson.
[00:17 - 00:30] We'll add a possibility to mark comments as hidden by default and only show them publicly after manual approval. As the first step, we need to store the information whether a comment is visible or not.
[00:31 - 00:40] For that, we'll go to Hasura console and modify the comments table. We'll add a new column called hidden with boolean type and the default value true.
[00:41 - 00:53] We also need to update permissions as returned to unkind applications to fetch hidden comments. We'll go to the permissions tab and click on select permissions for raw anonymous.
[00:54 - 01:07] In the raw select permissions, we'll choose will custom check. Inside, we'll set the configuration to hidden is equal to false so that the anonymous role has access only to the public accepted comments.
[01:08 - 01:15] We also need to provide access to the hidden column. We can do it by toggling it in the column select permissions section.
[01:16 - 01:25] Then we can go to our text editor and handle it in our code. Having changes in the query that fetches comments, but we need to update the status type a bit.
[01:26 - 01:32] Right now, we have one additional status to handle. When the comment was added, but it's awaiting approval.
[01:33 - 01:40] We'll call it delivered awaiting approval. We're also going to return the hidden value from the add new comment mutation.
[01:41 - 01:49] Why? Because in the hook, we don't know what's your configuration, whether you have comments public by default or hidden by default.
[01:50 - 01:59] To let you decide, we need to handle both cases in our hook. So when we see that newly added comments hidden value is false, that means that it's public.
[02:00 - 02:07] Otherwise, it's awaiting approval. The last step is setting a proper status after a successful API call.
[02:08 - 02:17] Previously, we were setting the added status. Now, it will be based on the hidden value as we mentioned before, so we'll have delivered awaiting approval or added.
[02:18 - 02:26] Let's go to our browser and test it out. I will add a sample comment, and we'll see that it has status delivered awaiting approval.
[02:27 - 02:37] Okay, that was the last lesson in this course, and you can be very, very proud of yourself for completing that. I hope that you liked it, and that you learned a bit about full step web development.
[02:38 - 02:50] I would really love your feedback, and I would love to know what you've built using the tools introduced in this course. We'll have a quick summary in the next module, and we'll list down all the things that we learned over this course.