[redesign] Add censor comment action for admins

src/actions/api.js

@@ -774,6 +774,23 @@ export const onCensorComment = (loggedInAsEmail, token, commentid, isCms) =>
     });
   });
 
+export const onCensorCommentv2 = (email, token, commentid, reason) => {
+  return withCsrf((dispatch, getState, csrf) => {
+    dispatch(act.REQUEST_CENSOR_COMMENT({ commentid, token }));
+    return Promise.resolve(api.makeCensoredComment(token, reason, commentid))
+      .then(comment => api.signCensorComment(email, comment))
+      .then(comment => api.censorComment(csrf, comment))
+      .then(response => {
+        if (response.receipt) {
+          dispatch(act.RECEIVE_CENSOR_COMMENT(commentid, null));
+        }
+      })
+      .catch(error => {
+        dispatch(act.RECEIVE_CENSOR_COMMENT(null, error));
+      });
+  });
+};
+
 export const onSubmitComment = (
   loggedInAsEmail,
   token,

src/componentsv2/ModalConfirmWithReason.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import {
+  P,
   Button,
   Modal,
   TextInput,
@@ -65,6 +66,11 @@ const ModalConfirmWithReason = ({
         )
       }
     >
+      { !success &&
+        <P style={{ marginBottom: "20px"}}>
+          Please, provide a reason for this action.
+        </P>
+      }
       {!success && (
         <FormWrapper
           initialValues={{

src/containers/Comments/Comment/Comment.jsx

@@ -7,6 +7,7 @@ import Markdown from "src/componentsv2/Markdown";
 import Join from "src/componentsv2/Join";
 import Link from "src/componentsv2/Link";
 import LoggedInContent from "src/componentsv2/LoggedInContent";
+import AdminContent from "src/componentsv2/AdminContent";
 import Likes from "src/componentsv2/Likes";
 import CopyLink from "src/componentsv2/CopyLink";
 
@@ -17,6 +18,7 @@ const Comment = ({
   author,
   authorID,
   createdAt,
+  censored,
   highlightAuthor,
   likesCount,
   likeOption,
@@ -27,6 +29,7 @@ const Comment = ({
   commentBody,
   showReplies,
   disableReply,
+  onClickCensor,
   onClickReply,
   onClickShowReplies,
   numOfReplies,
@@ -74,7 +77,11 @@ const Comment = ({
           />
         )}
       </div>
-      <Markdown className="margin-top-s" body={commentBody} />
+      { !censored ?
+        <Markdown className="margin-top-s" body={commentBody} />
+      :
+        <Markdown className={styles.censored} body="Censored by moderators " />
+      }      
       <div className="justify-space-between margin-top-s">
         <div className="justify-left">
           {!disableReply && (
@@ -89,6 +96,17 @@ const Comment = ({
               </Text>
             </LoggedInContent>
           )}
+          {!censored && (
+            <AdminContent>
+              <Text
+                weight="semibold"
+                className={styles.censor}
+                onClick={onClickCensor}
+              >
+                Censor
+              </Text>
+            </AdminContent>            
+          )}
           {numOfReplies > 0 && (
             <span className={styles.showReplies} onClick={onClickShowReplies}>
               {showReplies ? "-" : `+${numOfReplies}`}

src/containers/Comments/Comment/Comment.module.css

@@ -8,6 +8,19 @@
     margin-right: 1rem;
 }
 
+.censor {
+    cursor: pointer;
+    color: #ED6D47;
+    margin-right: 1rem;
+}
+
+.censored {
+    padding: 10px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    background-color: #FEF5F3;
+}
+
 .timeAgo {
     font-size: var(--font-size-normal);
 }
@@ -32,6 +45,10 @@
     color: var(--color-primary-dark);
 }
 
+.censor:hover {
+    color: #E25025;
+}
+
 .commentAuthor {
     font-weight: var(--font-weight-semi-bold);
 }

src/containers/Comments/Comment/CommentWrapper.jsx

@@ -19,13 +19,15 @@ const CommentWrapper = ({ comment, children, numOfReplies, ...props }) => {
     readOnly,
     identityError,
     paywallMissing,
+    openCensorModal,
     openLoginModal
   } = useComment();
   const {
     comment: commentText,
     token,
     commentid,
     resultvotes,
+    censored,
     timestamp,
     username,
     userid,
@@ -72,6 +74,9 @@ const CommentWrapper = ({ comment, children, numOfReplies, ...props }) => {
     }
     return onLikeComment(commentid, "-1");
   }
+  function handleClickCensor() {
+    return openCensorModal(commentid);
+  }
   const hasChildrenComments = !!React.Children.toArray(children).filter(
     child =>
       child.props && child.props.comments && !!child.props.comments.length
@@ -85,6 +90,7 @@ const CommentWrapper = ({ comment, children, numOfReplies, ...props }) => {
         author={username}
         authorID={userid}
         createdAt={timestamp}
+        censored={censored}
         highlightAuthor={isRecordAuthor}
         highlightAsNew={isNew}
         disableLikes={!enableCommentVote}
@@ -97,12 +103,12 @@ const CommentWrapper = ({ comment, children, numOfReplies, ...props }) => {
         onLike={handleLikeComment}
         onDislike={handleDislikeComment}
         showReplies={showReplies}
+        onClickCensor={handleClickCensor}
         onClickReply={handleToggleReplyForm}
         onClickShowReplies={handleToggleReplies}
         numOfReplies={numOfReplies}
         commentBody={commentText}
         numOfNewHiddenReplies={sumOfNewDescendants}
-        {...props}
       />
       {showReplyForm && (
         <CommentForm

src/containers/Comments/Comments.jsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useReducer } from "react";
+import React, { useState, useEffect, useReducer } from "react";
 import { Card, H2, Text, Message, classNames } from "pi-ui";
 import { withRouter } from "react-router-dom";
 import styles from "./Comments.module.css";
 import LoggedInContent from "src/componentsv2/LoggedInContent";
+import ModalConfirmWithReason from "src/componentsv2/ModalConfirmWithReason";
 import CommentForm from "src/componentsv2/CommentForm";
 import { useComments, CommentContext } from "./hooks";
 import CommentsListWrapper from "./CommentsList/CommentsListWrapper";
@@ -19,6 +20,7 @@ import {
 } from "./helpers";
 import useIdentity from "src/hooks/api/useIdentity";
 import usePaywall from "src/hooks/api/usePaywall";
+import useBooleanState from "src/hooks/utils/useBooleanState";
 import { IdentityMessageError } from "src/componentsv2/IdentityErrorIndicators";
 import { useLoginModal } from "src/containers/User/Login";
 import WhatAreYourThoughts from "src/componentsv2/WhatAreYourThoughts";
@@ -38,18 +40,21 @@ const Comments = ({
   const [, identityError] = useIdentity();
   const { isPaid, paywallEnabled } = usePaywall();
   const [state, dispatch] = useReducer(commentsReducer, initialState);
+  const [commentIDCensorTarget, setCommentIDCensorTarget] = useState(null);
   const [sortOption, setSortOption] = useQueryString(
     "sort",
     commentSortOptions.SORT_BY_TOP
   );
   const {
     onSubmitComment,
-    comments,
     onLikeComment,
+    onCensorComment,
+    comments,
     loading,
     recordType,
     lastVisitTimestamp,
     currentUser,
+    userEmail,
     ...commentsCtx
   } = useComments({
     recordToken,
@@ -117,6 +122,26 @@ const Comments = ({
     }
     return contents;
   }
+
+  const [
+    showCensorModal,
+    openCensorModal,
+    closeCensorModal
+  ] = useBooleanState(false);
+
+  useEffect(
+    function handleCensorCommentModal() {
+      if (commentIDCensorTarget) {
+        openCensorModal();
+      }
+    },
+    [commentIDCensorTarget, openCensorModal]
+  );
+
+  function handleCensorComment(reason) {
+    return onCensorComment(userEmail, recordToken, commentIDCensorTarget, reason);
+  } 
+
   return (
     <>
       <Card
@@ -196,6 +221,7 @@ const Comments = ({
                 readOnly,
                 identityError,
                 paywallMissing,
+                openCensorModal: setCommentIDCensorTarget,
                 openLoginModal: handleOpenLoginModal,
                 ...commentsCtx
               }}
@@ -209,6 +235,23 @@ const Comments = ({
             </CommentContext.Provider>
           )}
         </div>
+        <ModalConfirmWithReason
+          title={`Censor comment`}
+          reasonLabel="Censor reason"
+          subject="censorComment"
+          successTitle="Comment censored"
+          successMessage={
+            <Text>
+              The comment has been successfully censored.
+            </Text>
+          }
+          show={showCensorModal}
+          onSubmit={handleCensorComment}
+          onClose={() => {
+            setCommentIDCensorTarget(null);
+            return closeCensorModal();
+          }}
+        />
       </Card>
     </>
   );

src/containers/Comments/hooks.js

@@ -21,16 +21,18 @@ const mapDispatchToProps = {
   onFetchComments: act.onFetchProposalComments,
   onFetchLikes: act.onFetchLikedComments,
   onLikeComment: act.onLikeComment,
-  onResetComments: act.onResetComments
+  onResetComments: act.onResetComments,
+  onCensorComment: act.onCensorCommentv2
 };
 
 export function useComments(ownProps) {
   const {
     onFetchComments,
-    onLikeComment: onLikeCommentAction,
     onFetchLikes,
-    commentsLikes,
+    onCensorComment,
     onResetComments,
+    onLikeComment: onLikeCommentAction,
+    commentsLikes,
     ...fromRedux
   } = useRedux(ownProps, mapStateToProps, mapDispatchToProps);
   const { enableCommentVote, recordType } = useConfig();
@@ -95,9 +97,11 @@ export function useComments(ownProps) {
 
   return {
     onLikeComment,
+    onCensorComment,
     getCommentLikeOption,
     enableCommentVote,
     userLoggedIn,
+    userEmail: email,
     recordType,
     currentUser,
     ...fromRedux