fix: ASC-25689 - add condition to show moderator badge (#652)

* fix: add condition to show moderator badge * fix: hooks moderator
AmityCo · Sep 18, 2024 · 90ba4f7 · 90ba4f7
1 parent 8d4c4a8
commit 90ba4f7
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 11 deletions.
diff --git a/src/v4/social/components/Comment/Comment.tsx b/src/v4/social/components/Comment/Comment.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Typography, BottomSheet } from '~/v4/core/components';
 import { ModeratorBadge } from '~/v4/social/elements/ModeratorBadge';
 import { Timestamp } from '~/v4/social/elements/Timestamp';
@@ -21,6 +21,7 @@ import { CreateCommentParams } from '~/v4/social/components/CommentComposer/Comm
 import useCommentSubscription from '~/v4/core/hooks/subscriptions/useCommentSubscription';
 import { TextWithMention } from '~/v4/social/internal-components/TextWithMention/TextWithMention';
 import millify from 'millify';
+import useCommunityPostPermission from '~/v4/social/hooks/useCommunityPostPermission';
 
 const EllipsisH = ({ ...props }: React.SVGProps<SVGSVGElement>) => (
   <svg
@@ -69,7 +70,7 @@ interface CommentProps {
   pageId?: string;
   componentId?: string;
   comment: Amity.Comment;
-  community?: Amity.Community;
+  community?: Amity.Community | null;
   onClickReply: (comment: Amity.Comment) => void;
   shouldAllowInteraction?: boolean;
 }
@@ -82,11 +83,10 @@ export const Comment = ({
   onClickReply,
   shouldAllowInteraction = true,
 }: CommentProps) => {
-  const { accessibilityId, config, defaultConfig, isExcluded, uiReference, themeStyles } =
-    useAmityComponent({
-      pageId,
-      componentId,
-    });
+  const { accessibilityId, isExcluded, themeStyles } = useAmityComponent({
+    pageId,
+    componentId,
+  });
 
   const { confirm } = useConfirmContext();
 
@@ -97,6 +97,11 @@ export const Comment = ({
 
   const [isShowMore, setIsShowMore] = useState(false);
 
+  const { isModerator: isModeratorUser } = useCommunityPostPermission({
+    community,
+    userId: comment.creator?.userId,
+  });
+
   const toggleBottomSheet = () => setBottomSheetOpen((prev) => !prev);
 
   const isLiked = (comment.myReactions || []).some((reaction) => reaction === 'like');
@@ -211,7 +216,7 @@ export const Comment = ({
                 {comment.creator?.displayName}
               </Typography.BodyBold>
 
-              <ModeratorBadge pageId={pageId} componentId={componentId} />
+              {isModeratorUser && <ModeratorBadge pageId={pageId} componentId={componentId} />}
 
               <TextWithMention
                 data={{ text: (comment.data as Amity.ContentDataText).text }}

diff --git a/src/v4/social/components/CommentList/CommentList.tsx b/src/v4/social/components/CommentList/CommentList.tsx
@@ -23,7 +23,7 @@ type CommentListProps = {
   onClickReply: (comment: Amity.Comment) => void;
   limit?: number;
   includeDeleted?: boolean;
-  community?: Amity.Community;
+  community?: Amity.Community | null;
   shouldAllowInteraction?: boolean;
 };
 

diff --git a/src/v4/social/components/ReplyComment/ReplyComment.tsx b/src/v4/social/components/ReplyComment/ReplyComment.tsx
@@ -21,6 +21,7 @@ import { CommentOptions } from '~/v4/social/components/CommentOptions/CommentOpt
 import { CreateCommentParams } from '~/v4/social/components/CommentComposer/CommentComposer';
 import { CommentInput } from '~/v4/social/components/CommentComposer/CommentInput';
 import styles from './ReplyComment.module.css';
+import useCommunityPostPermission from '~/v4/social/hooks/useCommunityPostPermission';
 
 type ReplyCommentProps = {
   pageId?: string;
@@ -41,6 +42,11 @@ const PostReplyComment = ({ pageId = '*', community, comment }: ReplyCommentProp
   const [isEditing, setIsEditing] = useState(false);
   const [commentData, setCommentData] = useState<CreateCommentParams>();
 
+  const { isModerator: isModeratorUser } = useCommunityPostPermission({
+    community,
+    userId: comment.creator?.userId,
+  });
+
   const isLiked = (comment.myReactions || []).some((reaction) => reaction === 'like');
 
   const toggleBottomSheet = () => setBottomSheetOpen((prev) => !prev);
@@ -154,8 +160,7 @@ const PostReplyComment = ({ pageId = '*', community, comment }: ReplyCommentProp
               <Typography.BodyBold className={styles.postReplyComment__content__username}>
                 {comment.creator?.displayName}
               </Typography.BodyBold>
-
-              <ModeratorBadge pageId={pageId} componentId={componentId} />
+              {isModeratorUser && <ModeratorBadge pageId={pageId} componentId={componentId} />}
               <TextWithMention
                 data={{ text: (comment.data as Amity.ContentDataText).text }}
                 mentionees={comment.mentionees as Amity.UserMention[]}

diff --git a/src/v4/social/hooks/useCommunityPostPermission.ts b/src/v4/social/hooks/useCommunityPostPermission.ts
@@ -0,0 +1,101 @@
+import { CommunityPostSettings } from '@amityco/ts-sdk';
+import { useMemo } from 'react';
+import usePostsCollection from '~/v4/social/hooks/collections/usePostsCollection';
+import { useSDK } from '~/v4/core/hooks/useSDK';
+import useCommunityModeratorsCollection from '~/v4/social/hooks/collections/useCommunityModeratorsCollection';
+import { Permissions } from '~/v4/social/constants/permissions';
+
+const useCommunityPostPermission = ({
+  post,
+  childrenPosts = [],
+  community,
+  userId,
+}: {
+  post?: Amity.Post | null;
+  childrenPosts?: Amity.Post[];
+  community?: Amity.Community | null;
+  userId?: string;
+}) => {
+  const { moderators } = useCommunityModeratorsCollection({ communityId: community?.communityId });
+  const { client } = useSDK();
+
+  const { posts: reviewingPosts } = usePostsCollection({
+    targetType: 'community',
+    targetId: community?.communityId,
+    feedType: 'reviewing',
+  });
+
+  const isEditable = useMemo(() => {
+    if (
+      childrenPosts.find(
+        (childPost) => childPost.dataType === 'liveStream' || childPost.dataType === 'poll',
+      )
+    ) {
+      return false;
+    }
+    return true;
+  }, [childrenPosts]);
+
+  const moderator = moderators.find((moderator) => moderator.userId === userId);
+  const isMyPost = post?.postedUserId === userId;
+  const isPostUnderReview = useMemo(() => {
+    if (community?.postSetting != CommunityPostSettings.ANYONE_CAN_POST) {
+      return reviewingPosts.find((reviewingPost) => reviewingPost.postId === post?.postId) != null;
+    }
+    return false;
+  }, [community, reviewingPosts]);
+
+  const isModerator = moderator != null;
+
+  const permissions: {
+    canEdit: boolean;
+    canReport: boolean;
+    canDelete: boolean;
+    canReview: boolean;
+  } = {
+    canEdit: false,
+    canReport: false,
+    canDelete: false,
+    canReview: false,
+  };
+
+  if (isMyPost) {
+    if (!isPostUnderReview && isEditable) {
+      permissions.canEdit = true;
+    }
+    permissions.canDelete = true;
+  } else {
+    if (community != null) {
+      const canEdit =
+        client
+          ?.hasPermission(Permissions.EditCommunityFeedPostPermission)
+          .community(community.communityId) ?? false;
+
+      permissions.canEdit = canEdit && isEditable;
+
+      const canDelete =
+        client
+          ?.hasPermission(Permissions.DeleteCommunityFeedPostPermission)
+          .community(community.communityId) ?? false;
+
+      permissions.canDelete = canDelete;
+    } else {
+      const canDelete =
+        client?.hasPermission(Permissions.EditUserFeedPostPermission).currentUser() ?? false;
+
+      permissions.canDelete = canDelete;
+    }
+
+    if (!isPostUnderReview) {
+      permissions.canReport = true;
+    }
+  }
+
+  return {
+    isPostUnderReview,
+    isModerator,
+    ...permissions,
+  };
+};
+
+export default useCommunityPostPermission;
diff --git a/src/v4/social/pages/PostDetailPage/PostDetailPage.tsx b/src/v4/social/pages/PostDetailPage/PostDetailPage.tsx
@@ -64,6 +64,7 @@ export function PostDetailPage({ id, hideTarget, category }: PostDetailPageProps
               referenceId={post.postId}
               referenceType="post"
               onClickReply={(comment: Amity.Comment) => setReplyComment(comment)}
+              community={community}
             />
           )}
         </div>