import { useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import useSWR from "swr"; // ui import { Tooltip } from "@plane/ui"; import { DeleteAttachmentModal } from "./delete-attachment-modal"; // icons import { XMarkIcon } from "@heroicons/react/24/outline"; import { ExclamationIcon, getFileIcon } from "components/icons"; // services import { IssueAttachmentService } from "services/issue"; import { ProjectService } from "services/project"; // fetch-key import { ISSUE_ATTACHMENTS, PROJECT_MEMBERS } from "constants/fetch-keys"; // helper import { truncateText } from "helpers/string.helper"; import { renderLongDateFormat } from "helpers/date-time.helper"; import { convertBytesToSize, getFileExtension, getFileName } from "helpers/attachment.helper"; // type import { IIssueAttachment } from "types"; // services const issueAttachmentService = new IssueAttachmentService(); const projectService = new ProjectService(); export const IssueAttachments = () => { const [deleteAttachment, setDeleteAttachment] = useState(null); const [attachmentDeleteModal, setAttachmentDeleteModal] = useState(false); const router = useRouter(); const { workspaceSlug, projectId, issueId } = router.query; const { data: attachments } = useSWR( workspaceSlug && projectId && issueId ? ISSUE_ATTACHMENTS(issueId as string) : null, workspaceSlug && projectId && issueId ? () => issueAttachmentService.getIssueAttachment(workspaceSlug as string, projectId as string, issueId as string) : null ); const { data: people } = useSWR( workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null, workspaceSlug && projectId ? () => projectService.projectMembers(workspaceSlug as string, projectId as string) : null ); return ( <> {attachments && attachments.length > 0 && attachments.map((file) => (
{getFileIcon(getFileExtension(file.asset))}
{truncateText(`${getFileName(file.attributes.name)}`, 10)} person.member.id === file.updated_by)?.member.display_name ?? "" } uploaded on ${renderLongDateFormat(file.updated_at)}`} >
{getFileExtension(file.asset).toUpperCase()} {convertBytesToSize(file.attributes.size)}
))} ); };