🚑 Hotfix - Fix blank presenter on user group page (#3068)

* 🚑 Fixed netug page attempting to render presenters when there are no presenters * 🐛 Added fallback logic to ensure the image for user groups will not attempt to render if not provided * 🐛 Added fallback logic so presenter name will be sourced from the event if presenter list is empty * ✨ Added fallback so that the presenter image will default to the profile avatar image if not provided --------- Co-authored-by: Calinator444 <[email protected]>
SSWConsulting · Sep 5, 2024 · 3568715 · 3568715
1 parent d31a9e9
commit 3568715
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/components/usergroup/organizer.tsx b/components/usergroup/organizer.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import { useState } from "react";
 import type { Template } from "tinacms";
 import { tinaField } from "tinacms/dist/react";
 import type { TinaMarkdownContent } from "tinacms/dist/rich-text";
@@ -21,6 +22,7 @@ export const Organizer = ({
   data: OrganizerType;
   stringContent?: string;
 }) => {
+  const [image, setFallbackImage] = useState<string>(data.profileImg ?? "");
   return (
     <div className="flex flex-col gap-5">
       <div className="flex flex-row items-center gap-2">
@@ -30,9 +32,12 @@ export const Organizer = ({
         >
           <Image
             alt={`Picture of ${data?.name ?? "Organizer"}`}
-            src={data?.profileImg ?? ""}
+            src={image}
             height={68}
             width={68}
+            onError={() =>
+              setFallbackImage("/images/thumbs/avatar-thumbnail.png")
+            }
             className="w-17"
           />
         </div>

diff --git a/pages/netug/[[...filename]].tsx b/pages/netug/[[...filename]].tsx
@@ -43,7 +43,6 @@ export default function NETUGPage(
   const speaker = props.event?.presenterList
     ? props.event.presenterList[0]
     : null;
-
   // Converting element to string to render in presenter block
   const aboutDescription = ReactDomServer.renderToString(
     <TinaMarkdown content={speaker?.presenter?.about} />
@@ -189,7 +188,7 @@ export default function NETUGPage(
                   ))}
                 </div>
               </div>
-              {speaker && (
+              {(speaker || props.event.presenterName) && (
                 <div className="col-span-1 py-4 md:py-0">
                   <h2 className="text-4xl font-medium text-sswRed">
                     Presenter
@@ -198,9 +197,12 @@ export default function NETUGPage(
                     <Organizer
                       data={{
                         profileImg: speaker?.presenter?.profileImg,
-                        name: speaker?.presenter?.presenter?.name,
+                        name:
+                          speaker?.presenter?.presenter?.name ||
+                          props.event.presenterName,
                         profileLink:
-                          speaker?.presenter?.presenter?.peopleProfileURL,
+                          speaker?.presenter?.presenter?.peopleProfileURL ||
+                          props.event.presenterProfileUrl,
                       }}
                       stringContent={aboutDescription}
                     />