LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Add error boundary to ChatModerationDetailsModal. For #2811

Browse Source
This commit is contained in:
Gabe Kangas 2023-03-12 23:10:20 -07:00
parent 9162386495
commit 7cb5773a97
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
1 changed files with 43 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
web/components/chat/ChatModerationDetailsModal/ChatModerationDetailsModal.tsx
View File

@ -3,9 +3,11 @@ import { FC, useEffect, useState } from 'react';
import format from 'date-fns/format';
import { ColumnsType } from 'antd/lib/table';
import dynamic from 'next/dynamic';
import { ErrorBoundary } from 'react-error-boundary';
import ChatModeration from '../../../services/moderation-service';
import styles from './ChatModerationDetailsModal.module.scss';
import { formatUAstring } from '../../../utils/format';
import { ComponentError } from '../../ui/ComponentError/ComponentError';
const { Panel } = Collapse;
@ -148,38 +150,49 @@ export const ChatModerationDetailsModal: FC<ChatModerationDetailsModalProps> = (
},
];
return (
<Spin spinning={loading}>
<UserColorBlock color={displayColor} />
{scopes?.map(scope => (
<Tag key={scope}>{scope}</Tag>
))}
{authenticated && <Tag>Authenticated</Tag>}
{isBot && <Tag>Bot</Tag>}
<ValueRow label="Messages Sent Across Clients" value={totalMessagesSent.toString()} />
<ValueRow label="User Created" value={createdAtDate} />
<ValueRow label="Known As" value={previousNames.join(',')} />
<Collapse accordion>
<Panel header="Currently Connected Clients" key="connected-clients">
<Collapse accordion>
{connectedClients.map(client => (
<Panel header={formatUAstring(client.userAgent)} key={client.id}>
<ConnectedClient client={client} />
</Panel>
))}
</Collapse>
</Panel>
<ErrorBoundary
// eslint-disable-next-line react/no-unstable-nested-components
fallbackRender={({ error, resetErrorBoundary }) => (
<ComponentError
componentName="ChatModerationDetailsModal"
message={error.message}
retryFunction={resetErrorBoundary}
/>
)}
>
<Spin spinning={loading}>
<UserColorBlock color={displayColor} />
{scopes?.map(scope => (
<Tag key={scope}>{scope}</Tag>
))}
{authenticated && <Tag>Authenticated</Tag>}
{isBot && <Tag>Bot</Tag>}
<ValueRow label="Messages Sent Across Clients" value={totalMessagesSent.toString()} />
<ValueRow label="User Created" value={createdAtDate} />
<ValueRow label="Known As" value={previousNames.join(',')} />
<Collapse accordion>
<Panel header="Recent Chat Messages" key="chat-messages">
<Table
size="small"
pagination={null}
columns={chatMessageColumns}
dataSource={messages}
rowKey="id"
/>
<Panel header="Currently Connected Clients" key="connected-clients">
<Collapse accordion>
{connectedClients.map(client => (
<Panel header={formatUAstring(client.userAgent)} key={client.id}>
<ConnectedClient client={client} />
</Panel>
))}
</Collapse>
</Panel>
<Collapse accordion>
<Panel header="Recent Chat Messages" key="chat-messages">
<Table
size="small"
pagination={null}
columns={chatMessageColumns}
dataSource={messages}
rowKey="id"
/>
</Panel>
</Collapse>
</Collapse>
</Collapse>
</Spin>
</Spin>
</ErrorBoundary>
);
};