reaction fixes

This commit is contained in:
sriram veeraghanta 2023-09-01 14:31:48 +05:30
parent 77a043b141
commit a1e249a5bb
5 changed files with 24 additions and 34 deletions

View File

@ -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}

View File

@ -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 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;
issueDetailsStore.addIssueReaction(workspace_slug.toString(), project_slug.toString(), issueId, {
reaction: reactionHex,
});
};
const handleReactionClick = (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)
issueDetailsStore.removeIssueReaction(
workspace_slug.toString(),
project_slug.toString(),
userReaction.issue,
reactionHex
);
else
issueDetailsStore.addIssueReaction(workspace_slug.toString(), project_slug.toString(), issueId, {
reaction: reactionHex,
});
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"
: ""
}

View File

@ -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 />

View File

@ -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),

View File

@ -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);
const issueDetails = await this.issueService.getIssueById(workspaceSlug, projectId, issueId);
await this.issueService.deleteIssueReaction(workspaceSlug, projectId, issueId, reactionId);
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");
}
};