From a6a7e9da529c5f3b1bc0aa41c1c5d51bfbf113df Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Mon, 13 Nov 2023 20:20:25 +0900
Subject: [PATCH] Implement reblog, favourite, bookmark actions

---
 .../components/timelines/status/Actions.tsx   | 66 +++++++++++++++++--
 .../components/timelines/status/Status.tsx    |  2 +-
 2 files changed, 62 insertions(+), 6 deletions(-)

diff --git a/renderer/components/timelines/status/Actions.tsx b/renderer/components/timelines/status/Actions.tsx
index e02f16eace..58bf0274a8 100644
--- a/renderer/components/timelines/status/Actions.tsx
+++ b/renderer/components/timelines/status/Actions.tsx
@@ -1,15 +1,71 @@
+import { Entity, MegalodonInterface } from 'megalodon'
 import { FaBookmark, FaEllipsis, FaReply, FaRetweet, FaStar } from 'react-icons/fa6'
 
-type Props = {}
+type Props = {
+  status: Entity.Status
+  client: MegalodonInterface
+  onRefresh: () => void
+}
 
 export default function Actions(props: Props) {
+  const reblog = async () => {
+    if (props.status.reblogged) {
+      await props.client.unreblogStatus(props.status.id)
+    } else {
+      await props.client.reblogStatus(props.status.id)
+    }
+    props.onRefresh()
+  }
+
+  const favourite = async () => {
+    if (props.status.favourited) {
+      await props.client.unfavouriteStatus(props.status.id)
+    } else {
+      await props.client.favouriteStatus(props.status.id)
+    }
+    props.onRefresh()
+  }
+
+  const bookmark = async () => {
+    if (props.status.bookmarked) {
+      await props.client.unbookmarkStatus(props.status.id)
+    } else {
+      await props.client.bookmarkStatus(props.status.id)
+    }
+    props.onRefresh()
+  }
+
   return (
     <div className="flex gap-6">
-      <FaReply className="w-4 text-gray-400 cursor-pointer hover:text-gray-600" />
-      <FaRetweet className="w-4 text-gray-400 cursor-pointer hover:text-gray-600" />
-      <FaStar className="w-4 text-gray-400 cursor-pointer hover:text-gray-600" />
-      <FaBookmark className="w-4 text-gray-400 cursor-pointer hover:text-gray-600" />
+      <FaReply className={`w-4 text-gray-400 cursor-pointer hover:text-gray-600`} />
+      <FaRetweet className={`${retweetColor(props.status)} w-4 cursor-pointer hover:text-gray-600`} onClick={reblog} />
+      <FaStar className={`${favouriteColor(props.status)} w-4 cursor-pointer hover:text-gray-600`} onClick={favourite} />
+      <FaBookmark className={`${bookmarkColor(props.status)} w-4 cursor-pointer hover:text-gray-600`} onClick={bookmark} />
       <FaEllipsis className="w-4 text-gray-400 cursor-pointer hover:text-gray-600" />
     </div>
   )
 }
+
+const retweetColor = (status: Entity.Status) => {
+  if (status.reblogged) {
+    return 'text-blue-600'
+  } else {
+    return 'text-gray-400'
+  }
+}
+
+const favouriteColor = (status: Entity.Status) => {
+  if (status.favourited) {
+    return 'text-orange-400'
+  } else {
+    return 'text-gray-400'
+  }
+}
+
+const bookmarkColor = (status: Entity.Status) => {
+  if (status.bookmarked) {
+    return 'text-rose-500'
+  } else {
+    return 'text-gray-400'
+  }
+}
diff --git a/renderer/components/timelines/status/Status.tsx b/renderer/components/timelines/status/Status.tsx
index c5972c2cb8..b8c68dd70f 100644
--- a/renderer/components/timelines/status/Status.tsx
+++ b/renderer/components/timelines/status/Status.tsx
@@ -47,7 +47,7 @@ export default function Status(props: Props) {
           {status.poll && <Poll poll={status.poll} onRefresh={onRefresh} client={props.client} />}
           {status.card && <Card card={status.card} />}
           <Media media={status.media_attachments} />
-          <Actions />
+          <Actions status={status} client={props.client} onRefresh={onRefresh} />
         </div>
       </div>
     </div>