import { FC } from "react"; import { useRouter } from "next/router"; // hooks import useUser from "hooks/use-user"; import useCommentReaction from "hooks/use-comment-reaction"; // ui import { ReactionSelector } from "components/core"; // helper import { renderEmoji } from "helpers/emoji.helper"; import { IssueCommentReaction } from "types"; type Props = { projectId?: string | string[]; commentId: string; readonly?: boolean; }; export const CommentReaction: FC = (props) => { const { projectId, commentId, readonly = false } = props; const router = useRouter(); const { workspaceSlug } = router.query; const { user } = 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 === user?.id && r.reaction === reaction ); if (isSelected) { handleReactionDelete(reaction); } else { handleReactionCreate(reaction); } }; return (
{!readonly && ( reaction.actor === user?.id) .map((r: IssueCommentReaction) => r.reaction) || [] } onSelect={handleReactionClick} /> )} {Object.keys(groupedReactions || {}).map( (reaction) => groupedReactions?.[reaction]?.length && groupedReactions[reaction].length > 0 && ( ) )}
); };