import { FC, useMemo } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; // components import { InboxIssueMainContent } from "./main-content"; import { InboxIssueDetailsSidebar } from "./sidebar"; // hooks import { useEventTracker, useInboxIssues, useIssueDetail, useUser } from "hooks/store"; import useToast from "hooks/use-toast"; // types import { TIssue } from "@plane/types"; import { TIssueOperations } from "../root"; // constants import { EUserProjectRoles } from "constants/project"; export type TInboxIssueDetailRoot = { workspaceSlug: string; projectId: string; inboxId: string; issueId: string; }; export const InboxIssueDetailRoot: FC = (props) => { const { workspaceSlug, projectId, inboxId, issueId } = props; // router const router = useRouter(); // hooks const { issues: { fetchInboxIssueById, updateInboxIssue, removeInboxIssue }, } = useInboxIssues(); const { issue: { getIssueById }, } = useIssueDetail(); const { captureIssueEvent } = useEventTracker(); const { setToastAlert } = useToast(); const { membership: { currentProjectRole }, } = useUser(); const issueOperations: TIssueOperations = useMemo( () => ({ fetch: async (workspaceSlug: string, projectId: string, issueId: string) => { try { await fetchInboxIssueById(workspaceSlug, projectId, inboxId, issueId); } catch (error) { console.error("Error fetching the parent issue"); } }, update: async ( workspaceSlug: string, projectId: string, issueId: string, data: Partial, showToast: boolean = true ) => { try { await updateInboxIssue(workspaceSlug, projectId, inboxId, issueId, data); if (showToast) { setToastAlert({ title: "Issue updated successfully", type: "success", message: "Issue updated successfully", }); } captureIssueEvent({ eventName: "Inbox issue updated", payload: { ...data, state: "SUCCESS", element: "Inbox" }, updates: { changed_property: Object.keys(data).join(","), change_details: Object.values(data).join(","), }, path: router.asPath, }); } catch (error) { setToastAlert({ title: "Issue update failed", type: "error", message: "Issue update failed", }); captureIssueEvent({ eventName: "Inbox issue updated", payload: { state: "SUCCESS", element: "Inbox" }, updates: { changed_property: Object.keys(data).join(","), change_details: Object.values(data).join(","), }, path: router.asPath, }); } }, remove: async (workspaceSlug: string, projectId: string, issueId: string) => { try { await removeInboxIssue(workspaceSlug, projectId, inboxId, issueId); setToastAlert({ title: "Issue deleted successfully", type: "success", message: "Issue deleted successfully", }); captureIssueEvent({ eventName: "Inbox issue deleted", payload: { id: issueId, state: "SUCCESS", element: "Inbox" }, path: router.asPath, }); } catch (error) { captureIssueEvent({ eventName: "Inbox issue deleted", payload: { id: issueId, state: "FAILED", element: "Inbox" }, path: router.asPath, }); setToastAlert({ title: "Issue delete failed", type: "error", message: "Issue delete failed", }); } }, }), [inboxId, fetchInboxIssueById, updateInboxIssue, removeInboxIssue, setToastAlert] ); useSWR( workspaceSlug && projectId && inboxId && issueId ? `INBOX_ISSUE_DETAIL_${workspaceSlug}_${projectId}_${inboxId}_${issueId}` : null, async () => { if (workspaceSlug && projectId && inboxId && issueId) { await issueOperations.fetch(workspaceSlug, projectId, issueId); } } ); // checking if issue is editable, based on user role const is_editable = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER; // issue details const issue = getIssueById(issueId); if (!issue) return <>; return (
); };