zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Implement like and repost

Browse source
This commit is contained in:
Paul Frazee 2022-07-22 11:18:47 -05:00
parent cc8a170204
commit 0ec0ba996f
12 changed files with 307 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/view/com/post-thread/PostThreadItem.tsx
View file

@ -40,6 +40,16 @@ export const PostThreadItem = observer(function PostThreadItem({
name: item.author.name,
})
}
const onPressToggleRepost = () => {
item
.toggleRepost()
.catch(e => console.error('Failed to toggle repost', record, e))
}
const onPressToggleLike = () => {
item
.toggleLike()
.catch(e => console.error('Failed to toggle like', record, e))
}
return (
<TouchableOpacity style={styles.outer} onPress={onPressOuter}>
@ -108,21 +118,34 @@ export const PostThreadItem = observer(function PostThreadItem({
/>
<Text>{item.replyCount}</Text>
</View>
<View style={styles.ctrl}>
<TouchableOpacity style={styles.ctrl} onPress={onPressToggleRepost}>
<FontAwesomeIcon
style={styles.ctrlIcon}
style={
item.myState.hasReposted
? styles.ctrlIconReposted
: styles.ctrlIcon
}
icon="retweet"
size={22}
/>
<Text>{item.repostCount}</Text>
</View>
<View style={styles.ctrl}>
<Text
style={
item.myState.hasReposted ? [s.bold, s.green] : undefined
}>
{item.repostCount}
</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.ctrl} onPress={onPressToggleLike}>
<FontAwesomeIcon
style={styles.ctrlIcon}
icon={['far', 'heart']}
style={
item.myState.hasLiked ? styles.ctrlIconLiked : styles.ctrlIcon
}
icon={[item.myState.hasLiked ? 'fas' : 'far', 'heart']}
/>
<Text>{item.likeCount}</Text>
</View>
<Text style={item.myState.hasLiked ? [s.bold, s.red] : undefined}>
{item.likeCount}
</Text>
</TouchableOpacity>
<View style={styles.ctrl}>
<FontAwesomeIcon
style={styles.ctrlIcon}
@ -205,4 +228,12 @@ const styles = StyleSheet.create({
marginRight: 5,
color: 'gray',
},
ctrlIconReposted: {
marginRight: 5,
color: 'green',
},
ctrlIconLiked: {
marginRight: 5,
color: 'red',
},
})