import React, { useCallback, useEffect } from "react"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; // react-hook-form import { useForm } from "react-hook-form"; // services import issuesService from "services/issues.service"; // hooks import useUserAuth from "hooks/use-user-auth"; // layouts import { ProjectAuthorizationWrapper } from "layouts/auth-layout"; // components import { IssueDetailsSidebar, IssueMainContent } from "components/issues"; // ui import { Loader } from "components/ui"; import { Breadcrumbs } from "components/breadcrumbs"; // types import { IIssue } from "types"; import type { NextPage } from "next"; // fetch-keys import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys"; const defaultValues = { name: "", description: "", description_html: "", estimate_point: null, state: "", assignees_list: [], priority: "low", blockers_list: [], blocked_list: [], target_date: new Date().toString(), issue_cycle: null, issue_module: null, labels_list: [], }; const IssueDetailsPage: NextPage = () => { const router = useRouter(); const { workspaceSlug, projectId, issueId } = router.query; const { user } = useUserAuth(); const { data: issueDetails, mutate: mutateIssueDetails } = useSWR( workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null, workspaceSlug && projectId && issueId ? () => issuesService.retrieve(workspaceSlug as string, projectId as string, issueId as string) : null ); const { reset, control, watch } = useForm({ defaultValues, }); const submitChanges = useCallback( async (formData: Partial) => { if (!workspaceSlug || !projectId || !issueId) return; mutate( ISSUE_DETAILS(issueId as string), (prevData) => { if (!prevData) return prevData; return { ...prevData, ...formData, }; }, false ); const payload = { ...formData }; await issuesService .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user) .then((res) => { mutateIssueDetails(); mutate(PROJECT_ISSUES_ACTIVITY(issueId as string)); }) .catch((e) => { console.error(e); }); }, [workspaceSlug, issueId, projectId, mutateIssueDetails, user] ); useEffect(() => { if (!issueDetails) return; mutate(PROJECT_ISSUES_ACTIVITY(issueId as string)); reset({ ...issueDetails, blockers_list: issueDetails.blockers_list ?? issueDetails.blocker_issues?.map((issue) => issue.blocker_issue_detail?.id), blocked_list: issueDetails.blocks_list ?? issueDetails.blocked_issues?.map((issue) => issue.blocked_issue_detail?.id), assignees_list: issueDetails.assignees_list ?? issueDetails.assignee_details?.map((user) => user.id), labels_list: issueDetails.labels_list ?? issueDetails.labels, labels: issueDetails.labels_list ?? issueDetails.labels, }); }, [issueDetails, reset, issueId]); return ( } > {issueDetails && projectId ? (
) : (
)}
); }; export default IssueDetailsPage;