✨ finish https://redwoodjs.com/docs/tutorial/chapter7/rbac#restrict-a…

…ccess-in-a-component

ref: redwoodjs#56 (comment)

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 {

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 },
+  })
+}

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,23 +21,44 @@ 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}>
           {formattedDate(comment.createdAt)}
         </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>
   )
 }

web/src/components/CommentsCell/CommentsCell.tsx

@@ -10,6 +10,7 @@ export const QUERY = gql`
       id
       name
       body
+      postId
       createdAt
     }
   }