Refactor profile page (#1636)

src/components/profile-page/access-tokens/access-token-deletion-modal.tsx

@@ -0,0 +1,63 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { useCallback } from 'react'
+import type { ModalVisibilityProps } from '../../common/modals/common-modal'
+import { CommonModal } from '../../common/modals/common-modal'
+import { cypressId } from '../../../utils/cypress-attribute'
+import { Button, Modal } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import type { AccessToken } from '../../../api/tokens/types'
+import { deleteAccessToken } from '../../../api/tokens'
+import { dispatchUiNotification, showErrorNotification } from '../../../redux/ui-notifications/methods'
+
+export interface AccessTokenDeletionModalProps extends ModalVisibilityProps {
+  token: AccessToken
+}
+
+/**
+ * Modal that asks for confirmation when deleting an access token.
+ * @param show True when the deletion modal should be shown, false otherwise.
+ * @param token The access token to delete.
+ * @param onHide Callback that is fired when the modal is closed.
+ */
+export const AccessTokenDeletionModal: React.FC<AccessTokenDeletionModalProps> = ({ show, token, onHide }) => {
+  useTranslation()
+
+  const onConfirmDelete = useCallback(() => {
+    deleteAccessToken(token.keyId)
+      .then(() => {
+        return dispatchUiNotification(
+          'profile.modal.deleteAccessToken.notificationTitle',
+          'profile.modal.deleteAccessToken.notificationText',
+          {}
+        )
+      })
+      .catch(showErrorNotification('profile.modal.deleteAccessToken.failed'))
+      .finally(() => {
+        if (onHide) {
+          onHide()
+        }
+      })
+  }, [token, onHide])
+
+  return (
+    <CommonModal
+      show={show}
+      onHide={onHide}
+      title={'profile.modal.deleteAccessToken.title'}
+      {...cypressId('access-token-modal-delete')}>
+      <Modal.Body>
+        <Trans i18nKey='profile.modal.deleteAccessToken.message' />
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant='danger' onClick={onConfirmDelete}>
+          <Trans i18nKey={'common.delete'} />
+        </Button>
+      </Modal.Footer>
+    </CommonModal>
+  )
+}