// hooks import useUserAuth from "hooks/use-user-auth"; import useIssueReaction from "hooks/use-issue-reaction"; // components import { ReactionSelector } from "components/core"; // string helpers import { renderEmoji } from "helpers/emoji.helper"; // types type Props = { workspaceSlug?: string | string[]; projectId?: string | string[]; issueId?: string | string[]; }; export const IssueReaction: React.FC<Props> = (props) => { const { workspaceSlug, projectId, issueId } = props; const { user } = useUserAuth(); const { reactions, groupedReactions, handleReactionCreate, handleReactionDelete } = useIssueReaction( workspaceSlug, projectId, issueId ); const handleReactionClick = (reaction: string) => { if (!workspaceSlug || !projectId || !issueId) return; const isSelected = reactions?.some((r) => r.actor === user?.id && r.reaction === reaction); if (isSelected) { handleReactionDelete(reaction); } else { handleReactionCreate(reaction); } }; return ( <div className="flex gap-1.5 items-center mt-4"> <ReactionSelector size="md" position="top" value={reactions?.filter((reaction) => reaction.actor === user?.id).map((r) => r.reaction) || []} onSelect={handleReactionClick} /> {Object.keys(groupedReactions || {}).map( (reaction) => groupedReactions?.[reaction]?.length && groupedReactions[reaction].length > 0 && ( <button type="button" onClick={() => { handleReactionClick(reaction); }} key={reaction} className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md ${ reactions?.some((r) => r.actor === user?.id && r.reaction === reaction) ? "bg-custom-primary-100/10" : "bg-custom-background-80" }`} > <span>{renderEmoji(reaction)}</span> <span className={ reactions?.some((r) => r.actor === user?.id && r.reaction === reaction) ? "text-custom-primary-100" : "" } > {groupedReactions?.[reaction].length}{" "} </span> </button> ) )} </div> ); };