Add liked-by and reposted-by views
This commit is contained in:
Paul Frazee
parent
0ec0ba996f
commit
ce83648f9d
12 changed files with 704 additions and 12 deletions
139
src/view/com/post-thread/PostLikedBy.tsx
Normal file
139
src/view/com/post-thread/PostLikedBy.tsx
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
import React, {useState, useEffect} from 'react'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {
|
||||
ActivityIndicator,
|
||||
FlatList,
|
||||
Image,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import {OnNavigateContent} from '../../routes/types'
|
||||
import {
|
||||
LikedByViewModel,
|
||||
LikedByViewItemModel,
|
||||
} from '../../../state/models/liked-by-view'
|
||||
import {useStores} from '../../../state'
|
||||
import {s} from '../../lib/styles'
|
||||
import {AVIS} from '../../lib/assets'
|
||||
|
||||
export const PostLikedBy = observer(function PostLikedBy({
|
||||
uri,
|
||||
onNavigateContent,
|
||||
}: {
|
||||
uri: string
|
||||
onNavigateContent: OnNavigateContent
|
||||
}) {
|
||||
const store = useStores()
|
||||
const [view, setView] = useState<LikedByViewModel | undefined>()
|
||||
|
||||
useEffect(() => {
|
||||
if (view?.params.uri === uri) {
|
||||
console.log('Liked by doing nothing')
|
||||
return // no change needed? or trigger refresh?
|
||||
}
|
||||
console.log('Fetching Liked by', uri)
|
||||
const newView = new LikedByViewModel(store, {uri})
|
||||
setView(newView)
|
||||
newView.setup().catch(err => console.error('Failed to fetch liked by', err))
|
||||
}, [uri, view?.params.uri, store])
|
||||
|
||||
// loading
|
||||
// =
|
||||
if (
|
||||
!view ||
|
||||
(view.isLoading && !view.isRefreshing) ||
|
||||
view.params.uri !== uri
|
||||
) {
|
||||
return (
|
||||
<View>
|
||||
<ActivityIndicator />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// error
|
||||
// =
|
||||
if (view.hasError) {
|
||||
return (
|
||||
<View>
|
||||
<Text>{view.error}</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// loaded
|
||||
// =
|
||||
const renderItem = ({item}: {item: LikedByViewItemModel}) => (
|
||||
<LikedByItem item={item} onNavigateContent={onNavigateContent} />
|
||||
)
|
||||
return (
|
||||
<View>
|
||||
<FlatList
|
||||
data={view.likedBy}
|
||||
keyExtractor={item => item._reactKey}
|
||||
renderItem={renderItem}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
const LikedByItem = ({
|
||||
item,
|
||||
onNavigateContent,
|
||||
}: {
|
||||
item: LikedByViewItemModel
|
||||
onNavigateContent: OnNavigateContent
|
||||
}) => {
|
||||
const onPressOuter = () => {
|
||||
onNavigateContent('Profile', {
|
||||
name: item.name,
|
||||
})
|
||||
}
|
||||
return (
|
||||
<TouchableOpacity style={styles.outer} onPress={onPressOuter}>
|
||||
<View style={styles.layout}>
|
||||
<View style={styles.layoutAvi}>
|
||||
<Image
|
||||
style={styles.avi}
|
||||
source={AVIS[item.name] || AVIS['alice.com']}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.layoutContent}>
|
||||
<Text style={[s.f15, s.bold]}>{item.displayName}</Text>
|
||||
<Text style={[s.f14, s.gray]}>@{item.name}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
outer: {
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#e8e8e8',
|
||||
backgroundColor: '#fff',
|
||||
},
|
||||
layout: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
layoutAvi: {
|
||||
width: 60,
|
||||
paddingLeft: 10,
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
},
|
||||
avi: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 30,
|
||||
resizeMode: 'cover',
|
||||
},
|
||||
layoutContent: {
|
||||
flex: 1,
|
||||
paddingRight: 10,
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
},
|
||||
})
|
||||
141
src/view/com/post-thread/PostRepostedBy.tsx
Normal file
141
src/view/com/post-thread/PostRepostedBy.tsx
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
import React, {useState, useEffect} from 'react'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {
|
||||
ActivityIndicator,
|
||||
FlatList,
|
||||
Image,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import {OnNavigateContent} from '../../routes/types'
|
||||
import {
|
||||
RepostedByViewModel,
|
||||
RepostedByViewItemModel,
|
||||
} from '../../../state/models/reposted-by-view'
|
||||
import {useStores} from '../../../state'
|
||||
import {s} from '../../lib/styles'
|
||||
import {AVIS} from '../../lib/assets'
|
||||
|
||||
export const PostRepostedBy = observer(function PostRepostedBy({
|
||||
uri,
|
||||
onNavigateContent,
|
||||
}: {
|
||||
uri: string
|
||||
onNavigateContent: OnNavigateContent
|
||||
}) {
|
||||
const store = useStores()
|
||||
const [view, setView] = useState<RepostedByViewModel | undefined>()
|
||||
|
||||
useEffect(() => {
|
||||
if (view?.params.uri === uri) {
|
||||
console.log('Reposted by doing nothing')
|
||||
return // no change needed? or trigger refresh?
|
||||
}
|
||||
console.log('Fetching Reposted by', uri)
|
||||
const newView = new RepostedByViewModel(store, {uri})
|
||||
setView(newView)
|
||||
newView
|
||||
.setup()
|
||||
.catch(err => console.error('Failed to fetch reposted by', err))
|
||||
}, [uri, view?.params.uri, store])
|
||||
|
||||
// loading
|
||||
// =
|
||||
if (
|
||||
!view ||
|
||||
(view.isLoading && !view.isRefreshing) ||
|
||||
view.params.uri !== uri
|
||||
) {
|
||||
return (
|
||||
<View>
|
||||
<ActivityIndicator />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// error
|
||||
// =
|
||||
if (view.hasError) {
|
||||
return (
|
||||
<View>
|
||||
<Text>{view.error}</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// loaded
|
||||
// =
|
||||
const renderItem = ({item}: {item: RepostedByViewItemModel}) => (
|
||||
<RepostedByItem item={item} onNavigateContent={onNavigateContent} />
|
||||
)
|
||||
return (
|
||||
<View>
|
||||
<FlatList
|
||||
data={view.repostedBy}
|
||||
keyExtractor={item => item._reactKey}
|
||||
renderItem={renderItem}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
const RepostedByItem = ({
|
||||
item,
|
||||
onNavigateContent,
|
||||
}: {
|
||||
item: RepostedByViewItemModel
|
||||
onNavigateContent: OnNavigateContent
|
||||
}) => {
|
||||
const onPressOuter = () => {
|
||||
onNavigateContent('Profile', {
|
||||
name: item.name,
|
||||
})
|
||||
}
|
||||
return (
|
||||
<TouchableOpacity style={styles.outer} onPress={onPressOuter}>
|
||||
<View style={styles.layout}>
|
||||
<View style={styles.layoutAvi}>
|
||||
<Image
|
||||
style={styles.avi}
|
||||
source={AVIS[item.name] || AVIS['alice.com']}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.layoutContent}>
|
||||
<Text style={[s.f15, s.bold]}>{item.displayName}</Text>
|
||||
<Text style={[s.f14, s.gray]}>@{item.name}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
outer: {
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#e8e8e8',
|
||||
backgroundColor: '#fff',
|
||||
},
|
||||
layout: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
layoutAvi: {
|
||||
width: 60,
|
||||
paddingLeft: 10,
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
},
|
||||
avi: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 30,
|
||||
resizeMode: 'cover',
|
||||
},
|
||||
layoutContent: {
|
||||
flex: 1,
|
||||
paddingRight: 10,
|
||||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
},
|
||||
})
|
||||
|
|
@ -40,6 +40,20 @@ export const PostThreadItem = observer(function PostThreadItem({
|
|||
name: item.author.name,
|
||||
})
|
||||
}
|
||||
const onPressLikes = () => {
|
||||
const urip = new AdxUri(item.uri)
|
||||
onNavigateContent('PostLikedBy', {
|
||||
name: item.author.name,
|
||||
recordKey: urip.recordKey,
|
||||
})
|
||||
}
|
||||
const onPressReposts = () => {
|
||||
const urip = new AdxUri(item.uri)
|
||||
onNavigateContent('PostRepostedBy', {
|
||||
name: item.author.name,
|
||||
recordKey: urip.recordKey,
|
||||
})
|
||||
}
|
||||
const onPressToggleRepost = () => {
|
||||
item
|
||||
.toggleRepost()
|
||||
|
|
@ -91,7 +105,9 @@ export const PostThreadItem = observer(function PostThreadItem({
|
|||
{item._isHighlightedPost && hasEngagement ? (
|
||||
<View style={styles.expandedInfo}>
|
||||
{item.repostCount ? (
|
||||
<Text style={[styles.expandedInfoItem, s.gray, s.semiBold]}>
|
||||
<Text
|
||||
style={[styles.expandedInfoItem, s.gray, s.semiBold]}
|
||||
onPress={onPressReposts}>
|
||||
<Text style={[s.bold, s.black]}>{item.repostCount}</Text>{' '}
|
||||
{pluralize(item.repostCount, 'repost')}
|
||||
</Text>
|
||||
|
|
@ -99,7 +115,9 @@ export const PostThreadItem = observer(function PostThreadItem({
|
|||
<></>
|
||||
)}
|
||||
{item.likeCount ? (
|
||||
<Text style={[styles.expandedInfoItem, s.gray, s.semiBold]}>
|
||||
<Text
|
||||
style={[styles.expandedInfoItem, s.gray, s.semiBold]}
|
||||
onPress={onPressLikes}>
|
||||
<Text style={[s.bold, s.black]}>{item.likeCount}</Text>{' '}
|
||||
{pluralize(item.likeCount, 'like')}
|
||||
</Text>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue