// react import React, { useCallback, useEffect } from "react"; // next import { useRouter } from "next/router"; // swr import useSWR, { mutate } from "swr"; // react hook forms import { useForm } from "react-hook-form"; // services import issuesService from "services/issues.service"; // fetch key import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys"; // hooks import useUser from "hooks/use-user"; import useProjectMembers from "hooks/use-project-members"; // layouts import DefaultLayout from "layouts/default-layout"; // ui import { Spinner } from "components/ui"; // components import { IssueWebViewForm, SubIssueList, IssueAttachments, IssuePropertiesDetail, IssueLinks, IssueActivity, } from "components/web-view"; // types import type { IIssue } from "types"; const MobileWebViewIssueDetail = () => { const router = useRouter(); const { workspaceSlug, projectId, issueId } = router.query; const memberRole = useProjectMembers( workspaceSlug as string, projectId as string, !!workspaceSlug && !!projectId ); const isAllowed = Boolean(memberRole.isMember || memberRole.isOwner); const { user } = useUser(); const { register, control, reset, handleSubmit, watch } = useForm({ defaultValues: { name: "", description: "", description_html: "", state: "", }, }); const { data: issueDetails, mutate: mutateIssueDetails, error, } = useSWR( workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId.toString()) : null, workspaceSlug && projectId && issueId ? () => issuesService.retrieve(workspaceSlug.toString(), projectId.toString(), issueId.toString()) : null ); useEffect(() => { if (!issueDetails) return; reset({ ...issueDetails, name: issueDetails.name, description: issueDetails.description, description_html: issueDetails.description_html, state: issueDetails.state, 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]); const submitChanges = useCallback( async (formData: Partial) => { if (!workspaceSlug || !projectId || !issueId) return; mutate( ISSUE_DETAILS(issueId.toString()), (prevData) => { if (!prevData) return prevData; return { ...prevData, ...formData, }; }, false ); const payload: Partial = { ...formData, }; delete payload.blocker_issues; delete payload.blocked_issues; await issuesService .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user) .then(() => { mutateIssueDetails(); mutate(PROJECT_ISSUES_ACTIVITY(issueId as string)); }) .catch((e) => { console.error(e); }); }, [workspaceSlug, issueId, projectId, mutateIssueDetails, user] ); if (!error && !issueDetails) return (
Loading...
); if (error) return (
{error?.response?.data || "Something went wrong"}
); return (
); }; export default MobileWebViewIssueDetail;