acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Move feeds screen into common navigator, handle usages

Browse Source
This commit is contained in:
Eric Bailey
2024-06-04 16:45:32 -05:00
parent e64b7cf698
commit 7de09063c5
9 changed files with 26 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Navigation.tsx
+1 -26
View File
@@ -22,7 +22,6 @@ import {buildStateObject} from 'lib/routes/helpers'
import {
AllNavigatorParams,
BottomTabNavigatorParams,
FeedsTabNavigatorParams,
FlatNavigatorParams,
HomeTabNavigatorParams,
MessagesTabNavigatorParams,
@@ -91,7 +90,6 @@ const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
const HomeTab = createNativeStackNavigatorWithAuth<HomeTabNavigatorParams>()
const SearchTab = createNativeStackNavigatorWithAuth<SearchTabNavigatorParams>()
const FeedsTab = createNativeStackNavigatorWithAuth<FeedsTabNavigatorParams>()
const NotificationsTab =
createNativeStackNavigatorWithAuth<NotificationsTabNavigatorParams>()
const MyProfileTab =
@@ -306,6 +304,7 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
getComponent={() => MessagesSettingsScreen}
options={{title: title(msg`Chat settings`), requireAuth: true}}
/>
<Stack.Screen name="Feeds" getComponent={() => FeedsScreen} />
</>
)
}
@@ -330,7 +329,6 @@ function TabsNavigator() {
tabBar={tabBar}>
<Tab.Screen name="HomeTab" getComponent={() => HomeTabNavigator} />
<Tab.Screen name="SearchTab" getComponent={() => SearchTabNavigator} />
<Tab.Screen name="FeedsTab" getComponent={() => FeedsTabNavigator} />
<Tab.Screen
name="NotificationsTab"
getComponent={() => NotificationsTabNavigator}
@@ -384,24 +382,6 @@ function SearchTabNavigator() {
)
}
function FeedsTabNavigator() {
const pal = usePalette('default')
return (
<FeedsTab.Navigator
screenOptions={{
animation: isAndroid ? 'ios' : undefined,
animationDuration: 285,
gestureEnabled: true,
fullScreenGestureEnabled: true,
headerShown: false,
contentStyle: pal.view,
}}>
<FeedsTab.Screen name="Feeds" getComponent={() => FeedsScreen} />
{commonScreens(FeedsTab as typeof HomeTab)}
</FeedsTab.Navigator>
)
}
function NotificationsTabNavigator() {
const pal = usePalette('default')
return (
@@ -505,11 +485,6 @@ const FlatNavigator = () => {
getComponent={() => SearchScreen}
options={{title: title(msg`Search`)}}
/>
<Flat.Screen
name="Feeds"
getComponent={() => FeedsScreen}
options={{title: title(msg`Feeds`)}}
/>
<Flat.Screen
name="Notifications"
getComponent={() => NotificationsScreen}
src/lib/routes/types.ts
+1 -6
View File
@@ -40,12 +40,12 @@ export type CommonNavigatorParams = {
Hashtag: {tag: string; author?: string}
MessagesConversation: {conversation: string; embed?: string}
MessagesSettings: undefined
Feeds: undefined
}
export type BottomTabNavigatorParams = CommonNavigatorParams & {
HomeTab: undefined
SearchTab: undefined
FeedsTab: undefined
NotificationsTab: undefined
MyProfileTab: undefined
MessagesTab: undefined
@@ -59,10 +59,6 @@ export type SearchTabNavigatorParams = CommonNavigatorParams & {
Search: {q?: string}
}
export type FeedsTabNavigatorParams = CommonNavigatorParams & {
Feeds: undefined
}
export type NotificationsTabNavigatorParams = CommonNavigatorParams & {
Notifications: undefined
}
@@ -89,7 +85,6 @@ export type AllNavigatorParams = CommonNavigatorParams & {
Home: undefined
SearchTab: undefined
Search: {q?: string}
FeedsTab: undefined
Feeds: undefined
NotificationsTab: undefined
Notifications: undefined
src/screens/Home/NoFeedsPinned.tsx
-14
View File
@@ -3,13 +3,10 @@ import {View} from 'react-native'
import {TID} from '@atproto/common-web'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useNavigation} from '@react-navigation/native'
import {DISCOVER_SAVED_FEED, TIMELINE_SAVED_FEED} from '#/lib/constants'
import {isNative} from '#/platform/detection'
import {useOverwriteSavedFeedsMutation} from '#/state/queries/preferences'
import {UsePreferencesQueryResponse} from '#/state/queries/preferences'
import {NavigationProp} from 'lib/routes/types'
import {CenteredView} from '#/view/com/util/Views'
import {atoms as a} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -26,7 +23,6 @@ export function NoFeedsPinned({
}) {
const {_} = useLingui()
const headerOffset = useHeaderOffset()
const navigation = useNavigation<NavigationProp>()
const {isPending, mutateAsync: overwriteSavedFeeds} =
useOverwriteSavedFeedsMutation()
@@ -66,15 +62,6 @@ export function NoFeedsPinned({
await overwriteSavedFeeds(toSave)
}, [overwriteSavedFeeds, preferences.savedFeeds])
const onPressFeedsLink = React.useCallback(() => {
if (isNative) {
// Hack that's necessary due to how our navigators are set up.
navigation.navigate('FeedsTab')
navigation.popToTop()
return false
}
}, [navigation])
return (
<CenteredView sideBorders style={[a.h_full_vh]}>
<View
@@ -115,7 +102,6 @@ export function NoFeedsPinned({
<Link
label={_(msg`Browse other feeds`)}
to="/feeds"
onPress={onPressFeedsLink}
size="medium"
variant="solid"
color="secondary">
src/view/com/home/HomeHeader.tsx
+1 -7
View File
@@ -5,7 +5,6 @@ import {usePalette} from '#/lib/hooks/usePalette'
import {FeedSourceInfo} from '#/state/queries/feed'
import {useSession} from '#/state/session'
import {NavigationProp} from 'lib/routes/types'
import {isWeb} from 'platform/detection'
import {RenderTabBarFnProps} from 'view/com/pager/Pager'
import {TabBar} from '../pager/TabBar'
import {HomeHeaderLayout} from './HomeHeaderLayout'
@@ -39,12 +38,7 @@ export function HomeHeader(
}, [hasPinnedCustom, feeds])
const onPressFeedsLink = React.useCallback(() => {
if (isWeb) {
navigation.navigate('Feeds')
} else {
navigation.navigate('FeedsTab')
navigation.popToTop()
}
navigation.navigate('Feeds')
}, [navigation])
const onSelect = React.useCallback(
src/view/com/posts/FollowingEmptyState.tsx
+7 -11
View File
@@ -1,18 +1,19 @@
import React from 'react'
import {StyleSheet, View} from 'react-native'
import {useNavigation} from '@react-navigation/native'
import {
FontAwesomeIcon,
FontAwesomeIconStyle,
} from '@fortawesome/react-native-fontawesome'
import {Text} from '../util/text/Text'
import {Button} from '../util/forms/Button'
import {Trans} from '@lingui/macro'
import {useNavigation} from '@react-navigation/native'
import {usePalette} from 'lib/hooks/usePalette'
import {MagnifyingGlassIcon} from 'lib/icons'
import {NavigationProp} from 'lib/routes/types'
import {usePalette} from 'lib/hooks/usePalette'
import {s} from 'lib/styles'
import {isWeb} from 'platform/detection'
import {Trans} from '@lingui/macro'
import {Button} from '../util/forms/Button'
import {Text} from '../util/text/Text'
export function FollowingEmptyState() {
const pal = usePalette('default')
@@ -29,12 +30,7 @@ export function FollowingEmptyState() {
}, [navigation])
const onPressDiscoverFeeds = React.useCallback(() => {
if (isWeb) {
navigation.navigate('Feeds')
} else {
navigation.navigate('FeedsTab')
navigation.popToTop()
}
navigation.navigate('Feeds')
}, [navigation])
return (
src/view/com/posts/FollowingEndOfFeed.tsx
+8 -12
View File
@@ -1,17 +1,18 @@
import React from 'react'
import {StyleSheet, View, Dimensions} from 'react-native'
import {useNavigation} from '@react-navigation/native'
import {Dimensions, StyleSheet, View} from 'react-native'
import {
FontAwesomeIcon,
FontAwesomeIconStyle,
} from '@fortawesome/react-native-fontawesome'
import {Text} from '../util/text/Text'
import {Button} from '../util/forms/Button'
import {NavigationProp} from 'lib/routes/types'
import {Trans} from '@lingui/macro'
import {useNavigation} from '@react-navigation/native'
import {usePalette} from 'lib/hooks/usePalette'
import {NavigationProp} from 'lib/routes/types'
import {s} from 'lib/styles'
import {isWeb} from 'platform/detection'
import {Trans} from '@lingui/macro'
import {Button} from '../util/forms/Button'
import {Text} from '../util/text/Text'
export function FollowingEndOfFeed() {
const pal = usePalette('default')
@@ -28,12 +29,7 @@ export function FollowingEndOfFeed() {
}, [navigation])
const onPressDiscoverFeeds = React.useCallback(() => {
if (isWeb) {
navigation.navigate('Feeds')
} else {
navigation.navigate('FeedsTab')
navigation.popToTop()
}
navigation.navigate('Feeds')
}, [navigation])
return (
src/view/com/testing/TestCtrls.e2e.tsx
+1 -1
View File
@@ -90,7 +90,7 @@ export function TestCtrls() {
/>
<Pressable
testID="e2eGotoFeeds"
onPress={() => navigate('FeedsTab')}
onPress={() => navigate('Feeds')}
accessibilityRole="button"
style={BTN}
/>
src/view/screens/Feeds.tsx
+2 -3
View File
@@ -29,7 +29,7 @@ import {HITSLOP_10} from 'lib/constants'
import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {CogIcon, ComposeIcon2, MagnifyingGlassIcon2} from 'lib/icons'
import {FeedsTabNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
import {cleanError} from 'lib/strings/errors'
import {s} from 'lib/styles'
import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard'
@@ -54,7 +54,7 @@ import {ListMagnifyingGlass_Stroke2_Corner0_Rounded} from '#/components/icons/Li
import {ListSparkle_Stroke2_Corner0_Rounded} from '#/components/icons/ListSparkle'
import hairlineWidth = StyleSheet.hairlineWidth
type Props = NativeStackScreenProps<FeedsTabNavigatorParams, 'Feeds'>
type Props = NativeStackScreenProps<CommonNavigatorParams, 'Feeds'>
type FlatlistSlice =
| {
@@ -594,7 +594,6 @@ export function FeedsScreen(_props: Props) {
{isMobile && (
<ViewHeader
title={_(msg`Feeds`)}
canGoBack={false}
renderButton={renderHeaderBtn}
showBorder
/>
src/view/shell/Drawer.tsx
+5 -4
View File
@@ -186,10 +186,11 @@ let DrawerContent = ({}: {}): React.ReactNode => {
onPressTab('MyProfile')
}, [onPressTab])
const onPressMyFeeds = React.useCallback(
() => onPressTab('Feeds'),
[onPressTab],
)
const onPressMyFeeds = React.useCallback(() => {
track('Menu:ItemClicked', {url: 'Feeds'})
navigation.navigate('Feeds')
setDrawerOpen(false)
}, [navigation, setDrawerOpen, track])
const onPressLists = React.useCallback(() => {
track('Menu:ItemClicked', {url: 'Lists'})