Replace likes with votes on post UIs

This commit is contained in:
Paul Frazee 2022-11-05 13:48:45 -05:00
parent eb28a12639
commit b6f3a234da
5 changed files with 220 additions and 199 deletions

View file

@ -13,6 +13,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {PostThreadViewModel} from '../../../state/models/post-thread-view'
import {Link} from '../util/Link'
import {UserInfoText} from '../util/UserInfoText'
import {PostCtrls} from '../util/PostCtrls'
import {RichText} from '../util/RichText'
import {UserAvatar} from '../util/UserAvatar'
import {useStores} from '../../../state'
@ -125,47 +126,16 @@ export const Post = observer(function Post({uri}: {uri: string}) {
style={[s.f15, s['lh15-1.3']]}
/>
</View>
<View style={styles.ctrls}>
<TouchableOpacity style={styles.ctrl} onPress={onPressReply}>
<FontAwesomeIcon
style={styles.ctrlIcon}
icon={['far', 'comment']}
/>
<Text>{item.replyCount}</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.ctrl} onPress={onPressToggleRepost}>
<FontAwesomeIcon
style={
item.myState.repost
? styles.ctrlIconReposted
: styles.ctrlIcon
}
icon="retweet"
size={22}
/>
<Text
style={item.myState.repost ? [s.bold, s.green3] : undefined}>
{item.repostCount}
</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.ctrl} onPress={onPressToggleLike}>
<FontAwesomeIcon
style={
item.myState.like ? styles.ctrlIconLiked : styles.ctrlIcon
}
icon={[item.myState.like ? 'fas' : 'far', 'heart']}
/>
<Text style={item.myState.like ? [s.bold, s.red3] : undefined}>
{item.likeCount}
</Text>
</TouchableOpacity>
<View style={styles.ctrl}>
<FontAwesomeIcon
style={styles.ctrlIcon}
icon="share-from-square"
/>
</View>
</View>
<PostCtrls
replyCount={item.replyCount}
repostCount={item.repostCount}
likeCount={item.likeCount}
isReposted={!!item.myState.repost}
isLiked={!!item.myState.like}
onPressReply={onPressReply}
onPressToggleRepost={onPressToggleRepost}
onPressToggleLike={onPressToggleLike}
/>
</View>
</View>
</Link>
@ -202,26 +172,4 @@ const styles = StyleSheet.create({
flexWrap: 'wrap',
paddingBottom: 8,
},
ctrls: {
flexDirection: 'row',
},
ctrl: {
flexDirection: 'row',
alignItems: 'center',
flex: 1,
paddingLeft: 4,
paddingRight: 4,
},
ctrlIcon: {
marginRight: 5,
color: colors.gray5,
},
ctrlIconReposted: {
marginRight: 5,
color: colors.green3,
},
ctrlIconLiked: {
marginRight: 5,
color: colors.red3,
},
})