Correct way of adding multiple alert dialogs

[dwalker93]

I just created sample next js app using example "Tasks" data table. And I want to trigger Alert dialog box when each row action "Delete" button click. I did as the below code sandbox.

https://codesandbox.io/p/github/dwalker93/tanstacktable-shadcnui/main

github repo: https://github.com/dwalker93/tanstacktable-shadcnui/tree/main

But it's flashes and quit

[baydisng13]

Simplifying Alert Dialog Usage for Multiple Alert Dialogs

If your application requires multiple instances of Alert Dialogs, follow these steps to ensure a streamlined and maintainable implementation:

Step-by-Step Guide

Step 1: Prepare a Global State

Start by setting up a global state to manage the state of your Alert Dialogs. This can be achieved using Zustand or React's Context API for centralized state management.

// confirmationStore.ts
import { create } from "zustand";

interface ConfirmationState {
  open: boolean;
  title: string | null;
  description: string | null;
  cancelLabel: string | null;
  actionLabel: string | null;
  onAction: () => void;
  onCancel: () => void;
}

interface ConfirmationActions {
  openConfirmation: (data: {
    title: string;
    description: string;
    cancelLabel: string;
    actionLabel: string;
    onAction: () => void;
    onCancel: () => void;
  }) => void;
  closeConfirmation: () => void;
}

const useConfirmationStore = create<ConfirmationState & ConfirmationActions>(
  (set) => ({
    open: false,
    title: null,
    description: null,
    cancelLabel: null,
    actionLabel: null,
    onAction: () => {},
    onCancel: () => {},
    openConfirmation: (data) =>
      set((state) => ({
        open: true,
        title: data.title,
        description: data.description,
        cancelLabel: data.cancelLabel,
        actionLabel: data.actionLabel,
        onAction: data.onAction,
        onCancel: data.onCancel,
      })),
    closeConfirmation: () =>
      set((state) => ({
        open: false,
        title: null,
        description: null,
        cancelLabel: null,
        actionLabel: null,
        onAction: () => {},
        onCancel: () => {},
      })),
  })
);

export default useConfirmationStore;

Step 2: Prepare the Alert Component

Create a reusable Alert Dialog component that reads from the global state managed by useConfirmationStore.

// ConfirmationDialog.tsx
import React from "react";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import useConfirmationStore from "@/store/confirmation";

const ConfirmationDialog = () => {
  const { open, title, description, cancelLabel, actionLabel, onAction, closeConfirmation } = useConfirmationStore();

  return (
    <AlertDialog open={open} onOpenChange={closeConfirmation}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>{title}</AlertDialogTitle>
          <AlertDialogDescription>
            {description}
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>{cancelLabel}</AlertDialogCancel>
          <AlertDialogAction onClick={onAction}>{actionLabel}</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
};

export default ConfirmationDialog;

Step 3: Initiate the Alert Component in the Main Layout

In your main layout file (e.g., Layout.tsx), include the ConfirmationDialog component to ensure it is accessible throughout your application.

// Layout.tsx
import React from "react";
import ConfirmationDialog from "./ConfirmationDialog";

const Layout: React.FC = ({ children }) => {
  return (
    <div className="app-container">
      {children}
      <ConfirmationDialog />
    </div>
  );
};

export default Layout;

Step 4: Usage Example on a Button

Finally, use the openConfirmation function from useConfirmationStore to trigger the Alert Dialog from any component, such as a button click handler.

// AnyComponent.tsx
import React from "react";
import useConfirmationStore from "@/store/confirmation";

const AnyComponent = () => {
  const { OpenConfirmation } = useConfirmationStore();


  return (
    <div>
      <button onClick={() => {
          openConfirmation({
            title: "Delete Confirmation",
            description: "Are you sure you want to delete this item?",
            cancelLabel: "Cancel",
            actionLabel: "Delete",
            onAction: () => { },
            onCancel: () => { },
          });
  }}>Delete Item</button>
    </div>
  );
};

export default AnyComponent;

Conclusion

This setup is inspired by the Sooner component usage. which simplifies the management of Toast component in a React application. By centralizing state management and encapsulating UI logic, you ensure consistency and reduce code duplication. This structured approach not only enhances development efficiency but also improves the user experience by maintaining a cohesive interface across your application.

[dwalker93]

perfect and clean solution. thank you so much ❤️

[antonin-beev]

Neat, thx you saved me a couple of minutes 🙏

To slightly improve the visual, it should separate the state set in two (the opening, and the rest) because the modal tends to flash. Maybe closing dialog before the reset

[baydisng13]

Thats a good idea

I personally didn't get that kind of problem but, If there is any flashing when closing the dialog, it would be better to separate the two states, I suppose.

...
closeConfirmation: () =>{
      set((state) => ({
        ...state,
        open: false,
      }))
      set((state) => ({
         ...state,
        title: null,
        description: null,
        cancelLabel: null,
        actionLabel: null,
        onAction: () => {},
        onCancel: () => {},
      }))
},
...

[shabbir-hossain132112]

This is such a great solution that it should be documented under the official docs. It saved a lot of my precious time... Thanks a lot...