import { useCallback, useEffect, useState, ReactElement } from "react"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; import { useForm } from "react-hook-form"; // services import { IssueService, IssueArchiveService } from "services/issue"; // hooks import useToast from "hooks/use-toast"; // layouts import { AppLayout } from "layouts/app-layout"; // components // FIXME: have to replace this once the issue details page is ready --issue-detail-- // import { IssueDetailsSidebar, IssueMainContent } from "components/issues"; import { ProjectArchivedIssueDetailsHeader } from "components/headers"; // ui import { ArchiveIcon, Loader } from "@plane/ui"; // icons import { History } from "lucide-react"; // types import { TIssue } from "@plane/types"; import { NextPageWithLayout } from "lib/types"; // fetch-keys import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys"; import { useProject } from "hooks/store"; const defaultValues: Partial = { name: "", // description: "", description_html: "", estimate_point: null, state_id: "", priority: "low", target_date: new Date().toString(), cycle_id: null, module_id: null, }; // services const issueService = new IssueService(); const issueArchiveService = new IssueArchiveService(); const ArchivedIssueDetailsPage: NextPageWithLayout = () => { // router const router = useRouter(); const { workspaceSlug, projectId, archivedIssueId } = router.query; // states const [isRestoring, setIsRestoring] = useState(false); // hooks const { setToastAlert } = useToast(); const { getProjectById } = useProject(); const { data: issueDetails, mutate: mutateIssueDetails } = useSWR( workspaceSlug && projectId && archivedIssueId ? ISSUE_DETAILS(archivedIssueId as string) : null, workspaceSlug && projectId && archivedIssueId ? () => issueArchiveService.retrieveArchivedIssue( workspaceSlug as string, projectId as string, archivedIssueId as string ) : null ); const { reset, control, watch } = useForm({ defaultValues, }); const submitChanges = useCallback( async (formData: Partial) => { if (!workspaceSlug || !projectId || !archivedIssueId) return; mutate( ISSUE_DETAILS(archivedIssueId as string), (prevData) => { if (!prevData) return prevData; return { ...prevData, ...formData, }; }, false ); const payload: Partial = { ...formData, }; await issueService .patchIssue(workspaceSlug as string, projectId as string, archivedIssueId as string, payload) .then(() => { mutateIssueDetails(); mutate(PROJECT_ISSUES_ACTIVITY(archivedIssueId as string)); }) .catch((e) => { console.error(e); }); }, [workspaceSlug, archivedIssueId, projectId, mutateIssueDetails] ); useEffect(() => { if (!issueDetails) return; mutate(PROJECT_ISSUES_ACTIVITY(archivedIssueId as string)); reset({ ...issueDetails, }); }, [issueDetails, reset, archivedIssueId]); const handleUnArchive = async () => { if (!workspaceSlug || !projectId || !archivedIssueId) return; setIsRestoring(true); await issueArchiveService .unarchiveIssue(workspaceSlug as string, projectId as string, archivedIssueId as string) .then(() => { setToastAlert({ type: "success", title: "Success", message: issueDetails && `${getProjectById(issueDetails.project_id)?.identifier}-${ issueDetails?.sequence_id } is restored successfully under the project ${getProjectById(issueDetails.project_id)?.name}`, }); router.push(`/${workspaceSlug}/projects/${projectId}/issues/${archivedIssueId}`); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Something went wrong. Please try again.", }); }) .finally(() => setIsRestoring(false)); }; return ( <> {issueDetails && projectId ? (
{issueDetails.archived_at && (

This issue has been archived by Plane.

)} {/* FIXME: have to replace this once the issue details page is ready --issue-detail-- */} {/*
*/}
{/* FIXME: have to replace this once the issue details page is ready --issue-detail-- */} {/*
*/}
) : (
)} ); }; ArchivedIssueDetailsPage.getLayout = function getLayout(page: ReactElement) { return ( } withProjectWrapper> {page} ); }; export default ArchivedIssueDetailsPage;