import { FC, useRef, useState } from "react"; import { observer } from "mobx-react-lite"; // hooks import useOutsideClickDetector from "hooks/use-outside-click-detector"; import useKeypress from "hooks/use-keypress"; // store hooks import { useIssueDetail } from "hooks/store"; // components import { DeleteArchivedIssueModal, DeleteIssueModal, IssuePeekOverviewHeader, TPeekModes, PeekOverviewIssueDetails, PeekOverviewProperties, TIssueOperations, } from "components/issues"; import { IssueActivity } from "../issue-detail/issue-activity"; // ui import { Spinner } from "@plane/ui"; interface IIssueView { workspaceSlug: string; projectId: string; issueId: string; isLoading?: boolean; is_archived: boolean; disabled?: boolean; issueOperations: TIssueOperations; } export const IssueView: FC = observer((props) => { const { workspaceSlug, projectId, issueId, isLoading, is_archived, disabled = false, issueOperations } = props; // states const [peekMode, setPeekMode] = useState("side-peek"); const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved"); // ref const issuePeekOverviewRef = useRef(null); // store hooks const { setPeekIssue, isAnyModalOpen, isDeleteIssueModalOpen, toggleDeleteIssueModal, issue: { getIssueById }, } = useIssueDetail(); const issue = getIssueById(issueId); // remove peek id const removeRoutePeekId = () => { setPeekIssue(undefined); }; // hooks useOutsideClickDetector(issuePeekOverviewRef, () => !isAnyModalOpen && removeRoutePeekId()); const handleKeyDown = () => !isAnyModalOpen && removeRoutePeekId(); useKeypress("Escape", handleKeyDown); return ( <> {issue && !is_archived && ( { toggleDeleteIssueModal(false); removeRoutePeekId(); }} data={issue} onSubmit={() => issueOperations.remove(workspaceSlug, projectId, issueId)} /> )} {issue && is_archived && ( toggleDeleteIssueModal(false)} onSubmit={() => issueOperations.remove(workspaceSlug, projectId, issueId)} /> )}
{issueId && (
{/* header */} { setPeekMode(value); }} removeRoutePeekId={removeRoutePeekId} toggleDeleteIssueModal={toggleDeleteIssueModal} isArchived={is_archived} issueId={issueId} workspaceSlug={workspaceSlug} projectId={projectId} isSubmitting={isSubmitting} disabled={disabled} /> {/* content */}
{isLoading && !issue ? (
) : ( issue && ( <> {["side-peek", "modal"].includes(peekMode) ? (
setIsSubmitting(value)} />
) : (
setIsSubmitting(value)} />
)} ) )}
)}
); });