import { useCallback, useEffect } from "react"; import Router, { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; // react hook form import { useForm } from "react-hook-form"; // contexts import { useProjectMyMembership } from "contexts/project-member.context"; // services import inboxServices from "services/inbox.service"; // hooks import useInboxView from "hooks/use-inbox-view"; import useUserAuth from "hooks/use-user-auth"; // components import { IssueDescriptionForm, IssueDetailsSidebar, IssueReaction } from "components/issues"; import { InboxIssueActivity } from "components/inbox"; // ui import { Loader } from "components/ui"; // icons import { ArrowTopRightOnSquareIcon, CheckCircleIcon, ClockIcon, DocumentDuplicateIcon, ExclamationTriangleIcon, InboxIcon, XCircleIcon, } from "@heroicons/react/24/outline"; // helpers import { renderShortDateWithYearFormat } from "helpers/date-time.helper"; // types import type { IInboxIssue, IIssue } from "types"; // fetch-keys import { INBOX_ISSUES, INBOX_ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys"; const defaultValues = { name: "", description_html: "", estimate_point: null, assignees_list: [], priority: "low", target_date: new Date().toString(), labels_list: [], }; export const InboxMainContent: React.FC = () => { const router = useRouter(); const { workspaceSlug, projectId, inboxId, inboxIssueId } = router.query; const { user } = useUserAuth(); const { memberRole } = useProjectMyMembership(); const { params, issues: inboxIssues } = useInboxView(); const { reset, control, watch } = useForm({ defaultValues, }); const { data: issueDetails, mutate: mutateIssueDetails } = useSWR( workspaceSlug && projectId && inboxId && inboxIssueId ? INBOX_ISSUE_DETAILS(inboxId.toString(), inboxIssueId.toString()) : null, workspaceSlug && projectId && inboxId && inboxIssueId ? () => inboxServices.getInboxIssueById( workspaceSlug.toString(), projectId.toString(), inboxId.toString(), inboxIssueId.toString() ) : null ); const submitChanges = useCallback( async (formData: Partial) => { if (!workspaceSlug || !projectId || !inboxIssueId || !inboxId || !issueDetails) return; mutateIssueDetails((prevData: any) => { if (!prevData) return prevData; return { ...prevData, ...formData, }; }, false); mutate( INBOX_ISSUES(inboxId.toString(), params), (prevData) => (prevData ?? []).map((i) => { if (i.bridge_id === inboxIssueId) { return { ...i, ...formData, }; } return i; }), false ); const payload = { issue: { ...formData } }; await inboxServices .patchInboxIssue( workspaceSlug.toString(), projectId.toString(), inboxId.toString(), issueDetails.issue_inbox[0].id, payload, user ) .then(() => { mutateIssueDetails(); mutate(INBOX_ISSUES(inboxId.toString(), params)); mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id)); }); }, [ workspaceSlug, inboxIssueId, projectId, mutateIssueDetails, inboxId, user, issueDetails, params, ] ); const onKeyDown = useCallback( (e: KeyboardEvent) => { if (!inboxIssues || !inboxIssueId) return; const currentIssueIndex = inboxIssues.findIndex((issue) => issue.bridge_id === inboxIssueId); switch (e.key) { case "ArrowUp": Router.push({ pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`, query: { inboxIssueId: currentIssueIndex === 0 ? inboxIssues[inboxIssues.length - 1].bridge_id : inboxIssues[currentIssueIndex - 1].bridge_id, }, }); break; case "ArrowDown": Router.push({ pathname: `/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}`, query: { inboxIssueId: currentIssueIndex === inboxIssues.length - 1 ? inboxIssues[0].bridge_id : inboxIssues[currentIssueIndex + 1].bridge_id, }, }); break; default: break; } }, [workspaceSlug, projectId, inboxIssueId, inboxId, inboxIssues] ); useEffect(() => { document.addEventListener("keydown", onKeyDown); return () => { document.removeEventListener("keydown", onKeyDown); }; }, [onKeyDown]); useEffect(() => { if (!issueDetails || !inboxIssueId) return; reset({ ...issueDetails, assignees_list: issueDetails.assignees_list ?? (issueDetails.assignee_details ?? []).map((user) => user.id), labels_list: issueDetails.labels_list ?? issueDetails.labels, }); }, [issueDetails, reset, inboxIssueId]); const issueStatus = issueDetails?.issue_inbox[0].status; if (!inboxIssueId) return (
{inboxIssues && inboxIssues.length > 0 ? ( {inboxIssues?.length} issues found. Select an issue from the sidebar to view its details. ) : ( No issues found. Use{" "}
C
shortcut to create a new issue
)}
); return ( <> {issueDetails ? (
{issueStatus === -2 ? ( <>

This issue is still pending.

) : issueStatus === -1 ? ( <>

This issue has been declined.

) : issueStatus === 0 ? ( <> {new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date() ? (

This issue was snoozed till{" "} {renderShortDateWithYearFormat( issueDetails.issue_inbox[0].snoozed_till ?? "" )} .

) : (

This issue has been snoozed till{" "} {renderShortDateWithYearFormat( issueDetails.issue_inbox[0].snoozed_till ?? "" )} .

)} ) : issueStatus === 1 ? ( <>

This issue has been accepted.

) : issueStatus === 2 ? ( <>

This issue has been marked as a duplicate of this issue .

) : null}
) : (
)} ); };