Remove downvotes from the UI

zio/stable
Paul Frazee 2022-11-20 11:32:13 -06:00
parent 8e3dc52536
commit 3a10139064
5 changed files with 5 additions and 94 deletions

View File

@ -31,8 +31,7 @@ export const PostThreadItem = observer(function PostThreadItem({
const store = useStores() const store = useStores()
const [deleted, setDeleted] = useState(false) const [deleted, setDeleted] = useState(false)
const record = item.record as unknown as PostType.Record const record = item.record as unknown as PostType.Record
const hasEngagement = const hasEngagement = item.upvoteCount || item.repostCount
item.upvoteCount || item.downvoteCount || item.repostCount
const itemHref = useMemo(() => { const itemHref = useMemo(() => {
const urip = new AtUri(item.uri) const urip = new AtUri(item.uri)
@ -46,11 +45,6 @@ export const PostThreadItem = observer(function PostThreadItem({
return `/profile/${item.author.handle}/post/${urip.rkey}/upvoted-by` return `/profile/${item.author.handle}/post/${urip.rkey}/upvoted-by`
}, [item.uri, item.author.handle]) }, [item.uri, item.author.handle])
const upvotesTitle = 'Upvotes on this post' const upvotesTitle = 'Upvotes on this post'
const downvotesHref = useMemo(() => {
const urip = new AtUri(item.uri)
return `/profile/${item.author.handle}/post/${urip.rkey}/downvoted-by`
}, [item.uri, item.author.handle])
const downvotesTitle = 'Downvotes on this post'
const repostsHref = useMemo(() => { const repostsHref = useMemo(() => {
const urip = new AtUri(item.uri) const urip = new AtUri(item.uri)
return `/profile/${item.author.handle}/post/${urip.rkey}/reposted-by` return `/profile/${item.author.handle}/post/${urip.rkey}/reposted-by`
@ -73,11 +67,6 @@ export const PostThreadItem = observer(function PostThreadItem({
.toggleUpvote() .toggleUpvote()
.catch(e => console.error('Failed to toggle upvote', record, e)) .catch(e => console.error('Failed to toggle upvote', record, e))
} }
const onPressToggleDownvote = () => {
item
.toggleDownvote()
.catch(e => console.error('Failed to toggle downvote', record, e))
}
const onDeletePost = () => { const onDeletePost = () => {
item.delete().then( item.delete().then(
() => { () => {
@ -188,21 +177,6 @@ export const PostThreadItem = observer(function PostThreadItem({
) : ( ) : (
<></> <></>
)} )}
{item.downvoteCount ? (
<Link
style={styles.expandedInfoItem}
href={downvotesHref}
title={downvotesTitle}>
<Text style={[s.gray5, s.semiBold, s.f18]}>
<Text style={[s.bold, s.black, s.f18]}>
{item.downvoteCount}
</Text>{' '}
{pluralize(item.downvoteCount, 'downvote')}
</Text>
</Link>
) : (
<></>
)}
</View> </View>
) : ( ) : (
<></> <></>
@ -212,14 +186,11 @@ export const PostThreadItem = observer(function PostThreadItem({
replyCount={item.replyCount} replyCount={item.replyCount}
repostCount={item.repostCount} repostCount={item.repostCount}
upvoteCount={item.upvoteCount} upvoteCount={item.upvoteCount}
downvoteCount={item.downvoteCount}
isReposted={!!item.myState.repost} isReposted={!!item.myState.repost}
isUpvoted={!!item.myState.upvote} isUpvoted={!!item.myState.upvote}
isDownvoted={!!item.myState.downvote}
onPressReply={onPressReply} onPressReply={onPressReply}
onPressToggleRepost={onPressToggleRepost} onPressToggleRepost={onPressToggleRepost}
onPressToggleUpvote={onPressToggleUpvote} onPressToggleUpvote={onPressToggleUpvote}
onPressToggleDownvote={onPressToggleDownvote}
/> />
</View> </View>
</View> </View>
@ -301,14 +272,11 @@ export const PostThreadItem = observer(function PostThreadItem({
replyCount={item.replyCount} replyCount={item.replyCount}
repostCount={item.repostCount} repostCount={item.repostCount}
upvoteCount={item.upvoteCount} upvoteCount={item.upvoteCount}
downvoteCount={item.downvoteCount}
isReposted={!!item.myState.repost} isReposted={!!item.myState.repost}
isUpvoted={!!item.myState.upvote} isUpvoted={!!item.myState.upvote}
isDownvoted={!!item.myState.downvote}
onPressReply={onPressReply} onPressReply={onPressReply}
onPressToggleRepost={onPressToggleRepost} onPressToggleRepost={onPressToggleRepost}
onPressToggleUpvote={onPressToggleUpvote} onPressToggleUpvote={onPressToggleUpvote}
onPressToggleDownvote={onPressToggleDownvote}
/> />
</View> </View>
</View> </View>

View File

@ -85,11 +85,6 @@ export const Post = observer(function Post({uri}: {uri: string}) {
.toggleUpvote() .toggleUpvote()
.catch(e => console.error('Failed to toggle upvote', record, e)) .catch(e => console.error('Failed to toggle upvote', record, e))
} }
const onPressToggleDownvote = () => {
item
.toggleDownvote()
.catch(e => console.error('Failed to toggle downvote', record, e))
}
const onDeletePost = () => { const onDeletePost = () => {
item.delete().then( item.delete().then(
() => { () => {
@ -154,14 +149,11 @@ export const Post = observer(function Post({uri}: {uri: string}) {
replyCount={item.replyCount} replyCount={item.replyCount}
repostCount={item.repostCount} repostCount={item.repostCount}
upvoteCount={item.upvoteCount} upvoteCount={item.upvoteCount}
downvoteCount={item.downvoteCount}
isReposted={!!item.myState.repost} isReposted={!!item.myState.repost}
isUpvoted={!!item.myState.upvote} isUpvoted={!!item.myState.upvote}
isDownvoted={!!item.myState.downvote}
onPressReply={onPressReply} onPressReply={onPressReply}
onPressToggleRepost={onPressToggleRepost} onPressToggleRepost={onPressToggleRepost}
onPressToggleUpvote={onPressToggleUpvote} onPressToggleUpvote={onPressToggleUpvote}
onPressToggleDownvote={onPressToggleDownvote}
/> />
</View> </View>
</View> </View>

View File

@ -53,11 +53,6 @@ export const FeedItem = observer(function FeedItem({
.toggleUpvote() .toggleUpvote()
.catch(e => console.error('Failed to toggle upvote', record, e)) .catch(e => console.error('Failed to toggle upvote', record, e))
} }
const onPressToggleDownvote = () => {
item
.toggleDownvote()
.catch(e => console.error('Failed to toggle downvote', record, e))
}
const onDeletePost = () => { const onDeletePost = () => {
item.delete().then( item.delete().then(
() => { () => {
@ -150,14 +145,11 @@ export const FeedItem = observer(function FeedItem({
replyCount={item.replyCount} replyCount={item.replyCount}
repostCount={item.repostCount} repostCount={item.repostCount}
upvoteCount={item.upvoteCount} upvoteCount={item.upvoteCount}
downvoteCount={item.downvoteCount}
isReposted={!!item.myState.repost} isReposted={!!item.myState.repost}
isUpvoted={!!item.myState.upvote} isUpvoted={!!item.myState.upvote}
isDownvoted={!!item.myState.downvote}
onPressReply={onPressReply} onPressReply={onPressReply}
onPressToggleRepost={onPressToggleRepost} onPressToggleRepost={onPressToggleRepost}
onPressToggleUpvote={onPressToggleUpvote} onPressToggleUpvote={onPressToggleUpvote}
onPressToggleDownvote={onPressToggleDownvote}
/> />
</View> </View>
</View> </View>

View File

@ -9,7 +9,7 @@ import {
} from 'react-native' } from 'react-native'
import LinearGradient from 'react-native-linear-gradient' import LinearGradient from 'react-native-linear-gradient'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {UpIcon, DownIcon} from '../../lib/icons' import {UpIcon} from '../../lib/icons'
import {s, colors} from '../../lib/styles' import {s, colors} from '../../lib/styles'
export function LoadingPlaceholder({ export function LoadingPlaceholder({
@ -102,9 +102,7 @@ export function PostLoadingPlaceholder({
<View style={s.flex1}> <View style={s.flex1}>
<UpIcon style={s.gray3} size={18} /> <UpIcon style={s.gray3} size={18} />
</View> </View>
<View style={s.flex1}> <View style={s.flex1}></View>
<DownIcon style={s.gray3} size={18} />
</View>
</View> </View>
</View> </View>
</View> </View>

View File

@ -8,27 +8,23 @@ import Animated, {
interpolate, interpolate,
} from 'react-native-reanimated' } from 'react-native-reanimated'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {UpIcon, UpIconSolid, DownIcon, DownIconSolid} from '../../lib/icons' import {UpIcon, UpIconSolid} from '../../lib/icons'
import {s, colors} from '../../lib/styles' import {s, colors} from '../../lib/styles'
interface PostCtrlsOpts { interface PostCtrlsOpts {
replyCount: number replyCount: number
repostCount: number repostCount: number
upvoteCount: number upvoteCount: number
downvoteCount: number
isReposted: boolean isReposted: boolean
isUpvoted: boolean isUpvoted: boolean
isDownvoted: boolean
onPressReply: () => void onPressReply: () => void
onPressToggleRepost: () => void onPressToggleRepost: () => void
onPressToggleUpvote: () => void onPressToggleUpvote: () => void
onPressToggleDownvote: () => void
} }
export function PostCtrls(opts: PostCtrlsOpts) { export function PostCtrls(opts: PostCtrlsOpts) {
const interp1 = useSharedValue<number>(0) const interp1 = useSharedValue<number>(0)
const interp2 = useSharedValue<number>(0) const interp2 = useSharedValue<number>(0)
const interp3 = useSharedValue<number>(0)
const anim1Style = useAnimatedStyle(() => ({ const anim1Style = useAnimatedStyle(() => ({
transform: [{scale: interpolate(interp1.value, [0, 1.0], [1.0, 3.0])}], transform: [{scale: interpolate(interp1.value, [0, 1.0], [1.0, 3.0])}],
@ -38,10 +34,6 @@ export function PostCtrls(opts: PostCtrlsOpts) {
transform: [{scale: interpolate(interp2.value, [0, 1.0], [1.0, 3.0])}], transform: [{scale: interpolate(interp2.value, [0, 1.0], [1.0, 3.0])}],
opacity: interpolate(interp2.value, [0, 1.0], [1.0, 0.0]), opacity: interpolate(interp2.value, [0, 1.0], [1.0, 0.0]),
})) }))
const anim3Style = useAnimatedStyle(() => ({
transform: [{scale: interpolate(interp3.value, [0, 1.0], [1.0, 3.0])}],
opacity: interpolate(interp3.value, [0, 1.0], [1.0, 0.0]),
}))
const onPressToggleRepostWrapper = () => { const onPressToggleRepostWrapper = () => {
if (!opts.isReposted) { if (!opts.isReposted) {
@ -59,14 +51,6 @@ export function PostCtrls(opts: PostCtrlsOpts) {
} }
opts.onPressToggleUpvote() opts.onPressToggleUpvote()
} }
const onPressToggleDownvoteWrapper = () => {
if (!opts.isDownvoted) {
interp3.value = withTiming(1, {duration: 300}, () => {
interp3.value = withDelay(100, withTiming(0, {duration: 20}))
})
}
opts.onPressToggleDownvote()
}
return ( return (
<View style={styles.ctrls}> <View style={styles.ctrls}>
@ -124,27 +108,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={s.flex1}> <View style={s.flex1}></View>
<TouchableOpacity
style={styles.ctrl}
onPress={onPressToggleDownvoteWrapper}>
<Animated.View style={anim3Style}>
{opts.isDownvoted ? (
<DownIconSolid style={styles.ctrlIconDownvoted} size={18} />
) : (
<DownIcon style={styles.ctrlIcon} size={18} />
)}
</Animated.View>
<Text
style={
opts.isDownvoted
? [s.bold, s.blue3, s.f13, s.ml5]
: [s.gray5, s.f13, s.ml5]
}>
{opts.downvoteCount}
</Text>
</TouchableOpacity>
</View>
</View> </View>
) )
} }
@ -169,7 +133,4 @@ const styles = StyleSheet.create({
ctrlIconUpvoted: { ctrlIconUpvoted: {
color: colors.red3, color: colors.red3,
}, },
ctrlIconDownvoted: {
color: colors.blue3,
},
}) })