From 02e937c35138d1290ca8a1266798a7fbd67828b4 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Sun, 12 Mar 2023 23:03:22 -0700
Subject: [PATCH] Add error boundary to FollowersCollection. For #2811

---
 .../FollowerCollection/FollowerCollection.tsx | 55 ++++++++++++-------
 1 file changed, 34 insertions(+), 21 deletions(-)

diff --git a/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx b/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx
index 5fe8772c3..d5d0e0dc0 100644
--- a/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx
+++ b/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx
@@ -1,9 +1,11 @@
 import { FC, useEffect, useState } from 'react';
 import { Col, Pagination, Row, Skeleton } from 'antd';
+import { ErrorBoundary } from 'react-error-boundary';
 import { Follower } from '../../../../interfaces/follower';
 import { SingleFollower } from '../SingleFollower/SingleFollower';
 import styles from './FollowerCollection.module.scss';
 import { FollowButton } from '../../../action-buttons/FollowButton';
+import { ComponentError } from '../../ComponentError/ComponentError';
 
 export type FollowerCollectionProps = {
   name: string;
@@ -67,27 +69,38 @@ export const FollowerCollection: FC<FollowerCollectionProps> = ({ name, onFollow
   }
 
   return (
-    <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>
+    <ErrorBoundary
+      // eslint-disable-next-line react/no-unstable-nested-components
+      fallbackRender={({ error, resetErrorBoundary }) => (
+        <ComponentError
+          componentName="FollowerCollection"
+          message={error.message}
+          retryFunction={resetErrorBoundary}
+        />
+      )}
+    >
+      <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
-        className={styles.pagination}
-        current={page}
-        pageSize={ITEMS_PER_PAGE}
-        defaultPageSize={ITEMS_PER_PAGE}
-        total={total}
-        showSizeChanger={false}
-        onChange={p => {
-          setPage(p);
-        }}
-        hideOnSinglePage
-      />
-    </div>
+        <Pagination
+          className={styles.pagination}
+          current={page}
+          pageSize={ITEMS_PER_PAGE}
+          defaultPageSize={ITEMS_PER_PAGE}
+          total={total}
+          showSizeChanger={false}
+          onChange={p => {
+            setPage(p);
+          }}
+          hideOnSinglePage
+        />
+      </div>
+    </ErrorBoundary>
   );
 };