add top bar and link to new SavedScreen
parent
6f02548bca
commit
007c523010
|
@ -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: {
|
||||
|
|
|
@ -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',
|
||||
},
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}),
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue