Replace likes with votes on post UIs

src/view/com/post-thread/PostThreadItem.tsx

@@ -13,6 +13,7 @@ import {UserAvatar} from '../util/UserAvatar'
 import {s, colors} from '../../lib/styles'
 import {ago, pluralize} from '../../lib/strings'
 import {useStores} from '../../../state'
+import {PostCtrls} from '../util/PostCtrls'
 
 const PARENT_REPLY_LINE_LENGTH = 8
 
@@ -64,50 +65,6 @@ export const PostThreadItem = observer(function PostThreadItem({
       .catch(e => console.error('Failed to toggle like', record, e))
   }
 
-  const Ctrls = () => (
-    <View style={styles.ctrls}>
-      <TouchableOpacity style={styles.ctrl} onPress={onPressReply}>
-        <FontAwesomeIcon
-          style={styles.ctrlIcon}
-          icon={['far', 'comment']}
-          size={14}
-        />
-        <Text style={s.f13}>{item.replyCount}</Text>
-      </TouchableOpacity>
-      <TouchableOpacity style={styles.ctrl} onPress={onPressToggleRepost}>
-        <FontAwesomeIcon
-          style={
-            item.myState.repost ? styles.ctrlIconReposted : styles.ctrlIcon
-          }
-          icon="retweet"
-          size={18}
-        />
-        <Text style={item.myState.repost ? [s.bold, s.green3, s.f13] : s.f13}>
-          {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']}
-          size={14}
-        />
-        <Text style={item.myState.like ? [s.bold, s.red3, s.f13] : s.f13}>
-          {item.likeCount}
-        </Text>
-      </TouchableOpacity>
-      <TouchableOpacity
-        style={styles.ctrl}
-        onPress={() => onPressShare(item.uri)}>
-        <FontAwesomeIcon
-          style={styles.ctrlIcon}
-          icon="share-from-square"
-          size={14}
-        />
-      </TouchableOpacity>
-    </View>
-  )
-
   if (item._isHighlightedPost) {
     return (
       <View style={styles.outer}>
@@ -194,7 +151,16 @@ export const PostThreadItem = observer(function PostThreadItem({
             <></>
           )}
           <View style={[s.pl10]}>
-            <Ctrls />
+            <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>
       </View>
@@ -291,7 +257,16 @@ export const PostThreadItem = observer(function PostThreadItem({
                 style={[styles.postText, s.f15, s['lh15-1.3']]}
               />
             </View>
-            <Ctrls />
+            <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>
@@ -370,26 +345,4 @@ const styles = StyleSheet.create({
   expandedInfoItem: {
     marginRight: 10,
   },
-  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,
-  },
 })

src/view/com/post/Post.tsx

@@ -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}>
+          <PostCtrls
-            <TouchableOpacity style={styles.ctrl} onPress={onPressReply}>
+            replyCount={item.replyCount}
-              <FontAwesomeIcon
+            repostCount={item.repostCount}
-                style={styles.ctrlIcon}
+            likeCount={item.likeCount}
-                icon={['far', 'comment']}
+            isReposted={!!item.myState.repost}
+            isLiked={!!item.myState.like}
+            onPressReply={onPressReply}
+            onPressToggleRepost={onPressToggleRepost}
+            onPressToggleLike={onPressToggleLike}
           />
-              <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>
         </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,
-  },
 })

src/view/com/posts/FeedItem.tsx

@@ -9,6 +9,7 @@ import {SharePostModel} from '../../../state/models/shell'
 import {Link} from '../util/Link'
 import {PostDropdownBtn} from '../util/DropdownBtn'
 import {UserInfoText} from '../util/UserInfoText'
+import {PostCtrls} from '../util/PostCtrls'
 import {RichText} from '../util/RichText'
 import {UserAvatar} from '../util/UserAvatar'
 import {s, colors} from '../../lib/styles'
@@ -126,52 +127,16 @@ export const FeedItem = observer(function FeedItem({
               style={[s.f15, s['lh15-1.3']]}
             />
           </View>
-          <View style={styles.ctrls}>
+          <PostCtrls
-            <TouchableOpacity style={styles.ctrl} onPress={onPressReply}>
+            replyCount={item.replyCount}
-              <FontAwesomeIcon
+            repostCount={item.repostCount}
-                style={styles.ctrlIcon}
+            likeCount={item.likeCount}
-                icon={['far', 'comment']}
+            isReposted={!!item.myState.repost}
-                size={14}
+            isLiked={!!item.myState.like}
+            onPressReply={onPressReply}
+            onPressToggleRepost={onPressToggleRepost}
+            onPressToggleLike={onPressToggleLike}
           />
-              <Text style={s.f13}>{item.replyCount}</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.ctrl} onPress={onPressToggleRepost}>
-              <FontAwesomeIcon
-                style={
-                  item.myState.repost
-                    ? styles.ctrlIconReposted
-                    : styles.ctrlIcon
-                }
-                icon="retweet"
-                size={18}
-              />
-              <Text
-                style={item.myState.repost ? [s.bold, s.green3, s.f13] : s.f13}>
-                {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']}
-                size={14}
-              />
-              <Text style={item.myState.like ? [s.bold, s.red3, s.f13] : s.f13}>
-                {item.likeCount}
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={styles.ctrl}
-              onPress={() => onPressShare(item.uri)}>
-              <FontAwesomeIcon
-                style={styles.ctrlIcon}
-                icon="share-from-square"
-                size={14}
-              />
-            </TouchableOpacity>
-          </View>
         </View>
       </View>
     </Link>
@@ -221,26 +186,4 @@ const styles = StyleSheet.create({
   postText: {
     fontFamily: 'Helvetica Neue',
   },
-  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,
-  },
 })

src/view/com/util/PostCtrls.tsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {UpIcon, UpIconSolid, DownIcon, DownIconSolid} from '../../lib/icons'
+import {s, colors} from '../../lib/styles'
+
+interface PostCtrlsOpts {
+  replyCount: number
+  repostCount: number
+  likeCount: number
+  isReposted: boolean
+  isLiked: boolean
+  onPressReply: () => void
+  onPressToggleRepost: () => void
+  onPressToggleLike: () => void
+}
+
+export function PostCtrls(opts: PostCtrlsOpts) {
+  return (
+    <View style={styles.ctrls}>
+      <TouchableOpacity style={styles.ctrl} onPress={opts.onPressReply}>
+        <FontAwesomeIcon
+          style={styles.ctrlIcon}
+          icon={['far', 'comment']}
+          size={14}
+        />
+        <Text style={s.f13}>{opts.replyCount}</Text>
+      </TouchableOpacity>
+      <TouchableOpacity style={styles.ctrl} onPress={opts.onPressToggleRepost}>
+        <FontAwesomeIcon
+          style={opts.isReposted ? styles.ctrlIconReposted : styles.ctrlIcon}
+          icon="retweet"
+          size={18}
+        />
+        <Text style={opts.isReposted ? [s.bold, s.green3, s.f13] : s.f13}>
+          {opts.repostCount}
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity style={styles.ctrl} onPress={opts.onPressToggleLike}>
+        {opts.isLiked ? (
+          <UpIconSolid style={styles.ctrlIconUpvoted} size={18} />
+        ) : (
+          <UpIcon style={styles.ctrlIcon} size={18} />
+        )}
+        <Text style={opts.isLiked ? [s.bold, s.blue3, s.f13] : s.f13}>
+          {opts.likeCount}
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity style={styles.ctrl} onPress={opts.onPressToggleLike}>
+        {opts.isLiked ? (
+          <DownIconSolid style={styles.ctrlIconDownvoted} size={18} />
+        ) : (
+          <DownIcon style={styles.ctrlIcon} size={18} />
+        )}
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  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,
+  },
+  ctrlIconUpvoted: {
+    marginRight: 5,
+    color: colors.blue3,
+  },
+  ctrlIconDownvoted: {
+    marginRight: 5,
+    color: colors.red3,
+  },
+})

src/view/lib/icons.tsx

@@ -91,3 +91,93 @@ export function UserGroupIcon({style}: {style?: StyleProp<ViewStyle>}) {
     </Svg>
   )
 }
+
+export function UpIcon({
+  style,
+  size,
+}: {
+  style?: StyleProp<ViewStyle>
+  size?: string | number
+}) {
+  return (
+    <Svg
+      viewBox="0 0 14 14"
+      width={size || 24}
+      height={size || 24}
+      style={style}>
+      <Path
+        strokeWidth={1.3}
+        stroke="currentColor"
+        d="M 7 3 L 2 8 L 4.5 8 L 4.5 11.5 L 9.5 11.5 L 9.5 8 L 12 8 L 7 3 Z"
+      />
+    </Svg>
+  )
+}
+
+export function UpIconSolid({
+  style,
+  size,
+}: {
+  style?: StyleProp<ViewStyle>
+  size?: string | number
+}) {
+  return (
+    <Svg
+      viewBox="0 0 14 14"
+      width={size || 24}
+      height={size || 24}
+      style={style}>
+      <Path
+        strokeWidth={1.3}
+        stroke="currentColor"
+        fill="currentColor"
+        d="M 7 3 L 2 8 L 4.5 8 L 4.5 11.5 L 9.5 11.5 L 9.5 8 L 12 8 L 7 3 Z"
+      />
+    </Svg>
+  )
+}
+
+export function DownIcon({
+  style,
+  size,
+}: {
+  style?: StyleProp<ViewStyle>
+  size?: string | number
+}) {
+  return (
+    <Svg
+      viewBox="0 0 14 14"
+      width={size || 24}
+      height={size || 24}
+      style={style}>
+      <Path
+        strokeWidth={1.3}
+        stroke="currentColor"
+        d="M 7 11.5 L 2 6.5 L 4.5 6.5 L 4.5 3 L 9.5 3 L 9.5 6.5 L 12 6.5 L 7 11.5 Z"
+      />
+    </Svg>
+  )
+}
+
+export function DownIconSolid({
+  style,
+  size,
+}: {
+  style?: StyleProp<ViewStyle>
+  size?: string | number
+}) {
+  return (
+    <Svg
+      viewBox="0 0 14 14"
+      width={size || 24}
+      height={size || 24}
+      style={style}>
+      <Path
+        strokeWidth={1.3}
+        stroke="currentColor"
+        fill="currentColor"
+        d="M 7 11.5 L 2 6.5 L 4.5 6.5 L 4.5 3 L 9.5 3 L 9.5 6.5 L 12 6.5 L 7 11.5 Z"
+      />
+    </Svg>
+  )
+}