Move the feed selector to the header (#352)

* Reorg pager components into their own folder

* Move the feed selector to the header

* Fix lint
zio/stable
Paul Frazee 2023-03-22 10:46:09 -05:00 committed by GitHub
parent 4f814207bc
commit 2dc774788b
9 changed files with 48 additions and 70 deletions

View File

@ -1,51 +1,44 @@
import React from 'react'
import {Animated, StyleSheet} from 'react-native'
import {Animated, StyleSheet, TouchableOpacity} from 'react-native'
import {observer} from 'mobx-react-lite'
import {TabBar} from 'view/com/util/TabBar'
import {RenderTabBarFnProps} from 'view/com/util/pager/Pager'
import {TabBar} from 'view/com/pager/TabBar'
import {RenderTabBarFnProps} from 'view/com/pager/Pager'
import {UserAvatar} from '../util/UserAvatar'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
import {clamp} from 'lodash'
const BOTTOM_BAR_HEIGHT = 48
export const FeedsTabBar = observer(
(props: RenderTabBarFnProps & {onPressSelected: () => void}) => {
const store = useStores()
const safeAreaInsets = useSafeAreaInsets()
const pal = usePalette('default')
const interp = useAnimatedValue(0)
const pad = React.useMemo(
() => ({
paddingBottom: clamp(safeAreaInsets.bottom, 15, 20),
}),
[safeAreaInsets],
)
React.useEffect(() => {
Animated.timing(interp, {
toValue: store.shell.minimalShellMode ? 0 : 1,
toValue: store.shell.minimalShellMode ? 1 : 0,
duration: 100,
useNativeDriver: true,
isInteraction: false,
}).start()
}, [interp, store.shell.minimalShellMode])
const transform = {
transform: [
{translateY: Animated.multiply(interp, -1 * BOTTOM_BAR_HEIGHT)},
],
transform: [{translateY: Animated.multiply(interp, -100)}],
}
const onPressAvi = React.useCallback(() => {
store.shell.openDrawer()
}, [store])
return (
<Animated.View
style={[pal.view, pal.border, styles.tabBar, pad, transform]}>
<Animated.View style={[pal.view, styles.tabBar, transform]}>
<TouchableOpacity style={styles.tabBarAvi} onPress={onPressAvi}>
<UserAvatar avatar={store.me.avatar} size={30} />
</TouchableOpacity>
<TabBar
{...props}
items={['Following', "What's hot"]}
indicatorPosition="top"
indicatorPosition="bottom"
indicatorColor={pal.colors.link}
/>
</Animated.View>
@ -56,17 +49,16 @@ export const FeedsTabBar = observer(
const styles = StyleSheet.create({
tabBar: {
position: 'absolute',
zIndex: 1,
left: 0,
right: 0,
bottom: 0,
top: 0,
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 10,
borderTopWidth: 1,
paddingTop: 0,
paddingBottom: 30,
paddingHorizontal: 18,
},
tabBarAvi: {
marginRight: 4,
marginTop: 1,
marginRight: 18,
},
})

View File

@ -1,8 +1,8 @@
import React from 'react'
import {observer} from 'mobx-react-lite'
import {TabBar} from 'view/com/util/TabBar'
import {TabBar} from 'view/com/pager/TabBar'
import {CenteredView} from 'view/com/util/Views'
import {RenderTabBarFnProps} from 'view/com/util/pager/Pager'
import {RenderTabBarFnProps} from 'view/com/pager/Pager'
import {usePalette} from 'lib/hooks/usePalette'
export const FeedsTabBar = observer(

View File

@ -5,7 +5,7 @@ import {
TouchableWithoutFeedback,
View,
} from 'react-native'
import {Text} from './text/Text'
import {Text} from '../util/text/Text'
import {usePalette} from 'lib/hooks/usePalette'
import {isDesktopWeb} from 'platform/detection'

View File

@ -8,9 +8,8 @@ import {
View,
ViewStyle,
} from 'react-native'
import {CenteredView, FlatList} from '../util/Views'
import {FlatList} from '../util/Views'
import {PostFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
import {ViewHeader} from '../util/ViewHeader'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {FeedModel} from 'state/models/feed-view'
import {FeedSlice} from './FeedSlice'
@ -19,9 +18,9 @@ import {s} from 'lib/styles'
import {useAnalytics} from 'lib/analytics'
import {usePalette} from 'lib/hooks/usePalette'
const HEADER_ITEM = {_reactKey: '__header__'}
const LOADING_ITEM = {_reactKey: '__loading__'}
const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}
const ERROR_FEED_ITEM = {_reactKey: '__error__'}
const ERROR_ITEM = {_reactKey: '__error__'}
export const Feed = observer(function Feed({
feed,
@ -49,19 +48,21 @@ export const Feed = observer(function Feed({
const [isRefreshing, setIsRefreshing] = React.useState(false)
const data = React.useMemo(() => {
let feedItems: any[] = [HEADER_ITEM]
let feedItems: any[] = []
if (feed.hasLoaded) {
if (feed.hasError) {
feedItems = feedItems.concat([ERROR_FEED_ITEM])
feedItems = feedItems.concat([ERROR_ITEM])
}
if (feed.isEmpty) {
feedItems = feedItems.concat([EMPTY_FEED_ITEM])
} else {
feedItems = feedItems.concat(feed.slices)
}
} else if (feed.isLoading) {
feedItems = feedItems.concat([LOADING_ITEM])
}
return feedItems
}, [feed.hasError, feed.hasLoaded, feed.isEmpty, feed.slices])
}, [feed.hasError, feed.hasLoaded, feed.isLoading, feed.isEmpty, feed.slices])
// events
// =
@ -96,15 +97,15 @@ export const Feed = observer(function Feed({
return renderEmptyState()
}
return <View />
} else if (item === ERROR_FEED_ITEM) {
} else if (item === ERROR_ITEM) {
return (
<ErrorMessage
message={feed.error}
onPressTryAgain={onPressTryAgain}
/>
)
} else if (item === HEADER_ITEM) {
return <ViewHeader title="Bluesky" canGoBack={false} />
} else if (item === LOADING_ITEM) {
return <PostFeedLoadingPlaceholder />
}
return <FeedSlice slice={item} showFollowBtn={showPostFollowBtn} />
},
@ -125,11 +126,6 @@ export const Feed = observer(function Feed({
return (
<View testID={testID} style={style}>
{feed.isLoading && data.length === 0 && (
<CenteredView style={{paddingTop: headerOffset}}>
<PostFeedLoadingPlaceholder />
</CenteredView>
)}
{data.length > 0 && (
<FlatList
ref={scrollElRef}

View File

@ -3,8 +3,8 @@ import {StyleSheet, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {SearchUIModel} from 'state/models/ui/search'
import {CenteredView, ScrollView} from '../util/Views'
import {Pager, RenderTabBarFnProps} from 'view/com/util/pager/Pager'
import {TabBar} from 'view/com/util/TabBar'
import {Pager, RenderTabBarFnProps} from 'view/com/pager/Pager'
import {TabBar} from 'view/com/pager/TabBar'
import {Post} from 'view/com/post/Post'
import {ProfileCardWithFollowBtn} from 'view/com/profile/ProfileCard'
import {

View File

@ -1,5 +1,5 @@
import React from 'react'
import {FlatList, View, useWindowDimensions} from 'react-native'
import {FlatList, View} from 'react-native'
import {useFocusEffect, useIsFocused} from '@react-navigation/native'
import {observer} from 'mobx-react-lite'
import useAppState from 'react-native-appstate-hook'
@ -9,17 +9,16 @@ import {withAuthRequired} from 'view/com/auth/withAuthRequired'
import {Feed} from '../com/posts/Feed'
import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState'
import {LoadLatestBtn} from '../com/util/LoadLatestBtn'
import {FeedsTabBar} from './home/FeedsTabBar'
import {Pager, RenderTabBarFnProps} from 'view/com/util/pager/Pager'
import {FeedsTabBar} from '../com/pager/FeedsTabBar'
import {Pager, RenderTabBarFnProps} from 'view/com/pager/Pager'
import {FAB} from '../com/util/FAB'
import {useStores} from 'state/index'
import {s} from 'lib/styles'
import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
import {useAnalytics} from 'lib/analytics'
import {ComposeIcon2} from 'lib/icons'
import {isDesktopWeb} from 'platform/detection'
const TAB_BAR_HEIGHT = 82
const HEADER_OFFSET = 40
type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
export const HomeScreen = withAuthRequired((_opts: Props) => {
@ -69,7 +68,7 @@ export const HomeScreen = withAuthRequired((_opts: Props) => {
<Pager
onPageSelected={onPageSelected}
renderTabBar={renderTabBar}
tabBarPosition={isDesktopWeb ? 'top' : 'bottom'}
tabBarPosition="top"
initialPage={initialPage}>
<FeedPage
key="1"
@ -100,11 +99,6 @@ const FeedPage = observer(
onForeground: () => doPoll(true),
})
const isScreenFocused = useIsFocused()
const winDim = useWindowDimensions()
const containerStyle = React.useMemo(
() => ({height: winDim.height - (isDesktopWeb ? 0 : TAB_BAR_HEIGHT)}),
[winDim],
)
const doPoll = React.useCallback(
(knownActive = false) => {
@ -125,7 +119,7 @@ const FeedPage = observer(
)
const scrollToTop = React.useCallback(() => {
scrollElRef.current?.scrollToOffset({offset: 0})
scrollElRef.current?.scrollToOffset({offset: -HEADER_OFFSET})
}, [scrollElRef])
const onSoftReset = React.useCallback(() => {
@ -169,7 +163,7 @@ const FeedPage = observer(
}, [feed, scrollToTop])
return (
<View style={containerStyle}>
<View style={s.h100pct}>
<Feed
testID="homeFeed"
key="default"
@ -180,6 +174,7 @@ const FeedPage = observer(
onPressTryAgain={onPressTryAgain}
onScroll={onMainScroll}
renderEmptyState={renderEmptyState}
headerOffset={HEADER_OFFSET}
/>
{feed.hasNewLatest && !feed.isRefreshing && (
<LoadLatestBtn onPress={onPressLoadLatest} />

View File

@ -34,24 +34,23 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
const minimalShellInterp = useAnimatedValue(0)
const safeAreaInsets = useSafeAreaInsets()
const {track} = useAnalytics()
const {isAtHome, isAtSearch, isAtNotifications, noBorder} =
useNavigationState(state => {
const {isAtHome, isAtSearch, isAtNotifications} = useNavigationState(
state => {
const res = {
isAtHome: getTabState(state, 'Home') !== TabState.Outside,
isAtSearch: getTabState(state, 'Search') !== TabState.Outside,
isAtNotifications:
getTabState(state, 'Notifications') !== TabState.Outside,
noBorder: getTabState(state, 'Home') === TabState.InsideAtRoot,
}
if (!res.isAtHome && !res.isAtNotifications && !res.isAtSearch) {
// HACK for some reason useNavigationState will give us pre-hydration results
// and not update after, so we force isAtHome if all came back false
// -prf
res.isAtHome = true
res.noBorder = true
}
return res
})
},
)
React.useEffect(() => {
if (store.shell.minimalShellMode) {
@ -107,7 +106,6 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
<Animated.View
style={[
styles.bottomBar,
noBorder && styles.noBorder,
pal.view,
pal.border,
{paddingBottom: clamp(safeAreaInsets.bottom, 15, 30)},
@ -222,9 +220,6 @@ const styles = StyleSheet.create({
paddingLeft: 5,
paddingRight: 10,
},
noBorder: {
borderTopWidth: 0,
},
ctrl: {
flex: 1,
paddingTop: 13,