import React, { useState } from "react"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; // icons import { X, PlusIcon } from "lucide-react"; // services import { IssueService } from "services/issue"; // fetch key import { SUB_ISSUES } from "constants/fetch-keys"; // hooks import useUser from "hooks/use-user"; // ui import { Spinner } from "components/ui"; // components import { Label, IssuesSelectBottomSheet, DeleteConfirmation } from "components/web-view"; // types import { IIssue, ISearchIssueResponse } from "types"; type Props = { issueDetails?: IIssue; }; // services const issueService = new IssueService(); export const SubIssueList: React.FC = (props) => { const { issueDetails } = props; const router = useRouter(); const { workspaceSlug, projectId, issueId } = router.query; const isArchive = Boolean(router.query.archive); const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false); const [issueSelectedForDelete, setIssueSelectedForDelete] = useState(null); const { user } = useUser(); const { data: subIssuesResponse } = useSWR( workspaceSlug && issueDetails ? SUB_ISSUES(issueDetails.id) : null, workspaceSlug && issueDetails ? () => issueService.subIssues(workspaceSlug as string, issueDetails.project, issueDetails.id) : null ); const handleSubIssueRemove = (issue: IIssue | null) => { if (!workspaceSlug || !issueDetails || !user || !issue) return; mutate( SUB_ISSUES(issueDetails.id), (prevData) => { if (!prevData) return prevData; const stateDistribution = { ...prevData.state_distribution }; const issueGroup = issue.state_detail.group; stateDistribution[issueGroup] = stateDistribution[issueGroup] - 1; return { state_distribution: stateDistribution, sub_issues: prevData.sub_issues.filter((i: any) => i.id !== issue.id), }; }, false ); issueService .patchIssue(workspaceSlug.toString(), issue.project, issue.id, { parent: null }, user) .finally(() => mutate(SUB_ISSUES(issueDetails.id))); }; const addAsSubIssueFromExistingIssues = async (data: ISearchIssueResponse[]) => { if (!workspaceSlug || !projectId || !issueId || isArchive) return; const payload = { sub_issue_ids: data.map((i) => i.id), }; await issueService .addSubIssues(workspaceSlug.toString(), projectId.toString(), issueId.toString(), payload) .finally(() => { mutate(SUB_ISSUES(issueId.toString())); }); }; return (
setIsBottomSheetOpen(false)} onSubmit={addAsSubIssueFromExistingIssues} searchParams={{ sub_issue: true, issue_id: issueId as string }} /> setIssueSelectedForDelete(null)} onConfirm={() => { if (isArchive) return; setIssueSelectedForDelete(null); handleSubIssueRemove(issueSelectedForDelete); }} />
{!subIssuesResponse && (
Loading...
)} {subIssuesResponse?.sub_issues.length === 0 && (

No sub issues

)} {subIssuesResponse?.sub_issues?.map((subIssue) => (

{subIssue.project_detail.identifier}-{subIssue.sequence_id}

{subIssue.name}

))}
); };