From 3d221f8925785079d446d706bf5629e1f346a4f3 Mon Sep 17 00:00:00 2001
From: Mehdi Zibout <113536090+mehdi-zibout@users.noreply.github.com>
Date: Mon, 6 Feb 2023 20:59:22 +0100
Subject: [PATCH] Expose thumbs up/down buttons in the message table (#1185)

* Expose thumbs up/down buttons in the message table

* show thumbs up/down count only when its greater than 0
---
 .../Messages/MessageEmojiButton.tsx           |  2 +-
 .../components/Messages/MessageTableEntry.tsx | 30 ++++++++++++-------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/website/src/components/Messages/MessageEmojiButton.tsx b/website/src/components/Messages/MessageEmojiButton.tsx
index 41d256bf..b6aab5bc 100644
--- a/website/src/components/Messages/MessageEmojiButton.tsx
+++ b/website/src/components/Messages/MessageEmojiButton.tsx
@@ -22,7 +22,7 @@ export const MessageEmojiButton = ({ emoji, checked, onClick }: MessageEmojiButt
       padding="0"
     >
       <EmojiIcon style={{ height: "1em" }} />
-      <span style={{ marginInlineEnd: "0.25em" }}>{emoji.count}</span>
+      {emoji.count > 0 && <span style={{ marginInlineEnd: "0.25em" }}>{emoji.count}</span>}
     </Button>
   );
 };
diff --git a/website/src/components/Messages/MessageTableEntry.tsx b/website/src/components/Messages/MessageTableEntry.tsx
index 3fb8d59a..236602e3 100644
--- a/website/src/components/Messages/MessageTableEntry.tsx
+++ b/website/src/components/Messages/MessageTableEntry.tsx
@@ -40,8 +40,11 @@ export function MessageTableEntry({ message, enabled, highlight }: MessageTableE
   const router = useRouter();
   const [emojiState, setEmojis] = useState<MessageEmojis>({ emojis: {}, user_emojis: [] });
   useEffect(() => {
+    const emojis = { ...message.emojis };
+    emojis["+1"] = emojis["+1"] || 0;
+    emojis["-1"] = emojis["-1"] || 0;
     setEmojis({
-      emojis: message?.emojis || {},
+      emojis: emojis,
       user_emojis: message?.user_emojis || [],
     });
   }, [message.emojis, message.user_emojis]);
@@ -72,7 +75,11 @@ export function MessageTableEntry({ message, enabled, highlight }: MessageTableE
   const highlightColor = useColorModeValue(colors.light.active, colors.dark.active);
 
   const { trigger: sendEmojiChange } = useSWRMutation(`/api/messages/${message.id}/emoji`, post, {
-    onSuccess: setEmojis,
+    onSuccess: (data) => {
+      data.emojis["+1"] = data.emojis["+1"] || 0;
+      data.emojis["-1"] = data.emojis["-1"] || 0;
+      setEmojis(data);
+    },
   });
   const react = (emoji: string, state: boolean) => {
     sendEmojiChange({ op: state ? "add" : "remove", emoji });
@@ -102,14 +109,17 @@ export function MessageTableEntry({ message, enabled, highlight }: MessageTableE
         >
           {Object.entries(emojiState.emojis)
             .filter(([emoji]) => isKnownEmoji(emoji))
-            .map(([emoji, count]) => (
-              <MessageEmojiButton
-                key={emoji}
-                emoji={{ name: emoji, count }}
-                checked={emojiState.user_emojis.includes(emoji)}
-                onClick={() => react(emoji, !emojiState.user_emojis.includes(emoji))}
-              />
-            ))}
+            .sort(([emoji]) => -emoji)
+            .map(([emoji, count]) => {
+              return (
+                <MessageEmojiButton
+                  key={emoji}
+                  emoji={{ name: emoji, count }}
+                  checked={emojiState.user_emojis.includes(emoji)}
+                  onClick={() => react(emoji, !emojiState.user_emojis.includes(emoji))}
+                />
+              );
+            })}
           <MessageActions
             react={react}
             userEmoji={emojiState.user_emojis}