From f783008ca85e73eb8e357a68e5df9251d7d5c83c Mon Sep 17 00:00:00 2001
From: Amar Trebinjac <36768584+AmarTrebinjac@users.noreply.github.com>
Date: Fri, 17 Jan 2025 14:07:51 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20Remove=20default=20add=20btn=20in=20adv?=
 =?UTF-8?q?anced=20settings,=20add=20block=20btn=20on=20u=E2=80=A6=20(#407?=
 =?UTF-8?q?5)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: Remove default add btn in advanced settings, add block btn on users

* make reusable component
---
 .../contentPreference/BlockButton.tsx         | 58 +++++++++++++++++++
 .../components/BlockedSourceList.tsx          |  2 +
 .../components/BlockedTagList.tsx             |  2 +
 .../components/BlockedUserList.tsx            | 12 +++-
 .../src/components/profile/SourceList.tsx     | 34 ++++++++---
 .../shared/src/components/profile/TagList.tsx | 34 ++++++++---
 6 files changed, 123 insertions(+), 19 deletions(-)
 create mode 100644 packages/shared/src/components/contentPreference/BlockButton.tsx

diff --git a/packages/shared/src/components/contentPreference/BlockButton.tsx b/packages/shared/src/components/contentPreference/BlockButton.tsx
new file mode 100644
index 0000000000..b2b9df1021
--- /dev/null
+++ b/packages/shared/src/components/contentPreference/BlockButton.tsx
@@ -0,0 +1,58 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { ContentPreferenceType } from '../../graphql/contentPreference';
+import { ContentPreferenceStatus } from '../../graphql/contentPreference';
+import { Button } from '../buttons/Button';
+import { ButtonVariant, ButtonSize } from '../buttons/common';
+import { useContentPreference } from '../../hooks/contentPreference/useContentPreference';
+
+type BlockButtonProps = {
+  feedId: string;
+  entityId: string;
+  entityName: string;
+  status?: ContentPreferenceStatus;
+  entityType: ContentPreferenceType;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+};
+
+const BlockButton = ({
+  variant = ButtonVariant.Secondary,
+  size = ButtonSize.Small,
+  feedId,
+  entityId,
+  entityName,
+  entityType,
+  status,
+}: BlockButtonProps): ReactElement => {
+  const { block, unblock } = useContentPreference();
+
+  return (
+    <Button
+      onClick={(e) => {
+        e.preventDefault();
+        if (status === ContentPreferenceStatus.Blocked) {
+          unblock({
+            id: entityId,
+            entity: entityType,
+            entityName,
+            feedId,
+          });
+        } else {
+          block({
+            id: entityId,
+            entity: entityType,
+            entityName,
+            feedId,
+          });
+        }
+      }}
+      variant={variant}
+      size={size}
+    >
+      {status === ContentPreferenceStatus.Blocked ? 'Unblock' : 'Block'}
+    </Button>
+  );
+};
+
+export default BlockButton;
diff --git a/packages/shared/src/components/feeds/FeedSettings/components/BlockedSourceList.tsx b/packages/shared/src/components/feeds/FeedSettings/components/BlockedSourceList.tsx
index 1240f9ad12..3cc30401e8 100644
--- a/packages/shared/src/components/feeds/FeedSettings/components/BlockedSourceList.tsx
+++ b/packages/shared/src/components/feeds/FeedSettings/components/BlockedSourceList.tsx
@@ -58,6 +58,8 @@ export const BlockedSourceList = ({
         canFetchMore: checkFetchMore(queryResult),
         fetchNextPage,
       }}
+      showBlock
+      showFollow={false}
     />
   );
 };
diff --git a/packages/shared/src/components/feeds/FeedSettings/components/BlockedTagList.tsx b/packages/shared/src/components/feeds/FeedSettings/components/BlockedTagList.tsx
index 15faf8f3f1..f7ea7c51cc 100644
--- a/packages/shared/src/components/feeds/FeedSettings/components/BlockedTagList.tsx
+++ b/packages/shared/src/components/feeds/FeedSettings/components/BlockedTagList.tsx
@@ -51,6 +51,8 @@ export const BlockedTagList = ({
         canFetchMore: checkFetchMore(queryResult),
         fetchNextPage,
       }}
+      showBlock
+      showFollow={false}
     />
   );
 };
diff --git a/packages/shared/src/components/feeds/FeedSettings/components/BlockedUserList.tsx b/packages/shared/src/components/feeds/FeedSettings/components/BlockedUserList.tsx
index d60ce7ed72..ed43f27adf 100644
--- a/packages/shared/src/components/feeds/FeedSettings/components/BlockedUserList.tsx
+++ b/packages/shared/src/components/feeds/FeedSettings/components/BlockedUserList.tsx
@@ -8,6 +8,7 @@ import { Origin } from '../../../../lib/log';
 import { CopyType } from '../../../sources/SourceActions/SourceActionsFollow';
 import { useBlockedQuery } from '../../../../hooks/contentPreference/useBlockedQuery';
 import { anchorDefaultRel } from '../../../../lib/strings';
+import BlockButton from '../../../contentPreference/BlockButton';
 
 type BlockedUserListProps = {
   searchQuery?: string;
@@ -52,9 +53,18 @@ export const BlockedUserList = ({
         canFetchMore: checkFetchMore(queryResult),
         fetchNextPage,
       }}
+      additionalContent={(user) => (
+        <BlockButton
+          feedId={feed.id}
+          entityId={user.id}
+          entityName={user.name}
+          entityType={ContentPreferenceType.User}
+          status={user.contentPreference.status}
+        />
+      )}
       userInfoProps={{
         origin: Origin.BlockedFilter,
-        showFollow: true,
+        showFollow: false,
         showSubscribe: false,
         copyType: CopyType.Custom,
         feedId: feed.id,
diff --git a/packages/shared/src/components/profile/SourceList.tsx b/packages/shared/src/components/profile/SourceList.tsx
index 9420ff49fc..9ec7c0c4f0 100644
--- a/packages/shared/src/components/profile/SourceList.tsx
+++ b/packages/shared/src/components/profile/SourceList.tsx
@@ -20,6 +20,7 @@ import { SourceListPlaceholder } from './SourceListPlaceholder';
 import { webappUrl } from '../../lib/constants';
 import Link from '../utilities/Link';
 import { anchorDefaultRel } from '../../lib/strings';
+import BlockButton from '../contentPreference/BlockButton';
 
 export interface SourceListProps {
   scrollingProps: Omit<InfiniteScrollingProps, 'children'>;
@@ -27,6 +28,8 @@ export interface SourceListProps {
   placeholderAmount?: number;
   isLoading?: boolean;
   emptyPlaceholder?: JSX.Element;
+  showFollow?: boolean;
+  showBlock?: boolean;
 }
 
 export const SourceList = ({
@@ -35,6 +38,8 @@ export const SourceList = ({
   sources,
   isLoading,
   emptyPlaceholder,
+  showFollow = true,
+  showBlock,
 }: SourceListProps): ReactElement => {
   const feedSettingsEditContext = useFeedSettingsEditContext();
   const feed = feedSettingsEditContext?.feed;
@@ -107,15 +112,26 @@ export const SourceList = ({
                   {source.description}
                 </Typography>
               </div>
-              <FollowButton
-                feedId={feed?.id}
-                entityId={source.id}
-                type={ContentPreferenceType.Source}
-                status={source.contentPreference.status}
-                entityName={`@${source.handle}`}
-                showSubscribe={false}
-                copyType={CopyType.Custom}
-              />
+              {showBlock && (
+                <BlockButton
+                  feedId={feed?.id}
+                  entityId={source.id}
+                  entityName={`@${source.handle}`}
+                  entityType={ContentPreferenceType.Source}
+                  status={source.contentPreference.status}
+                />
+              )}
+              {showFollow && (
+                <FollowButton
+                  feedId={feed?.id}
+                  entityId={source.id}
+                  type={ContentPreferenceType.Source}
+                  status={source.contentPreference.status}
+                  entityName={`@${source.handle}`}
+                  showSubscribe={false}
+                  copyType={CopyType.Custom}
+                />
+              )}
             </a>
           </Link>
         ))}
diff --git a/packages/shared/src/components/profile/TagList.tsx b/packages/shared/src/components/profile/TagList.tsx
index 4de97d1d76..1b33baac6c 100644
--- a/packages/shared/src/components/profile/TagList.tsx
+++ b/packages/shared/src/components/profile/TagList.tsx
@@ -13,6 +13,7 @@ import { FollowButton } from '../contentPreference/FollowButton';
 import { useFeedSettingsEditContext } from '../feeds/FeedSettings/FeedSettingsEditContext';
 import { CopyType } from '../sources/SourceActions/SourceActionsFollow';
 import { TagListPlaceholder } from './TagListPlaceholder';
+import BlockButton from '../contentPreference/BlockButton';
 
 export interface TagListProps {
   scrollingProps: Omit<InfiniteScrollingProps, 'children'>;
@@ -20,6 +21,8 @@ export interface TagListProps {
   placeholderAmount?: number;
   isLoading?: boolean;
   emptyPlaceholder?: JSX.Element;
+  showBlock?: boolean;
+  showFollow?: boolean;
 }
 
 export const TagList = ({
@@ -28,6 +31,8 @@ export const TagList = ({
   tags,
   isLoading,
   emptyPlaceholder,
+  showBlock = false,
+  showFollow = true,
 }: TagListProps): ReactElement => {
   const feedSettingsEditContext = useFeedSettingsEditContext();
   const feed = feedSettingsEditContext?.feed;
@@ -51,15 +56,26 @@ export const TagList = ({
             >
               #{tag.referenceId}
             </Typography>
-            <FollowButton
-              feedId={feed?.id}
-              entityId={tag.referenceId}
-              type={ContentPreferenceType.Keyword}
-              status={tag.status}
-              entityName={`@${tag.referenceId}`}
-              showSubscribe={false}
-              copyType={CopyType.Custom}
-            />
+            {showBlock && (
+              <BlockButton
+                feedId={feed?.id}
+                entityId={tag.referenceId}
+                entityName={`@${tag.referenceId}`}
+                entityType={ContentPreferenceType.Keyword}
+                status={tag.status}
+              />
+            )}
+            {showFollow && (
+              <FollowButton
+                feedId={feed?.id}
+                entityId={tag.referenceId}
+                type={ContentPreferenceType.Keyword}
+                status={tag.status}
+                entityName={`@${tag.referenceId}`}
+                showSubscribe={false}
+                copyType={CopyType.Custom}
+              />
+            )}
           </div>
         ))}
       </InfiniteScrolling>