wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-07-12 00:40:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

Expose thumbs up/down buttons in the message table (#1185)

Browse Source 
* Expose thumbs up/down buttons in the message table

* show thumbs up/down count only when its greater than 0
This commit is contained in:
Mehdi Zibout
2023-02-06 20:59:22 +01:00
committed by GitHub
parent 5943efceff
commit 3d221f8925
2 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/Messages/MessageEmojiButton.tsx
+1 -1
View File
@@ -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>
);
};
website/src/components/Messages/MessageTableEntry.tsx
+20 -10
View File
@@ -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}