Merge branch 'main' into MI-761

packages/extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extension",
-  "version": "3.36.8",
+  "version": "3.36.9",
   "scripts": {
     "dev:chrome": "cross-env NODE_ENV=development cross-env TARGET_BROWSER=chrome webpack --watch",
     "dev:firefox": "cross-env NODE_ENV=development cross-env TARGET_BROWSER=firefox webpack --watch",

packages/extension/webpack.config.js

@@ -53,6 +53,7 @@ const baseConfig = {
     extensions: ['.svg', '.ts', '.tsx', '.js', '.json'],
     alias: {
       'react-onesignal': false,
+      '@marsidev/react-turnstile': false,
     },
     fallback: {
       fs: false,

packages/shared/src/components/CustomFeedOptionsMenu.tsx

@@ -20,6 +20,7 @@ type CustomFeedOptionsMenuProps = {
   onUndo?: (feedId: string) => void;
   className?: string;
   shareProps: UseShareOrCopyLinkProps;
+  additionalOptions?: MenuItemProps[];
 };
 
 const CustomFeedOptionsMenu = ({
@@ -28,6 +29,7 @@ const CustomFeedOptionsMenu = ({
   onAdd,
   onUndo,
   onCreateNewFeed,
+  additionalOptions = [],
 }: CustomFeedOptionsMenuProps): ReactElement => {
   const { showPlusSubscription } = usePlusSubscription();
   const { openModal } = useLazyModal();
@@ -57,14 +59,17 @@ const CustomFeedOptionsMenu = ({
       label: 'Share',
       action: () => onShareOrCopyLink(),
     },
-    {
+  ];
+
+  if (showPlusSubscription) {
+    options.push({
       icon: <MenuIcon Icon={HashtagIcon} />,
       label: 'Add to custom feed',
       action: handleOpenModal,
-    },
-  ];
+    });
+  }
 
-  if (!showPlusSubscription) {
+  if (additionalOptions.length === 0 && !showPlusSubscription) {
     return (
       <Button
         variant={ButtonVariant.Float}
@@ -75,6 +80,8 @@ const CustomFeedOptionsMenu = ({
     );
   }
 
+  options.push(...additionalOptions);
+
   return (
     <>
       <Button

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';
@@ -46,11 +46,14 @@ import {
   useToastNotification,
 } from '../hooks';
 import type { AllFeedPages } from '../lib/query';
-import { generateQueryKey } from '../lib/query';
+import { generateQueryKey, RequestKey } from '../lib/query';
 import AuthContext from '../contexts/AuthContext';
 import { LogEvent, Origin } from '../lib/log';
 import { usePostMenuActions } from '../hooks/usePostMenuActions';
-import usePostById, { getPostByIdKey } from '../hooks/usePostById';
+import usePostById, {
+  getPostByIdKey,
+  invalidatePostCacheById,
+} from '../hooks/usePostById';
 import { useLazyModal } from '../hooks/useLazyModal';
 import { LazyModal } from './modals/common/types';
 import { labels } from '../lib';
@@ -63,7 +66,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';
@@ -91,6 +97,26 @@ export interface PostOptionsMenuProps {
   allowPin?: boolean;
 }
 
+const getBlockLabel = (
+  name: string,
+  { isCustomFeed, isBlocked }: Record<'isCustomFeed' | 'isBlocked', boolean>,
+) => {
+  const blockLabel = {
+    global: {
+      block: `Block ${name}`,
+      unblock: `Unblock ${name}`,
+    },
+    feed: {
+      block: `Remove ${name} from this feed`,
+      unblock: `Add ${name} to this feed`,
+    },
+  };
+
+  return blockLabel[isCustomFeed ? 'feed' : 'global'][
+    isBlocked ? 'unblock' : 'block'
+  ];
+};
+
 export default function PostOptionsMenu({
   postIndex,
   post: initialPost,
@@ -135,8 +161,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, block } = useContentPreference();
   const { openModal } = useLazyModal();
 
   const {
@@ -156,6 +181,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 +483,7 @@ export default function PostOptionsMenu({
   const shouldShowFollow =
     !useIsSpecialUser({ userId: post?.author?.id }) &&
     post?.author &&
+    !isBlockedAuthor &&
     isLoggedIn;
 
   if (shouldShowFollow) {
@@ -492,13 +520,67 @@ 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}`,
-    action: isSourceBlocked ? onUnblockSourceClick : onBlockSourceClick,
-  });
+  if (post?.source?.name) {
+    postOptions.push({
+      icon: <MenuIcon Icon={BlockIcon} />,
+      label: getBlockLabel(post.source.name, {
+        isCustomFeed,
+        isBlocked: isSourceBlocked,
+      }),
+      action: isSourceBlocked ? onUnblockSourceClick : onBlockSourceClick,
+    });
+  }
+
+  if (post?.author && post?.author?.id !== user?.id) {
+    postOptions.push({
+      icon: <MenuIcon Icon={BlockIcon} />,
+      label: getBlockLabel(post.author.name, {
+        isCustomFeed,
+        isBlocked: isBlockedAuthor,
+      }),
+      action: async () => {
+        const params = {
+          id: post.author.id,
+          entity: ContentPreferenceType.User,
+          entityName: post.author.name,
+          feedId: router.query.slugOrId ? `${router.query.slugOrId}` : null,
+        };
+
+        if (isBlockedAuthor) {
+          await unblock(params);
+        } else {
+          await block({
+            ...params,
+            opts: {
+              hideToast: true,
+            },
+          });
+
+          await showMessageAndRemovePost(
+            `🚫 ${post.author.name} has been ${
+              isCustomFeed ? 'removed' : 'blocked'
+            }`,
+            postIndex,
+            () => unblock(params),
+          );
+        }
+
+        client.invalidateQueries({
+          queryKey: generateQueryKey(
+            RequestKey.ContentPreference,
+            user,
+            RequestKey.UserBlocked,
+            {
+              feedId: customFeedId || user?.id,
+              entity: ContentPreferenceType.User,
+            },
+          ),
+        });
+
+        invalidatePostCacheById(client, post.id);
+      },
+    });
+  }
 
   if (video && isVideoPost(post)) {
     const isEnabled = checkSettingsEnabledState(video.id);

packages/shared/src/components/auth/RegistrationForm.tsx

@@ -28,6 +28,7 @@ import { onValidateHandles } from '../../hooks/useProfileForm';
 import ExperienceLevelDropdown from '../profile/ExperienceLevelDropdown';
 import { LanguageDropdown } from '../profile/LanguageDropdown';
 import Alert, { AlertType } from '../widgets/Alert';
+import { isDevelopment } from '../../lib/constants';
 
 export interface RegistrationFormProps extends AuthFormProps {
   email: string;
@@ -162,7 +163,9 @@ const RegistrationForm = ({
       ...values,
       'traits.acceptedMarketing': !optOutMarketing,
       headers: {
-        'True-Client-Ip': ref?.current?.getResponse(),
+        'True-Client-Ip': isDevelopment
+          ? undefined
+          : ref?.current?.getResponse(),
       },
     });
   };

packages/shared/src/components/comments/CommentActionButtons.tsx

@@ -12,6 +12,7 @@ import {
   FlagIcon,
   DownvoteIcon,
   AddUserIcon,
+  BlockIcon,
 } from '../icons';
 import type { Comment } from '../../graphql/comments';
 import { Roles } from '../../lib/user';
@@ -38,7 +39,7 @@ import { labels, largeNumberFormat } from '../../lib';
 import { useToastNotification } from '../../hooks/useToastNotification';
 import type { VoteEntityPayload } from '../../hooks';
 import { useVoteComment, voteMutationHandlers } from '../../hooks';
-import { RequestKey } from '../../lib/query';
+import { generateQueryKey, RequestKey } from '../../lib/query';
 import { useRequestProtocol } from '../../hooks/useRequestProtocol';
 import { getCompanionWrapper } from '../../lib/extension';
 import { useContentPreference } from '../../hooks/contentPreference/useContentPreference';
@@ -89,7 +90,7 @@ export default function CommentActionButtons({
       userState: comment.userState,
     };
   });
-  const { follow, unfollow } = useContentPreference();
+  const { follow, unfollow, block, unblock } = useContentPreference();
 
   useEffect(() => {
     setVoteState({
@@ -176,6 +177,40 @@ export default function CommentActionButtons({
     });
   }
 
+  if (user && user.id !== comment.author.id) {
+    commentOptions.push({
+      icon: <BlockIcon />,
+      label: `Block ${comment.author.username}`,
+      action: async () => {
+        const params = {
+          id: comment.author.id,
+          entity: ContentPreferenceType.User,
+          entityName: comment.author.username,
+          feedId: user.id,
+          opts: {
+            hideToast: true,
+          },
+        };
+
+        await block(params);
+
+        const commentQueryKey = generateQueryKey(RequestKey.PostComments);
+        client.invalidateQueries({
+          queryKey: commentQueryKey,
+        });
+
+        displayToast(`🚫 ${comment.author.name} has been blocked`, {
+          onUndo: () => {
+            unblock(params);
+            client.invalidateQueries({
+              queryKey: commentQueryKey,
+            });
+          },
+        });
+      },
+    });
+  }
+
   const shouldShowFollow =
     !useIsSpecialUser({ userId: comment?.author?.id }) &&
     isLoggedIn &&