diff --git a/app/javascript/flavours/glitch/features/account_featured/components/empty_message.tsx b/app/javascript/flavours/glitch/features/account_featured/components/empty_message.tsx index 831971b84b..20da6d6a70 100644 --- a/app/javascript/flavours/glitch/features/account_featured/components/empty_message.tsx +++ b/app/javascript/flavours/glitch/features/account_featured/components/empty_message.tsx @@ -1,13 +1,18 @@ +import { useCallback } from 'react'; + import { FormattedMessage } from 'react-intl'; import { useParams } from 'react-router'; import { Link } from 'react-router-dom'; +import { openModal } from '@/flavours/glitch/actions/modal'; +import { Button } from '@/flavours/glitch/components/button'; import { EmptyState } from '@/flavours/glitch/components/empty_state'; import { LimitedAccountHint } from '@/flavours/glitch/features/account_timeline/components/limited_account_hint'; import { areCollectionsEnabled } from '@/flavours/glitch/features/collections/utils'; import { useCurrentAccountId } from '@/flavours/glitch/hooks/useAccountId'; import { useTheme } from '@/flavours/glitch/hooks/useTheme'; +import { useAppDispatch } from '@/flavours/glitch/store'; import ElephantDarkImage from '@/images/elephant_ui_dark.svg?react'; import ElephantLightImage from '@/images/elephant_ui_light.svg?react'; @@ -16,6 +21,7 @@ interface EmptyMessageProps { hidden: boolean; blockedBy: boolean; accountId?: string; + withImage?: boolean; } export const EmptyMessage: React.FC = ({ @@ -23,6 +29,7 @@ export const EmptyMessage: React.FC = ({ suspended, hidden, blockedBy, + withImage = true, }) => { const { acct } = useParams<{ acct?: string }>(); const me = useCurrentAccountId(); @@ -30,6 +37,17 @@ export const EmptyMessage: React.FC = ({ const ElephantImage = theme === 'dark' ? ElephantDarkImage : ElephantLightImage; + const dispatch = useAppDispatch(); + + const confirmHideFeaturedTab = useCallback(() => { + void dispatch( + openModal({ + modalType: 'ACCOUNT_HIDE_FEATURED_TAB', + modalProps: {}, + }), + ); + }, [dispatch]); + if (!accountId) { return null; } @@ -39,7 +57,7 @@ export const EmptyMessage: React.FC = ({ const hasCollections = areCollectionsEnabled(); - const image = ; + const image = withImage && ; if (me === accountId) { if (hasCollections) { @@ -66,6 +84,12 @@ export const EmptyMessage: React.FC = ({ defaultMessage='Create a collection' /> + ); } else { diff --git a/app/javascript/flavours/glitch/features/account_featured/index.tsx b/app/javascript/flavours/glitch/features/account_featured/index.tsx index 18443b4012..cb7d0944ff 100644 --- a/app/javascript/flavours/glitch/features/account_featured/index.tsx +++ b/app/javascript/flavours/glitch/features/account_featured/index.tsx @@ -35,6 +35,8 @@ import { areCollectionsEnabled } from '../collections/utils'; import { EmptyMessage } from './components/empty_message'; import { Subheading, SubheadingLink } from './components/subheading'; +const collectionsEnabled = areCollectionsEnabled(); + const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({ multiColumn, }) => { @@ -56,13 +58,12 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({ if (accountId) { void dispatch(fetchEndorsedAccounts({ accountId })); - if (areCollectionsEnabled()) { + if (collectionsEnabled) { void dispatch(fetchAccountCollections({ accountId })); } } }, [accountId, dispatch]); - const isLoading = !accountId; const featuredAccountIds = useAppSelector( (state) => state.user_lists.getIn( @@ -70,8 +71,8 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({ ImmutableList(), ) as ImmutableList, ); - const { collections, status } = useAppSelector((state) => - selectAccountCollections(state, accountId ?? null), + const { collections, status: collectionsLoadStatus } = useAppSelector( + (state) => selectAccountCollections(state, accountId ?? null), ); const listedCollections = collections.filter( // Hide unlisted and empty collections to avoid confusion @@ -80,6 +81,15 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({ (item) => item.discoverable && !!item.item_count, ); + const hasCollections = + collectionsEnabled && + collectionsLoadStatus === 'idle' && + listedCollections.length > 0; + + const hasFeaturedAccounts = !featuredAccountIds.isEmpty(); + + const isLoading = !accountId || collectionsLoadStatus !== 'idle'; + if (accountId === null) { return ; } @@ -94,7 +104,7 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({ ); } - if (featuredAccountIds.isEmpty() && listedCollections.length === 0) { + if (!hasFeaturedAccounts && !hasCollections) { return ( = ({ )} - {listedCollections.length > 0 && status === 'idle' && ( + {collectionsEnabled && ( <>

@@ -154,18 +164,28 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({ /> - - {listedCollections.map((item, index) => ( - - ))} - + {hasCollections ? ( + + {listedCollections.map((item, index) => ( + + ))} + + ) : ( +