Add user detail API + modal. Closes #2002

.github/workflows/build-next.yml

@@ -13,4 +13,4 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Install dependencies
-        run: cd web && npm install && npm run build
+        run: cd web && npm install --include=dev --force && npm run build

.github/workflows/build-storybook.yml

@@ -1,7 +1,7 @@
 name: Build and Deploy Components+Style Guide
 on:
   push:
-    paths: ["web/stories/**", "web/components/**"] # Trigger the action only when files change in the folders defined here
+    paths: ['web/stories/**', 'web/components/**'] # Trigger the action only when files change in the folders defined here
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
@@ -14,7 +14,7 @@ jobs:
       - name: Install and Build
         run: | # Install npm packages and build the Storybook files
           cd web
-          npm install --include-dev
+          npm install --include-dev --force
           npm run build-storybook -- -o ../docs/components
 
       - name: Dispatch event to web site

.github/workflows/chromatic.yml

@@ -20,7 +20,7 @@ jobs:
     steps:
       - uses: actions/checkout@v1
       - name: Install dependencies
-        run: npm install --include=dev
+        run: npm install --include=dev --force
         # 👇 Adds Chromatic as a step in the workflow
       - name: Publish to Chromatic
         uses: chromaui/action@v1

.github/workflows/javascript-formatting.yml

@@ -43,7 +43,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Install Dependencies
-        run: npm install
+        run: npm install --force
 
       - name: Lint
         run: npm run lint

controllers/moderation/moderation.go

@@ -0,0 +1,71 @@
+package moderation
+
+import (
+	"encoding/json"
+	"net/http"
+	"strings"
+	"time"
+
+	"github.com/owncast/owncast/controllers"
+	"github.com/owncast/owncast/core/chat"
+	"github.com/owncast/owncast/core/chat/events"
+	"github.com/owncast/owncast/core/user"
+	log "github.com/sirupsen/logrus"
+)
+
+// GetUserDetails returns the details of a chat user for moderators.
+func GetUserDetails(w http.ResponseWriter, r *http.Request) {
+	type connectedClient struct {
+		MessageCount int       `json:"messageCount"`
+		UserAgent    string    `json:"userAgent"`
+		ConnectedAt  time.Time `json:"connectedAt"`
+		Geo          string    `json:"geo,omitempty"`
+	}
+
+	type response struct {
+		User             *user.User                `json:"user"`
+		ConnectedClients []connectedClient         `json:"connectedClients"`
+		Messages         []events.UserMessageEvent `json:"messages"`
+	}
+
+	pathComponents := strings.Split(r.URL.Path, "/")
+	uid := pathComponents[len(pathComponents)-1]
+
+	u := user.GetUserByID(uid)
+
+	if u == nil {
+		w.WriteHeader(http.StatusNotFound)
+		return
+	}
+
+	c, _ := chat.GetClientsForUser(uid)
+	clients := make([]connectedClient, len(c))
+	for i, c := range c {
+		client := connectedClient{
+			MessageCount: c.MessageCount,
+			UserAgent:    c.UserAgent,
+			ConnectedAt:  c.ConnectedAt,
+		}
+		if c.Geo != nil {
+			client.Geo = c.Geo.CountryCode
+		}
+
+		clients[i] = client
+	}
+
+	messages, err := chat.GetMessagesFromUser(uid)
+	if err != nil {
+		log.Errorln(err)
+	}
+
+	res := response{
+		User:             u,
+		ConnectedClients: clients,
+		Messages:         messages,
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	if err := json.NewEncoder(w).Encode(res); err != nil {
+		controllers.InternalErrorHandler(w, err)
+	}
+}

core/chat/persistence.go

@@ -1,6 +1,8 @@
 package chat
 
 import (
+	"context"
+	"database/sql"
 	"fmt"
 	"strings"
 	"time"
@@ -300,6 +302,29 @@ func GetChatHistory() []interface{} {
 	return m
 }
 
+// GetMessagesFromUser returns chat messages that were sent by a specific user.
+func GetMessagesFromUser(userID string) ([]events.UserMessageEvent, error) {
+	query, err := _datastore.GetQueries().GetMessagesFromUser(context.Background(), sql.NullString{String: userID, Valid: true})
+	if err != nil {
+		return nil, err
+	}
+
+	results := make([]events.UserMessageEvent, len(query))
+	for i, row := range query {
+		results[i] = events.UserMessageEvent{
+			Event: events.Event{
+				Timestamp: row.Timestamp.Time,
+				ID:        row.ID,
+			},
+			MessageEvent: events.MessageEvent{
+				Body: row.Body.String,
+			},
+		}
+	}
+
+	return results, nil
+}
+
 // SetMessageVisibilityForUserID will bulk change the visibility of messages for a user
 // and then send out visibility changed events to chat clients.
 func SetMessageVisibilityForUserID(userID string, visible bool) error {

db/db.go

@@ -1,6 +1,6 @@
 // Code generated by sqlc. DO NOT EDIT.
 // versions:
-//   sqlc v1.13.0
+//   sqlc v1.14.0
 
 package db
 

db/models.go

@@ -1,6 +1,6 @@
 // Code generated by sqlc. DO NOT EDIT.
 // versions:
-//   sqlc v1.13.0
+//   sqlc v1.14.0
 
 package db
 
@@ -52,6 +52,19 @@ type IpBan struct {
 	CreatedAt sql.NullTime
 }
 
+type Message struct {
+	ID        string
+	UserID    sql.NullString
+	Body      sql.NullString
+	EventType sql.NullString
+	HiddenAt  sql.NullTime
+	Timestamp sql.NullTime
+	Title     sql.NullString
+	Subtitle  sql.NullString
+	Image     sql.NullString
+	Link      sql.NullString
+}
+
 type Notification struct {
 	ID          int32
 	Channel     string

db/query.sql

@@ -99,6 +99,9 @@ UPDATE user_access_tokens SET user_id = $1 WHERE token = $2;
 -- name: SetUserAsAuthenticated :exec
 UPDATE users SET authenticated_at = CURRENT_TIMESTAMP WHERE id = $1;
 
+-- name: GetMessagesFromUser :many
+SELECT id, body, hidden_at, timestamp FROM messages WHERE eventType = 'CHAT' AND user_id = $1 ORDER BY TIMESTAMP DESC;
+
 -- name: IsDisplayNameAvailable :one
 SELECT count(*) FROM users WHERE display_name = $1 AND authenticated_at is not null AND disabled_at is NULL;
 

db/query.sql.go

@@ -1,6 +1,6 @@
 // Code generated by sqlc. DO NOT EDIT.
 // versions:
-//   sqlc v1.13.0
+//   sqlc v1.14.0
 // source: query.sql
 
 package db
@@ -412,6 +412,45 @@ func (q *Queries) GetLocalPostCount(ctx context.Context) (int64, error) {
 	return count, err
 }
 
+const getMessagesFromUser = `-- name: GetMessagesFromUser :many
+SELECT id, body, hidden_at, timestamp FROM messages WHERE eventType = 'CHAT' AND user_id = $1 ORDER BY TIMESTAMP DESC
+`
+
+type GetMessagesFromUserRow struct {
+	ID        string
+	Body      sql.NullString
+	HiddenAt  sql.NullTime
+	Timestamp sql.NullTime
+}
+
+func (q *Queries) GetMessagesFromUser(ctx context.Context, userID sql.NullString) ([]GetMessagesFromUserRow, error) {
+	rows, err := q.db.QueryContext(ctx, getMessagesFromUser, userID)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+	var items []GetMessagesFromUserRow
+	for rows.Next() {
+		var i GetMessagesFromUserRow
+		if err := rows.Scan(
+			&i.ID,
+			&i.Body,
+			&i.HiddenAt,
+			&i.Timestamp,
+		); err != nil {
+			return nil, err
+		}
+		items = append(items, i)
+	}
+	if err := rows.Close(); err != nil {
+		return nil, err
+	}
+	if err := rows.Err(); err != nil {
+		return nil, err
+	}
+	return items, nil
+}
+
 const getNotificationDestinationsForChannel = `-- name: GetNotificationDestinationsForChannel :many
 SELECT destination FROM notifications WHERE channel = $1
 `

db/schema.sql

@@ -79,3 +79,21 @@ CREATE TABLE IF NOT EXISTS auth (
 		"timestamp" DATE DEFAULT CURRENT_TIMESTAMP NOT NULL
 	);
   CREATE INDEX auth_token ON auth (token);
+
+CREATE TABLE IF NOT EXISTS messages (
+		"id" string NOT NULL,
+		"user_id" TEXT,
+		"body" TEXT,
+		"eventType" TEXT,
+		"hidden_at" DATE,
+		"timestamp" DATE,
+    "title" TEXT,
+    "subtitle" TEXT,
+    "image" TEXT,
+    "link" TEXT,
+		PRIMARY KEY (id)
+	);CREATE INDEX index ON messages (id, user_id, hidden_at, timestamp);
+	CREATE INDEX id ON messages (id);
+	CREATE INDEX user_id ON messages (user_id);
+	CREATE INDEX hidden_at ON messages (hidden_at);
+	CREATE INDEX timestamp ON messages (timestamp);

router/router.go

@@ -15,6 +15,7 @@ import (
 	"github.com/owncast/owncast/controllers/admin"
 	fediverseauth "github.com/owncast/owncast/controllers/auth/fediverse"
 	"github.com/owncast/owncast/controllers/auth/indieauth"
+	"github.com/owncast/owncast/controllers/moderation"
 	"github.com/owncast/owncast/core/chat"
 	"github.com/owncast/owncast/core/data"
 	"github.com/owncast/owncast/core/user"
@@ -323,6 +324,9 @@ func Start() error {
 	// Enable/disable a user
 	http.HandleFunc("/api/chat/users/setenabled", middleware.RequireUserModerationScopeAccesstoken(admin.UpdateUserEnabled))
 
+	// Get a user's details
+	http.HandleFunc("/api/moderation/chat/user/", middleware.RequireUserModerationScopeAccesstoken(moderation.GetUserDetails))
+
 	// Configure Federation features
 
 	// enable/disable federation features

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

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,

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>
     </>
   );

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;
+}

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}>
+      <Spin spinning={loading}>
+        <h1>{displayName}</h1>
         <Row justify="space-around" align="middle">
-        <Col span={12}>User created</Col>
-        <Col span={12}>xxxx</Col>
+          {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} />
 
+        <ValueRow label="User Created" value={createdAt.toString()} />
+        <ValueRow label="Previous Names" value={previousNames.join(',')} />
+
+        <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} />
+            <div className={s.chatHistory}>
+              {messages.map(message => (
+                <ChatMessageRow
+                  key={message.id}
+                  id={message.id}
+                  body={message.body}
+                  accessToken={accessToken}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+      </Spin>
     </div>
   );
 }

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`;
 

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;

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 => (
+  <RecoilRoot>
     <ChatModerationActionMenu
       accessToken="abc123"
       messageID="xxx"
       userDisplayName="Fake-User"
       userID="abc123"
     />
+  </RecoilRoot>
 );
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

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