import Link from "next/link"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; // services import issuesService from "services/issues.service"; // hooks import useUserAuth from "hooks/use-user-auth"; import useToast from "hooks/use-toast"; import useProjectDetails from "hooks/use-project-details"; // contexts import { useProjectMyMembership } from "contexts/project-member.context"; // components import { AddComment, IssueActivitySection, IssueAttachmentUpload, IssueAttachments, IssueDescriptionForm, IssueReaction, } from "components/issues"; import { SubIssuesRoot } from "./sub-issues"; // ui import { CustomMenu } from "components/ui"; // icons import { LayerDiagonalIcon } from "components/icons"; import { MinusCircleIcon } from "@heroicons/react/24/outline"; // types import { IIssue, IIssueComment } from "types"; // fetch-keys import { PROJECT_ISSUES_ACTIVITY, SUB_ISSUES } from "constants/fetch-keys"; type Props = { issueDetails: IIssue; submitChanges: (formData: Partial) => Promise; uneditable?: boolean; }; export const IssueMainContent: React.FC = ({ issueDetails, submitChanges, uneditable = false, }) => { const router = useRouter(); const { workspaceSlug, projectId, issueId } = router.query; const { setToastAlert } = useToast(); const { user } = useUserAuth(); const { memberRole } = useProjectMyMembership(); const { projectDetails } = useProjectDetails(); const { data: siblingIssues } = useSWR( workspaceSlug && projectId && issueDetails?.parent ? SUB_ISSUES(issueDetails.parent) : null, workspaceSlug && projectId && issueDetails?.parent ? () => issuesService.subIssues( workspaceSlug as string, projectId as string, issueDetails.parent ?? "" ) : null ); const siblingIssuesList = siblingIssues?.sub_issues.filter((i) => i.id !== issueDetails.id); const { data: issueActivity, mutate: mutateIssueActivity } = useSWR( workspaceSlug && projectId && issueId ? PROJECT_ISSUES_ACTIVITY(issueId.toString()) : null, workspaceSlug && projectId && issueId ? () => issuesService.getIssueActivities( workspaceSlug.toString(), projectId.toString(), issueId.toString() ) : null ); const handleCommentUpdate = async (commentId: string, data: Partial) => { if (!workspaceSlug || !projectId || !issueId) return; await issuesService .patchIssueComment( workspaceSlug as string, projectId as string, issueId as string, commentId, data, user ) .then(() => mutateIssueActivity()); }; const handleCommentDelete = async (commentId: string) => { if (!workspaceSlug || !projectId || !issueId) return; mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false); await issuesService .deleteIssueComment( workspaceSlug as string, projectId as string, issueId as string, commentId, user ) .then(() => mutateIssueActivity()); }; const handleAddComment = async (formData: IIssueComment) => { if (!workspaceSlug || !issueDetails) return; await issuesService .createIssueComment( workspaceSlug.toString(), issueDetails.project, issueDetails.id, formData, user ) .then(() => { mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id)); }) .catch(() => setToastAlert({ type: "error", title: "Error!", message: "Comment could not be posted. Please try again.", }) ); }; return ( <>
{issueDetails?.parent ? (
{issueDetails.parent_detail?.project_detail.identifier}- {issueDetails.parent_detail?.sequence_id}
{issueDetails.parent_detail?.name.substring(0, 50)}
{siblingIssuesList ? ( siblingIssuesList.length > 0 ? ( <>

Sibling issues

{siblingIssuesList.map((issue) => ( {issueDetails.project_detail.identifier}-{issue.sequence_id} ))} ) : (

No sibling issues

) ) : null} submitChanges({ parent: null })} className="flex items-center gap-2 text-red-500 py-2" > Remove Parent Issue
) : null}

Attachments

Comments/Activity

); };