feat: add block user option on post context menu

packages/shared/src/components/Feed.spec.tsx

@@ -624,7 +624,7 @@ describe('Feed logged in', () => {
       );
       expect(data).toBeTruthy();
     });
-    const contextBtn = await screen.findByText("Don't show posts from Echo JS");
+    const contextBtn = await screen.findByText('Block Echo JS');
     fireEvent.click(contextBtn);
     await waitForNock();
     await waitFor(() => expect(mutationCalled).toBeTruthy());
@@ -673,7 +673,7 @@ describe('Feed logged in', () => {
       );
       expect(data).toBeTruthy();
     });
-    const contextBtn = await screen.findByText('Show posts from Echo JS');
+    const contextBtn = await screen.findByText('Unblock Echo JS');
 
     await waitFor(async () => {
       fireEvent.click(contextBtn);

packages/shared/src/components/PostOptionsMenu.tsx

@@ -7,30 +7,30 @@ import classNames from 'classnames';
 import useFeedSettings from '../hooks/useFeedSettings';
 import useReportPost from '../hooks/useReportPost';
 import type { Post } from '../graphql/posts';
-import { UserVote, isVideoPost } from '../graphql/posts';
+import { isVideoPost, UserVote } from '../graphql/posts';
 import {
-  TrashIcon,
-  HammerIcon,
-  EyeIcon,
+  AddUserIcon,
+  BellAddIcon,
+  BellSubscribedIcon,
   BlockIcon,
-  FlagIcon,
-  PlusIcon,
-  EditIcon,
-  UpvoteIcon,
-  DownvoteIcon,
-  SendBackwardIcon,
   BringForwardIcon,
-  PinIcon,
-  BellSubscribedIcon,
-  ShareIcon,
+  DownvoteIcon,
+  EditIcon,
+  EyeIcon,
+  FlagIcon,
+  FolderIcon,
+  HammerIcon,
   MiniCloseIcon,
   MinusIcon,
-  BellAddIcon,
-  AddUserIcon,
+  PinIcon,
+  PlusIcon,
   RemoveUserIcon,
-  FolderIcon,
+  SendBackwardIcon,
+  ShareIcon,
   ShieldIcon,
   ShieldWarningIcon,
+  TrashIcon,
+  UpvoteIcon,
 } from './icons';
 import type { ReportedCallback } from './modals';
 import useTagAndSource from '../hooks/useTagAndSource';
@@ -63,7 +63,10 @@ import { useBookmarkReminder } from '../hooks/notifications';
 import { BookmarkReminderIcon } from './icons/Bookmark/Reminder';
 import { useSourceActionsFollow } from '../hooks/source/useSourceActionsFollow';
 import { useContentPreference } from '../hooks/contentPreference/useContentPreference';
-import { ContentPreferenceType } from '../graphql/contentPreference';
+import {
+  ContentPreferenceStatus,
+  ContentPreferenceType,
+} from '../graphql/contentPreference';
 import { isFollowingContent } from '../hooks/contentPreference/types';
 import { useIsSpecialUser } from '../hooks/auth/useIsSpecialUser';
 import { useActiveFeedContext } from '../contexts';
@@ -135,8 +138,7 @@ export default function PostOptionsMenu({
   const { logEvent } = useContext(LogContext);
   const { hidePost, unhidePost } = useReportPost();
   const { openSharePost } = useSharePost(origin);
-  const { follow, unfollow } = useContentPreference();
-
+  const { follow, unfollow, unblock } = useContentPreference();
   const { openModal } = useLazyModal();
 
   const {
@@ -156,6 +158,8 @@ export default function PostOptionsMenu({
       (excludedSource) => excludedSource.id === post?.source?.id,
     );
   }, [feedSettings?.excludeSources, post?.source?.id]);
+  const isBlockedAuthor =
+    post?.author?.contentPreference?.status === ContentPreferenceStatus.Blocked;
 
   const shouldShowSubscribe =
     isLoggedIn &&
@@ -456,6 +460,7 @@ export default function PostOptionsMenu({
   const shouldShowFollow =
     !useIsSpecialUser({ userId: post?.author?.id }) &&
     post?.author &&
+    !isBlockedAuthor &&
     isLoggedIn;
 
   if (shouldShowFollow) {
@@ -495,11 +500,51 @@ export default function PostOptionsMenu({
   postOptions.push({
     icon: <MenuIcon Icon={BlockIcon} />,
     label: isSourceBlocked
-      ? `Show posts from ${post?.source?.name}`
-      : `Don't show posts from ${post?.source?.name}`,
+      ? `Unblock ${post?.source?.name}`
+      : `Block ${post?.source?.name}`,
     action: isSourceBlocked ? onUnblockSourceClick : onBlockSourceClick,
   });
 
+  if (post?.author && post?.author?.id !== user?.id) {
+    postOptions.push({
+      icon: <MenuIcon Icon={BlockIcon} />,
+      label: isBlockedAuthor
+        ? `Unblock ${post.author.name}`
+        : `Block ${post.author.name}`,
+      action: async () => {
+        const clearCache = () => {
+          const postQueryKey = getPostByIdKey(post.id);
+          const postCache = client.getQueryData(postQueryKey);
+          if (postCache) {
+            client.invalidateQueries({ queryKey: postQueryKey });
+          }
+        };
+
+        if (!isBlockedAuthor) {
+          openModal({
+            type: LazyModal.ReportUser,
+            props: {
+              offendingUser: post.author,
+              defaultBlockUser: true,
+              onBlockUser: clearCache,
+              ...(isCustomFeed && { feedId: customFeedId }),
+            },
+          });
+          return;
+        }
+
+        await unblock({
+          id: post.author.id,
+          entity: ContentPreferenceType.User,
+          entityName: post.author.name,
+          feedId: router.query.slugOrId ? `${router.query.slugOrId}` : null,
+        });
+
+        clearCache();
+      },
+    });
+  }
+
   if (video && isVideoPost(post)) {
     const isEnabled = checkSettingsEnabledState(video.id);
     const label = isEnabled ? `Don't show` : 'Show';

packages/shared/src/components/modals/report/ReportUserModal.tsx

@@ -29,13 +29,17 @@ const reportReasons: { value: string; label: string }[] = [
 ];
 
 type ReportUserModalProps = {
-  offendingUser: Pick<UserShortProfile, 'id' | 'username'>;
   defaultBlockUser?: boolean;
+  feedId?: string;
+  offendingUser: Pick<UserShortProfile, 'id' | 'username'>;
+  onBlockUser?: () => void;
 };
 
 export const ReportUserModal = ({
   offendingUser,
   defaultBlockUser,
+  feedId,
+  onBlockUser,
 }: ReportUserModalProps): ReactElement => {
   const { closeModal: onClose } = useLazyModal();
   const { displayToast } = useToastNotification();
@@ -47,11 +51,12 @@ export const ReportUserModal = ({
         gqlClient.request(CONTENT_PREFERENCE_BLOCK_MUTATION, {
           id: offendingUser.id,
           entity: ContentPreferenceType.User,
-          feedId: user?.id,
+          feedId: feedId ?? user?.id,
         }),
       onSuccess: () => {
         displayToast(`🚫 ${offendingUser.username} has been blocked`);
         onClose();
+        onBlockUser?.();
       },
       onError: () => {
         displayToast(`❌ Failed to block ${offendingUser.username}`);

packages/shared/src/graphql/fragments.ts

@@ -197,6 +197,9 @@ export const FEED_POST_INFO_FRAGMENT = gql`
       image
       username
       permalink
+      contentPreference {
+        status
+      }
     }
     type
     tags