From bc6e20f42f858f728e99aa031d7b5181a4cc0f48 Mon Sep 17 00:00:00 2001 From: Amar Trebinjac Date: Fri, 17 Jan 2025 00:04:25 +0100 Subject: [PATCH 1/2] feat: Remove default add btn in advanced settings, add block btn on users --- .../components/BlockedUserList.tsx | 40 ++++++++++++++++++- 1 file changed, 38 insertions(+), 2 deletions(-) diff --git a/packages/shared/src/components/feeds/FeedSettings/components/BlockedUserList.tsx b/packages/shared/src/components/feeds/FeedSettings/components/BlockedUserList.tsx index d60ce7ed72..49d09301c7 100644 --- a/packages/shared/src/components/feeds/FeedSettings/components/BlockedUserList.tsx +++ b/packages/shared/src/components/feeds/FeedSettings/components/BlockedUserList.tsx @@ -1,13 +1,18 @@ import type { ReactElement } from 'react'; import React, { useMemo } from 'react'; import { useFeedSettingsEditContext } from '../FeedSettingsEditContext'; -import { ContentPreferenceType } from '../../../../graphql/contentPreference'; +import { + ContentPreferenceStatus, + ContentPreferenceType, +} from '../../../../graphql/contentPreference'; import UserList from '../../../profile/UserList'; import { checkFetchMore } from '../../../containers/InfiniteScrolling'; import { Origin } from '../../../../lib/log'; import { CopyType } from '../../../sources/SourceActions/SourceActionsFollow'; import { useBlockedQuery } from '../../../../hooks/contentPreference/useBlockedQuery'; import { anchorDefaultRel } from '../../../../lib/strings'; +import { Button, ButtonSize, ButtonVariant } from '../../../buttons/Button'; +import { useContentPreference } from '../../../../hooks/contentPreference/useContentPreference'; type BlockedUserListProps = { searchQuery?: string; @@ -16,6 +21,7 @@ type BlockedUserListProps = { export const BlockedUserList = ({ searchQuery, }: BlockedUserListProps): ReactElement => { + const { block, unblock } = useContentPreference(); const { feed } = useFeedSettingsEditContext(); const queryResult = useBlockedQuery({ @@ -52,9 +58,39 @@ export const BlockedUserList = ({ canFetchMore: checkFetchMore(queryResult), fetchNextPage, }} + additionalContent={(user) => ( + + )} userInfoProps={{ origin: Origin.BlockedFilter, - showFollow: true, + showFollow: false, showSubscribe: false, copyType: CopyType.Custom, feedId: feed.id, From a07fc2e7310aee788ab50c44852be7bd5b3c894b Mon Sep 17 00:00:00 2001 From: Amar Trebinjac Date: Fri, 17 Jan 2025 01:24:06 +0100 Subject: [PATCH 2/2] make reusable component --- .../contentPreference/BlockButton.tsx | 58 +++++++++++++++++++ .../components/BlockedSourceList.tsx | 2 + .../components/BlockedTagList.tsx | 2 + .../components/BlockedUserList.tsx | 44 +++----------- .../src/components/profile/SourceList.tsx | 34 ++++++++--- .../shared/src/components/profile/TagList.tsx | 34 ++++++++--- 6 files changed, 121 insertions(+), 53 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 ( + + ); +}; + +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 49d09301c7..ed43f27adf 100644 --- a/packages/shared/src/components/feeds/FeedSettings/components/BlockedUserList.tsx +++ b/packages/shared/src/components/feeds/FeedSettings/components/BlockedUserList.tsx @@ -1,18 +1,14 @@ import type { ReactElement } from 'react'; import React, { useMemo } from 'react'; import { useFeedSettingsEditContext } from '../FeedSettingsEditContext'; -import { - ContentPreferenceStatus, - ContentPreferenceType, -} from '../../../../graphql/contentPreference'; +import { ContentPreferenceType } from '../../../../graphql/contentPreference'; import UserList from '../../../profile/UserList'; import { checkFetchMore } from '../../../containers/InfiniteScrolling'; import { Origin } from '../../../../lib/log'; import { CopyType } from '../../../sources/SourceActions/SourceActionsFollow'; import { useBlockedQuery } from '../../../../hooks/contentPreference/useBlockedQuery'; import { anchorDefaultRel } from '../../../../lib/strings'; -import { Button, ButtonSize, ButtonVariant } from '../../../buttons/Button'; -import { useContentPreference } from '../../../../hooks/contentPreference/useContentPreference'; +import BlockButton from '../../../contentPreference/BlockButton'; type BlockedUserListProps = { searchQuery?: string; @@ -21,7 +17,6 @@ type BlockedUserListProps = { export const BlockedUserList = ({ searchQuery, }: BlockedUserListProps): ReactElement => { - const { block, unblock } = useContentPreference(); const { feed } = useFeedSettingsEditContext(); const queryResult = useBlockedQuery({ @@ -59,34 +54,13 @@ export const BlockedUserList = ({ fetchNextPage, }} additionalContent={(user) => ( - + )} userInfoProps={{ origin: Origin.BlockedFilter, 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; @@ -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} - + {showBlock && ( + + )} + {showFollow && ( + + )} ))} 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; @@ -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} - + {showBlock && ( + + )} + {showFollow && ( + + )} ))}