Skip to main content

​
Overview

The DeleteModal component displays a confirmation dialog before permanently deleting a document. It includes a warning message and requires explicit user confirmation to prevent accidental deletions.

​
Props

​
roomId
string
required
The unique identifier of the document/room to delete.

​
Features

  • Confirmation dialog: Prevents accidental deletions with explicit confirmation
  • Loading state: Shows “Deleting…” text during deletion
  • Error handling: Catches and logs deletion errors
  • Auto-redirect: Automatically redirects to home after successful deletion (handled by deleteDocument action)
  • Icon trigger: Delete icon button that opens the modal
  • Styled dialog: Uses custom shad-dialog styling

​
Usage Example

​
In Document List

From app/(root)/page.tsx: 
import { DeleteModal } from '@/components/DeleteModal';

<ul className="document-ul">
  {roomDocuments.data.map(({ id, metadata, createdAt }) => (
    <li key={id} className="document-list-item">
      <Link href={`/documents/${id}`}>
        <p>{metadata.title}</p>
      </Link>
      <DeleteModal roomId={id} />
    </li>
  ))}
</ul>

​
In Editor Toolbar

import { DeleteModal } from '@/components/DeleteModal';

<div className="toolbar-wrapper">
  <ToolbarPlugin />
  {currentUserType === 'editor' && <DeleteModal roomId={roomId} />}
</div>

​
Dialog Structure

The modal consists of:
  1. Trigger: Trash icon button
  2. Header: Delete icon and title
  3. Description: Warning message about permanent deletion
  4. Footer: Cancel and Delete buttons

​
Implementation

const deleteDocumentHandler = async () => {
  setLoading(true);

  try {
    await deleteDocument(roomId);
    setOpen(false);
  } catch (error) {
    console.log("Error notif:", error);
  }

  setLoading(false);
};

​
Permissions

Only users with write permissions (room:write) can delete documents. The deleteDocument server action enforces this authorization check.
The component can be rendered for any user, but the server action will reject deletion attempts from users without proper permissions.

​
Visual Elements

​
Trigger Button

<Button className="min-w-9 rounded-xl bg-transparent p-2 transition-all">
  <Image
    src="/assets/icons/delete.svg"
    alt="delete"
    width={20}
    height={20}
  />
</Button>

​
Dialog Content

  • Icon: Delete modal icon (48x48px)
  • Title: “Delete document”
  • Description: Warning about permanent deletion
  • Buttons:
    • Cancel (dark background)
    • Delete (red gradient, destructive variant)

​
State Management

The component manages two local states:
  • open: Controls dialog visibility
  • loading: Tracks deletion in progress

​
Type Definition

From types/index.d.ts: 
declare type DeleteModalProps = { 
  roomId: string 
};

​
Source Reference

components/DeleteModal.tsx

Build docs developers (and LLMs) love

Get started for freeTalk to us