fix: mutation in issue comments

This commit is contained in:
Dakshesh Jain 2022-12-13 14:18:49 +05:30
parent ada68a9bf7
commit b5a33d8f4d
4 changed files with 15 additions and 28 deletions

View File

@ -1,16 +1,12 @@
import React, { useEffect, useState } from "react";
// next
import Image from "next/image";
// swr
import { mutate } from "swr";
// headless ui
import { Menu } from "@headlessui/react";
// react hook form
import { useForm } from "react-hook-form";
// hooks
import useUser from "lib/hooks/useUser";
// fetch keys
import { PROJECT_ISSUES_COMMENTS } from "constants/fetch-keys";
// common
import { timeAgo } from "constants/common";
// ui
@ -42,16 +38,6 @@ const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion
const onEnter = (formData: IIssueComment) => {
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);
onSubmit(formData);
};
@ -155,11 +141,6 @@ const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion
className="w-full text-left py-2 pl-2"
type="button"
onClick={() => {
mutate<IIssueComment[]>(
PROJECT_ISSUES_COMMENTS,
(prevData) => (prevData ?? []).filter((c) => c.id !== comment.id),
false
);
handleCommentDeletion(comment.id);
}}
>

View File

@ -13,8 +13,6 @@ import CommentCard from "components/project/issues/issue-detail/comment/IssueCom
import { TextArea, Button, Spinner } from "ui";
// types
import type { IIssueComment } from "types";
// icons
import UploadingIcon from "public/animated-icons/uploading.json";
type Props = {
comments?: IIssueComment[];
@ -41,11 +39,10 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
.createIssueComment(workspaceSlug, projectId, issueId, formData)
.then((response) => {
console.log(response);
mutate<IIssueComment[]>(
PROJECT_ISSUES_COMMENTS,
(prevData) => [...(prevData ?? []), response],
false
);
mutate<IIssueComment[]>(PROJECT_ISSUES_COMMENTS(issueId), (prevData) => [
response,
...(prevData ?? []),
]);
reset(defaultValues);
})
.catch((error) => {
@ -58,6 +55,12 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
.patchIssueComment(workspaceSlug, projectId, issueId, comment.id, comment)
.then((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
.deleteIssueComment(workspaceSlug, projectId, issueId, commentId)
.then((response) => {
mutate<IIssueComment[]>(PROJECT_ISSUES_COMMENTS(issueId), (prevData) =>
(prevData ?? []).filter((c) => c.id !== commentId)
);
console.log(response);
});
};

View File

@ -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_PROPERTIES = (projectId: string) =>
`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_ISSUE_BY_STATE = (projectId: string) => `PROJECT_ISSUE_BY_STATE_${projectId}`;
export const PROJECT_ISSUE_LABELS = (projectId: string) => `PROJECT_ISSUE_LABELS_${projectId}`;

View File

@ -115,7 +115,7 @@ const IssueDetail: NextPage = () => {
);
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
? () =>
issuesServices.getIssueComments(