feat: Remove default add btn in advanced settings, add block btn on u… (

#4075) * feat: Remove default add btn in advanced settings, add block btn on users * make reusable component
dailydotdev · Jan 17, 2025 · f783008 · f783008
1 parent fc15e64
commit f783008
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 19 deletions.
diff --git a/packages/shared/src/components/contentPreference/BlockButton.tsx 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
@@ -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
@@ -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
@@ -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
@@ -20,13 +20,16 @@ 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'>;
   sources: Source[];
   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
@@ -13,13 +13,16 @@ 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'>;
   tags: ContentPreference[];
   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>