diff options
Diffstat (limited to 'src/view/com/post-thread/PostThreadItem.tsx')
-rw-r--r-- | src/view/com/post-thread/PostThreadItem.tsx | 49 |
1 files changed, 40 insertions, 9 deletions
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 8628f67c1..896eab89f 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -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', + }, }) |