mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
fix: mutation in issue comments
This commit is contained in:
parent
ada68a9bf7
commit
b5a33d8f4d
@ -1,16 +1,12 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
// next
|
// next
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
// swr
|
|
||||||
import { mutate } from "swr";
|
|
||||||
// headless ui
|
// headless ui
|
||||||
import { Menu } from "@headlessui/react";
|
import { Menu } from "@headlessui/react";
|
||||||
// react hook form
|
// react hook form
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
// hooks
|
// hooks
|
||||||
import useUser from "lib/hooks/useUser";
|
import useUser from "lib/hooks/useUser";
|
||||||
// fetch keys
|
|
||||||
import { PROJECT_ISSUES_COMMENTS } from "constants/fetch-keys";
|
|
||||||
// common
|
// common
|
||||||
import { timeAgo } from "constants/common";
|
import { timeAgo } from "constants/common";
|
||||||
// ui
|
// ui
|
||||||
@ -42,16 +38,6 @@ const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion
|
|||||||
|
|
||||||
const onEnter = (formData: IIssueComment) => {
|
const onEnter = (formData: IIssueComment) => {
|
||||||
if (isSubmitting) return;
|
if (isSubmitting) return;
|
||||||
mutate<IIssueComment[]>(
|
|
||||||
PROJECT_ISSUES_COMMENTS,
|
|
||||||
(prevData) => {
|
|
||||||
const newData = prevData ?? [];
|
|
||||||
const index = newData.findIndex((comment) => comment.id === formData.id);
|
|
||||||
newData[index] = formData;
|
|
||||||
return [...newData];
|
|
||||||
},
|
|
||||||
false
|
|
||||||
);
|
|
||||||
setIsEditing(false);
|
setIsEditing(false);
|
||||||
onSubmit(formData);
|
onSubmit(formData);
|
||||||
};
|
};
|
||||||
@ -155,11 +141,6 @@ const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion
|
|||||||
className="w-full text-left py-2 pl-2"
|
className="w-full text-left py-2 pl-2"
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
mutate<IIssueComment[]>(
|
|
||||||
PROJECT_ISSUES_COMMENTS,
|
|
||||||
(prevData) => (prevData ?? []).filter((c) => c.id !== comment.id),
|
|
||||||
false
|
|
||||||
);
|
|
||||||
handleCommentDeletion(comment.id);
|
handleCommentDeletion(comment.id);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
@ -13,8 +13,6 @@ import CommentCard from "components/project/issues/issue-detail/comment/IssueCom
|
|||||||
import { TextArea, Button, Spinner } from "ui";
|
import { TextArea, Button, Spinner } from "ui";
|
||||||
// types
|
// types
|
||||||
import type { IIssueComment } from "types";
|
import type { IIssueComment } from "types";
|
||||||
// icons
|
|
||||||
import UploadingIcon from "public/animated-icons/uploading.json";
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
comments?: IIssueComment[];
|
comments?: IIssueComment[];
|
||||||
@ -41,11 +39,10 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
|
|||||||
.createIssueComment(workspaceSlug, projectId, issueId, formData)
|
.createIssueComment(workspaceSlug, projectId, issueId, formData)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
console.log(response);
|
console.log(response);
|
||||||
mutate<IIssueComment[]>(
|
mutate<IIssueComment[]>(PROJECT_ISSUES_COMMENTS(issueId), (prevData) => [
|
||||||
PROJECT_ISSUES_COMMENTS,
|
response,
|
||||||
(prevData) => [...(prevData ?? []), response],
|
...(prevData ?? []),
|
||||||
false
|
]);
|
||||||
);
|
|
||||||
reset(defaultValues);
|
reset(defaultValues);
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
@ -58,6 +55,12 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
|
|||||||
.patchIssueComment(workspaceSlug, projectId, issueId, comment.id, comment)
|
.patchIssueComment(workspaceSlug, projectId, issueId, comment.id, comment)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
console.log(response);
|
console.log(response);
|
||||||
|
mutate<IIssueComment[]>(PROJECT_ISSUES_COMMENTS(issueId), (prevData) => {
|
||||||
|
const newData = prevData ?? [];
|
||||||
|
const index = newData.findIndex((comment) => comment.id === response.id);
|
||||||
|
newData[index] = response;
|
||||||
|
return [...newData];
|
||||||
|
});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -65,6 +68,9 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
|
|||||||
await issuesServices
|
await issuesServices
|
||||||
.deleteIssueComment(workspaceSlug, projectId, issueId, commentId)
|
.deleteIssueComment(workspaceSlug, projectId, issueId, commentId)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
|
mutate<IIssueComment[]>(PROJECT_ISSUES_COMMENTS(issueId), (prevData) =>
|
||||||
|
(prevData ?? []).filter((c) => c.id !== commentId)
|
||||||
|
);
|
||||||
console.log(response);
|
console.log(response);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
@ -17,7 +17,7 @@ export const PROJECT_ISSUES_LIST = (workspaceSlug: string, projectId: string) =>
|
|||||||
export const PROJECT_ISSUES_DETAILS = (issueId: string) => `PROJECT_ISSUES_DETAILS_${issueId}`;
|
export const PROJECT_ISSUES_DETAILS = (issueId: string) => `PROJECT_ISSUES_DETAILS_${issueId}`;
|
||||||
export const PROJECT_ISSUES_PROPERTIES = (projectId: string) =>
|
export const PROJECT_ISSUES_PROPERTIES = (projectId: string) =>
|
||||||
`PROJECT_ISSUES_PROPERTIES_${projectId}`;
|
`PROJECT_ISSUES_PROPERTIES_${projectId}`;
|
||||||
export const PROJECT_ISSUES_COMMENTS = "PROJECT_ISSUES_COMMENTS";
|
export const PROJECT_ISSUES_COMMENTS = (issueId: string) => `PROJECT_ISSUES_COMMENTS_${issueId}`;
|
||||||
export const PROJECT_ISSUES_ACTIVITY = "PROJECT_ISSUES_ACTIVITY";
|
export const PROJECT_ISSUES_ACTIVITY = "PROJECT_ISSUES_ACTIVITY";
|
||||||
export const PROJECT_ISSUE_BY_STATE = (projectId: string) => `PROJECT_ISSUE_BY_STATE_${projectId}`;
|
export const PROJECT_ISSUE_BY_STATE = (projectId: string) => `PROJECT_ISSUE_BY_STATE_${projectId}`;
|
||||||
export const PROJECT_ISSUE_LABELS = (projectId: string) => `PROJECT_ISSUE_LABELS_${projectId}`;
|
export const PROJECT_ISSUE_LABELS = (projectId: string) => `PROJECT_ISSUE_LABELS_${projectId}`;
|
||||||
|
@ -115,7 +115,7 @@ const IssueDetail: NextPage = () => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
const { data: issueComments } = useSWR<IIssueComment[]>(
|
const { data: issueComments } = useSWR<IIssueComment[]>(
|
||||||
activeWorkspace && projectId && issueId ? PROJECT_ISSUES_COMMENTS : null,
|
activeWorkspace && projectId && issueId ? PROJECT_ISSUES_COMMENTS(issueId as string) : null,
|
||||||
activeWorkspace && projectId && issueId
|
activeWorkspace && projectId && issueId
|
||||||
? () =>
|
? () =>
|
||||||
issuesServices.getIssueComments(
|
issuesServices.getIssueComments(
|
||||||
|
Loading…
Reference in New Issue
Block a user