Add user detail API + modal. Closes #2002

2022-07-20 20:42:23 -07:00
parent 82a0b492a5
commit f3a16be0dd
21 changed files with 543 additions and 60 deletions
--- a/web/.storybook/main.js
+++ b/web/.storybook/main.js
@@ -17,6 +17,7 @@ module.exports = {
    'storybook-addon-designs',
    'storybook-dark-mode',
    'addon-screen-reader',
+    'storybook-addon-fetch-mock',
  ],
  webpackFinal: async (config, { configType }) => {
    // @see https://github.com/storybookjs/storybook/issues/9070
--- a/web/.storybook/preview.js
+++ b/web/.storybook/preview.js
@@ -6,6 +6,9 @@ import { themes } from '@storybook/theming';
 import { DocsContainer } from './storybook-theme';

 export const parameters = {
+  fetchMock: {
+    mocks: [],
+  },
  actions: { argTypesRegex: '^on[A-Z].*' },
  docs: {
    container: DocsContainer,
--- a/web/components/chat/ChatModerationActionMenu/ChatModerationActionMenu.tsx
+++ b/web/components/chat/ChatModerationActionMenu/ChatModerationActionMenu.tsx
@@ -4,16 +4,14 @@ import {
  EyeInvisibleOutlined,
  SmallDashOutlined,
 } from '@ant-design/icons';
-import { Dropdown, Menu, MenuProps, Space, Modal } from 'antd';
+import { Dropdown, Menu, MenuProps, Space, Modal, message } from 'antd';
 import { useState } from 'react';
 import ChatModerationDetailsModal from './ChatModerationDetailsModal';
 import s from './ChatModerationActionMenu.module.scss';
+import ChatModeration from '../../../services/moderation-service';

 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;
@@ -27,42 +25,20 @@ export default function ChatModerationActionMenu(props: 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);
+      await ChatModeration.banUser(userID, accessToken);
    } catch (e) {
      console.error(e);
+      message.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);
+      await ChatModeration.removeMessage(messageID, accessToken);
    } catch (e) {
      console.error(e);
+      message.error(e);
    }
  };

@@ -141,12 +117,14 @@ export default function ChatModerationActionMenu(props: Props) {
      </Dropdown>
      <Modal
        visible={showUserDetailsModal}
-        footer={null}
+        okText="Ban User"
+        okButtonProps={{ danger: true }}
+        onOk={handleBanUser}
        onCancel={() => {
          setShowUserDetailsModal(false);
        }}
      >
-        <ChatModerationDetailsModal />
+        <ChatModerationDetailsModal userId={userID} accessToken={accessToken} />
      </Modal>
    </>
  );
--- a/web/components/chat/ChatModerationActionMenu/ChatModerationDetailsModal.module.scss
+++ b/web/components/chat/ChatModerationActionMenu/ChatModerationDetailsModal.module.scss
@@ -8,3 +8,10 @@
  border: 1px solid #ccc;
  border-radius: 5px;
 }
+
+.colorBlock {
+  width: 50%;
+  height: 20px;
+  border: 1px solid #000;
+  text-align: center;
+}
--- a/web/components/chat/ChatModerationActionMenu/ChatModerationDetailsModal.tsx
+++ b/web/components/chat/ChatModerationActionMenu/ChatModerationDetailsModal.tsx
@@ -1,27 +1,179 @@
-import { Col, Row } from 'antd';
+import { Button, Col, Row, Spin } from 'antd';
+import { useEffect, useState } from 'react';
+import ChatModeration from '../../../services/moderation-service';
 import s from './ChatModerationDetailsModal.module.scss';

-/* eslint-disable @typescript-eslint/no-unused-vars */
 interface Props {
-  // userID: string;
+  userId: string;
+  accessToken: string;
 }

+export interface UserDetails {
+  user: User;
+  connectedClients: Client[];
+  messages: Message[];
+}
+
+export interface Client {
+  messageCount: number;
+  userAgent: string;
+  connectedAt: Date;
+  geo: string;
+}
+
+export interface Message {
+  id: string;
+  timestamp: Date;
+  user: null;
+  body: string;
+}
+
+export interface User {
+  id: string;
+  displayName: string;
+  displayColor: number;
+  createdAt: Date;
+  previousNames: string[];
+  scopes: string[];
+  isBot: boolean;
+  authenticated: boolean;
+}
+
+const removeMessage = async (messageId: string, accessToken: string) => {
+  try {
+    ChatModeration.removeMessage(messageId, accessToken);
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+const ValueRow = ({ label, value }: { label: string; value: string }) => (
+  <Row justify="space-around" align="middle">
+    <Col span={12}>{label}</Col>
+    <Col span={12}>{value}</Col>
+  </Row>
+);
+
+const ChatMessageRow = ({
+  id,
+  body,
+  accessToken,
+}: {
+  id: string;
+  body: string;
+  accessToken: string;
+}) => (
+  <Row justify="space-around" align="middle">
+    <Col span={18}>{body}</Col>
+    <Col>
+      <Button onClick={() => removeMessage(id, accessToken)}>X</Button>
+    </Col>
+  </Row>
+);
+
+const ConnectedClient = ({ client }: { client: Client }) => {
+  const { messageCount, userAgent, connectedAt, geo } = client;
+
+  return (
+    <div>
+      <ValueRow label="Messages Sent" value={`${messageCount}`} />
+      <ValueRow label="Geo" value={geo} />
+      <ValueRow label="Connected At" value={connectedAt.toString()} />
+      <ValueRow label="User Agent" value={userAgent} />
+    </div>
+  );
+};
+
+// eslint-disable-next-line react/prop-types
+const UserColorBlock = ({ color }) => {
+  const bg = `var(--theme-user-colors-${color})`;
+  return (
+    <Row justify="space-around" align="middle">
+      <Col span={12}>Color</Col>
+      <Col span={12}>
+        <div className={s.colorBlock} style={{ backgroundColor: bg }}>
+          {color}
+        </div>
+      </Col>
+    </Row>
+  );
+};
+
 export default function ChatModerationDetailsModal(props: Props) {
+  const { userId, accessToken } = props;
+  const [userDetails, setUserDetails] = useState<UserDetails | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const getDetails = async () => {
+    try {
+      const response = await (await fetch(`/api/moderation/chat/user/${userId}`)).json();
+      setUserDetails(response);
+      setLoading(false);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  useEffect(() => {
+    getDetails();
+  }, []);
+
+  if (!userDetails) {
+    return null;
+  }
+
+  const { user, connectedClients, messages } = userDetails;
+  const { displayName, displayColor, createdAt, previousNames, scopes, isBot, authenticated } =
+    user;
+
  return (
    <div className={s.modalContainer}>
-      <Row justify="space-around" align="middle">
-        <Col span={12}>User created</Col>
-        <Col span={12}>xxxx</Col>
-      </Row>
+      <Spin spinning={loading}>
+        <h1>{displayName}</h1>
+        <Row justify="space-around" align="middle">
+          {scopes.map(scope => (
+            <Col>{scope}</Col>
+          ))}
+          {authenticated && <Col>Authenticated</Col>}
+          {isBot && <Col>Bot</Col>}
+        </Row>

-      <Row justify="space-around" align="middle">
-        <Col span={12}>Previous names</Col>
-        <Col span={12}>xxxx</Col>
-      </Row>
+        <UserColorBlock color={displayColor} />

-      <h1>Recent Chat Messages</h1>
+        <ValueRow label="User Created" value={createdAt.toString()} />
+        <ValueRow label="Previous Names" value={previousNames.join(',')} />

-      <div className={s.chatHistory} />
+        <hr />
+
+        <h2>Currently Connected</h2>
+        {connectedClients.length > 0 && (
+          <Row gutter={[15, 15]} wrap>
+            {connectedClients.map(client => (
+              <Col flex="auto">
+                <ConnectedClient client={client} />
+              </Col>
+            ))}
+          </Row>
+        )}
+
+        <hr />
+        {messages.length > 0 && (
+          <div>
+            <h1>Recent Chat Messages</h1>
+
+            <div className={s.chatHistory}>
+              {messages.map(message => (
+                <ChatMessageRow
+                  key={message.id}
+                  id={message.id}
+                  body={message.body}
+                  accessToken={accessToken}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+      </Spin>
    </div>
  );
 }
--- a/web/services/chat-service.ts
+++ b/web/services/chat-service.ts
@@ -1,5 +1,6 @@
 import { ChatMessage } from '../interfaces/chat-message.model';
 import { getUnauthedData } from '../utils/apis';
+
 const ENDPOINT = `/api/chat`;
 const URL_CHAT_REGISTRATION = `/api/chat/register`;

--- a/web/services/moderation-service.ts
+++ b/web/services/moderation-service.ts
@@ -0,0 +1,38 @@
+const HIDE_MESSAGE_ENDPOINT = `/api/chat/messagevisibility`;
+const BAN_USER_ENDPOINT = `/api/chat/users/setenabled`;
+
+class ChatModerationService {
+  public static async removeMessage(id: string, accessToken: string): Promise<any> {
+    const url = new URL(HIDE_MESSAGE_ENDPOINT, window.location.toString());
+    url.searchParams.append('accessToken', accessToken);
+    const hideMessageUrl = url.toString();
+
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ idArray: [id] }),
+    };
+
+    await fetch(hideMessageUrl, options);
+  }
+
+  public static async banUser(id: string, accessToken: string): Promise<any> {
+    const url = new URL(BAN_USER_ENDPOINT, window.location.toString());
+    url.searchParams.append('accessToken', accessToken);
+    const hideMessageUrl = url.toString();
+
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ id }),
+    };
+
+    await fetch(hideMessageUrl, options);
+  }
+}
+
+export default ChatModerationService;
--- a/web/stories/ChatModerationActionMenu.stories.tsx
+++ b/web/stories/ChatModerationActionMenu.stories.tsx
@@ -1,11 +1,74 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
 import ChatModerationActionMenu from '../components/chat/ChatModerationActionMenu/ChatModerationActionMenu';

+const mocks = {
+  mocks: [
+    {
+      // The "matcher" determines if this
+      // mock should respond to the current
+      // call to fetch().
+      matcher: {
+        name: 'response',
+        url: 'glob:/api/moderation/chat/user/*',
+      },
+      // If the "matcher" matches the current
+      // fetch() call, the fetch response is
+      // built using this "response".
+      response: {
+        status: 200,
+        body: {
+          user: {
+            id: 'hjFPU967R',
+            displayName: 'focused-snyder',
+            displayColor: 2,
+            createdAt: '2022-07-12T13:08:31.406505322-07:00',
+            previousNames: ['focused-snyder'],
+            scopes: ['MODERATOR'],
+            isBot: false,
+            authenticated: false,
+          },
+          connectedClients: [
+            {
+              messageCount: 3,
+              userAgent:
+                'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36',
+              connectedAt: '2022-07-20T16:45:07.796685618-07:00',
+              geo: 'N/A',
+            },
+          ],
+          messages: [
+            {
+              id: 'bQp8UJR4R',
+              timestamp: '2022-07-20T16:53:41.938083228-07:00',
+              user: null,
+              body: 'test message 3',
+            },
+            {
+              id: 'ubK88Jg4R',
+              timestamp: '2022-07-20T16:53:39.675531279-07:00',
+              user: null,
+              body: 'test message 2',
+            },
+            {
+              id: '20v8UJRVR',
+              timestamp: '2022-07-20T16:53:37.551084121-07:00',
+              user: null,
+              body: 'test message 1',
+            },
+          ],
+        },
+      },
+    },
+  ],
+};
+
 export default {
  title: 'owncast/Chat/Moderation menu',
  component: ChatModerationActionMenu,
  parameters: {
+    fetchMock: mocks,
    docs: {
      description: {
        component: `This should be a popup that is activated from a user's chat message. It should have actions to:
@@ -20,12 +83,14 @@ export default {

 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const Template: ComponentStory<typeof ChatModerationActionMenu> = args => (
-  <ChatModerationActionMenu
-    accessToken="abc123"
-    messageID="xxx"
-    userDisplayName="Fake-User"
-    userID="abc123"
-  />
+  <RecoilRoot>
+    <ChatModerationActionMenu
+      accessToken="abc123"
+      messageID="xxx"
+      userDisplayName="Fake-User"
+      userID="abc123"
+    />
+  </RecoilRoot>
 );

 // eslint-disable-next-line @typescript-eslint/no-unused-vars
--- a/web/stories/ChatModerationDetailsModal.stories.tsx
+++ b/web/stories/ChatModerationDetailsModal.stories.tsx
@@ -1,11 +1,74 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
 import ChatModerationDetailsModal from '../components/chat/ChatModerationActionMenu/ChatModerationDetailsModal';

+const mocks = {
+  mocks: [
+    {
+      // The "matcher" determines if this
+      // mock should respond to the current
+      // call to fetch().
+      matcher: {
+        name: 'response',
+        url: 'glob:/api/moderation/chat/user/*',
+      },
+      // If the "matcher" matches the current
+      // fetch() call, the fetch response is
+      // built using this "response".
+      response: {
+        status: 200,
+        body: {
+          user: {
+            id: 'hjFPU967R',
+            displayName: 'focused-snyder',
+            displayColor: 2,
+            createdAt: '2022-07-12T13:08:31.406505322-07:00',
+            previousNames: ['focused-snyder'],
+            scopes: ['MODERATOR'],
+            isBot: false,
+            authenticated: false,
+          },
+          connectedClients: [
+            {
+              messageCount: 3,
+              userAgent:
+                'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36',
+              connectedAt: '2022-07-20T16:45:07.796685618-07:00',
+              geo: 'N/A',
+            },
+          ],
+          messages: [
+            {
+              id: 'bQp8UJR4R',
+              timestamp: '2022-07-20T16:53:41.938083228-07:00',
+              user: null,
+              body: 'test message 3',
+            },
+            {
+              id: 'ubK88Jg4R',
+              timestamp: '2022-07-20T16:53:39.675531279-07:00',
+              user: null,
+              body: 'test message 2',
+            },
+            {
+              id: '20v8UJRVR',
+              timestamp: '2022-07-20T16:53:37.551084121-07:00',
+              user: null,
+              body: 'test message 1',
+            },
+          ],
+        },
+      },
+    },
+  ],
+};
+
 export default {
  title: 'owncast/Chat/Moderation modal',
  component: ChatModerationDetailsModal,
  parameters: {
+    fetchMock: mocks,
    docs: {
      description: {
        component: `This should be a modal that gives the moderator more details about the user such as:
@@ -20,7 +83,9 @@ export default {

 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const Template: ComponentStory<typeof ChatModerationDetailsModal> = args => (
-  <ChatModerationDetailsModal />
+  <RecoilRoot>
+    <ChatModerationDetailsModal userId="testuser123" accessToken="fakeaccesstoken4839" />
+  </RecoilRoot>
 );

 // eslint-disable-next-line @typescript-eslint/no-unused-vars