Add ability to set a user as a moderator via the admin (#355)

* Add moderators

* Remove passing unused prop

* Fix linter not running

web/.github/workflows/linter.yml

@@ -19,5 +19,5 @@ jobs:
       uses: tj-actions/eslint-changed-files@v7.3
       with:
         config_path: '.eslintrc.js'
-        ignore-path: '.eslintignore'
+        ignore_path: '.eslintignore'
         extensions: 'ts,tsx,js,jsx'

web/.prettierrc

@@ -4,6 +4,5 @@
   "tabWidth": 2,
   "singleQuote": true,
   "trailingComma": "all",
-  "jsxBracketSameLine": false,
   "arrowParens": "avoid"
 }

web/components/moderator-user-button.tsx

@@ -0,0 +1,82 @@
+import { Modal, Button } from 'antd';
+import { ExclamationCircleFilled, QuestionCircleFilled, StopTwoTone } from '@ant-design/icons';
+import { USER_SET_MODERATOR, fetchData } from '../utils/apis';
+import { User } from '../types/chat';
+
+interface ModeratorUserButtonProps {
+  user: User;
+  onClick?: () => void;
+}
+export default function ModeratorUserButton({ user, onClick }: ModeratorUserButtonProps) {
+  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" /> : null}
+      className="block-user-button"
+    >
+      {actionString}
+    </Button>
+  );
+}
+ModeratorUserButton.defaultProps = {
+  onClick: null,
+};

web/components/user-popover.tsx

@@ -7,6 +7,7 @@ import format from 'date-fns/format';
 import { uniq } from 'lodash';
 
 import BlockUserbutton from './ban-user-button';
+import ModeratorUserbutton from './moderator-user-button';
 
 import { User, UserConnectionInfo } from '../types/chat';
 import { formatDisplayDate } from './user-table';
@@ -136,6 +137,7 @@ export default function UserPopover({ user, connectionInfo, children }: UserPopo
               onClick={handleCloseModal}
             />
           )}
+          <ModeratorUserbutton user={user} onClick={handleCloseModal} />
         </div>
       </Modal>
     </>

web/package.json

@@ -47,7 +47,7 @@
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.26.0",
+    "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "prettier": "^2.4.1",
     "typescript": "^4.4.2"

web/types/chat.ts

@@ -16,6 +16,7 @@ export interface User {
   disabledAt: Date;
   previousNames: [string];
   nameChangedAt: Date;
+  scopes?: [string];
 }
 
 export interface UsernameHistory {

web/utils/apis.ts

@@ -34,6 +34,10 @@ export const DISABLED_USERS = `${API_LOCATION}chat/users/disabled`;
 // Disable/enable a single user
 export const USER_ENABLED_TOGGLE = `${API_LOCATION}chat/users/setenabled`;
 
+// Disable/enable a single user
+export const USER_SET_MODERATOR = `${API_LOCATION}chat/users/setmoderator`;
+
+
 // Get hardware stats
 export const HARDWARE_STATS = `${API_LOCATION}hardwarestats`;