Implement trending

zio/stable
Paul Frazee 2022-11-11 13:10:05 -06:00
parent 486ce26a91
commit 22849fb4fc
6 changed files with 24 additions and 13 deletions

View File

@ -28,6 +28,7 @@ export class FeedItemModel implements GetTimeline.FeedItem {
declaration: {cid: '', actorType: ''}, declaration: {cid: '', actorType: ''},
} }
repostedBy?: GetTimeline.Actor repostedBy?: GetTimeline.Actor
trendedBy?: GetTimeline.Actor
record: Record<string, unknown> = {} record: Record<string, unknown> = {}
embed?: embed?:
| GetTimeline.RecordEmbed | GetTimeline.RecordEmbed
@ -55,6 +56,7 @@ export class FeedItemModel implements GetTimeline.FeedItem {
this.cid = v.cid this.cid = v.cid
this.author = v.author this.author = v.author
this.repostedBy = v.repostedBy this.repostedBy = v.repostedBy
this.trendedBy = v.trendedBy
this.record = v.record this.record = v.record
this.embed = v.embed this.embed = v.embed
this.replyCount = v.replyCount this.replyCount = v.replyCount

View File

@ -26,7 +26,7 @@ export const Feed = observer(function Feed({
view.loadMore().catch(err => console.error('Failed to load more', err)) view.loadMore().catch(err => console.error('Failed to load more', err))
} }
return ( return (
<View> <View style={{flex: 1}}>
{view.isLoading && !view.isRefreshing && !view.hasContent && ( {view.isLoading && !view.isRefreshing && !view.hasContent && (
<Text>Loading...</Text> <Text>Loading...</Text>
)} )}

View File

@ -70,7 +70,7 @@ export const FeedItem = observer(function FeedItem({
} else if (item.isTrend) { } else if (item.isTrend) {
action = 'Your post is trending with' action = 'Your post is trending with'
icon = 'arrow-trend-up' icon = 'arrow-trend-up'
iconStyle = [s.blue3] iconStyle = [s.red3]
} else if (item.isReply) { } else if (item.isReply) {
action = 'replied to your post' action = 'replied to your post'
icon = ['far', 'comment'] icon = ['far', 'comment']
@ -169,7 +169,7 @@ export const FeedItem = observer(function FeedItem({
{ago(item.indexedAt)} {ago(item.indexedAt)}
</Text> </Text>
</View> </View>
{item.isUpvote || item.isRepost ? ( {item.isUpvote || item.isRepost || item.isTrend ? (
<PostText uri={item.subjectUri} style={[s.gray5]} /> <PostText uri={item.subjectUri} style={[s.gray5]} />
) : ( ) : (
<></> <></>

View File

@ -1,6 +1,6 @@
import React, {useMemo} from 'react' import React, {useMemo} from 'react'
import {observer} from 'mobx-react-lite' import {observer} from 'mobx-react-lite'
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native' import {StyleSheet, Text, View} from 'react-native'
import {AtUri} from '../../../third-party/uri' import {AtUri} from '../../../third-party/uri'
import * as PostType from '../../../third-party/api/src/client/types/app/bsky/feed/post' import * as PostType from '../../../third-party/api/src/client/types/app/bsky/feed/post'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
@ -65,10 +65,21 @@ export const FeedItem = observer(function FeedItem({
return ( return (
<Link style={styles.outer} href={itemHref} title={itemTitle}> <Link style={styles.outer} href={itemHref} title={itemTitle}>
{item.repostedBy && ( {item.repostedBy && (
<View style={styles.repostedBy}> <View style={styles.includeReason}>
<FontAwesomeIcon icon="retweet" style={styles.repostedByIcon} /> <FontAwesomeIcon icon="retweet" style={styles.includeReasonIcon} />
<Text style={[s.gray4, s.bold, s.f13]}> <Text style={[s.gray4, s.bold, s.f13]}>
Reposted by {item.repostedBy.displayName} Reposted by {item.repostedBy.displayName || item.repostedBy.handle}
</Text>
</View>
)}
{item.trendedBy && (
<View style={styles.includeReason}>
<FontAwesomeIcon
icon="arrow-trend-up"
style={styles.includeReasonIcon}
/>
<Text style={[s.gray4, s.bold, s.f13]}>
Trending with {item.trendedBy.displayName || item.trendedBy.handle}
</Text> </Text>
</View> </View>
)} )}
@ -158,12 +169,12 @@ const styles = StyleSheet.create({
backgroundColor: colors.white, backgroundColor: colors.white,
padding: 10, padding: 10,
}, },
repostedBy: { includeReason: {
flexDirection: 'row', flexDirection: 'row',
paddingLeft: 60, paddingLeft: 60,
}, },
repostedByIcon: { includeReasonIcon: {
marginRight: 2, marginRight: 4,
color: colors.gray4, color: colors.gray4,
}, },
layout: { layout: {

View File

@ -24,7 +24,6 @@ export const Notifications = ({visible}: ScreenParams) => {
notesView?.update() notesView?.update()
} else { } else {
store.nav.setTitle('Notifications') store.nav.setTitle('Notifications')
console.log('Fetching notifications feed')
const newNotesView = new NotificationsViewModel(store, {}) const newNotesView = new NotificationsViewModel(store, {})
setNotesView(newNotesView) setNotesView(newNotesView)
newNotesView.setup().then(() => { newNotesView.setup().then(() => {
@ -38,7 +37,7 @@ export const Notifications = ({visible}: ScreenParams) => {
}, [visible, store]) }, [visible, store])
return ( return (
<View> <View style={{flex: 1}}>
<ViewHeader title="Notifications" /> <ViewHeader title="Notifications" />
{notesView && <Feed view={notesView} />} {notesView && <Feed view={notesView} />}
</View> </View>

View File

@ -19,7 +19,6 @@ Paul's todo list
- Use pagination to make sure there are suggestions - Use pagination to make sure there are suggestions
- User profile - User profile
- Scene - Scene
> Trending
> Edit profile > Edit profile
> Remove member > Remove member
- Reply gating - Reply gating