From 35687156a480c0a809e61c12489a487cbae231c2 Mon Sep 17 00:00:00 2001
From: "Caleb Williams [SSW]" <65635198+Calinator444@users.noreply.github.com>
Date: Thu, 5 Sep 2024 16:43:44 +1000
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=91=20Hotfix=20-=20Fix=20blank=20prese?=
 =?UTF-8?q?nter=20on=20user=20group=20page=20(#3068)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🚑 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 <caleb.williams5247@gmail.com>
---
 components/usergroup/organizer.tsx |  7 ++++++-
 pages/netug/[[...filename]].tsx    | 10 ++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/components/usergroup/organizer.tsx b/components/usergroup/organizer.tsx
index 737d2e89c3..3558bfecd9 100644
--- 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
index 4123e8c497..1787ab8d6d 100644
--- 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}
                     />