MUI で GitHub のようなリソース削除の確認ダイアログを作る（AreYouSure ダイアログ）

import { FC, useCallback, useState } from 'react'
import {
  Button,
  Dialog,
  DialogContent,
  DialogContentText,
  DialogTitle,
  TextField,
  Typography,
  IconButton,
} from '@mui/material'
import CloseIcon from '@mui/icons-material/Close'

/** ダイアログコンポーネントの props の型定義 */
type Props = {
  /** ダイアログを表示するなら true */
  open: boolean

  /** 操作対象のリソース名（= ユーザーに入力させるテキスト） */
  targetName: string

  /**
   * ダイアログを閉じるべきときに呼び出されます。
   *
   * ユーザーが処理を承認したときは、submit の値が true となり、
   * 捜査対象のリソース名が targetName に格納されます。
   */
  onClose?: (submit: boolean, targetName?: string) => void
}

/**
 * ユーザーに確認を促すダイアログコンポーネントです。
 * ユーザーは提示されたテキストを入力することで、承認ボタンを押せるようになります。
 */
export const AreYouSureDialog: FC<Props> = ({
  open,
  targetName,
  onClose,
}: Props) => {
  // 削除ボタンを有効にするか
  const [submitAvailable, setSubmitAvailable] = useState(false)

  // ユーザー入力に応じて、削除ボタンの有効・無効を切り替える
  const handleInputChange = useCallback(
    (input: string) => {
      setSubmitAvailable(input === targetName)
    },
    [targetName, setSubmitAvailable]
  )

  // ダイアログを閉じるときの処理（クライアント側へコールバックする）
  const handleClose = useCallback(
    (submit: boolean, targetName?: string) => {
      setSubmitAvailable(false)
      onClose?.(submit, targetName)
    },
    [onClose, setSubmitAvailable]
  )

  return (
    <Dialog open={open} onClose={() => handleClose(false)}>
      <DialogTitle sx={{ m: 0, p: 2 }}>
        本当に削除しますか？
        <IconButton
          aria-label="close"
          onClick={() => handleClose(false)}
          sx={{
            position: 'absolute',
            right: 8,
            top: 8,
            color: (theme) => theme.palette.grey[500],
          }}
        >
          <CloseIcon />
        </IconButton>
      </DialogTitle>

      <DialogContent>
        <DialogContentText>
          <Typography gutterBottom>
            <b>{targetName}</b>{' '}
            を削除すると、リソースに紐づくすべての情報が削除されます。
            この処理を取り消すことはできません。
          </Typography>
          <Typography gutterBottom>
            本当に削除するのであれば、<b>{targetName}</b> と入力してください。
          </Typography>
        </DialogContentText>
        <TextField
          autoFocus
          autoComplete="off"
          size="small"
          margin="dense"
          fullWidth
          onChange={(e) => handleInputChange(e.target.value)}
        />
        <Button
          disabled={!submitAvailable}
          variant="contained"
          color="error"
          sx={{ width: '100%' }}
          onClick={() => handleClose(true, targetName)}
        >
          本当にこのリソースを削除します！
        </Button>
      </DialogContent>
    </Dialog>
  )
}

import { useCallback, useState } from 'react'
import { NextPage } from 'next'
import { Button } from '@mui/material'

import { AreYouSureDialog } from '../components/common/AreYouSureDialog'

/** テスト用のページ */
const SamplePage: NextPage = () => {
  const [open, setOpen] = useState(false) // ダイアログの開閉状態
  const [result, setResult] = useState('') // 結果確認用

  // AreYouSureDialog からの Close イベントをハンドル
  const handleClose = useCallback(
    (submit: boolean, targetName?: string) => {
      // ダイアログを閉じる
      setOpen(false)

      // 実際にはここでアプリ固有の処理を行う★
      setResult(submit ? `submitted with ${targetName ?? ''}` : 'canceled')
    },
    [setOpen, setResult]
  )

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Dialog</Button>
      <div>Result = {result}</div>
      <AreYouSureDialog
        open={open}
        targetName="your-resource"
        onClose={handleClose}
      />
    </>
  )
}

export default SamplePage