golang/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2025-11-01 10:55:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(stories): co-locate stories with components (#2078)

Browse Source 
* refactor: move ActionButton component

* refactor: move BanUserButton component

* refactor: move ChatActionMessage component

* refactor: move ChatContainer component

* refactor: move AuthModal component

* refactor: move BrowserNotifyModal component

* refactor: move ChatUserMessage component

* refactor: move ChatJoinMessage component

* refactor: move ChatTextField component

* refactor: move ChatUserBadge component

* refactor: move FollowerCollection and SingleFollower components

* fix: bad import path

* refactor: move FollowModal component

* refactor: move Modal component

* refactor: move ContentHeader component

* refactor: move ChatSystemMessage component

* refactor: move Header component

* refactor: move Footer component

* refactor: move StatusBar component

* refactor: move OfflineBanner component

* refactor: move OwncastPlayer component

* refactor: move IndieAuthModal component

* refactor: move SocialLinks component

* refactor: move VideoPoster component

* refactor: move FollowModal component

* refactor: move FediAuthModal.tsx component

* refactor: move UserDropdown component

* refactor: move ChatSocialMessage component

* refactor: move Logo component

* refactor: move NotifyReminderPopup component

* refactor: move NameChangeModal component

* refactor: move FatalErrorStateModal component

* refactor: move ChatModeratorNotification component

* refactor: move ChatModerationActionMenu and ChatModerationDetailsModal components

* refactor: move CustomPageContent component

* refactor: move storybook Introduction file

* refactor: update storybook story import path

* refactor: move storybook preview styles

* refactor: move storybook doc pages

* refactor: move Color and ImageAsset components

* fix: bad import path

* fix: bad import path in story file
This commit is contained in:
James Young
2022-09-03 20:38:52 +02:00
committed by GitHub
parent 9f550a87d2
commit 5ebbbb8bf2
82 changed files with 120 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
web/components/chat/ChatModerationActionMenu/ChatModerationActionMenu.stories.tsx Normal file
View File

@ -0,0 +1,97 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { RecoilRoot } from 'recoil';
import ChatModerationActionMenu from './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:
- Remove single message
- Ban user completely
- Open modal to see user details
`,
},
},
},
} as ComponentMeta<typeof ChatModerationActionMenu>;
// 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
export const Basic = Template.bind({});

2
web/components/chat/ChatModerationActionMenu/ChatModerationActionMenu.tsx
View File

@ -6,7 +6,7 @@ import {
} from '@ant-design/icons';
import { Dropdown, Menu, MenuProps, Space, Modal, message } from 'antd';
import { useState } from 'react';
import ChatModerationDetailsModal from './ChatModerationDetailsModal';
import ChatModerationDetailsModal from '../ChatModerationDetailsModal/ChatModerationDetailsModal';
import s from './ChatModerationActionMenu.module.scss';
import ChatModeration from '../../../services/moderation-service';

17
web/components/chat/ChatModerationActionMenu/ChatModerationDetailsModal.module.scss
View File

@ -1,17 +0,0 @@
.modalContainer {
padding: 10px;
}
.chatHistory {
margin: 10px;
padding: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
.colorBlock {
width: 50%;
height: 20px;
border: 1px solid #000;
text-align: center;
}

179
web/components/chat/ChatModerationActionMenu/ChatModerationDetailsModal.tsx
View File

@ -1,179 +0,0 @@
import { Button, Col, Row, Spin } from 'antd';
import { useEffect, useState } from 'react';
import ChatModeration from '../../../services/moderation-service';
import s from './ChatModerationDetailsModal.module.scss';
interface Props {
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-color-users-${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">
{scopes.map(scope => (
<Col>{scope}</Col>
))}
{authenticated && <Col>Authenticated</Col>}
{isBot && <Col>Bot</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}>
{messages.map(message => (
<ChatMessageRow
key={message.id}
id={message.id}
body={message.body}
accessToken={accessToken}
/>
))}
</div>
</div>
)}
</Spin>
</div>
);
}