reaction fixes

apps/space/components/issues/peek-overview/comment-detail-card.tsx

@@ -119,7 +119,6 @@ export const CommentCard: React.FC<Props> = observer((props) => {
             </div>
           </form>
           <div className={`${isEditing ? "hidden" : ""}`}>
-            {comment.comment_html}
             <TipTapEditor
               workspaceSlug={workspaceSlug.toString()}
               value={comment.comment_html}

apps/space/components/issues/peek-overview/issue-emoji-reactions.tsx

@@ -1,6 +1,5 @@
+import { useEffect } from "react";
 import { useRouter } from "next/router";
-
-// mobx
 import { observer } from "mobx-react-lite";
 // lib
 import { useMobxStore } from "lib/mobx/store-provider";
@@ -8,7 +7,6 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { groupReactions, renderEmoji } from "helpers/emoji.helper";
 // components
 import { ReactionSelector } from "components/ui";
-import { useEffect } from "react";
 
 export const IssueEmojiReactions: React.FC = observer(() => {
   // router
@@ -22,27 +20,22 @@ export const IssueEmojiReactions: React.FC = observer(() => {
   const reactions = issueId ? issueDetailsStore.details[issueId]?.reactions || [] : [];
   const groupedReactions = groupReactions(reactions, "reaction");
 
-  const handleReactionClick = (reactionHex: string) => {
+  const handleReactionSelectClick = (reactionHex: string) => {
     if (!workspace_slug || !project_slug || !issueId) return;
-
     const userReaction = reactions?.find((r) => r.actor_detail.id === user?.id && r.reaction === reactionHex);
-
+    if (userReaction) return;
-    if (userReaction)
-      issueDetailsStore.removeIssueReaction(
-        workspace_slug.toString(),
-        project_slug.toString(),
-        userReaction.issue,
-        reactionHex
-      );
-    else
     issueDetailsStore.addIssueReaction(workspace_slug.toString(), project_slug.toString(), issueId, {
       reaction: reactionHex,
     });
   };
 
+  const handleReactionClick = (reactionHex: string) => {
+    if (!workspace_slug || !project_slug || !issueId) return;
+    issueDetailsStore.removeIssueReaction(workspace_slug.toString(), project_slug.toString(), issueId, reactionHex);
+  };
+
   useEffect(() => {
     if (user) return;
-
     userStore.fetchCurrentUser();
   }, [user, userStore]);
 
@@ -51,7 +44,7 @@ export const IssueEmojiReactions: React.FC = observer(() => {
       <ReactionSelector
         onSelect={(value) => {
           userStore.requiredLogin(() => {
-            handleReactionClick(value);
+            handleReactionSelectClick(value);
           });
         }}
       />
@@ -69,7 +62,7 @@ export const IssueEmojiReactions: React.FC = observer(() => {
               }}
               key={reaction}
               className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md border ${
-                reactions?.some((r) => r.actor_detail.id === user?.id && r.reaction === reaction)
+                reactions?.some((r) => r?.actor_detail?.id === user?.id && r.reaction === reaction)
                   ? "bg-custom-primary-100/10 border-custom-primary-100"
                   : "bg-custom-background-80 border-transparent"
               }`}
@@ -77,7 +70,7 @@ export const IssueEmojiReactions: React.FC = observer(() => {
               <span>{renderEmoji(reaction)}</span>
               <span
                 className={
-                  reactions?.some((r) => r.actor_detail.id === user?.id && r.reaction === reaction)
+                  reactions?.some((r) => r?.actor_detail?.id === user?.id && r.reaction === reaction)
                     ? "text-custom-primary-100"
                     : ""
                 }

apps/space/components/issues/peek-overview/issue-reaction.tsx

@@ -11,11 +11,9 @@ export const IssueReactions: React.FC = () => {
           <div className="flex gap-2 items-center">
             <IssueVotes />
           </div>
-
           <div className="w-0.5 h-8 bg-custom-background-200" />
         </>
       )}
-
       {projectStore?.deploySettings?.reactions && (
         <div className="flex gap-2 items-center">
           <IssueEmojiReactions />

apps/space/components/tiptap/index.tsx

@@ -37,7 +37,6 @@ const Tiptap = (props: ITipTapRichTextEditor) => {
     borderOnFocus,
     customClassName,
   } = props;
-  console.log("tiptap_value", value);
   const editor = useEditor({
     editable: editable ?? true,
     editorProps: TiptapEditorProps(workspaceSlug, setIsSubmitting),

apps/space/store/issue_details.ts

@@ -33,7 +33,7 @@ export interface IIssueDetailStore {
   deleteIssueComment: (workspaceId: string, projectId: string, issueId: string, comment_id: string) => void;
   // issue reactions
   addIssueReaction: (workspaceId: string, projectId: string, issueId: string, data: any) => void;
-  removeIssueReaction: (workspaceId: string, projectId: string, issueId: string, data: any) => void;
+  removeIssueReaction: (workspaceId: string, projectId: string, issueId: string, reactionId: string) => void;
   // issue votes
   addIssueVote: (workspaceId: string, projectId: string, issueId: string, data: { vote: 1 | -1 }) => Promise<void>;
   removeIssueVote: (workspaceId: string, projectId: string, issueId: string) => Promise<void>;
@@ -177,14 +177,14 @@ class IssueDetailStore implements IssueDetailStore {
   addIssueReaction = async (workspaceSlug: string, projectId: string, issueId: string, data: any) => {
     try {
       const issueVoteResponse = await this.issueService.createIssueReaction(workspaceSlug, projectId, issueId, data);
-      const issueDetails = await this.issueService.getIssueById(workspaceSlug, projectId, issueId);
 
       if (issueVoteResponse) {
         runInAction(() => {
           this.details = {
             ...this.details,
             [issueId]: {
-              ...issueDetails,
+              ...this.details[issueId],
+              reactions: [...this.details[issueId].reactions, issueVoteResponse],
             },
           };
         });
@@ -194,23 +194,24 @@ class IssueDetailStore implements IssueDetailStore {
     }
   };
 
-  removeIssueReaction = async (workspaceSlug: string, projectId: string, issueId: string, data: any) => {
+  removeIssueReaction = async (workspaceSlug: string, projectId: string, issueId: string, reactionId: string) => {
     try {
-      const issueVoteResponse = await this.issueService.deleteIssueReaction(workspaceSlug, projectId, issueId, data);
+      await this.issueService.deleteIssueReaction(workspaceSlug, projectId, issueId, reactionId);
-      const issueDetails = await this.issueService.getIssueById(workspaceSlug, projectId, issueId);
+      const reactions = await this.issueService.getIssueReactions(workspaceSlug, projectId, issueId);
 
-      if (issueVoteResponse && issueDetails) {
+      if (reactions) {
         runInAction(() => {
           this.details = {
             ...this.details,
             [issueId]: {
-              ...issueDetails,
+              ...this.details[issueId],
+              reactions: reactions,
             },
           };
         });
       }
     } catch (error) {
-      console.log("Failed to add issue vote");
+      console.log("Failed to remove issue reaction");
     }
   };