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