diff --git a/src/view/com/pager/FeedsTabBar.web.tsx b/src/view/com/pager/FeedsTabBar.web.tsx index 385da55441..9fe03b7e9e 100644 --- a/src/view/com/pager/FeedsTabBar.web.tsx +++ b/src/view/com/pager/FeedsTabBar.web.tsx @@ -88,11 +88,17 @@ function FeedsTabBarTablet( const navigation = useNavigation() const {headerMinimalShellTransform} = useMinimalShellMode() const {headerHeight} = useShellLayout() - const pinnedDisplayNames = hasSession ? feeds.map(f => f.displayName) : [] - const showFeedsLinkInTabBar = hasSession && !hasPinnedCustom - const items = showFeedsLinkInTabBar - ? pinnedDisplayNames.concat('Feeds ✨') - : pinnedDisplayNames + + const items = React.useMemo(() => { + if (!hasSession) return [] + + const pinnedNames = feeds.map(f => f.displayName) + + if (!hasPinnedCustom) { + return pinnedNames.concat('Feeds ✨') + } + return pinnedNames + }, [hasSession, hasPinnedCustom, feeds]) const onPressDiscoverFeeds = React.useCallback(() => { if (isWeb) { @@ -105,13 +111,13 @@ function FeedsTabBarTablet( const onSelect = React.useCallback( (index: number) => { - if (showFeedsLinkInTabBar && index === items.length - 1) { + if (hasSession && !hasPinnedCustom && index === items.length - 1) { onPressDiscoverFeeds() } else if (props.onSelect) { props.onSelect(index) } }, - [items.length, onPressDiscoverFeeds, props, showFeedsLinkInTabBar], + [items.length, onPressDiscoverFeeds, props, hasSession, hasPinnedCustom], ) return ( diff --git a/src/view/com/pager/FeedsTabBarMobile.tsx b/src/view/com/pager/FeedsTabBarMobile.tsx index b9959a6d92..4eba241aed 100644 --- a/src/view/com/pager/FeedsTabBarMobile.tsx +++ b/src/view/com/pager/FeedsTabBarMobile.tsx @@ -36,11 +36,17 @@ export function FeedsTabBar( const {feeds, hasPinnedCustom} = usePinnedFeedsInfos() const {headerHeight} = useShellLayout() const {headerMinimalShellTransform} = useMinimalShellMode() - const pinnedDisplayNames = hasSession ? feeds.map(f => f.displayName) : [] - const showFeedsLinkInTabBar = hasSession && !hasPinnedCustom - const items = showFeedsLinkInTabBar - ? pinnedDisplayNames.concat('Feeds ✨') - : pinnedDisplayNames + + const items = React.useMemo(() => { + if (!hasSession) return [] + + const pinnedNames = feeds.map(f => f.displayName) + + if (!hasPinnedCustom) { + return pinnedNames.concat('Feeds ✨') + } + return pinnedNames + }, [hasSession, hasPinnedCustom, feeds]) const onPressFeedsLink = React.useCallback(() => { if (isWeb) { @@ -53,13 +59,13 @@ export function FeedsTabBar( const onSelect = React.useCallback( (index: number) => { - if (showFeedsLinkInTabBar && index === items.length - 1) { + if (hasSession && !hasPinnedCustom && index === items.length - 1) { onPressFeedsLink() } else if (props.onSelect) { props.onSelect(index) } }, - [items.length, onPressFeedsLink, props, showFeedsLinkInTabBar], + [items.length, onPressFeedsLink, props, hasSession, hasPinnedCustom], ) const onPressAvi = React.useCallback(() => { diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx index c3a95c5c06..dadcfcebd9 100644 --- a/src/view/com/pager/TabBar.tsx +++ b/src/view/com/pager/TabBar.tsx @@ -78,7 +78,7 @@ export function TabBar({ return ( onItemLayout(e, i)} style={[styles.item, selected && indicatorStyle]} hoverStyle={pal.viewLight}