import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import useSWR, { mutate } from "swr"; import { MinusCircle } from "lucide-react"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // services import { IssueService, IssueCommentService } from "services/issue"; // hooks import useToast from "hooks/use-toast"; // components import { AddComment, IssueActivitySection, IssueAttachmentUpload, IssueAttachments, IssueDescriptionForm, IssueReaction, IssueUpdateStatus, } from "components/issues"; import { useState } from "react"; import { SubIssuesRoot } from "./sub-issues"; // ui import { CustomMenu, LayersIcon, StateGroupIcon } from "@plane/ui"; // types import { IIssue, IIssueActivity } from "types"; // fetch-keys import { PROJECT_ISSUES_ACTIVITY, SUB_ISSUES } from "constants/fetch-keys"; // constants import { EUserWorkspaceRoles } from "constants/workspace"; type Props = { issueDetails: IIssue; submitChanges: (formData: Partial) => Promise; uneditable?: boolean; }; // services const issueService = new IssueService(); const issueCommentService = new IssueCommentService(); export const IssueMainContent: React.FC = observer((props) => { const { issueDetails, submitChanges, uneditable = false } = props; // states const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved"); // router const router = useRouter(); const { workspaceSlug, projectId, issueId } = router.query; // toast alert const { setToastAlert } = useToast(); // mobx store const { user: { currentUser, currentProjectRole }, project: projectStore, projectState: { states }, trackEvent: { postHogEventTracker }, workspace: { currentWorkspace } } = useMobxStore(); const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : undefined; const currentIssueState = projectId ? states[projectId.toString()]?.find((s) => s.id === issueDetails.state) : undefined; const { data: siblingIssues } = useSWR( workspaceSlug && projectId && issueDetails?.parent ? SUB_ISSUES(issueDetails.parent) : null, workspaceSlug && projectId && issueDetails?.parent ? () => issueService.subIssues(workspaceSlug.toString(), projectId.toString(), 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 ? () => issueService.getIssueActivities(workspaceSlug.toString(), projectId.toString(), issueId.toString()) : null ); const handleCommentUpdate = async (commentId: string, data: Partial) => { if (!workspaceSlug || !projectId || !issueId) return; await issueCommentService .patchIssueComment(workspaceSlug as string, projectId as string, issueId as string, commentId, data) .then((res) => { mutateIssueActivity(); postHogEventTracker( "COMMENT_UPDATED", { ...res, state: "SUCCESS" }, { isGrouping: true, groupType: "Workspace_metrics", gorupId: currentWorkspace?.id! } ); } ); }; const handleCommentDelete = async (commentId: string) => { if (!workspaceSlug || !projectId || !issueId || !currentUser) return; mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false); await issueCommentService .deleteIssueComment(workspaceSlug as string, projectId as string, issueId as string, commentId) .then(() => { mutateIssueActivity(); postHogEventTracker( "COMMENT_DELETED", { state: "SUCCESS" }, { isGrouping: true, groupType: "Workspace_metrics", gorupId: currentWorkspace?.id! } ); } ); }; const handleAddComment = async (formData: IIssueActivity) => { if (!workspaceSlug || !issueDetails || !currentUser) return; await issueCommentService .createIssueComment(workspaceSlug.toString(), issueDetails.project, issueDetails.id, formData) .then((res) => { mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id)); postHogEventTracker( "COMMENT_ADDED", { ...res, state: "SUCCESS" }, { isGrouping: true, groupType: "Workspace_metrics", gorupId: currentWorkspace?.id! } ); }) .catch(() => setToastAlert({ type: "error", title: "Error!", message: "Comment could not be posted. Please try again.", }) ); }; const isAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER; 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) => ( router.push(`/${workspaceSlug}/projects/${projectId as string}/issues/${issue.id}`) } className="flex items-center gap-2 py-2" > {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}
{currentIssueState && ( )}
setIsSubmitting(value)} isSubmitting={isSubmitting} workspaceSlug={workspaceSlug as string} issue={issueDetails} handleFormSubmit={submitChanges} isAllowed={isAllowed || !uneditable} /> {workspaceSlug && projectId && ( )}

Attachments

Comments/Activity

); });