Correct way of adding multiple alert dialogs #3875
-
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 |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
Simplifying Alert Dialog Usage for Multiple Alert DialogsIf your application requires multiple instances of Alert Dialogs, follow these steps to ensure a streamlined and maintainable implementation: Step-by-Step GuideStep 1: Prepare a Global StateStart 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 ComponentCreate a reusable Alert Dialog component that reads from the global state managed by // 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 LayoutIn your main layout file (e.g., // 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 ButtonFinally, use the // 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; ConclusionThis 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. |
Beta Was this translation helpful? Give feedback.
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.