Move the feed selector to the header (#352)
* Reorg pager components into their own folder * Move the feed selector to the header * Fix lintzio/stable
parent
4f814207bc
commit
2dc774788b
|
@ -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,
|
||||
},
|
||||
})
|
|
@ -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(
|
|
@ -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'
|
||||
|
|
@ -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}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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} />
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue