StatusSuspendMenuItem.tsx 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. import React, { 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 { toastSuccess, toastError } from '~/client/util/toastr';
  6. import { withUnstatedContainers } from '~/components/UnstatedUtils';
  7. import { useCurrentUser } from '~/stores/context';
  8. const SuspendAlert = 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">cancel</span>{t('admin:user_management.user_table.deactivate_account')}
  13. <p className="alert alert-danger">{t('admin:user_management.user_table.your_own')}</p>
  14. </div>
  15. );
  16. });
  17. SuspendAlert.displayName = 'SuspendAlert';
  18. type Props = {
  19. adminUsersContainer: AdminUsersContainer,
  20. user: IUserHasId,
  21. }
  22. const StatusSuspendMenuItem = (props: Props): JSX.Element => {
  23. const { t } = useTranslation('admin');
  24. const { adminUsersContainer, user } = props;
  25. const { data: currentUser } = useCurrentUser();
  26. const clickDeactiveBtnHandler = useCallback(async() => {
  27. try {
  28. const username = await adminUsersContainer.deactivateUser(user._id);
  29. toastSuccess(t('toaster.deactivate_user_success', { username }));
  30. }
  31. catch (err) {
  32. toastError(err);
  33. }
  34. }, [adminUsersContainer, t, user._id]);
  35. return user.username !== currentUser?.username
  36. ? (
  37. <button className="dropdown-item" type="button" onClick={clickDeactiveBtnHandler}>
  38. <span className="material-symbols-outlined me-1">cancel</span> {t('user_management.user_table.deactivate_account')}
  39. </button>
  40. )
  41. : <SuspendAlert />;
  42. };
  43. /**
  44. * Wrapper component for using unstated
  45. */
  46. // eslint-disable-next-line max-len
  47. const StatusSuspendMenuItemWrapper: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<any>> = withUnstatedContainers(StatusSuspendMenuItem, [AdminUsersContainer]);
  48. export default StatusSuspendMenuItemWrapper;