allow moderators to delete comments

database/__tests__/ comments/delete.spec.ts

@@ -41,3 +41,19 @@ test('cannot delete comments from other users', async (done) => {
   await firebase.assertFails(ref.delete());
   done();
 });
+
+test('moderators can delete comments from other users', async (done) => {
+  const app = initializeFbApp({ uid: 'modUser' });
+  const ref = app.doc('comments/itemId');
+  await admin.doc('users/modUser').set({ role: 'moderator' });
+  await firebase.assertSucceeds(ref.delete());
+  done();
+});
+
+test('admins can delete comments from other users', async (done) => {
+  const app = initializeFbApp({ uid: 'adminUser' });
+  const ref = app.doc('comments/itemId');
+  await admin.doc('users/adminUser').set({ role: 'admin' });
+  await firebase.assertSucceeds(ref.delete());
+  done();
+});

database/firestore.rules

@@ -111,7 +111,11 @@ service cloud.firestore {
         && request.resource.data.updatedById == request.auth.uid
         && isValidLanguage()
       ;
-      allow delete: if request.auth.uid == resource.data.createdById;
+      allow delete:
+        if request.auth.uid == resource.data.createdById
+        || isModerator()
+        || isAdmin()
+      ;
     }
 
     match /feedback/{id} {

src/components/CommentListItem.tsx

@@ -46,6 +46,8 @@ const CommentListItem = ({
   const classes = useStyles();
   const [snackbar, setSnackbar] = useState<SnackbarAction | null>(null);
   const [liked, setLiked] = useState<boolean>(false);
+  const isAuthor = item.createdById === user?.uid;
+  const isModerator = user?.role === 'moderator' || user?.role === 'admin';
 
   /**
    * Toggle a comment like.
@@ -180,7 +182,7 @@ const CommentListItem = ({
               </Fragment>
             )}
 
-            {user?.uid === item.createdById && (
+            {(isAuthor || isModerator) && (
               <IconButton edge="end" aria-label="delete" onClick={remove}>
                 <Delete />
               </IconButton>

src/components/DiscussionListItem.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
 import NextLink from 'next/link';
 import {
   Avatar,
@@ -7,19 +7,43 @@ import {
   CardContent,
   CardHeader,
   CardActions,
+  IconButton,
   Link,
   Typography,
 } from '@material-ui/core';
-import { Comment } from '@zoonk/models';
-import { GlobalContext } from '@zoonk/utils';
+import { Delete } from '@material-ui/icons';
+import { Comment, SnackbarAction } from '@zoonk/models';
+import { deleteComment } from '@zoonk/services';
+import { firebaseError, GlobalContext } from '@zoonk/utils';
+import Snackbar from './Snackbar';
 
 interface DiscussionListItemProps {
   comment: Comment.Get;
 }
 
 const DiscussionListItem = ({ comment }: DiscussionListItemProps) => {
-  const { translate } = useContext(GlobalContext);
-  const { content, createdAt, createdBy, postId } = comment;
+  const { translate, user } = useContext(GlobalContext);
+  const [snackbar, setSnackbar] = useState<SnackbarAction | null>(null);
+  const { content, createdAt, createdBy, createdById, id, postId } = comment;
+  const isAuthor = createdById === user?.uid;
+  const isModerator = user?.role === 'moderator' || user?.role === 'admin';
+
+  /**
+   * Delete current comment.
+   */
+  const remove = () => {
+    if (!user) {
+      setSnackbar({ type: 'error', msg: translate('need_to_be_loggedin') });
+      return;
+    }
+
+    if (window.confirm(translate('delete_confirmation'))) {
+      setSnackbar({ type: 'progress', msg: translate('deleting') });
+      deleteComment(id)
+        .then(() => setSnackbar({ type: 'success', msg: translate('deleted') }))
+        .catch((err) => setSnackbar(firebaseError(err, 'comment_delete')));
+    }
+  };
 
   return (
     <Card variant="outlined">
@@ -56,13 +80,20 @@ const DiscussionListItem = ({ comment }: DiscussionListItemProps) => {
         <Typography variant="body2" color="textSecondary">
           {content}
         </Typography>
+        <Snackbar action={snackbar} />
       </CardContent>
       <CardActions disableSpacing>
         <NextLink href="/posts/[id]" as={`/posts/${postId}`} passHref>
           <Button component="a" color="primary">
             {translate('see_discussion')}
           </Button>
         </NextLink>
+
+        {(isAuthor || isModerator) && (
+          <IconButton onClick={remove}>
+            <Delete />
+          </IconButton>
+        )}
       </CardActions>
     </Card>
   );