thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: issue comment reaction workflow and mutation update (#2537)

Browse Source
This commit is contained in:
guru_sainath 2023-10-25 19:24:14 +05:30 committed by GitHub
parent a6d741e784
commit ca2da41dd2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 75 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/components/issues/issue-peek-overview/activity/card.tsx
View File

@ -12,6 +12,7 @@ import { render24HourFormatTime, renderLongDateFormat, timeAgo } from "helpers/d
interface IssueActivityCard {
workspaceSlug: string;
projectId: string;
issueId: string;
user: any;
issueComments: any;
issueCommentUpdate: (comment: any) => void;
@ -24,6 +25,7 @@ export const IssueActivityCard: FC<IssueActivityCard> = (props) => {
const {
workspaceSlug,
projectId,
issueId,
user,
issueComments,
issueCommentUpdate,
@ -118,6 +120,7 @@ export const IssueActivityCard: FC<IssueActivityCard> = (props) => {
<IssueCommentCard
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
user={user}
comment={activityItem}
onSubmit={issueCommentUpdate}

3
web/components/issues/issue-peek-overview/activity/comment-card.tsx
View File

@ -23,6 +23,7 @@ type IIssueCommentCard = {
showAccessSpecifier?: boolean;
workspaceSlug: string;
projectId: string;
issueId: string;
user: any;
issueCommentReactionCreate: (commentId: string, reaction: string) => void;
issueCommentReactionRemove: (commentId: string, reaction: string) => void;
@ -36,6 +37,7 @@ export const IssueCommentCard: React.FC<IIssueCommentCard> = (props) => {
showAccessSpecifier = false,
workspaceSlug,
projectId,
issueId,
user,
issueCommentReactionCreate,
issueCommentReactionRemove,
@ -157,6 +159,7 @@ export const IssueCommentCard: React.FC<IIssueCommentCard> = (props) => {
<IssueCommentReaction
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
user={user}
comment={comment}
issueCommentReactionCreate={issueCommentReactionCreate}

19
web/components/issues/issue-peek-overview/activity/comment-reaction.tsx
View File

@ -9,8 +9,9 @@ import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
interface IIssueCommentReaction {
workspaceSlug: any;
projectId: any;
workspaceSlug: string;
projectId: string;
issueId: string;
user: any;
comment: any;
@ -19,7 +20,8 @@ interface IIssueCommentReaction {
}
export const IssueCommentReaction: FC<IIssueCommentReaction> = observer((props) => {
const { workspaceSlug, projectId, user, comment, issueCommentReactionCreate, issueCommentReactionRemove } = props;
const { workspaceSlug, projectId, issueId, user, comment, issueCommentReactionCreate, issueCommentReactionRemove } =
props;
const { issueDetail: issueDetailStore }: RootStore = useMobxStore();
@ -32,15 +34,18 @@ export const IssueCommentReaction: FC<IIssueCommentReaction> = observer((props)
};
useSWR(
workspaceSlug && projectId && comment && comment?.id ? `ISSUE+PEEK_OVERVIEW_COMMENT_${comment?.id}` : null,
workspaceSlug && projectId && issueId && comment && comment?.id
? `ISSUE+PEEK_OVERVIEW_COMMENT_${comment?.id}`
: null,
() => {
if (workspaceSlug && projectId && comment && comment.id) {
issueDetailStore.fetchIssueCommentReactions(workspaceSlug, projectId, comment?.id);
if (workspaceSlug && projectId && issueId && comment && comment.id) {
issueDetailStore.fetchIssueCommentReactions(workspaceSlug, projectId, issueId, comment?.id);
}
}
);
const issueReactions = issueDetailStore?.getIssueCommentReactionsByCommentId(comment.id) || [];
let issueReactions = issueDetailStore?.getIssueCommentReactions || null;
issueReactions = issueReactions && comment.id ? issueReactions?.[comment.id] : [];
return (
<div>

3
web/components/issues/issue-peek-overview/activity/view.tsx
View File

@ -6,6 +6,7 @@ import { IssueCommentEditor } from "./comment-editor";
interface IIssueComment {
workspaceSlug: string;
projectId: string;
issueId: string;
user: any;
issueComments: any;
issueCommentCreate: (comment: any) => void;
@ -19,6 +20,7 @@ export const IssueComment: FC<IIssueComment> = (props) => {
const {
workspaceSlug,
projectId,
issueId,
user,
issueComments,
issueCommentCreate,
@ -46,6 +48,7 @@ export const IssueComment: FC<IIssueComment> = (props) => {
<IssueActivityCard
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
user={user}
issueComments={issueComments}
issueCommentUpdate={issueCommentUpdate}

2
web/components/issues/issue-peek-overview/reactions/root.tsx
View File

@ -15,7 +15,7 @@ export const IssueReaction: FC<IIssueReaction> = (props) => {
const handleReaction = (reaction: string) => {
const isReactionAvailable =
issueReactions[reaction].find((_reaction: any) => _reaction.actor === user?.id) ?? false;
issueReactions?.[reaction].find((_reaction: any) => _reaction.actor === user?.id) ?? false;
if (isReactionAvailable) issueReactionRemove(reaction);
else issueReactionCreate(reaction);

4
web/components/issues/issue-peek-overview/root.tsx
View File

@ -50,10 +50,10 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
issueDetailStore.removeIssueComment(workspaceSlug, projectId, issueId, commentId);
const issueCommentReactionCreate = (commentId: string, reaction: string) =>
issueDetailStore.creationIssueCommentReaction(workspaceSlug, projectId, commentId, reaction);
issueDetailStore.creationIssueCommentReaction(workspaceSlug, projectId, issueId, commentId, reaction);
const issueCommentReactionRemove = (commentId: string, reaction: string) =>
issueDetailStore.removeIssueCommentReaction(workspaceSlug, projectId, commentId, reaction);
issueDetailStore.removeIssueCommentReaction(workspaceSlug, projectId, issueId, commentId, reaction);
return (
<IssueView

2
web/components/issues/issue-peek-overview/view.tsx
View File

@ -215,6 +215,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
<IssueComment
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
user={user}
issueComments={issueComments}
issueCommentCreate={issueCommentCreate}
@ -242,6 +243,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
<IssueComment
workspaceSlug={workspaceSlug}
projectId={projectId}
issueId={issueId}
user={user}
issueComments={issueComments}
issueCommentCreate={issueCommentCreate}

73
web/store/issue/issue_detail.store.ts
View File

@ -22,7 +22,9 @@ export interface IIssueDetailStore {
[issueId: string]: any;
};
issue_comment_reactions: {
[issueId: string]: any;
[issueId: string]: {
[comment_id: string]: any;
};
};
setPeekId: (issueId: string | null) => void;
@ -31,7 +33,7 @@ export interface IIssueDetailStore {
getIssue: IIssue | null;
getIssueReactions: any | null;
getIssueComments: any | null;
getIssueCommentReactionsByCommentId: any | null;
getIssueCommentReactions: any | null;
// fetch issue details
fetchIssueDetails: (workspaceSlug: string, projectId: string, issueId: string) => Promise<IIssue>;
@ -59,16 +61,23 @@ export interface IIssueDetailStore {
) => Promise<void>;
removeIssueComment: (workspaceSlug: string, projectId: string, issueId: string, commentId: string) => Promise<void>;
fetchIssueCommentReactions: (workspaceSlug: string, projectId: string, commentId: string) => Promise<void>;
fetchIssueCommentReactions: (
workspaceSlug: string,
projectId: string,
issueId: string,
commentId: string
) => Promise<void>;
creationIssueCommentReaction: (
workspaceSlug: string,
projectId: string,
issueId: string,
commentId: string,
reaction: string
) => Promise<void>;
removeIssueCommentReaction: (
workspaceSlug: string,
projectId: string,
issueId: string,
commentId: string,
reaction: string
) => Promise<void>;
@ -114,11 +123,10 @@ export class IssueDetailStore implements IIssueDetailStore {
getIssue: computed,
getIssueReactions: computed,
getIssueComments: computed,
getIssueCommentReactions: computed,
setPeekId: action,
getIssueCommentReactionsByCommentId: action,
fetchIssueDetails: action,
createIssue: action,
updateIssue: action,
@ -164,11 +172,11 @@ export class IssueDetailStore implements IIssueDetailStore {
return _comments || null;
}
getIssueCommentReactionsByCommentId = (commentId: string) => {
if (!commentId) return null;
const _reactions = this.issue_comment_reactions[commentId];
return _reactions || null;
};
get getIssueCommentReactions() {
if (!this.peekId) return null;
const _commentReactions = this.issue_comment_reactions[this.peekId];
return _commentReactions || null;
}
setPeekId = (issueId: string | null) => (this.peekId = issueId);
@ -513,13 +521,16 @@ export class IssueDetailStore implements IIssueDetailStore {
};
// comment reaction
fetchIssueCommentReactions = async (workspaceSlug: string, projectId: string, commentId: string) => {
fetchIssueCommentReactions = async (workspaceSlug: string, projectId: string, issueId: string, commentId: string) => {
try {
const _reactions = await this.issueReactionService.listIssueCommentReactions(workspaceSlug, projectId, commentId);
const _issue_comment_reactions = {
...this.issue_comment_reactions,
[commentId]: groupReactionEmojis(_reactions),
[issueId]: {
...this.issue_comment_reactions[issueId],
[commentId]: groupReactionEmojis(_reactions),
},
};
runInAction(() => {
@ -533,10 +544,12 @@ export class IssueDetailStore implements IIssueDetailStore {
creationIssueCommentReaction = async (
workspaceSlug: string,
projectId: string,
issueId: string,
commentId: string,
reaction: string
) => {
let _currentReactions = this.getIssueCommentReactionsByCommentId(commentId);
let _currentReactions = this.getIssueCommentReactions;
_currentReactions = _currentReactions && commentId ? _currentReactions?.[commentId] : null;
try {
const _reaction = await this.issueReactionService.createIssueCommentReaction(
@ -550,14 +563,19 @@ export class IssueDetailStore implements IIssueDetailStore {
_currentReactions = {
..._currentReactions,
[reaction]: [..._currentReactions[reaction], { ..._reaction }],
[reaction]: [..._currentReactions?.[reaction], { ..._reaction }],
};
const _issue_comment_reactions = {
...this.issue_comment_reactions,
[issueId]: {
...this.issue_comment_reactions[issueId],
[commentId]: _currentReactions,
},
};
runInAction(() => {
this.issue_comment_reactions = {
...this.issue_comment_reactions,
[commentId]: _currentReactions,
};
this.issue_comment_reactions = _issue_comment_reactions;
});
} catch (error) {
console.warn("error removing the issue comment", error);
@ -567,10 +585,12 @@ export class IssueDetailStore implements IIssueDetailStore {
removeIssueCommentReaction = async (
workspaceSlug: string,
projectId: string,
issueId: string,
commentId: string,
reaction: string
) => {
let _currentReactions = this.getIssueCommentReactionsByCommentId(commentId);
let _currentReactions = this.getIssueCommentReactions;
_currentReactions = _currentReactions && commentId ? _currentReactions?.[commentId] : null;
try {
const user = this.rootStore.user.currentUser;
@ -578,14 +598,19 @@ export class IssueDetailStore implements IIssueDetailStore {
if (user) {
_currentReactions = {
..._currentReactions,
[reaction]: [..._currentReactions[reaction].filter((r: any) => r.actor !== user.id)],
[reaction]: [..._currentReactions?.[reaction].filter((r: any) => r.actor !== user.id)],
};
const _issue_comment_reactions = {
...this.issue_comment_reactions,
[issueId]: {
...this.issue_comment_reactions[issueId],
[commentId]: _currentReactions,
},
};
runInAction(() => {
this.issue_comment_reactions = {
...this.issue_comment_reactions,
[commentId]: _currentReactions,
};
this.issue_comment_reactions = _issue_comment_reactions;
});
await this.issueReactionService.deleteIssueCommentReaction(workspaceSlug, projectId, commentId, reaction);