weseek__growi/apps/app/src/client/components/Me/AccessTokenList.tsx

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';

import type { IResGetAccessToken } from '~/interfaces/access-token';

type AccessTokenListProps = {
  accessTokens: IResGetAccessToken[];
  deleteHandler?: (tokenId: string) => void;
};
export const AccessTokenList = React.memo(
  (props: AccessTokenListProps): JSX.Element => {
    const { t } = useTranslation();
    const { accessTokens, deleteHandler } = props;
    const [tokenToDelete, setTokenToDelete] = useState<string | null>(null);

    const handleDeleteClick = (tokenId: string) => {
      setTokenToDelete(tokenId);
    };

    const handleConfirmDelete = () => {
      if (tokenToDelete != null && deleteHandler != null) {
        deleteHandler(tokenToDelete);
        setTokenToDelete(null);
      }
    };

    const toggleModal = () => {
      setTokenToDelete(null);
    };

    return (
      <>
        <div className="table">
          <table className="table table-bordered">
            <thead>
              <tr>
                <th>{t('page_me_access_token.description')}</th>
                <th>{t('page_me_access_token.expiredAt')}</th>
                <th>{t('page_me_access_token.scope')}</th>
                <th>{t('page_me_access_token.action')}</th>
              </tr>
            </thead>
            <tbody>
              {accessTokens.length === 0 ? (
                <tr>
                  <td colSpan={4} className="text-center">
                    {t('page_me_access_token.no_tokens_found')}
                  </td>
                </tr>
              ) : (
                <>
                  {accessTokens.map((token) => (
                    <tr key={token._id}>
                      <td className="text-break">{token.description}</td>
                      <td>{token.expiredAt.toString().split('T')[0]}</td>
                      <td>{token.scopes.join(', ')}</td>
                      <td>
                        <button
                          className="btn btn-danger"
                          type="button"
                          onClick={() => handleDeleteClick(token._id)}
                          data-testid="grw-accesstoken-delete-button"
                        >
                          {t('Delete')}
                        </button>
                      </td>
                    </tr>
                  ))}
                </>
              )}
            </tbody>
          </table>
        </div>

        {/* Confirmation Modal using Reactstrap */}
        <Modal isOpen={tokenToDelete !== null} toggle={toggleModal} centered>
          <ModalHeader
            tag="h4"
            toggle={toggleModal}
            className="bg-danger text-white"
          >
            <span className="material-symbols-outlined me-1">warning</span>
            {t('Warning')}
          </ModalHeader>
          <ModalBody>
            <p>{t('page_me_access_token.modal.message')}</p>
            <p className="text-danger fw-bold">
              {t('page_me_access_token.modal.alert')}
            </p>
          </ModalBody>
          <ModalFooter>
            <Button
              color="secondary"
              onClick={toggleModal}
              data-testid="grw-accesstoken-cancel-button-in-modal"
            >
              {t('Cancel')}
            </Button>
            <Button
              color="danger"
              onClick={handleConfirmDelete}
              data-testid="grw-accesstoken-delete-button-in-modal"
            >
              {t('page_me_access_token.modal.delete_token')}
            </Button>
          </ModalFooter>
        </Modal>
      </>
    );
  },
);
AccessTokenList.displayName = 'AccessTokenList';