RevokeAdminMenuItem.tsx 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. import React, { type JSX, useCallback } from 'react';
  2. import type { IUserHasId } from '@growi/core';
  3. import { useTranslation } from 'next-i18next';
  4. import AdminUsersContainer from '~/client/services/AdminUsersContainer';
  5. import { toastError, toastSuccess } from '~/client/util/toastr';
  6. import { useCurrentUser } from '~/states/global';
  7. import { withUnstatedContainers } from '../../UnstatedUtils';
  8. const RevokeAdminAlert = React.memo((): JSX.Element => {
  9. const { t } = useTranslation();
  10. return (
  11. <div className="px-4">
  12. <span className="material-symbols-outlined me-1 mb-2">person_remove</span>
  13. {t('admin:user_management.user_table.revoke_admin_access')}
  14. <p className="alert alert-danger">
  15. {t('admin:user_management.user_table.cannot_revoke')}
  16. </p>
  17. </div>
  18. );
  19. });
  20. RevokeAdminAlert.displayName = 'RevokeAdminAlert';
  21. type Props = {
  22. adminUsersContainer: AdminUsersContainer;
  23. user: IUserHasId;
  24. };
  25. const RevokeAdminMenuItem = (props: Props): JSX.Element => {
  26. const { t } = useTranslation('admin');
  27. const { adminUsersContainer, user } = props;
  28. const currentUser = useCurrentUser();
  29. const clickRevokeAdminBtnHandler = useCallback(async () => {
  30. try {
  31. const username = await adminUsersContainer.revokeUserAdmin(user._id);
  32. toastSuccess(t('toaster.revoke_user_admin', { username }));
  33. } catch (err) {
  34. toastError(err);
  35. }
  36. }, [adminUsersContainer, t, user._id]);
  37. return user.username !== currentUser?.username ? (
  38. <button
  39. className="dropdown-item"
  40. type="button"
  41. onClick={clickRevokeAdminBtnHandler}
  42. >
  43. <span className="material-symbols-outlined me-1">person_remove</span>{' '}
  44. {t('user_management.user_table.revoke_admin_access')}
  45. </button>
  46. ) : (
  47. <RevokeAdminAlert />
  48. );
  49. };
  50. /**
  51. * Wrapper component for using unstated
  52. */
  53. const RevokeAdminMenuItemWrapper: React.ForwardRefExoticComponent<
  54. Pick<any, string | number | symbol> & React.RefAttributes<any>
  55. > = withUnstatedContainers(RevokeAdminMenuItem, [AdminUsersContainer]);
  56. export default RevokeAdminMenuItemWrapper;