+
+
{props.showVisibility && memo.visibility !== Visibility.PRIVATE && (
- <>
-
-
-
-
-
-
+
+
+
+
+
)}
- {currentUser && memo.reactions.length === 0 && }
+ {currentUser && }
{!readonly &&
}
diff --git a/web/src/components/ReactionSelector.tsx b/web/src/components/ReactionSelector.tsx
index eb76f250..abd46404 100644
--- a/web/src/components/ReactionSelector.tsx
+++ b/web/src/components/ReactionSelector.tsx
@@ -1,8 +1,10 @@
import { Dropdown, Menu, MenuButton } from "@mui/joy";
+import classNames from "classnames";
import { useRef, useState } from "react";
import useClickAway from "react-use/lib/useClickAway";
import Icon from "@/components/Icon";
import { memoServiceClient } from "@/grpcweb";
+import useCurrentUser from "@/hooks/useCurrentUser";
import { MemoNamePrefix, useMemoStore } from "@/store/v1";
import { Memo } from "@/types/proto/api/v2/memo_service";
import { Reaction_Type } from "@/types/proto/api/v2/reaction_service";
@@ -10,6 +12,7 @@ import { stringifyReactionType } from "./ReactionView";
interface Props {
memo: Memo;
+ className?: string;
}
const REACTION_TYPES = [
@@ -24,10 +27,12 @@ const REACTION_TYPES = [
Reaction_Type.EYES,
Reaction_Type.THINKING_FACE,
Reaction_Type.CLOWN_FACE,
+ Reaction_Type.QUESTION_MARK,
];
const ReactionSelector = (props: Props) => {
- const { memo } = props;
+ const { memo, className } = props;
+ const currentUser = useCurrentUser();
const memoStore = useMemoStore();
const [open, setOpen] = useState(false);
const containerRef = useRef
(null);
@@ -36,15 +41,28 @@ const ReactionSelector = (props: Props) => {
setOpen(false);
});
- const handleReactionClick = async (reaction: Reaction_Type) => {
+ const hasReacted = (reactionType: Reaction_Type) => {
+ return memo.reactions.some((r) => r.reactionType === reactionType && r.creator === currentUser?.name);
+ };
+
+ const handleReactionClick = async (reactionType: Reaction_Type) => {
try {
- await memoServiceClient.upsertMemoReaction({
- id: memo.id,
- reaction: {
- contentId: `${MemoNamePrefix}${memo.id}`,
- reactionType: reaction,
- },
- });
+ if (hasReacted(reactionType)) {
+ const reactions = memo.reactions.filter(
+ (reaction) => reaction.reactionType === reactionType && reaction.creator === currentUser.name,
+ );
+ for (const reaction of reactions) {
+ await memoServiceClient.deleteMemoReaction({ id: reaction.id });
+ }
+ } else {
+ await memoServiceClient.upsertMemoReaction({
+ id: memo.id,
+ reaction: {
+ contentId: `${MemoNamePrefix}${memo.id}`,
+ reactionType: reactionType,
+ },
+ });
+ }
await memoStore.getOrFetchMemoById(memo.id, {
skipCache: true,
});
@@ -57,7 +75,12 @@ const ReactionSelector = (props: Props) => {
return (
setOpen(isOpen)}>
-
+
@@ -68,7 +91,10 @@ const ReactionSelector = (props: Props) => {
return (
handleReactionClick(reactionType)}
>
{stringifyReactionType(reactionType)}
diff --git a/web/src/components/ReactionView.tsx b/web/src/components/ReactionView.tsx
index 2c371716..41551eb4 100644
--- a/web/src/components/ReactionView.tsx
+++ b/web/src/components/ReactionView.tsx
@@ -37,6 +37,8 @@ export const stringifyReactionType = (reactionType: Reaction_Type): string => {
return "🤔";
case Reaction_Type.CLOWN_FACE:
return "🤡";
+ case Reaction_Type.QUESTION_MARK:
+ return "❓";
default:
return "";
}
@@ -57,16 +59,16 @@ const stringifyUsers = (users: User[]): string => {
const ReactionView = (props: Props) => {
const { memo, reactionType, users } = props;
- const currenUser = useCurrentUser();
+ const currentUser = useCurrentUser();
const memoStore = useMemoStore();
- const hasReaction = users.some((user) => currenUser && user.username === currenUser.username);
+ const hasReaction = users.some((user) => currentUser && user.username === currentUser.username);
const handleReactionClick = async () => {
- if (!currenUser) {
+ if (!currentUser) {
return;
}
- const index = users.findIndex((user) => user.username === currenUser.username);
+ const index = users.findIndex((user) => user.username === currentUser.username);
try {
if (index === -1) {
await memoServiceClient.upsertMemoReaction({
@@ -78,7 +80,7 @@ const ReactionView = (props: Props) => {
});
} else {
const reactions = memo.reactions.filter(
- (reaction) => reaction.reactionType === reactionType && reaction.creator === currenUser.name,
+ (reaction) => reaction.reactionType === reactionType && reaction.creator === currentUser.name,
);
for (const reaction of reactions) {
await memoServiceClient.deleteMemoReaction({ id: reaction.id });
@@ -95,7 +97,7 @@ const ReactionView = (props: Props) => {