add top bar and link to new SavedScreen

zio/stable
Ansh Nanda 2023-05-25 00:08:44 -07:00
parent 6f02548bca
commit 007c523010
4 changed files with 85 additions and 28 deletions

View File

@ -1,5 +1,5 @@
import React, {useMemo} from 'react'
import {Animated, StyleSheet, TouchableOpacity} from 'react-native'
import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {TabBar} from 'view/com/pager/TabBar'
import {RenderTabBarFnProps} from 'view/com/pager/Pager'
@ -7,6 +7,8 @@ import {UserAvatar} from '../util/UserAvatar'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
import {Link} from '../util/Link'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
export const FeedsTabBar = observer(
(
@ -33,21 +35,34 @@ export const FeedsTabBar = observer(
}, [store])
const items = useMemo(
() => ['Following', ...store.me.savedFeeds.pinnedFeedNames, 'My Feeds'],
() => ['Following', ...store.me.savedFeeds.pinnedFeedNames],
[store.me.savedFeeds.pinnedFeedNames],
)
return (
<Animated.View style={[pal.view, pal.border, styles.tabBar, transform]}>
<TouchableOpacity
testID="viewHeaderDrawerBtn"
style={styles.tabBarAvi}
onPress={onPressAvi}
accessibilityRole="button"
accessibilityLabel="Open navigation"
accessibilityHint="Access profile and other navigation links">
<UserAvatar avatar={store.me.avatar} size={30} />
</TouchableOpacity>
<View style={[pal.view, styles.topBar]}>
<View style={[pal.view]}>
<TouchableOpacity
testID="viewHeaderDrawerBtn"
style={styles.tabBarAvi}
onPress={onPressAvi}
accessibilityRole="button"
accessibilityLabel="Open navigation"
accessibilityHint="Access profile and other navigation links">
<UserAvatar avatar={store.me.avatar} size={30} />
</TouchableOpacity>
</View>
<View style={[pal.view]}>
<Link href="/settings/saved-feeds">
<FontAwesomeIcon
icon="satellite-dish"
size={24}
color={pal.colors.link}
/>
</Link>
</View>
</View>
<TabBar
key={items.join(',')}
{...props}
@ -60,15 +75,21 @@ export const FeedsTabBar = observer(
)
const styles = StyleSheet.create({
topBar: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 18,
width: '100%',
},
tabBar: {
position: 'absolute',
zIndex: 1,
left: 0,
right: 0,
top: 0,
flexDirection: 'row',
flexDirection: 'column',
alignItems: 'center',
paddingLeft: 18,
borderBottomWidth: 1,
},
tabBarAvi: {

View File

@ -80,6 +80,7 @@ export function TabBar({
horizontal={true}
showsHorizontalScrollIndicator={false}
ref={scrollElRef}
contentContainerStyle={styles.contentContainer}
onLayout={onLayout}>
{items.map((item, i) => {
const selected = i === selectedPage
@ -111,6 +112,7 @@ const styles = isDesktopWeb
width: 598,
paddingHorizontal: 14,
},
contentContainer: {},
item: {
paddingTop: 14,
paddingBottom: 12,
@ -123,12 +125,14 @@ const styles = isDesktopWeb
outer: {
flex: 1,
flexDirection: 'row',
paddingLeft: 14,
},
contentContainer: {
gap: 14,
paddingHorizontal: 18,
},
item: {
paddingTop: 8,
paddingBottom: 12,
marginRight: 24,
borderBottomWidth: 3,
borderBottomColor: 'transparent',
},

View File

@ -16,7 +16,6 @@ import {LoadLatestBtn} from '../com/util/load-latest/LoadLatestBtn'
import {FeedsTabBar} from '../com/pager/FeedsTabBar'
import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
import {FAB} from '../com/util/fab/FAB'
import {SavedFeeds} from 'view/com/feeds/SavedFeeds'
import {useStores} from 'state/index'
import {s} from 'lib/styles'
import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
@ -24,7 +23,7 @@ import {useAnalytics} from 'lib/analytics'
import {ComposeIcon2} from 'lib/icons'
import {isDesktopWeb} from 'platform/detection'
const HEADER_OFFSET = isDesktopWeb ? 50 : 40
const HEADER_OFFSET = isDesktopWeb ? 50 : 74
const POLL_FREQ = 30e3 // 30sec
type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
@ -127,11 +126,6 @@ export const HomeScreen = withAuthRequired(
/>
)
})}
<SavedFeeds
key={String(2 + store.me.savedFeeds.pinned.length)}
headerOffset={HEADER_OFFSET}
isPageFocused={selectedPage === 2 + store.me.savedFeeds.pinned.length}
/>
</Pager>
)
}),

View File

@ -29,6 +29,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {CustomFeedModel} from 'state/models/feeds/custom-feed'
import * as Toast from 'view/com/util/Toast'
import {Haptics} from 'lib/haptics'
import {Link, TextLink} from 'view/com/util/Link'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'SavedFeeds'>
@ -65,11 +66,36 @@ export const SavedFeeds = withAuthRequired(
const renderListFooterComponent = useCallback(() => {
return (
<View style={styles.footer}>
<>
<View style={[styles.footerLinks, pal.border]}>
<Link style={[styles.footerLink, pal.border]} href="/search/feeds">
<FontAwesomeIcon
icon="search"
size={18}
color={pal.colors.icon}
/>
<Text type="lg-medium" style={pal.textLight}>
Discover new feeds
</Text>
</Link>
</View>
<View style={styles.footerText}>
<Text type="sm" style={pal.textLight}>
Feeds are custom algorithms that users build with a little coding
expertise.{' '}
<TextLink
type="sm"
style={pal.link}
href="https://github.com/bluesky-social/feed-generator"
text="See this guide"
/>{' '}
for more information.
</Text>
</View>
{savedFeeds.isLoading && <ActivityIndicator />}
</View>
</>
)
}, [savedFeeds])
}, [pal, savedFeeds.isLoading])
const onRefresh = useCallback(() => savedFeeds.refresh(), [savedFeeds])
@ -224,9 +250,6 @@ const styles = StyleSheet.create({
borderRightWidth: 1,
minHeight: '100vh',
},
footer: {
paddingVertical: 20,
},
empty: {
paddingHorizontal: 20,
paddingVertical: 20,
@ -252,4 +275,19 @@ const styles = StyleSheet.create({
noBorder: {
borderTopWidth: 0,
},
footerText: {
paddingHorizontal: 26,
paddingVertical: 22,
},
footerLinks: {
borderBottomWidth: 1,
borderTopWidth: 0,
},
footerLink: {
flexDirection: 'row',
borderTopWidth: 1,
paddingHorizontal: 26,
paddingVertical: 18,
gap: 18,
},
})