123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- import { Modal, Button } from 'antd';
- import { ExclamationCircleFilled, QuestionCircleFilled, StopTwoTone } from '@ant-design/icons';
- import { FC } from 'react';
- import { USER_ENABLED_TOGGLE, fetchData } from '../utils/apis';
- import { User } from '../types/chat';
- export type BanUserButtonProps = {
- user: User;
- isEnabled: Boolean; // = this user's current status
- label?: string;
- onClick?: () => void;
- };
- export const BanUserButton: FC<BanUserButtonProps> = ({ user, isEnabled, label, onClick }) => {
- async function buttonClicked({ id }): Promise<Boolean> {
- const data = {
- userId: id,
- enabled: !isEnabled, // set user to this value
- };
- try {
- const result = await fetchData(USER_ENABLED_TOGGLE, {
- data,
- method: 'POST',
- auth: true,
- });
- return result.success;
- } catch (e) {
- // eslint-disable-next-line no-console
- console.error(e);
- }
- return false;
- }
- const actionString = isEnabled ? 'ban' : 'unban';
- const icon = isEnabled ? (
- <ExclamationCircleFilled style={{ color: 'var(--ant-error)' }} />
- ) : (
- <QuestionCircleFilled style={{ color: 'var(--ant-warning)' }} />
- );
- const content = (
- <>
- Are you sure you want to {actionString} <strong>{user.displayName}</strong>
- {isEnabled ? ' and remove their messages?' : '?'}
- </>
- );
- const confirmBlockAction = () => {
- Modal.confirm({
- title: `Confirm ${actionString}`,
- content,
- onCancel: () => {},
- onOk: () =>
- new Promise((resolve, reject) => {
- const result = buttonClicked(user);
- if (result) {
- // wait a bit before closing so the user/client tables repopulate
- // GW: TODO: put users/clients data in global app context instead, then call a function here to update that state. (current in another branch)
- setTimeout(() => {
- resolve(result);
- onClick?.();
- }, 3000);
- } else {
- reject();
- }
- }),
- okType: 'danger',
- okText: isEnabled ? 'Absolutely' : null,
- icon,
- });
- };
- return (
- <Button
- onClick={confirmBlockAction}
- size="small"
- icon={isEnabled ? <StopTwoTone twoToneColor="#ff4d4f" /> : null}
- className="block-user-button"
- >
- {label || actionString}
- </Button>
- );
- };
- BanUserButton.defaultProps = {
- label: '',
- onClick: null,
- };
|