diff --git a/apps/app/components/project/issues/issue-detail/comment/IssueCommentCard.tsx b/apps/app/components/project/issues/issue-detail/comment/IssueCommentCard.tsx index e911ae306..90c3b0bed 100644 --- a/apps/app/components/project/issues/issue-detail/comment/IssueCommentCard.tsx +++ b/apps/app/components/project/issues/issue-detail/comment/IssueCommentCard.tsx @@ -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 = ({ comment, onSubmit, handleCommentDeletion const onEnter = (formData: IIssueComment) => { if (isSubmitting) return; - mutate( - 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 = ({ comment, onSubmit, handleCommentDeletion className="w-full text-left py-2 pl-2" type="button" onClick={() => { - mutate( - PROJECT_ISSUES_COMMENTS, - (prevData) => (prevData ?? []).filter((c) => c.id !== comment.id), - false - ); handleCommentDeletion(comment.id); }} > diff --git a/apps/app/components/project/issues/issue-detail/comment/IssueCommentSection.tsx b/apps/app/components/project/issues/issue-detail/comment/IssueCommentSection.tsx index fe07421f1..d70196b28 100644 --- a/apps/app/components/project/issues/issue-detail/comment/IssueCommentSection.tsx +++ b/apps/app/components/project/issues/issue-detail/comment/IssueCommentSection.tsx @@ -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 = ({ comments, issueId, projectId, wo .createIssueComment(workspaceSlug, projectId, issueId, formData) .then((response) => { console.log(response); - mutate( - PROJECT_ISSUES_COMMENTS, - (prevData) => [...(prevData ?? []), response], - false - ); + mutate(PROJECT_ISSUES_COMMENTS(issueId), (prevData) => [ + response, + ...(prevData ?? []), + ]); reset(defaultValues); }) .catch((error) => { @@ -58,6 +55,12 @@ const IssueCommentSection: React.FC = ({ comments, issueId, projectId, wo .patchIssueComment(workspaceSlug, projectId, issueId, comment.id, comment) .then((response) => { console.log(response); + mutate(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 = ({ comments, issueId, projectId, wo await issuesServices .deleteIssueComment(workspaceSlug, projectId, issueId, commentId) .then((response) => { + mutate(PROJECT_ISSUES_COMMENTS(issueId), (prevData) => + (prevData ?? []).filter((c) => c.id !== commentId) + ); console.log(response); }); }; diff --git a/apps/app/constants/fetch-keys.ts b/apps/app/constants/fetch-keys.ts index 76a3807ae..781efe2fc 100644 --- a/apps/app/constants/fetch-keys.ts +++ b/apps/app/constants/fetch-keys.ts @@ -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}`; diff --git a/apps/app/pages/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/projects/[projectId]/issues/[issueId].tsx index 74dcc8dce..1f0a6ae96 100644 --- a/apps/app/pages/projects/[projectId]/issues/[issueId].tsx +++ b/apps/app/pages/projects/[projectId]/issues/[issueId].tsx @@ -115,7 +115,7 @@ const IssueDetail: NextPage = () => { ); const { data: issueComments } = useSWR( - activeWorkspace && projectId && issueId ? PROJECT_ISSUES_COMMENTS : null, + activeWorkspace && projectId && issueId ? PROJECT_ISSUES_COMMENTS(issueId as string) : null, activeWorkspace && projectId && issueId ? () => issuesServices.getIssueComments(