From 2ae3ec8207fba77df670ca8d4db056fa4f5b43cf Mon Sep 17 00:00:00 2001
From: Yazdun <83041367+Yazdun@users.noreply.github.com>
Date: Wed, 19 Oct 2022 11:52:15 +0330
Subject: [PATCH] feat: component to handle broken images (#1758)

* fix: fallback component for broken images

* fix: fallback component for broken images

Co-authored-by: Eddie Jaoude <eddie@jaoudestudios.com>
---
 components/FallbackImage.js    | 16 ++++++++++++++++
 components/user/UserPreview.js |  5 +++--
 next.config.js                 |  1 +
 pages/[username].js            |  6 +++---
 4 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 components/FallbackImage.js

diff --git a/components/FallbackImage.js b/components/FallbackImage.js
new file mode 100644
index 00000000000..9d784928c87
--- /dev/null
+++ b/components/FallbackImage.js
@@ -0,0 +1,16 @@
+import { useState } from "react";
+import Image from "next/image";
+
+export const FallbackImage = ({ src, alt, fallback = "A A", ...rest }) => {
+  const [imgSrc, setImgSrc] = useState(src);
+  const fallbackUrl = `https://avatars.dicebear.com/api/initials/${fallback}.svg`;
+
+  return (
+    <Image
+      {...rest}
+      alt={alt}
+      src={imgSrc ? imgSrc : fallbackUrl}
+      onError={() => setImgSrc(fallbackUrl)}
+    />
+  );
+};
diff --git a/components/user/UserPreview.js b/components/user/UserPreview.js
index bd874d29ec4..21ec70f3a19 100644
--- a/components/user/UserPreview.js
+++ b/components/user/UserPreview.js
@@ -1,5 +1,5 @@
-import Image from "next/image";
 import Link from "next/link";
+import { FallbackImage } from "../FallbackImage";
 
 export default function UserPreview({ profile }) {
   return (
@@ -7,12 +7,13 @@ export default function UserPreview({ profile }) {
       <a className="flex flex-col gap-x-6 rounded md:rounded-full md:flex-row border-2 border-gray-200 hover:border-gray-500 p-4 my-2">
         <div className="flex items-center gap-5">
           <div className="min-w-[5rem]">
-            <Image
+            <FallbackImage
               src={profile.avatar}
               alt={`Profile picture of ${profile.name}`}
               width={80}
               height={80}
               className="rounded-full"
+              fallback={profile.name}
             />
           </div>
           <h3 className="text-2xl font-bold md:hidden">
diff --git a/next.config.js b/next.config.js
index 2d63ccf6c0b..eb2118b19ed 100755
--- a/next.config.js
+++ b/next.config.js
@@ -8,6 +8,7 @@ const nextConfig = {
       "avatars.githubusercontent.com",
       "user-images.githubusercontent.com",
       "cdn.nhcarrigan.com",
+      "avatars.dicebear.com",
     ],
   },
 };
diff --git a/pages/[username].js b/pages/[username].js
index 2f82e5fe28e..b57b78ad24e 100644
--- a/pages/[username].js
+++ b/pages/[username].js
@@ -1,12 +1,11 @@
 import Head from "next/head";
-import Image from "next/image";
-
 import app from "../config/app.json";
 import SingleLayout from "../components/layouts/SingleLayout";
 import MultiLayout from "../components/layouts/MultiLayout";
 import singleUser from "../config/user.json";
 import UserLink from "../components/user/UserLink";
 import UserMilestone from "../components/user/UserMilestone";
+import { FallbackImage } from "../components/FallbackImage";
 import EventPreview from "../components/events/EventPreview";
 
 export async function getServerSideProps(context) {
@@ -37,11 +36,12 @@ export default function User({ data }) {
 
       <div className="mx-auto container px-6 mt-6">
         <div className="flex justify-center gap-x-6">
-          <Image
+          <FallbackImage
             src={data.avatar}
             alt={`Profile picture of ${data.name}`}
             width={120}
             height={120}
+            fallback={data.name}
             className="rounded-full"
           />
           <div className="flex flex-col self-center">