prevent duplicate keys in feed tab bar (#2666)

zio/stable
Hailey 2024-01-30 17:54:29 -08:00 committed by GitHub
parent faf48db679
commit 28455f49dc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 27 additions and 15 deletions

View File

@ -88,11 +88,17 @@ function FeedsTabBarTablet(
const navigation = useNavigation<NavigationProp>() const navigation = useNavigation<NavigationProp>()
const {headerMinimalShellTransform} = useMinimalShellMode() const {headerMinimalShellTransform} = useMinimalShellMode()
const {headerHeight} = useShellLayout() const {headerHeight} = useShellLayout()
const pinnedDisplayNames = hasSession ? feeds.map(f => f.displayName) : []
const showFeedsLinkInTabBar = hasSession && !hasPinnedCustom const items = React.useMemo(() => {
const items = showFeedsLinkInTabBar if (!hasSession) return []
? pinnedDisplayNames.concat('Feeds ✨')
: pinnedDisplayNames const pinnedNames = feeds.map(f => f.displayName)
if (!hasPinnedCustom) {
return pinnedNames.concat('Feeds ✨')
}
return pinnedNames
}, [hasSession, hasPinnedCustom, feeds])
const onPressDiscoverFeeds = React.useCallback(() => { const onPressDiscoverFeeds = React.useCallback(() => {
if (isWeb) { if (isWeb) {
@ -105,13 +111,13 @@ function FeedsTabBarTablet(
const onSelect = React.useCallback( const onSelect = React.useCallback(
(index: number) => { (index: number) => {
if (showFeedsLinkInTabBar && index === items.length - 1) { if (hasSession && !hasPinnedCustom && index === items.length - 1) {
onPressDiscoverFeeds() onPressDiscoverFeeds()
} else if (props.onSelect) { } else if (props.onSelect) {
props.onSelect(index) props.onSelect(index)
} }
}, },
[items.length, onPressDiscoverFeeds, props, showFeedsLinkInTabBar], [items.length, onPressDiscoverFeeds, props, hasSession, hasPinnedCustom],
) )
return ( return (

View File

@ -36,11 +36,17 @@ export function FeedsTabBar(
const {feeds, hasPinnedCustom} = usePinnedFeedsInfos() const {feeds, hasPinnedCustom} = usePinnedFeedsInfos()
const {headerHeight} = useShellLayout() const {headerHeight} = useShellLayout()
const {headerMinimalShellTransform} = useMinimalShellMode() const {headerMinimalShellTransform} = useMinimalShellMode()
const pinnedDisplayNames = hasSession ? feeds.map(f => f.displayName) : []
const showFeedsLinkInTabBar = hasSession && !hasPinnedCustom const items = React.useMemo(() => {
const items = showFeedsLinkInTabBar if (!hasSession) return []
? pinnedDisplayNames.concat('Feeds ✨')
: pinnedDisplayNames const pinnedNames = feeds.map(f => f.displayName)
if (!hasPinnedCustom) {
return pinnedNames.concat('Feeds ✨')
}
return pinnedNames
}, [hasSession, hasPinnedCustom, feeds])
const onPressFeedsLink = React.useCallback(() => { const onPressFeedsLink = React.useCallback(() => {
if (isWeb) { if (isWeb) {
@ -53,13 +59,13 @@ export function FeedsTabBar(
const onSelect = React.useCallback( const onSelect = React.useCallback(
(index: number) => { (index: number) => {
if (showFeedsLinkInTabBar && index === items.length - 1) { if (hasSession && !hasPinnedCustom && index === items.length - 1) {
onPressFeedsLink() onPressFeedsLink()
} else if (props.onSelect) { } else if (props.onSelect) {
props.onSelect(index) props.onSelect(index)
} }
}, },
[items.length, onPressFeedsLink, props, showFeedsLinkInTabBar], [items.length, onPressFeedsLink, props, hasSession, hasPinnedCustom],
) )
const onPressAvi = React.useCallback(() => { const onPressAvi = React.useCallback(() => {

View File

@ -78,7 +78,7 @@ export function TabBar({
return ( return (
<PressableWithHover <PressableWithHover
testID={`${testID}-selector-${i}`} testID={`${testID}-selector-${i}`}
key={item} key={`${item}-${i}`}
onLayout={e => onItemLayout(e, i)} onLayout={e => onItemLayout(e, i)}
style={[styles.item, selected && indicatorStyle]} style={[styles.item, selected && indicatorStyle]}
hoverStyle={pal.viewLight} hoverStyle={pal.viewLight}