reafctor: normalize component formatting (#2082)

* refactor: move/rename BanUserButton file * refactor: move/rename Chart file * refactor: update generic component filenames to PascalCase * refactor: update config component filenames to PascalCase * refactor: update AdminLayout component filename to PascalCase * refactor: update/move VideoJS component * chore(eslint): disable bad react/require-default-props rule * refactor: normalize ActionButton component * refactor: normalize ActionButtonRow component * refactor: normalize FollowButton component * refactor: normalize NotifyButton component * refactor: normalize ChatActionMessage component * refactor: normalize ChatContainer component * refactor: normalize ChatJoinMessage component * refactor: normalize ChatModerationActionMenu component * refactor: normalize ChatModerationDetailsModal component * refactor: normalize ChatModeratorNotification component * refactor: normalize ChatSocialMessage component * refactor: normalize ChatSystemMessage component * refactor: normalize ChatTextField component * refactor: normalize ChatUserBadge component * refactor: normalize ChatUserMessage component * refactor: normalize ContentHeader component * refactor: normalize OwncastLogo component * refactor: normalize UserDropdown component * chore(eslint): modify react/function-component-definition rule * refactor: normalize CodecSelector component * refactor: update a bunch of functional components using eslint * refactor: update a bunch of functional components using eslint, pt2 * refactor: update a bunch of functional components using eslint, pt3 * refactor: replace all component->component default imports with named imports * refactor: replace all component-stories->component default imports with named imports * refactor: remove default exports from most components * chore(eslint): add eslint config files for the components and pages dirs * fix: use-before-define error in ChatContainer * Fix ChatContainer import * Only process .tsx files in Next builds Co-authored-by: Gabe Kangas <gabek@real-ity.com>
2022-09-07 09:00:28 +02:00
parent ee333ef10a
commit d1f3fffe2f
178 changed files with 1258 additions and 1227 deletions
--- a/web/components/ModeratorUserButton.tsx
+++ b/web/components/ModeratorUserButton.tsx
@@ -0,0 +1,96 @@
+import { Modal, Button } from 'antd';
+import {
+  ExclamationCircleFilled,
+  QuestionCircleFilled,
+  StopTwoTone,
+  SafetyCertificateTwoTone,
+} from '@ant-design/icons';
+import { FC } from 'react';
+import { USER_SET_MODERATOR, fetchData } from '../utils/apis';
+import { User } from '../types/chat';
+
+export type ModeratorUserButtonProps = {
+  user: User;
+  onClick?: () => void;
+};
+
+export const ModeratorUserButton: FC<ModeratorUserButtonProps> = ({ user, onClick }) => {
+  async function buttonClicked({ id }, setAsModerator: Boolean): Promise<Boolean> {
+    const data = {
+      userId: id,
+      isModerator: setAsModerator,
+    };
+    try {
+      const result = await fetchData(USER_SET_MODERATOR, {
+        data,
+        method: 'POST',
+        auth: true,
+      });
+      return result.success;
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+    }
+    return false;
+  }
+
+  const isModerator = user.scopes?.includes('MODERATOR');
+  const actionString = isModerator ? 'remove moderator' : 'add moderator';
+  const icon = isModerator ? (
+    <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>?
+    </>
+  );
+
+  const confirmBlockAction = () => {
+    Modal.confirm({
+      title: `Confirm ${actionString}`,
+      content,
+      onCancel: () => {},
+      onOk: () =>
+        new Promise((resolve, reject) => {
+          const result = buttonClicked(user, !isModerator);
+          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: isModerator ? 'Yup!' : null,
+      icon,
+    });
+  };
+
+  return (
+    <Button
+      onClick={confirmBlockAction}
+      size="small"
+      icon={
+        isModerator ? (
+          <StopTwoTone twoToneColor="#ff4d4f" />
+        ) : (
+          <SafetyCertificateTwoTone twoToneColor="#22bb44" />
+        )
+      }
+      className="block-user-button"
+    >
+      {actionString}
+    </Button>
+  );
+};
+
+ModeratorUserButton.defaultProps = {
+  onClick: null,
+};