LogalDeveloper/owncast
0
Fork 0
Code Activity

Add error boundary to UserDropdown. For #2811

Browse Source
This commit is contained in:
Gabe Kangas
2023-03-12 23:07:02 -07:00
parent 170a3ecde1
commit 02ca54d810
1 changed files with 35 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
web/components/common/UserDropdown/UserDropdown.tsx
View File

@@ -4,6 +4,7 @@ import { useRecoilState, useRecoilValue } from 'recoil';
import { FC, useState } from 'react'; import { FC, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import { ErrorBoundary } from 'react-error-boundary';
import { import {
chatVisibleToggleAtom, chatVisibleToggleAtom,
currentUserAtom, currentUserAtom,
@@ -11,6 +12,7 @@ import {
} from '../../stores/ClientConfigStore'; } from '../../stores/ClientConfigStore';
import styles from './UserDropdown.module.scss'; import styles from './UserDropdown.module.scss';
import { AppStateOptions } from '../../stores/application-state'; import { AppStateOptions } from '../../stores/application-state';
import { ComponentError } from '../../ui/ComponentError/ComponentError';
// Lazy loaded components // Lazy loaded components
@@ -109,23 +111,38 @@ export const UserDropdown: FC<UserDropdownProps> = ({ username: defaultUsername
); );
return ( return (
<div id="user-menu" className={`${styles.root}`}> <ErrorBoundary
<Dropdown overlay={menu} trigger={['click']}> // eslint-disable-next-line react/no-unstable-nested-components
<Button type="primary" icon={<UserOutlined className={styles.userIcon} />}> fallbackRender={({ error, resetErrorBoundary }) => (
<span className={styles.username}>{username}</span> <ComponentError
<CaretDownOutlined /> componentName="UserDropdown"
</Button> message={error.message}
</Dropdown> retryFunction={resetErrorBoundary}
<Modal />
title="Change Chat Display Name" )}
open={showNameChangeModal} >
handleCancel={() => setShowNameChangeModal(false)} <div id="user-menu" className={`${styles.root}`}>
> <Dropdown overlay={menu} trigger={['click']}>
<NameChangeModal /> <Button type="primary" icon={<UserOutlined className={styles.userIcon} />}>
</Modal> <span className={styles.username}>{username}</span>
<Modal title="Authenticate" open={showAuthModal} handleCancel={() => setShowAuthModal(false)}> <CaretDownOutlined />
<AuthModal /> </Button>
</Modal> </Dropdown>
</div> <Modal
title="Change Chat Display Name"
open={showNameChangeModal}
handleCancel={() => setShowNameChangeModal(false)}
>
<NameChangeModal />
</Modal>
<Modal
title="Authenticate"
open={showAuthModal}
handleCancel={() => setShowAuthModal(false)}
>
<AuthModal />
</Modal>
</div>
</ErrorBoundary>
); );
}; };