From 7e4d1479409a92be8e21ce1311991cace4a3e60d Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Sat, 18 Mar 2023 11:49:20 -0700
Subject: [PATCH] Fix exception thrown with zero links. Closes #2833

---
 web/components/ui/SocialLinks/SocialLinks.tsx | 61 ++++++++++++-------
 1 file changed, 40 insertions(+), 21 deletions(-)

diff --git a/web/components/ui/SocialLinks/SocialLinks.tsx b/web/components/ui/SocialLinks/SocialLinks.tsx
index 731797370..df9d60cce 100644
--- a/web/components/ui/SocialLinks/SocialLinks.tsx
+++ b/web/components/ui/SocialLinks/SocialLinks.tsx
@@ -1,31 +1,50 @@
 import Image from 'next/image';
 import { FC } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { SocialLink } from '../../../interfaces/social-link.model';
+import { ComponentError } from '../ComponentError/ComponentError';
 import styles from './SocialLinks.module.scss';
 
 export type SocialLinksProps = {
   links: SocialLink[];
 };
 
-export const SocialLinks: FC<SocialLinksProps> = ({ links }) => (
-  <div className={styles.links}>
-    {links.map(link => (
-      <a
-        key={link.platform}
-        href={link.url}
-        className={styles.link}
-        target="_blank"
-        // eslint-disable-next-line react/no-invalid-html-attribute
-        rel="noreferrer me"
-      >
-        <Image
-          src={link.icon || '/img/platformlogos/default.svg'}
-          alt={link.platform}
-          className={styles.link}
-          width="30"
-          height="30"
+export const SocialLinks: FC<SocialLinksProps> = ({ links }) => {
+  if (!links?.length) {
+    return null;
+  }
+
+  return (
+    <ErrorBoundary
+      // eslint-disable-next-line react/no-unstable-nested-components
+      fallbackRender={({ error, resetErrorBoundary }) => (
+        <ComponentError
+          componentName="SocialLinks"
+          message={error.message}
+          retryFunction={resetErrorBoundary}
         />
-      </a>
-    ))}
-  </div>
-);
+      )}
+    >
+      <div className={styles.links}>
+        {links?.map(link => (
+          <a
+            key={link.platform}
+            href={link.url}
+            className={styles.link}
+            target="_blank"
+            // eslint-disable-next-line react/no-invalid-html-attribute
+            rel="noreferrer me"
+          >
+            <Image
+              src={link.icon || '/img/platformlogos/default.svg'}
+              alt={link.platform}
+              className={styles.link}
+              width="30"
+              height="30"
+            />
+          </a>
+        ))}
+      </div>
+    </ErrorBoundary>
+  );
+};