【Chakura UI】削除確認ダイアログの実装方法

はじめに

現在React×TypeScriptでアプリを作成中です。
Chakura UIのAlertDialogコンポーネントを使って削除確認ダイアログを実装してみたので、実装方法を軽くまとめます。

完成イメージ

ごみ箱のアイコンを押下すると、下記のようなダイアログが表示されます。
削除ボタンを押下すると記事が削除できます。

実装方法

Chakura UIの公式HPにてサンプルコードがあるので、こちらを使います。

サンプルとしてコードも載せておきます。
ダイアログ実装だけでもコード量がそこそこある＆再利用性を考えて、今回はコンポーネントを切り分けました。

AlertDialog.tsx

import React from "react";
import {
  Button,
  AlertDialog,
  AlertDialogBody,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogContent,
  AlertDialogOverlay,
} from "@chakra-ui/react";

interface AlertProps {
  isOpen: boolean;
  onClose: () => void;
  onDelete: () => void;
}

export const AlertDialog: React.FC<AlertProps> = ({ isOpen, onClose, onDelete }) => {
  const cancelRef = React.useRef<HTMLButtonElement>(null);
  return (
    <>
      <AlertDialog
        isOpen={isOpen}
        leastDestructiveRef={cancelRef}
        onClose={onClose}
      >
        <AlertDialogOverlay>
          <AlertDialogContent>
            <AlertDialogHeader fontSize="lg" fontWeight="bold">
              投稿を削除
            </AlertDialogHeader>

            <AlertDialogBody>
              削除した投稿は元に戻せません。削除しますか？
            </AlertDialogBody>

            <AlertDialogFooter>
              <Button ref={cancelRef} onClick={onClose}>
                キャンセル
              </Button>
              <Button
                colorScheme="blue"
                onClick={() => {
                  onDelete();
                  onClose();
                }}
                ml={3}
              >
                削除
              </Button>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialogOverlay>
      </AlertDialog>
    </>
  );
};

作成したコンポーネントを削除ボタンに割り当てる方法

流れとしては下記になります。

・コンポーネントの開閉状態を管理するために、Chakra UIのuseDisclosureフックを使用する。

　 onOpen: この関数を呼び出すとisOpenがtrueになり、関連するコンポーネントが開く。
　 onClose: この関数を呼び出すとisOpenがfalseになり、関連するコンポーネントが閉じる。
　 isOpen: 現在の開閉状態を示すブール値。trueならコンポーネントが開いており、falseなら閉じている。

・削除ボタンをクリックすると onOpen が呼び出され、AlertDialog が表示される。
・ダイアログ内の「削除」ボタンをクリックすると、deleteItem 関数が呼び出され、記事が削除される。

ViewArticle.tsx

export const ViewArticle = ({ articles, loading }: ViewArticleProps) => {

  //コンポーネントの開閉状態を管理
  const { onOpen, onClose, isOpen } = useDisclosure();

  //～省略～

  return (
    <>
      <IconButton
        data-testid="delete-button"
        colorScheme="gray"
        variant="outline"
        icon={<BsFillTrashFill />}
        aria-label="Delete"
        onClick={onOpen}
      />
      {/* コンポーネント使用 */}
      <Alert
        isOpen={isOpen}
        onClose={onClose}
        onDelete={() => deleteItem(article.id)}
      />
    </>
  );
};

おわりに

以上、削除方法の実装方法でした。
今回はかなりシンプルなダイアログになりましたが、色々工夫してみてください！