fix routing on web

zio/stable
Ansh Nanda 2023-05-16 19:04:47 -07:00
parent ff3cc3b84d
commit 59c1b545fa
5 changed files with 90 additions and 70 deletions

View File

@ -22,7 +22,7 @@ export type CommonNavigatorParams = {
AppPasswords: undefined
SavedFeeds: undefined
PinnedFeeds: undefined
CustomFeed: {name?: string; rkey: string}
CustomFeed: {name: string; rkey: string; displayName?: string}
MutedAccounts: undefined
BlockedAccounts: undefined
}

View File

@ -18,6 +18,7 @@ import {NavigationProp} from 'lib/routes/types'
import {useStores} from 'state/index'
import {HeartIconSolid} from 'lib/icons'
import {pluralize} from 'lib/strings/helpers'
import {AtUri} from '@atproto/api'
const AlgoItem = observer(
({
@ -48,8 +49,11 @@ const AlgoItem = observer(
style={[styles.container, style]}
onPress={() => {
navigation.navigate('CustomFeed', {
name: item.data.displayName,
rkey: item.data.uri,
name: item.data.creator.did,
rkey: new AtUri(item.data.uri).rkey,
displayName:
item.data.displayName ??
`${item.data.creator.displayName}'s feed`,
})
}}
key={item.data.uri}>

View File

@ -34,6 +34,7 @@ export const Feed = observer(function Feed({
renderEmptyState,
testID,
headerOffset = 0,
ListHeaderComponent,
}: {
feed: PostsFeedModel
style?: StyleProp<ViewStyle>
@ -44,6 +45,7 @@ export const Feed = observer(function Feed({
renderEmptyState?: () => JSX.Element
testID?: string
headerOffset?: number
ListHeaderComponent?: () => JSX.Element
}) {
const pal = usePalette('default')
const {track} = useAnalytics()
@ -163,6 +165,7 @@ export const Feed = observer(function Feed({
keyExtractor={item => item._reactKey}
renderItem={renderItem}
ListFooterComponent={FeedFooter}
ListHeaderComponent={ListHeaderComponent}
refreshControl={
<RefreshControl
refreshing={isRefreshing}

View File

@ -2,6 +2,7 @@ import {NativeStackScreenProps} from '@react-navigation/native-stack'
import {usePalette} from 'lib/hooks/usePalette'
import {HeartIcon, HeartIconSolid} from 'lib/icons'
import {CommonNavigatorParams} from 'lib/routes/types'
import {makeRecordUri} from 'lib/strings/url-helpers'
import {colors, s} from 'lib/styles'
import {observer} from 'mobx-react-lite'
import React, {useMemo, useRef} from 'react'
@ -21,79 +22,82 @@ type Props = NativeStackScreenProps<CommonNavigatorParams, 'CustomFeed'>
export const CustomFeed = withAuthRequired(
observer(({route}: Props) => {
const rootStore = useStores()
const {rkey, name} = route.params
const {rkey, name, displayName} = route.params
const currentFeed = useCustomFeed(rkey)
const pal = usePalette('default')
const scrollElRef = useRef<FlatList>(null)
const algoFeed: PostsFeedModel = useMemo(() => {
const uri = makeRecordUri(name, 'app.bsky.feed.generator', rkey)
const feed = new PostsFeedModel(rootStore, 'custom', {
feed: rkey,
feed: uri,
})
feed.setup()
return feed
}, [rkey, rootStore])
}, [rkey, rootStore, name])
console.log(currentFeed?.data.creator)
const _ListHeaderComponent = () => {
return (
<View style={[styles.headerContainer]}>
<View style={[styles.header]}>
<View style={styles.avatarContainer}>
<UserAvatar size={28} avatar={currentFeed?.data.creator.avatar} />
<Link href={`/profile/${currentFeed?.data.creator.handle}`}>
<Text style={[pal.textLight]}>
@{currentFeed?.data.creator.handle}
</Text>
</Link>
</View>
<Text style={[pal.text]}>{currentFeed?.data.description}</Text>
</View>
<View style={[styles.buttonsContainer]}>
<Button
type={currentFeed?.isSaved ? 'default' : 'inverted'}
style={[styles.saveButton]}
onPress={() => {
if (currentFeed?.data.viewer?.saved) {
rootStore.me.savedFeeds.unsave(currentFeed!)
} else {
rootStore.me.savedFeeds.save(currentFeed!)
}
}}
label={currentFeed?.data.viewer?.saved ? 'Unsave' : 'Save'}
/>
<TouchableOpacity
accessibilityRole="button"
onPress={() => {
if (currentFeed?.isLiked) {
currentFeed?.unlike()
} else {
currentFeed?.like()
}
}}
style={[styles.likeButton, pal.viewLight]}>
<Text style={[pal.text, s.semiBold]}>
{currentFeed?.data.likeCount}
</Text>
{currentFeed?.isLiked ? (
<HeartIconSolid size={18} style={styles.liked} />
) : (
<HeartIcon strokeWidth={3} size={18} style={styles.liked} />
)}
</TouchableOpacity>
</View>
</View>
)
}
return (
<View style={[styles.container]}>
<View>
<ViewHeader
title={name ?? `${currentFeed?.data.creator.displayName}'s feed`}
showOnDesktop
/>
<View style={[styles.center]}>
<View style={[styles.header]}>
<View style={styles.avatarContainer}>
<UserAvatar
size={30}
avatar={currentFeed?.data.creator.avatar}
/>
<Link href={`/profile/${currentFeed?.data.creator.handle}`}>
<Text style={[pal.textLight]}>
@{currentFeed?.data.creator.handle}
</Text>
</Link>
</View>
<Text style={[pal.text]}>{currentFeed?.data.description}</Text>
</View>
<View style={[styles.buttonsContainer]}>
<Button
type={currentFeed?.isSaved ? 'default' : 'inverted'}
style={[styles.saveButton]}
onPress={() => {
if (currentFeed?.data.viewer?.saved) {
rootStore.me.savedFeeds.unsave(currentFeed!)
} else {
rootStore.me.savedFeeds.save(currentFeed!)
}
}}
label={currentFeed?.data.viewer?.saved ? 'Unsave' : 'Save'}
/>
<TouchableOpacity
accessibilityRole="button"
onPress={() => {
if (currentFeed?.isLiked) {
currentFeed?.unlike()
} else {
currentFeed?.like()
}
}}
style={[styles.likeButton, pal.viewLight]}>
<Text style={[pal.text, s.semiBold]}>
{currentFeed?.data.likeCount}
</Text>
{currentFeed?.isLiked ? (
<HeartIconSolid size={18} style={styles.liked} />
) : (
<HeartIcon strokeWidth={3} size={18} style={styles.liked} />
)}
</TouchableOpacity>
</View>
</View>
</View>
<ViewHeader
title={
displayName ?? `${currentFeed?.data.creator.displayName}'s feed`
}
showOnDesktop
/>
<Feed
scrollElRef={scrollElRef}
@ -101,6 +105,7 @@ export const CustomFeed = withAuthRequired(
key="default"
feed={algoFeed}
headerOffset={12}
ListHeaderComponent={_ListHeaderComponent}
/>
</View>
)
@ -110,12 +115,16 @@ export const CustomFeed = withAuthRequired(
const styles = StyleSheet.create({
container: {
flex: 1,
paddingBottom: 12,
},
center: {alignItems: 'center', justifyContent: 'center', gap: 8},
headerContainer: {
alignItems: 'center',
justifyContent: 'center',
gap: 8,
marginBottom: 12,
},
header: {
alignItems: 'center',
gap: 8,
gap: 4,
},
avatarContainer: {
flexDirection: 'row',

View File

@ -25,6 +25,7 @@ import {SavedFeedsModel} from 'state/models/feeds/algo/saved'
import {Link} from 'view/com/util/Link'
import {UserAvatar} from 'view/com/util/UserAvatar'
import {SavedFeedItem} from 'view/com/algos/SavedFeedItem'
import {AtUri} from '@atproto/api'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'SavedFeeds'>
@ -137,8 +138,11 @@ const ListHeaderComponent = observer(
accessibilityRole="button"
onPress={() => {
navigation.navigate('CustomFeed', {
rkey: item.data.uri,
name: item.data.displayName,
name: item.data.creator.did,
rkey: new AtUri(item.data.uri).rkey,
displayName:
item.data.displayName ??
`${item.data.creator.displayName}'s feed`,
})
}}
style={styles.pinnedItem}>