import React from "react"; // next imports import { useRouter } from "next/router"; // swr import useSWR, { mutate } from "swr"; // lucide icons import { Plus, ChevronRight, ChevronDown } from "lucide-react"; // components import { ExistingIssuesListModal } from "components/core"; import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues"; import { SubIssuesRootList } from "./issues-list"; import { ProgressBar } from "./progressbar"; import { IssuePeekOverview } from "components/issues/peek-overview"; // ui import { CustomMenu } from "components/ui"; // hooks import { useProjectMyMembership } from "contexts/project-member.context"; import useToast from "hooks/use-toast"; // helpers import { copyTextToClipboard } from "helpers/string.helper"; // types import { ICurrentUserResponse, IIssue, ISearchIssueResponse } from "types"; // services import issuesService from "services/issues.service"; // fetch keys import { SUB_ISSUES } from "constants/fetch-keys"; export interface ISubIssuesRoot { parentIssue: IIssue; user: ICurrentUserResponse | undefined; } export interface ISubIssuesRootLoaders { visibility: string[]; delete: string[]; sub_issues: string[]; } export interface ISubIssuesRootLoadersHandler { key: "visibility" | "delete" | "sub_issues"; issueId: string; } export const SubIssuesRoot: React.FC = ({ parentIssue, user }) => { const router = useRouter(); const { workspaceSlug, projectId, peekIssue } = router.query as { workspaceSlug: string; projectId: string; peekIssue: string; }; const { memberRole } = useProjectMyMembership(); const { setToastAlert } = useToast(); const { data: issues, isLoading } = useSWR( workspaceSlug && projectId && parentIssue && parentIssue?.id ? SUB_ISSUES(parentIssue?.id) : null, workspaceSlug && projectId && parentIssue && parentIssue?.id ? () => issuesService.subIssues(workspaceSlug, projectId, parentIssue.id) : null ); const [peekParentId, setPeekParentId] = React.useState(""); const [issuesLoader, setIssuesLoader] = React.useState({ visibility: [parentIssue?.id], delete: [], sub_issues: [], }); const handleIssuesLoader = ({ key, issueId }: ISubIssuesRootLoadersHandler) => { setIssuesLoader((previousData: ISubIssuesRootLoaders) => ({ ...previousData, [key]: previousData[key].includes(issueId) ? previousData[key].filter((i: string) => i !== issueId) : [...previousData[key], issueId], })); }; const [issueCrudOperation, setIssueCrudOperation] = React.useState<{ create: { toggle: boolean; issueId: string | null }; existing: { toggle: boolean; issueId: string | null }; edit: { toggle: boolean; issueId: string | null; issue: IIssue | null }; delete: { toggle: boolean; issueId: string | null; issue: IIssue | null }; }>({ create: { toggle: false, issueId: null, }, existing: { toggle: false, issueId: null, }, edit: { toggle: false, issueId: null, // parent issue id for mutation issue: null, }, delete: { toggle: false, issueId: null, // parent issue id for mutation issue: null, }, }); const handleIssueCrudOperation = ( key: "create" | "existing" | "edit" | "delete", issueId: string | null, issue: IIssue | null = null ) => { setIssueCrudOperation({ ...issueCrudOperation, [key]: { toggle: !issueCrudOperation[key].toggle, issueId: issueId, issue: issue, }, }); }; const addAsSubIssueFromExistingIssues = async (data: ISearchIssueResponse[]) => { if (!workspaceSlug || !parentIssue || issueCrudOperation?.existing?.issueId === null) return; const issueId = issueCrudOperation?.existing?.issueId; const payload = { sub_issue_ids: data.map((i) => i.id), }; await issuesService.addSubIssues(workspaceSlug, projectId, issueId, payload).finally(() => { if (issueId) mutate(SUB_ISSUES(issueId)); }); }; const removeIssueFromSubIssues = async (parentIssueId: string, issue: IIssue) => { if (!workspaceSlug || !parentIssue || !issue?.id) return; issuesService .patchIssue(workspaceSlug, projectId, issue.id, { parent: null }, user) .then(async () => { if (parentIssueId) await mutate(SUB_ISSUES(parentIssueId)); handleIssuesLoader({ key: "delete", issueId: issue?.id }); setToastAlert({ type: "success", title: `Issue removed!`, message: `Issue removed successfully.`, }); }) .catch(() => { handleIssuesLoader({ key: "delete", issueId: issue?.id }); setToastAlert({ type: "warning", title: `Error!`, message: `Error, Please try again later.`, }); }); }; const copyText = (text: string) => { const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; copyTextToClipboard(`${originURL}/${text}`).then(() => { setToastAlert({ type: "success", title: "Link Copied!", message: "Issue link copied to clipboard.", }); }); }; const isEditable = memberRole?.isGuest || memberRole?.isViewer ? false : true; const mutateSubIssues = (parentIssueId: string | null) => { if (parentIssueId) mutate(SUB_ISSUES(parentIssueId)); }; return (
{!issues && isLoading ? (
Loading...
) : ( <> {issues && issues?.sub_issues && issues?.sub_issues?.length > 0 ? ( <> {/* header */}
handleIssuesLoader({ key: "visibility", issueId: parentIssue?.id }) } >
{issuesLoader.visibility.includes(parentIssue?.id) ? ( ) : ( )}
Sub-issues
({issues?.sub_issues?.length || 0})
{isEditable && issuesLoader.visibility.includes(parentIssue?.id) && (
handleIssueCrudOperation("create", parentIssue?.id)} > Add sub-issue
handleIssueCrudOperation("existing", parentIssue?.id)} > Add an existing issue
)}
{/* issues */} {issuesLoader.visibility.includes(parentIssue?.id) && (
)}
Add sub-issue } buttonClassName="whitespace-nowrap" position="left" noBorder noChevron > { mutateSubIssues(parentIssue?.id); handleIssueCrudOperation("create", parentIssue?.id); }} > Create new { mutateSubIssues(parentIssue?.id); handleIssueCrudOperation("existing", parentIssue?.id); }} > Add an existing issue
) : ( isEditable && (
No Sub-Issues yet
Add sub-issue } buttonClassName="whitespace-nowrap" position="left" noBorder noChevron > { mutateSubIssues(parentIssue?.id); handleIssueCrudOperation("create", parentIssue?.id); }} > Create new { mutateSubIssues(parentIssue?.id); handleIssueCrudOperation("existing", parentIssue?.id); }} > Add an existing issue
) )} {isEditable && issueCrudOperation?.create?.toggle && ( { mutateSubIssues(issueCrudOperation?.create?.issueId); handleIssueCrudOperation("create", null); }} /> )} {isEditable && issueCrudOperation?.existing?.toggle && issueCrudOperation?.existing?.issueId && ( handleIssueCrudOperation("existing", null)} searchParams={{ sub_issue: true, issue_id: issueCrudOperation?.existing?.issueId }} handleOnSubmit={addAsSubIssueFromExistingIssues} workspaceLevelToggle /> )} {isEditable && issueCrudOperation?.edit?.toggle && issueCrudOperation?.edit?.issueId && ( <> { mutateSubIssues(issueCrudOperation?.edit?.issueId); handleIssueCrudOperation("edit", null, null); }} data={issueCrudOperation?.edit?.issue} /> )} {isEditable && issueCrudOperation?.delete?.toggle && issueCrudOperation?.delete?.issueId && ( { mutateSubIssues(issueCrudOperation?.delete?.issueId); handleIssueCrudOperation("delete", null, null); }} data={issueCrudOperation?.delete?.issue} user={user} redirection={false} /> )} )} peekParentId && peekIssue && mutateSubIssues(peekParentId)} projectId={projectId ?? ""} workspaceSlug={workspaceSlug ?? ""} readOnly={!isEditable} />
); };