import React, { useState } from "react"; import { useRouter } from "next/router"; import { mutate } from "swr"; // services import { IssueService } from "services/issue"; // icons import { Link as LinkIcon, Plus, Pencil, X } from "lucide-react"; // components import { Label, WebViewModal, CreateUpdateLinkForm, DeleteConfirmation } from "components/web-view"; // ui import { Button } from "@plane/ui"; // fetch keys import { ISSUE_DETAILS } from "constants/fetch-keys"; // types import type { IIssue } from "types"; type Props = { allowed: boolean; issueDetails: IIssue; }; const issueService = new IssueService(); export const IssueLinks: React.FC = (props) => { const { issueDetails, allowed } = props; const links = issueDetails?.issue_link; const [isOpen, setIsOpen] = useState(false); const [selectedLink, setSelectedLink] = useState(null); const [deleteSelected, setDeleteSelected] = useState(null); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const handleDeleteLink = async (linkId: string) => { if (!workspaceSlug || !projectId || !issueDetails || !allowed) return; const updatedLinks = issueDetails.issue_link.filter((l) => l.id !== linkId); mutate( ISSUE_DETAILS(issueDetails.id), (prevData) => ({ ...(prevData as IIssue), issue_link: updatedLinks }), false ); await issueService .deleteIssueLink(workspaceSlug as string, projectId as string, issueDetails.id, linkId) .then(() => { mutate(ISSUE_DETAILS(issueDetails.id)); }) .catch((err) => { console.log(err); }); }; return (
{ setIsOpen(false); setSelectedLink(null); }} modalTitle={selectedLink ? "Update Link" : "Add Link"} > { setIsOpen(false); setSelectedLink(null); }} data={links?.find((link) => link.id === selectedLink)} /> setDeleteSelected(null)} onConfirm={() => { if (!deleteSelected || !allowed) return; handleDeleteLink(deleteSelected); setDeleteSelected(null); }} />
{links?.map((link) => (
{allowed && (
)}
))}
); };