mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
reaction fixes
This commit is contained in:
parent
77a043b141
commit
a1e249a5bb
@ -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}
|
||||
|
@ -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"
|
||||
: ""
|
||||
}
|
||||
|
@ -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 />
|
||||
|
@ -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),
|
||||
|
@ -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");
|
||||
}
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user