import React 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"; type Props = { projectId?: string | string[]; commentId: string; }; export const CommentReaction: React.FC = (props) => { const { projectId, commentId } = props; const router = useRouter(); const { workspaceSlug } = router.query; const { user } = useUser(); const { commentReactions, groupedReactions, handleReactionCreate, handleReactionDelete, isLoading, } = useCommentReaction(workspaceSlug, projectId, commentId); const handleReactionClick = (reaction: string) => { if (!workspaceSlug || !projectId || !commentId) return; const isSelected = commentReactions?.some( (r) => r.actor === user?.id && r.reaction === reaction ); if (isSelected) { handleReactionDelete(reaction); } else { handleReactionCreate(reaction); } }; return (
reaction.actor === user?.id) .map((r) => r.reaction) || [] } onSelect={handleReactionClick} /> {Object.keys(groupedReactions || {}).map( (reaction) => groupedReactions?.[reaction]?.length && groupedReactions[reaction].length > 0 && ( ) )}
); };