From 42c4c469396171f7d0ef51a7510586ccee3f1f92 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Thu, 2 May 2024 16:13:04 +0530 Subject: [PATCH] [WEB-1154] fix: delete attachment modal logic (#4338) * fix: delete attachment modal logic * chore: remove console log * chore: update delete attachment button type --- .../issues/attachment/attachment-detail.tsx | 42 +++++++++---------- ...-modal.tsx => delete-attachment-modal.tsx} | 10 ++--- web/components/issues/attachment/index.ts | 10 ++--- web/store/issue/issue-details/root.store.ts | 10 ++--- 4 files changed, 35 insertions(+), 37 deletions(-) rename web/components/issues/attachment/{delete-attachment-confirmation-modal.tsx => delete-attachment-modal.tsx} (94%) diff --git a/web/components/issues/attachment/attachment-detail.tsx b/web/components/issues/attachment/attachment-detail.tsx index 617bc7e07..9e6a35f5f 100644 --- a/web/components/issues/attachment/attachment-detail.tsx +++ b/web/components/issues/attachment/attachment-detail.tsx @@ -2,19 +2,19 @@ import { FC } from "react"; import { observer } from "mobx-react"; import Link from "next/link"; import { AlertCircle, X } from "lucide-react"; +// ui import { Tooltip } from "@plane/ui"; -import { getFileIcon } from "@/components/icons/attachment"; +// icons +import { getFileIcon } from "@/components/icons"; +// components +import { IssueAttachmentDeleteModal } from "@/components/issues"; +// helpers import { convertBytesToSize, getFileExtension, getFileName } from "@/helpers/attachment.helper"; import { renderFormattedDate } from "@/helpers/date-time.helper"; import { truncateText } from "@/helpers/string.helper"; +// hooks import { useIssueDetail, useMember } from "@/hooks/store"; import { usePlatformOS } from "@/hooks/use-platform-os"; -// hooks -// ui -// components -// icons -// helper -import { IssueAttachmentDeleteModal } from "./delete-attachment-confirmation-modal"; // types import { TAttachmentOperations } from "./root"; @@ -36,24 +36,24 @@ export const IssueAttachmentsDetail: FC = observer((pro isDeleteAttachmentModalOpen, toggleDeleteAttachmentModal, } = useIssueDetail(); - // states + // derived values + const attachment = attachmentId ? getAttachmentById(attachmentId) : undefined; + // hooks const { isMobile } = usePlatformOS(); - const attachment = attachmentId && getAttachmentById(attachmentId); if (!attachment) return <>; + return ( <> - toggleDeleteAttachmentModal(false)} - handleAttachmentOperations={handleAttachmentOperations} - data={attachment} - /> - -
+ {isDeleteAttachmentModalOpen === attachment.id && ( + toggleDeleteAttachmentModal(null)} + handleAttachmentOperations={handleAttachmentOperations} + data={attachment} + /> + )} +
{getFileIcon(getFileExtension(attachment.asset))}
@@ -83,7 +83,7 @@ export const IssueAttachmentsDetail: FC = observer((pro {!disabled && ( - )} diff --git a/web/components/issues/attachment/delete-attachment-confirmation-modal.tsx b/web/components/issues/attachment/delete-attachment-modal.tsx similarity index 94% rename from web/components/issues/attachment/delete-attachment-confirmation-modal.tsx rename to web/components/issues/attachment/delete-attachment-modal.tsx index bd69c3cac..4f58674f1 100644 --- a/web/components/issues/attachment/delete-attachment-confirmation-modal.tsx +++ b/web/components/issues/attachment/delete-attachment-modal.tsx @@ -1,4 +1,4 @@ -import { FC, Fragment, Dispatch, SetStateAction, useState } from "react"; +import { FC, Fragment, useState } from "react"; import { AlertTriangle } from "lucide-react"; import { Dialog, Transition } from "@headlessui/react"; import type { TIssueAttachment } from "@plane/types"; @@ -14,18 +14,18 @@ export type TAttachmentOperationsRemoveModal = Exclude>; + onClose: () => void; data: TIssueAttachment; handleAttachmentOperations: TAttachmentOperationsRemoveModal; }; export const IssueAttachmentDeleteModal: FC = (props) => { - const { isOpen, setIsOpen, data, handleAttachmentOperations } = props; - // state + const { isOpen, onClose, data, handleAttachmentOperations } = props; + // states const [loader, setLoader] = useState(false); const handleClose = () => { - setIsOpen(false); + onClose(); setLoader(false); }; diff --git a/web/components/issues/attachment/index.ts b/web/components/issues/attachment/index.ts index d4385e7da..928cd4613 100644 --- a/web/components/issues/attachment/index.ts +++ b/web/components/issues/attachment/index.ts @@ -1,7 +1,5 @@ -export * from "./root"; - -export * from "./attachment-upload"; -export * from "./delete-attachment-confirmation-modal"; - -export * from "./attachments-list"; export * from "./attachment-detail"; +export * from "./attachment-upload"; +export * from "./attachments-list"; +export * from "./delete-attachment-modal"; +export * from "./root"; diff --git a/web/store/issue/issue-details/root.store.ts b/web/store/issue/issue-details/root.store.ts index f6ad0a307..853cef238 100644 --- a/web/store/issue/issue-details/root.store.ts +++ b/web/store/issue/issue-details/root.store.ts @@ -51,7 +51,7 @@ export interface IIssueDetail isArchiveIssueModalOpen: boolean; isRelationModalOpen: TIssueRelationTypes | null; isSubIssuesModalOpen: boolean; - isDeleteAttachmentModalOpen: boolean; + isDeleteAttachmentModalOpen: string | null; // computed isAnyModalOpen: boolean; // helper actions @@ -65,7 +65,7 @@ export interface IIssueDetail toggleArchiveIssueModal: (value: boolean) => void; toggleRelationModal: (relationType: TIssueRelationTypes | null) => void; toggleSubIssuesModal: (value: boolean) => void; - toggleDeleteAttachmentModal: (value: boolean) => void; + toggleDeleteAttachmentModal: (attachmentId: string | null) => void; // store rootIssueStore: IIssueRootStore; issue: IIssueStore; @@ -90,7 +90,7 @@ export class IssueDetail implements IIssueDetail { isArchiveIssueModalOpen: boolean = false; isRelationModalOpen: TIssueRelationTypes | null = null; isSubIssuesModalOpen: boolean = false; - isDeleteAttachmentModalOpen: boolean = false; + isDeleteAttachmentModalOpen: string | null = null; // store rootIssueStore: IIssueRootStore; issue: IIssueStore; @@ -154,7 +154,7 @@ export class IssueDetail implements IIssueDetail { this.isArchiveIssueModalOpen || !!this.isRelationModalOpen || this.isSubIssuesModalOpen || - this.isDeleteAttachmentModalOpen + !!this.isDeleteAttachmentModalOpen ); } @@ -170,7 +170,7 @@ export class IssueDetail implements IIssueDetail { toggleArchiveIssueModal = (value: boolean) => (this.isArchiveIssueModalOpen = value); toggleRelationModal = (relationType: TIssueRelationTypes | null) => (this.isRelationModalOpen = relationType); toggleSubIssuesModal = (value: boolean) => (this.isSubIssuesModalOpen = value); - toggleDeleteAttachmentModal = (value: boolean) => (this.isDeleteAttachmentModalOpen = value); + toggleDeleteAttachmentModal = (attachmentId: string | null) => (this.isDeleteAttachmentModalOpen = attachmentId); // issue fetchIssue = async (