Merge branch '2011-link-in-feeds-tab-bar' of https://github.com/CooperEdmunds/social-app into CooperEdmunds-2011-link-in-feeds-tab-bar

zio/stable
Paul Frazee 2023-11-29 17:35:57 -08:00
commit 4c7b9652db
10 changed files with 101 additions and 14 deletions

View File

@ -4,7 +4,7 @@ import {openApp, loginAsAlice, createServer} from '../util'
describe('Home screen', () => { describe('Home screen', () => {
beforeAll(async () => { beforeAll(async () => {
await createServer('?users&follows&posts') await createServer('?users&follows&posts&feeds')
await openApp({permissions: {notifications: 'YES'}}) await openApp({permissions: {notifications: 'YES'}})
}) })
@ -13,6 +13,23 @@ describe('Home screen', () => {
await element(by.id('homeScreenFeedTabs-Following')).tap() await element(by.id('homeScreenFeedTabs-Following')).tap()
}) })
it('Can go to feeds page using feeds button in tab bar', async () => {
await element(by.id('homeScreenFeedTabs-Feeds ✨')).tap()
await expect(element(by.text('Discover new feeds'))).toBeVisible()
})
it('Feeds button disappears after pinning a feed', async () => {
await element(by.id('bottomBarProfileBtn')).tap()
await element(by.id('profilePager-selector')).swipe('left')
await element(by.id('profilePager-selector-4')).tap()
await element(by.id('feed-alice-favs')).tap()
await element(by.id('pinBtn')).tap()
await element(by.id('bottomBarHomeBtn')).tap()
await expect(
element(by.id('homeScreenFeedTabs-Feeds ✨')),
).not.toBeVisible()
})
it('Can like posts', async () => { it('Can like posts', async () => {
const carlaPosts = by.id('feedItem-by-carla.test') const carlaPosts = by.id('feedItem-by-carla.test')
await expect( await expect(
@ -65,14 +82,14 @@ describe('Home screen', () => {
it('Can swipe between feeds', async () => { it('Can swipe between feeds', async () => {
await element(by.id('homeScreen')).swipe('left', 'fast', 0.75) await element(by.id('homeScreen')).swipe('left', 'fast', 0.75)
await expect(element(by.id('whatshotFeedPage'))).toBeVisible() await expect(element(by.id('customFeedPage'))).toBeVisible()
await element(by.id('homeScreen')).swipe('right', 'fast', 0.75) await element(by.id('homeScreen')).swipe('right', 'fast', 0.75)
await expect(element(by.id('followingFeedPage'))).toBeVisible() await expect(element(by.id('followingFeedPage'))).toBeVisible()
}) })
it('Can tap between feeds', async () => { it('Can tap between feeds', async () => {
await element(by.id("homeScreenFeedTabs-What's hot")).tap() await element(by.id('homeScreenFeedTabs-alice-favs')).tap()
await expect(element(by.id('whatshotFeedPage'))).toBeVisible() await expect(element(by.id('customFeedPage'))).toBeVisible()
await element(by.id('homeScreenFeedTabs-Following')).tap() await element(by.id('homeScreenFeedTabs-Following')).tap()
await expect(element(by.id('followingFeedPage'))).toBeVisible() await expect(element(by.id('followingFeedPage'))).toBeVisible()
}) })

View File

@ -116,8 +116,8 @@ export async function DEFAULT_FEEDS(
} else { } else {
// production // production
return { return {
pinned: [PROD_DEFAULT_FEED('whats-hot')], pinned: [],
saved: [PROD_DEFAULT_FEED('whats-hot')], saved: [],
} }
} }
} }

View File

@ -246,13 +246,20 @@ const FOLLOWING_FEED_STUB: FeedSourceInfo = {
likeUri: '', likeUri: '',
} }
export function usePinnedFeedsInfos(): FeedSourceInfo[] { export function usePinnedFeedsInfos(): {
feeds: FeedSourceInfo[]
hasPinnedCustomFeedOrList: boolean
} {
const queryClient = useQueryClient() const queryClient = useQueryClient()
const [tabs, setTabs] = React.useState<FeedSourceInfo[]>([ const [tabs, setTabs] = React.useState<FeedSourceInfo[]>([
FOLLOWING_FEED_STUB, FOLLOWING_FEED_STUB,
]) ])
const {data: preferences} = usePreferencesQuery() const {data: preferences} = usePreferencesQuery()
const hasPinnedCustomFeedOrList = React.useMemo<boolean>(() => {
return tabs.some(tab => tab !== FOLLOWING_FEED_STUB)
}, [tabs])
React.useEffect(() => { React.useEffect(() => {
if (!preferences?.feeds?.pinned) return if (!preferences?.feeds?.pinned) return
const uris = preferences.feeds.pinned const uris = preferences.feeds.pinned
@ -300,5 +307,5 @@ export function usePinnedFeedsInfos(): FeedSourceInfo[] {
fetchFeedInfo() fetchFeedInfo()
}, [queryClient, setTabs, preferences?.feeds?.pinned]) }, [queryClient, setTabs, preferences?.feeds?.pinned])
return tabs return {feeds: tabs, hasPinnedCustomFeedOrList}
} }

View File

@ -12,6 +12,9 @@ import {usePinnedFeedsInfos} from '#/state/queries/feed'
import {useSession} from '#/state/session' import {useSession} from '#/state/session'
import {TextLink} from '#/view/com/util/Link' import {TextLink} from '#/view/com/util/Link'
import {CenteredView} from '../util/Views' import {CenteredView} from '../util/Views'
import {isWeb} from 'platform/detection'
import {useNavigation} from '@react-navigation/native'
import {NavigationProp} from 'lib/routes/types'
export function FeedsTabBar( export function FeedsTabBar(
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void}, props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
@ -79,12 +82,37 @@ function FeedsTabBarPublic() {
function FeedsTabBarTablet( function FeedsTabBarTablet(
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void}, props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
) { ) {
const feeds = usePinnedFeedsInfos() const {feeds, hasPinnedCustomFeedOrList} = usePinnedFeedsInfos()
const pal = usePalette('default') const pal = usePalette('default')
const {hasSession} = useSession() const {hasSession} = useSession()
const navigation = useNavigation<NavigationProp>()
const {headerMinimalShellTransform} = useMinimalShellMode() const {headerMinimalShellTransform} = useMinimalShellMode()
const {headerHeight} = useShellLayout() const {headerHeight} = useShellLayout()
const items = hasSession ? feeds.map(f => f.displayName) : [] const pinnedDisplayNames = hasSession ? feeds.map(f => f.displayName) : []
const showFeedsLinkInTabBar = hasSession && !hasPinnedCustomFeedOrList
const items = showFeedsLinkInTabBar
? pinnedDisplayNames.concat('Feeds ✨')
: pinnedDisplayNames
const onPressDiscoverFeeds = React.useCallback(() => {
if (isWeb) {
navigation.navigate('Feeds')
} else {
navigation.navigate('FeedsTab')
navigation.popToTop()
}
}, [navigation])
const onSelect = React.useCallback(
(index: number) => {
if (showFeedsLinkInTabBar && index === items.length - 1) {
onPressDiscoverFeeds()
} else if (props.onSelect) {
props.onSelect(index)
}
},
[items.length, onPressDiscoverFeeds, props, showFeedsLinkInTabBar],
)
return ( return (
// @ts-ignore the type signature for transform wrong here, translateX and translateY need to be in separate objects -prf // @ts-ignore the type signature for transform wrong here, translateX and translateY need to be in separate objects -prf
@ -96,6 +124,7 @@ function FeedsTabBarTablet(
<TabBar <TabBar
key={items.join(',')} key={items.join(',')}
{...props} {...props}
onSelect={onSelect}
items={items} items={items}
indicatorColor={pal.colors.link} indicatorColor={pal.colors.link}
/> />

View File

@ -18,6 +18,9 @@ import {useSetDrawerOpen} from '#/state/shell/drawer-open'
import {useShellLayout} from '#/state/shell/shell-layout' import {useShellLayout} from '#/state/shell/shell-layout'
import {useSession} from '#/state/session' import {useSession} from '#/state/session'
import {usePinnedFeedsInfos} from '#/state/queries/feed' import {usePinnedFeedsInfos} from '#/state/queries/feed'
import {isWeb} from 'platform/detection'
import {useNavigation} from '@react-navigation/native'
import {NavigationProp} from 'lib/routes/types'
export function FeedsTabBar( export function FeedsTabBar(
props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void}, props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
@ -26,11 +29,36 @@ export function FeedsTabBar(
const {isSandbox, hasSession} = useSession() const {isSandbox, hasSession} = useSession()
const {_} = useLingui() const {_} = useLingui()
const setDrawerOpen = useSetDrawerOpen() const setDrawerOpen = useSetDrawerOpen()
const feeds = usePinnedFeedsInfos() const navigation = useNavigation<NavigationProp>()
const {feeds, hasPinnedCustomFeedOrList} = usePinnedFeedsInfos()
const brandBlue = useColorSchemeStyle(s.brandBlue, s.blue3) const brandBlue = useColorSchemeStyle(s.brandBlue, s.blue3)
const {headerHeight} = useShellLayout() const {headerHeight} = useShellLayout()
const {headerMinimalShellTransform} = useMinimalShellMode() const {headerMinimalShellTransform} = useMinimalShellMode()
const items = hasSession ? feeds.map(f => f.displayName) : [] const pinnedDisplayNames = hasSession ? feeds.map(f => f.displayName) : []
const showFeedsLinkInTabBar = hasSession && !hasPinnedCustomFeedOrList
const items = showFeedsLinkInTabBar
? pinnedDisplayNames.concat('Feeds ✨')
: pinnedDisplayNames
const onPressFeedsLink = React.useCallback(() => {
if (isWeb) {
navigation.navigate('Feeds')
} else {
navigation.navigate('FeedsTab')
navigation.popToTop()
}
}, [navigation])
const onSelect = React.useCallback(
(index: number) => {
if (showFeedsLinkInTabBar && index === items.length - 1) {
onPressFeedsLink()
} else if (props.onSelect) {
props.onSelect(index)
}
},
[items.length, onPressFeedsLink, props, showFeedsLinkInTabBar],
)
const onPressAvi = React.useCallback(() => { const onPressAvi = React.useCallback(() => {
setDrawerOpen(true) setDrawerOpen(true)
@ -84,7 +112,7 @@ export function FeedsTabBar(
key={items.join(',')} key={items.join(',')}
onPressSelected={props.onPressSelected} onPressSelected={props.onPressSelected}
selectedPage={props.selectedPage} selectedPage={props.selectedPage}
onSelect={props.onSelect} onSelect={onSelect}
testID={props.testID} testID={props.testID}
items={items} items={items}
indicatorColor={pal.colors.link} indicatorColor={pal.colors.link}

View File

@ -108,6 +108,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
pointerEvents: isHeaderReady ? 'auto' : 'none', pointerEvents: isHeaderReady ? 'auto' : 'none',
}}> }}>
<TabBar <TabBar
testID={testID}
items={items} items={items}
selectedPage={currentPage} selectedPage={currentPage}
onSelect={props.onSelect} onSelect={props.onSelect}
@ -127,6 +128,7 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
isMobile, isMobile,
onTabBarLayout, onTabBarLayout,
onHeaderOnlyLayout, onHeaderOnlyLayout,
testID,
], ],
) )

View File

@ -68,6 +68,7 @@ export function TabBar({
return ( return (
<View testID={testID} style={[pal.view, styles.outer]}> <View testID={testID} style={[pal.view, styles.outer]}>
<DraggableScrollView <DraggableScrollView
testID={`${testID}-selector`}
horizontal={true} horizontal={true}
showsHorizontalScrollIndicator={false} showsHorizontalScrollIndicator={false}
ref={scrollElRef} ref={scrollElRef}
@ -76,6 +77,7 @@ export function TabBar({
const selected = i === selectedPage const selected = i === selectedPage
return ( return (
<PressableWithHover <PressableWithHover
testID={`${testID}-selector-${i}`}
key={item} key={item}
onLayout={e => onItemLayout(e, i)} onLayout={e => onItemLayout(e, i)}
style={[styles.item, selected && indicatorStyle]} style={[styles.item, selected && indicatorStyle]}

View File

@ -267,6 +267,7 @@ function ProfileScreenLoaded({
screenDescription="profile" screenDescription="profile"
moderation={moderation.account}> moderation={moderation.account}>
<PagerWithHeader <PagerWithHeader
testID="profilePager"
isHeaderReady={true} isHeaderReady={true}
items={sectionTitles} items={sectionTitles}
onPageSelected={onPageSelected} onPageSelected={onPageSelected}

View File

@ -353,6 +353,7 @@ export function ProfileFeedScreenInner({
style={styles.btn} style={styles.btn}
/> />
<Button <Button
testID={isPinned ? 'unpinBtn' : 'pinBtn'}
disabled={isPinPending || isUnpinPending} disabled={isPinPending || isUnpinPending}
type={isPinned ? 'default' : 'inverted'} type={isPinned ? 'default' : 'inverted'}
label={isPinned ? 'Unpin' : 'Pin to home'} label={isPinned ? 'Unpin' : 'Pin to home'}

View File

@ -11,7 +11,7 @@ import {usePinnedFeedsInfos} from '#/state/queries/feed'
export function DesktopFeeds() { export function DesktopFeeds() {
const pal = usePalette('default') const pal = usePalette('default')
const {_} = useLingui() const {_} = useLingui()
const feeds = usePinnedFeedsInfos() const {feeds} = usePinnedFeedsInfos()
const route = useNavigationState(state => { const route = useNavigationState(state => {
if (!state) { if (!state) {