import { FC } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; // hooks import { useUser } from "hooks/store"; import useCommentReaction from "hooks/use-comment-reaction"; // ui // import { ReactionSelector } from "components/core"; // helper import { renderEmoji } from "helpers/emoji.helper"; // types import { IssueCommentReaction } from "@plane/types"; type Props = { projectId?: string | string[]; commentId: string; readonly?: boolean; }; export const CommentReaction: FC = observer((props) => { const { projectId, commentId, readonly = false } = props; // router const router = useRouter(); const { workspaceSlug } = router.query; // store hooks const { currentUser } = useUser(); const { commentReactions, groupedReactions, handleReactionCreate, handleReactionDelete } = useCommentReaction( workspaceSlug, projectId, commentId ); const handleReactionClick = (reaction: string) => { if (!workspaceSlug || !projectId || !commentId) return; const isSelected = commentReactions?.some( (r: IssueCommentReaction) => r.actor === currentUser?.id && r.reaction === reaction ); if (isSelected) { handleReactionDelete(reaction); } else { handleReactionCreate(reaction); } }; return (
{/* FIXME: have to replace this once the issue details page is ready --issue-detail-- */} {/* {!readonly && ( reaction.actor === currentUser?.id) .map((r: IssueCommentReaction) => r.reaction) || [] } onSelect={handleReactionClick} /> )} */} {Object.keys(groupedReactions || {}).map( (reaction) => groupedReactions?.[reaction]?.length && groupedReactions[reaction].length > 0 && ( ) )}
); });