From 0ec0ba996f05876d78039509e0ea61528c5faeec Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Fri, 22 Jul 2022 11:18:47 -0500
Subject: Implement like and repost

---
 src/view/com/post-thread/PostThreadItem.tsx | 49 +++++++++++++++++++++++------
 1 file changed, 40 insertions(+), 9 deletions(-)

(limited to 'src/view/com/post-thread/PostThreadItem.tsx')

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',
+  },
 })
-- 
cgit 1.4.1