header DeleteLtiPlanModalWithButton.tsx

0% Statements 0/99

0% Branches 0/1

0% Functions 0/1

0% Lines 0/99

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

import { IconTrash } from '@tabler/icons-react';
import { Fragment, memo, useCallback, useState } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';

import { IconButton, Input, Modal, Stack, Typography } from '@allshares/studio-design-system';
import { routes } from '@amalia/core/routes';
import { useBoolState } from '@amalia/ext/react/hooks';
import { useNavigate } from '@amalia/ext/react-router-dom';
import { useDeleteLtiPlan } from '@amalia/lti/state';
import { type LtiPlan } from '@amalia/lti/types';

type DeleteLtiPlanModalWithButtonProps = {
  readonly ltiPlan: LtiPlan;
};

export const DeleteLtiPlanModalWithButton = memo(function DeleteLtiPlanModalWithButton({
  ltiPlan,
}: DeleteLtiPlanModalWithButtonProps) {
  const { formatMessage } = useIntl();
  const { isModalOpen, setModalOpenFalse, setModalOpenTrue } = useBoolState(false, 'modalOpen');

  const navigate = useNavigate();

  const { mutate, isPending } = useDeleteLtiPlan();

  const [fieldValue, setFieldValue] = useState('');

  const handleDelete = useCallback(() => {
    mutate(ltiPlan.id, {
      onSuccess: () => {
        navigate(routes.LTI_PLANS);
      },
    });
  }, [mutate, ltiPlan.id, navigate]);

  return (
    <Fragment>
      <IconButton
        icon={<IconTrash />}
        isLoading={isPending}
        label={formatMessage({ defaultMessage: 'Delete' })}
        outline="border"
        variant="danger"
        onClick={setModalOpenTrue}
      />
      <Modal
        isOpen={isModalOpen}
        variant="danger"
        onClose={setModalOpenFalse}
      >
        <Modal.Content>
          <Modal.Header>
            <Modal.Title>
              <FormattedMessage defaultMessage="Delete plan" />
            </Modal.Title>
          </Modal.Header>

          <Modal.Body>
            <Stack gap={24}>
              <Typography variant="bodyBaseRegular">
                <FormattedMessage
                  defaultMessage="Are you sure you want to delete <strong>{ltiPlanName}</strong>?"
                  values={{
                    strong: (chunks) => <Typography variant="bodyBaseBold">{chunks}</Typography>,
                    ltiPlanName: ltiPlan.name,
                  }}
                />
              </Typography>

              <Input
                value={fieldValue}
                label={
                  <FormattedMessage
                    defaultMessage="Type <bold>delete</bold> to continue"
                    values={{ bold: (chunk) => <b>{chunk}</b> }}
                  />
                }
                onChange={setFieldValue}
              />
            </Stack>
          </Modal.Body>
        </Modal.Content>

        <Modal.Actions>
          <Modal.CancelAction />

          <Modal.MainAction
            disabled={fieldValue !== 'delete'}
            icon={<IconTrash />}
            isLoading={isPending}
            onClick={handleDelete}
          >
            <FormattedMessage defaultMessage="Delete" />
          </Modal.MainAction>
        </Modal.Actions>
      </Modal>
    </Fragment>
  );
});