Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hide message reaction count when user not reacted yet #1303

Merged
merged 5 commits into from
Feb 8, 2023
Merged

Hide message reaction count when user not reacted yet #1303

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d22eabd
wip
notmd Feb 7, 2023
efd7125
hide reaction count when user not reacted yet
notmd Feb 7, 2023
91a095b
remove tag overide
notmd Feb 7, 2023
00660e5
Merge branch 'main' into hide_message_reaction_count
notmd Feb 8, 2023
30e6294
fix build
notmd Feb 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions website/public/locales/en/message.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"copy_message_id": "Copy message ID",
"copy_message_link": "Copy message link",
"label_action": "Label",
"label_title": "Label",
"message_deleted": "Message deleted",
Expand Down
5 changes: 3 additions & 2 deletions website/src/components/Messages/MessageEmojiButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,10 @@ interface MessageEmojiButtonProps {
emoji: MessageEmoji;
checked?: boolean;
onClick: () => void;
showCount: boolean;
}

export const MessageEmojiButton = ({ emoji, checked, onClick }: MessageEmojiButtonProps) => {
export const MessageEmojiButton = ({ emoji, checked, onClick, showCount }: MessageEmojiButtonProps) => {
const EmojiIcon = emojiIcons.get(emoji.name);
if (!EmojiIcon) return <></>;
return (
Expand All @@ -22,7 +23,7 @@ export const MessageEmojiButton = ({ emoji, checked, onClick }: MessageEmojiButt
padding="0"
>
<EmojiIcon style={{ height: "1em" }} />
{emoji.count > 0 && <span style={{ marginInlineEnd: "0.25em" }}>{emoji.count}</span>}
{emoji.count > 0 && showCount && <span style={{ marginInlineEnd: "0.25em" }}>{emoji.count}</span>}
</Button>
);
};
36 changes: 23 additions & 13 deletions website/src/components/Messages/MessageTableEntry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,14 @@ import {
useToast,
} from "@chakra-ui/react";
import { boolean } from "boolean";
import { ClipboardList, Copy, Flag, MessageSquare, MoreHorizontal, Slash, Trash, User } from "lucide-react";
import { ClipboardList, Copy, Flag, Link, MessageSquare, MoreHorizontal, Slash, Trash, User } from "lucide-react";
import { useRouter } from "next/router";
import { useSession } from "next-auth/react";
import { useTranslation } from "next-i18next";
import { useCallback, useEffect, useMemo, useState } from "react";
import { LabelMessagePopup } from "src/components/Messages/LabelPopup";
import { MessageEmojiButton } from "src/components/Messages/MessageEmojiButton";
import { ReportPopup } from "src/components/Messages/ReportPopup";
import { useHasRole } from "src/hooks/auth/useHasRole";
import { del, post, put } from "src/lib/api";
import { colors } from "src/styles/Theme/colors";
import { Message, MessageEmojis } from "src/types/Conversation";
Expand Down Expand Up @@ -89,6 +89,7 @@ export function MessageTableEntry({ message, enabled, highlight }: MessageTableE
<HStack w={["full", "full", "full", "fit-content"]} gap={2}>
{!inlineAvatar && avatar}
<Box
as={enabled ? "a" : "div"}
width={["full", "full", "full", "fit-content"]}
maxWidth={["full", "full", "full", "2xl"]}
p="4"
Expand Down Expand Up @@ -116,6 +117,7 @@ export function MessageTableEntry({ message, enabled, highlight }: MessageTableE
key={emoji}
emoji={{ name: emoji, count }}
checked={emojiState.user_emojis.includes(emoji)}
showCount={emojiState.user_emojis.filter((emoji) => emoji === "+1" || emoji === "-1").length > 0}
onClick={() => react(emoji, !emojiState.user_emojis.includes(emoji))}
/>
);
Expand Down Expand Up @@ -170,12 +172,12 @@ const MessageActions = ({
}) => {
const toast = useToast();
const { t } = useTranslation(["message", "common"]);
const id = message.id;
const displayId = id.slice(0, CHAR_COUNT) + "..." + id.slice(-CHAR_COUNT);
const { trigger: deleteMessage } = useSWRMutation(`/api/admin/delete_message/${message.id}`, del);
const { id } = message;
const { trigger: deleteMessage } = useSWRMutation(`/api/admin/delete_message/${id}`, del);

const { trigger: stopTree } = useSWRMutation(`/api/admin/stop_tree/${message.id}`, put, {
const { trigger: stopTree } = useSWRMutation(`/api/admin/stop_tree/${id}`, put, {
onSuccess: () => {
const displayId = id.slice(0, CHAR_COUNT) + "..." + id.slice(-CHAR_COUNT);
toast({
title: t("common:success"),
description: t("tree_stopped", { id: displayId }),
Expand All @@ -186,9 +188,6 @@ const MessageActions = ({
},
});

const { data: session } = useSession();
const isAdmin = session?.user?.role === "admin";

const handleDelete = async () => {
await deleteMessage();
mutate((key) => typeof key === "string" && key.startsWith("/api/messages"), undefined, { revalidate: true });
Expand All @@ -198,8 +197,10 @@ const MessageActions = ({
stopTree();
};

const handleCopyId = () => {
navigator.clipboard.writeText(message.id);
const handleCopy = (text: string) => {
navigator.clipboard.writeText(text);
const displayId = text.slice(0, CHAR_COUNT) + "..." + text.slice(-CHAR_COUNT);

toast({
title: t("common:copied"),
description: displayId,
Expand All @@ -209,6 +210,8 @@ const MessageActions = ({
});
};

const isAdmin = useHasRole("admin");

return (
<Menu>
<MenuButton>
Expand All @@ -230,13 +233,20 @@ const MessageActions = ({
{t("report_action")}
</MenuItem>
<MenuDivider />
<MenuItem as="a" href={`/messages/${message.id}`} target="_blank" icon={<MessageSquare />}>
<MenuItem as="a" href={`/messages/${id}`} target="_blank" icon={<MessageSquare />}>
{t("open_new_tab_action")}
</MenuItem>

<MenuItem
onClick={() => handleCopy(`${window.location.protocol}://${window.location.host}/messages/${id}`)}
icon={<Link />}
>
{t("copy_message_link")}
</MenuItem>
{!!isAdmin && (
<>
<MenuDivider />
<MenuItem onClick={handleCopyId} icon={<Copy />}>
<MenuItem onClick={() => handleCopy(id)} icon={<Copy />}>
{t("copy_message_id")}
</MenuItem>
<MenuItem as="a" href={`/admin/manage_user/${message.user_id}`} target="_blank" icon={<User />}>
Expand Down
8 changes: 8 additions & 0 deletions website/src/hooks/auth/useHasRole.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { useSession } from "next-auth/react";
import { Role } from "src/components/RoleSelect";

export const useHasRole = (role: Role) => {
const { data: session } = useSession();

return session?.user?.role === role;
};
2 changes: 1 addition & 1 deletion website/src/pages/messages/[id]/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ MessageDetail.getLayout = (page) => getDashboardLayout(page);
export const getServerSideProps = async ({ locale, query }) => ({
props: {
id: query.id,
...(await serverSideTranslations(locale, ["common", "message", "labelling"])),
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also fix hydration issues in side menu

...(await serverSideTranslations(locale, ["common", "message", "labelling", "side_menu"])),
},
});

Expand Down