From ab6b3f533f5fd0fdcf71565b3493d4eb2cb6c548 Mon Sep 17 00:00:00 2001
From: tkt <37575408+tktcorporation@users.noreply.github.com>
Date: Mon, 10 Oct 2022 13:12:31 +0000
Subject: [PATCH] :sparkles: finish
 https://redwoodjs.com/docs/tutorial/chapter7/rbac#restrict-access-in-a-component
 ref:
 https://github.com/redwoodjs/redwood-tutorial/issues/56#issuecomment-1173066747

---
 api/src/graphql/comments.sdl.ts               |  1 +
 api/src/services/comments/comments.ts         |  8 ++++
 web/src/components/Comment/Comment.tsx        | 48 ++++++++++++++++---
 .../components/CommentsCell/CommentsCell.tsx  |  1 +
 4 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/api/src/graphql/comments.sdl.ts b/api/src/graphql/comments.sdl.ts
index 5503501dd..16a41ebc5 100644
--- a/api/src/graphql/comments.sdl.ts
+++ b/api/src/graphql/comments.sdl.ts
@@ -10,6 +10,7 @@ export const schema = gql`
 
   type Query {
     comments(postId: Int!): [Comment!]! @skipAuth
+    comment(id: Int!): Comment! @requireAuth(roles: ["moderator"])
   }
 
   input CreateCommentInput {
diff --git a/api/src/services/comments/comments.ts b/api/src/services/comments/comments.ts
index 675dda27a..bb734c5e9 100644
--- a/api/src/services/comments/comments.ts
+++ b/api/src/services/comments/comments.ts
@@ -1,6 +1,7 @@
 import type { Prisma } from '@prisma/client'
 import type { QueryResolvers, CommentRelationResolvers } from 'types/graphql'
 
+import { requireAuth } from 'src/lib/auth'
 import { db } from 'src/lib/db'
 
 export const comments: QueryResolvers['comments'] = ({
@@ -26,3 +27,10 @@ export const createComment = ({ input }: CreateCommentArgs) => {
     data: input,
   })
 }
+
+export const deleteComment: QueryResolvers['comment'] = ({ id }) => {
+  requireAuth({ roles: 'moderator' })
+  return db.comment.delete({
+    where: { id },
+  })
+}
diff --git a/web/src/components/Comment/Comment.tsx b/web/src/components/Comment/Comment.tsx
index f146714bb..2d525ccdb 100644
--- a/web/src/components/Comment/Comment.tsx
+++ b/web/src/components/Comment/Comment.tsx
@@ -1,3 +1,18 @@
+import type { Comment as IComment } from 'types/graphql'
+
+import { useAuth } from '@redwoodjs/auth'
+import { useMutation } from '@redwoodjs/web'
+
+import { QUERY as CommentsQuery } from 'src/components/CommentsCell'
+
+const DELETE = gql`
+  mutation DeleteCommentMutation($id: Int!) {
+    deleteComment(id: $id) {
+      id
+    }
+  }
+`
+
 const formattedDate = (datetime: ConstructorParameters<typeof Date>[0]) => {
   const parsedDate = new Date(datetime)
   const month = parsedDate.toLocaleString('default', { month: 'long' })
@@ -6,16 +21,28 @@ const formattedDate = (datetime: ConstructorParameters<typeof Date>[0]) => {
 
 // Just a temporary type. We'll replace this later
 interface Props {
-  comment: {
-    name: string
-    createdAt: string
-    body: string
-  }
+  comment: Pick<IComment, 'postId' | 'id' | 'name' | 'createdAt' | 'body'>
 }
 
 const Comment = ({ comment }: Props) => {
+  const { hasRole } = useAuth()
+  const [deleteComment] = useMutation(DELETE, {
+    refetchQueries: [
+      {
+        query: CommentsQuery,
+        variables: { postId: comment.postId },
+      },
+    ],
+  })
+  const moderate = () => {
+    if (confirm('Are you sure?')) {
+      deleteComment({
+        variables: { id: comment.id },
+      })
+    }
+  }
   return (
-    <div className="bg-gray-200 p-8 rounded-lg">
+    <div className="bg-gray-200 p-8 rounded-lg relative">
       <header className="flex justify-between">
         <h2 className="font-semibold text-gray-700">{comment.name}</h2>
         <time className="text-xs text-gray-500" dateTime={comment.createdAt}>
@@ -23,6 +50,15 @@ const Comment = ({ comment }: Props) => {
         </time>
       </header>
       <p className="text-sm mt-2">{comment.body}</p>
+      {hasRole('moderator') && (
+        <button
+          type="button"
+          onClick={moderate}
+          className="absolute bottom-2 right-2 bg-red-500 text-xs rounded text-white px-2 py-1"
+        >
+          Delete
+        </button>
+      )}
     </div>
   )
 }
diff --git a/web/src/components/CommentsCell/CommentsCell.tsx b/web/src/components/CommentsCell/CommentsCell.tsx
index 0d3113604..c2d5351d3 100644
--- a/web/src/components/CommentsCell/CommentsCell.tsx
+++ b/web/src/components/CommentsCell/CommentsCell.tsx
@@ -10,6 +10,7 @@ export const QUERY = gql`
       id
       name
       body
+      postId
       createdAt
     }
   }