WIP of chat moderation menu, actions and modal

web/components/chat/ChatModerationActionMenu.tsx

@@ -1,6 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-interface Props {}
-
-export default function ChatModerationActionMenu(props: Props) {
-  return <div>Moderation popup menu goes here</div>;
-}

web/components/chat/ChatModerationActionMenu/ChatModerationActionMenu.module.scss

@@ -0,0 +1,3 @@
+.icon {
+  padding-right: 10px;
+}

web/components/chat/ChatModerationActionMenu/ChatModerationActionMenu.tsx

@@ -0,0 +1,153 @@
+import {
+  CloseCircleOutlined,
+  ExclamationCircleOutlined,
+  EyeInvisibleOutlined,
+  SmallDashOutlined,
+} from '@ant-design/icons';
+import { Dropdown, Menu, MenuProps, Space, Modal } from 'antd';
+import { useState } from 'react';
+import ChatModerationDetailsModal from './ChatModerationDetailsModal';
+import s from './ChatModerationActionMenu.module.scss';
+
+const { confirm } = Modal;
+
+const HIDE_MESSAGE_ENDPOINT = `/api/chat/messagevisibility`;
+const BAN_USER_ENDPOINT = `/api/chat/users/setenabled`;
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+interface Props {
+  accessToken: string;
+  messageID: string;
+  userID: string;
+  userDisplayName: string;
+}
+
+export default function ChatModerationActionMenu(props: Props) {
+  const { messageID, userID, userDisplayName, accessToken } = props;
+  const [showUserDetailsModal, setShowUserDetailsModal] = useState(false);
+
+  const handleBanUser = async () => {
+    const url = new URL(BAN_USER_ENDPOINT);
+    url.searchParams.append('accessToken', accessToken);
+    const hideMessageUrl = url.toString();
+
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ userID }),
+    };
+
+    try {
+      await fetch(hideMessageUrl, options);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleHideMessage = async () => {
+    const url = new URL(HIDE_MESSAGE_ENDPOINT);
+    url.searchParams.append('accessToken', accessToken);
+    const hideMessageUrl = url.toString();
+
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ idArray: [messageID] }),
+    };
+
+    try {
+      await fetch(hideMessageUrl, options);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const confirmHideMessage = async () => {
+    confirm({
+      icon: <ExclamationCircleOutlined />,
+      content: `Are you sure you want to remove this message from ${userDisplayName}?`,
+      onOk() {
+        handleHideMessage();
+      },
+    });
+  };
+
+  const confirmBanUser = async () => {
+    confirm({
+      icon: <ExclamationCircleOutlined />,
+      content: `Are you sure you want to ban ${userDisplayName} from chat?`,
+      onOk() {
+        handleBanUser();
+      },
+    });
+  };
+
+  const onMenuClick: MenuProps['onClick'] = ({ key }) => {
+    if (key === 'hide-message') {
+      confirmHideMessage();
+    } else if (key === 'ban-user') {
+      confirmBanUser();
+    } else if (key === 'more-info') {
+      setShowUserDetailsModal(true);
+    }
+  };
+
+  const menu = (
+    <Menu
+      onClick={onMenuClick}
+      items={[
+        {
+          label: (
+            <div>
+              <span className={s.icon}>
+                <EyeInvisibleOutlined />
+              </span>
+              Hide Message
+            </div>
+          ),
+          key: 'hide-message',
+        },
+        {
+          label: (
+            <div>
+              <span className={s.icon}>
+                <CloseCircleOutlined />
+              </span>
+              Ban User
+            </div>
+          ),
+          key: 'ban-user',
+        },
+        {
+          label: <div>More Info...</div>,
+          key: 'more-info',
+        },
+      ]}
+    />
+  );
+
+  return (
+    <>
+      <Dropdown overlay={menu} trigger={['click']}>
+        <button type="button" onClick={e => e.preventDefault()}>
+          <Space>
+            <SmallDashOutlined />
+          </Space>
+        </button>
+      </Dropdown>
+      <Modal
+        visible={showUserDetailsModal}
+        footer={null}
+        onCancel={() => {
+          setShowUserDetailsModal(false);
+        }}
+      >
+        <ChatModerationDetailsModal />
+      </Modal>
+    </>
+  );
+}

web/components/chat/ChatModerationActionMenu/ChatModerationDetailsModal.module.scss

@@ -0,0 +1,10 @@
+.modalContainer {
+  padding: 10px;
+}
+
+.chatHistory {
+  margin: 10px;
+  padding: 15px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}

web/components/chat/ChatModerationActionMenu/ChatModerationDetailsModal.tsx

@@ -0,0 +1,27 @@
+import { Col, Row } from 'antd';
+import s from './ChatModerationDetailsModal.module.scss';
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+interface Props {
+  // userID: string;
+}
+
+export default function ChatModerationDetailsModal(props: Props) {
+  return (
+    <div className={s.modalContainer}>
+      <Row justify="space-around" align="middle">
+        <Col span={12}>User created</Col>
+        <Col span={12}>xxxx</Col>
+      </Row>
+
+      <Row justify="space-around" align="middle">
+        <Col span={12}>Previous names</Col>
+        <Col span={12}>xxxx</Col>
+      </Row>
+
+      <h1>Recent Chat Messages</h1>
+
+      <div className={s.chatHistory} />
+    </div>
+  );
+}

web/components/chat/ChatModerationDetailsModal.tsx

@@ -1,6 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-interface Props {}
-
-export default function ChatModerationDetailsModal(props: Props) {
-  return <div>Moderation details modal goes here</div>;
-}

web/stories/ChatModerationActionMenu.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ChatModerationActionMenu from '../components/chat/ChatModerationActionMenu';
+import ChatModerationActionMenu from '../components/chat/ChatModerationActionMenu/ChatModerationActionMenu';
 
 export default {
   title: 'owncast/Chat/Moderation menu',
@@ -20,7 +20,12 @@ export default {
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const Template: ComponentStory<typeof ChatModerationActionMenu> = args => (
-  <ChatModerationActionMenu />
+  <ChatModerationActionMenu
+    accessToken="abc123"
+    messageID="xxx"
+    userDisplayName="Fake-User"
+    userID="abc123"
+  />
 );
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

web/stories/ChatModerationDetailsModal.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ChatModerationDetailsModal from '../components/chat/ChatModerationDetailsModal';
+import ChatModerationDetailsModal from '../components/chat/ChatModerationActionMenu/ChatModerationDetailsModal';
 
 export default {
   title: 'owncast/Chat/Moderation modal',
@@ -24,4 +24,4 @@ const Template: ComponentStory<typeof ChatModerationDetailsModal> = args => (
 );
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Basic = Template.bind({});
+export const Example = Template.bind({});