Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add error boundary to FollowersCollection. For #2811

Browse Source
This commit is contained in:
Gabe Kangas 2023-03-12 23:03:22 -07:00
parent 274aeb8be6
commit 02e937c351
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
1 changed files with 34 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
web/components/ui/followers/FollowerCollection/FollowerCollection.tsx
View File

@ -1,9 +1,11 @@
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import { Col, Pagination, Row, Skeleton } from 'antd'; import { Col, Pagination, Row, Skeleton } from 'antd';
import { ErrorBoundary } from 'react-error-boundary';
import { Follower } from '../../../../interfaces/follower'; import { Follower } from '../../../../interfaces/follower';
import { SingleFollower } from '../SingleFollower/SingleFollower'; import { SingleFollower } from '../SingleFollower/SingleFollower';
import styles from './FollowerCollection.module.scss'; import styles from './FollowerCollection.module.scss';
import { FollowButton } from '../../../action-buttons/FollowButton'; import { FollowButton } from '../../../action-buttons/FollowButton';
import { ComponentError } from '../../ComponentError/ComponentError';
export type FollowerCollectionProps = { export type FollowerCollectionProps = {
name: string; name: string;
@ -67,27 +69,38 @@ export const FollowerCollection: FC<FollowerCollectionProps> = ({ name, onFollow
} }
return ( return (
<div className={styles.followers} id="followers-collection"> <ErrorBoundary
<Row wrap gutter={[10, 10]} className={styles.followerRow}> // eslint-disable-next-line react/no-unstable-nested-components
{followers.map(follower => ( fallbackRender={({ error, resetErrorBoundary }) => (
<Col key={follower.link}> <ComponentError
<SingleFollower key={follower.link} follower={follower} /> componentName="FollowerCollection"
</Col> message={error.message}
))} retryFunction={resetErrorBoundary}
</Row> />
)}
>
<div className={styles.followers} id="followers-collection">
<Row wrap gutter={[10, 10]} className={styles.followerRow}>
{followers.map(follower => (
<Col key={follower.link}>
<SingleFollower key={follower.link} follower={follower} />
</Col>
))}
</Row>
<Pagination <Pagination
className={styles.pagination} className={styles.pagination}
current={page} current={page}
pageSize={ITEMS_PER_PAGE} pageSize={ITEMS_PER_PAGE}
defaultPageSize={ITEMS_PER_PAGE} defaultPageSize={ITEMS_PER_PAGE}
total={total} total={total}
showSizeChanger={false} showSizeChanger={false}
onChange={p => { onChange={p => {
setPage(p); setPage(p);
}} }}
hideOnSinglePage hideOnSinglePage
/> />
</div> </div>
</ErrorBoundary>
); );
}; };