From 992c0b4effb0ad4c7fd53d9a3c6a675916226ee7 Mon Sep 17 00:00:00 2001
From: jipstavenuiter <jipstavenuiter@gmail.com>
Date: Fri, 11 Oct 2024 11:56:05 -0300
Subject: [PATCH] (bugfix): fix display of tiles when no image is present

---
 ...r-update-default-sponsor-metadata-form.tsx |   8 +-
 components/hyperboard/Tile.tsx                | 279 +++++++++---------
 hooks/useFetchHyperboardContents.ts           |   6 +-
 types/Hyperboard.ts                           |   6 +-
 4 files changed, 146 insertions(+), 153 deletions(-)

diff --git a/components/forms/create-or-update-default-sponsor-metadata-form.tsx b/components/forms/create-or-update-default-sponsor-metadata-form.tsx
index f820f90..a0b2985 100644
--- a/components/forms/create-or-update-default-sponsor-metadata-form.tsx
+++ b/components/forms/create-or-update-default-sponsor-metadata-form.tsx
@@ -30,12 +30,10 @@ interface CreateOrUpdateDefaultSponsorMetadataFormValues {
 
 const defaultPreviewValues: HyperboardEntry = {
   id: "a",
-  value: 1n,
-  image: "https://via.placeholder.com/100",
-  companyName: "Company name",
+  value: 1,
+  avatar: "https://via.placeholder.com/100",
+  displayName: "Company name",
   type: "Test",
-  firstName: "First",
-  lastName: "Last",
   isBlueprint: true,
 };
 
diff --git a/components/hyperboard/Tile.tsx b/components/hyperboard/Tile.tsx
index 7722f0c..e49e371 100644
--- a/components/hyperboard/Tile.tsx
+++ b/components/hyperboard/Tile.tsx
@@ -10,14 +10,14 @@ import { useEnsName } from "wagmi";
 const borderRadius = "0px";
 const logosAndText = "black";
 
-const formatTooltipLabel = ({ companyName, id }: HyperboardEntry) => {
-  if (companyName === id) {
-    return `${companyName}`;
+const formatTooltipLabel = ({ displayName, id }: HyperboardEntry) => {
+  if (displayName === id) {
+    return `${displayName}`;
   }
 
   const formattedId = isAddress(id) ? formatAddress(id) : id;
 
-  return `${companyName}, ${formattedId}`;
+  return `${displayName}, ${formattedId}`;
 };
 
 export const Tile = ({
@@ -38,8 +38,7 @@ export const Tile = ({
   const opacity = entry.isBlueprint ? 0.5 : 1;
   const toolTipLabel = formatTooltipLabel(entry);
 
-  const showBackupImage =
-    !entry.image && !entry.companyName && !entry.firstName && !entry.lastName;
+  const showBackupImage = !entry.avatar;
 
   const layout = getTileLayout(wrapperProps.width, wrapperProps.height);
 
@@ -54,159 +53,159 @@ export const Tile = ({
           alignItems="center"
           justifyContent="center"
         >
-          {showBackupImage ? (
-            <BackupForImage
-              id={entry.id}
-              fontSize={layout.font}
-              toolTipLabel={toolTipLabel}
-            />
-          ) : (
+          {entry?.avatar ? (
             <Tooltip label={toolTipLabel} aria-label={toolTipLabel}>
               <Image
                 opacity={opacity}
                 className={"company-logo"}
                 maxWidth={"60%"}
                 maxHeight={"80%"}
-                src={entry.image}
-                alt={entry.image}
+                src={entry.avatar}
+                alt={entry.avatar}
                 filter={grayScale ? `grayScale(${opacity})` : undefined}
               />
             </Tooltip>
-          )}
-        </Flex>
-      </Wrapper>
-    );
-  }
-
-  if (entry.type === "person") {
-    const layout = getTileLayout(wrapperProps.width, wrapperProps.height);
-    return (
-      <Wrapper {...wrapperProps}>
-        {showBackupImage ? (
-          <BackupForImage
-            id={entry.id}
-            fontSize={layout.font}
-            toolTipLabel={toolTipLabel}
-          />
-        ) : (
-          <Flex
-            width={"100%"}
-            position={"relative"}
-            height={"100%"}
-            justifyContent={"space-between"}
-          >
-            <>
-              <Flex
-                flexDirection={"column"}
-                marginTop={"auto"}
-                padding={padding}
-              >
-                <Text
-                  fontSize={`${layout.font}px`}
-                  color={logosAndText}
-                  fontFamily={"Switzer"}
-                  opacity={opacity}
-                >
-                  {entry.firstName}
-                </Text>
-                <Text
-                  opacity={opacity}
-                  fontSize={`${layout.font}px`}
-                  color={logosAndText}
-                >
-                  {entry.lastName}
-                </Text>
-              </Flex>
-              <Tooltip label={toolTipLabel} aria-label={toolTipLabel}>
-                <Image
-                  opacity={opacity}
-                  borderTopRightRadius={borderRadius}
-                  borderBottomLeftRadius={borderRadius}
-                  marginBottom={"auto"}
-                  src={entry.image}
-                  alt={"Test alt"}
-                  height={`${layout.image}px`}
-                  width={`${layout.image}px`}
-                  maxWidth={`${layout.image}px`}
-                  maxHeight={`${layout.image}px`}
-                  objectFit={"cover"}
-                  filter={grayScale ? `grayScale(${opacity})` : undefined}
-                />
-              </Tooltip>
-            </>
-          </Flex>
-        )}
-        {entry.isBlueprint && (
-          <BlueprintTooltip
-            position={"absolute"}
-            top={padding}
-            left={padding}
-          />
-        )}
-      </Wrapper>
-    );
-  }
-
-  if (entry.type === "speaker") {
-    const layout = getTileLayout(wrapperProps.width, wrapperProps.height);
-    return (
-      <Wrapper {...wrapperProps}>
-        <Flex
-          width={"100%"}
-          position={"relative"}
-          height={"100%"}
-          justifyContent={"space-between"}
-        >
-          <Flex flexDirection={"column"} marginTop={"auto"} padding={padding}>
-            <Text
-              fontSize={`${layout.font}px`}
-              color={logosAndText}
-              fontFamily={"Switzer"}
-              fontWeight={600}
-            >
-              {entry.firstName} {entry.lastName}
-            </Text>
-            {entry.companyName && (
-              <Text
-                fontSize={`${layout.font}px`}
-                color={logosAndText}
-                opacity={"50%"}
-                fontFamily={"Switzer"}
-                noOfLines={1}
-              >
-                {entry.companyName}
-              </Text>
-            )}
-          </Flex>
-          {showBackupImage ? (
+          ) : (
             <BackupForImage
               id={entry.id}
               fontSize={layout.font}
               toolTipLabel={toolTipLabel}
             />
-          ) : (
-            <Tooltip label={toolTipLabel} aria-label={toolTipLabel}>
-              <Image
-                position={"absolute"}
-                right={0}
-                top={0}
-                borderTopRightRadius={borderRadius}
-                borderBottomLeftRadius={borderRadius}
-                marginBottom={"auto"}
-                src={entry.image}
-                alt={"Test alt"}
-                height={`${layout.image}px`}
-                width={`${layout.image}px`}
-                maxWidth={`${layout.image}px`}
-                maxHeight={`${layout.image}px`}
-                filter={grayScale ? `grayScale(${opacity})` : undefined}
-              />
-            </Tooltip>
           )}
         </Flex>
       </Wrapper>
     );
   }
+  //
+  // if (entry.type === "person") {
+  //   const layout = getTileLayout(wrapperProps.width, wrapperProps.height);
+  //   return (
+  //     <Wrapper {...wrapperProps}>
+  //       {showBackupImage ? (
+  //         <BackupForImage
+  //           id={entry.id}
+  //           fontSize={layout.font}
+  //           toolTipLabel={toolTipLabel}
+  //         />
+  //       ) : (
+  //         <Flex
+  //           width={"100%"}
+  //           position={"relative"}
+  //           height={"100%"}
+  //           justifyContent={"space-between"}
+  //         >
+  //           <>
+  //             <Flex
+  //               flexDirection={"column"}
+  //               marginTop={"auto"}
+  //               padding={padding}
+  //             >
+  //               <Text
+  //                 fontSize={`${layout.font}px`}
+  //                 color={logosAndText}
+  //                 fontFamily={"Switzer"}
+  //                 opacity={opacity}
+  //               >
+  //                 {entry.firstName}
+  //               </Text>
+  //               <Text
+  //                 opacity={opacity}
+  //                 fontSize={`${layout.font}px`}
+  //                 color={logosAndText}
+  //               >
+  //                 {entry.lastName}
+  //               </Text>
+  //             </Flex>
+  //             <Tooltip label={toolTipLabel} aria-label={toolTipLabel}>
+  //               <Image
+  //                 opacity={opacity}
+  //                 borderTopRightRadius={borderRadius}
+  //                 borderBottomLeftRadius={borderRadius}
+  //                 marginBottom={"auto"}
+  //                 src={entry.image}
+  //                 alt={"Test alt"}
+  //                 height={`${layout.image}px`}
+  //                 width={`${layout.image}px`}
+  //                 maxWidth={`${layout.image}px`}
+  //                 maxHeight={`${layout.image}px`}
+  //                 objectFit={"cover"}
+  //                 filter={grayScale ? `grayScale(${opacity})` : undefined}
+  //               />
+  //             </Tooltip>
+  //           </>
+  //         </Flex>
+  //       )}
+  //       {entry.isBlueprint && (
+  //         <BlueprintTooltip
+  //           position={"absolute"}
+  //           top={padding}
+  //           left={padding}
+  //         />
+  //       )}
+  //     </Wrapper>
+  //   );
+  // }
+  //
+  // if (entry.type === "speaker") {
+  //   const layout = getTileLayout(wrapperProps.width, wrapperProps.height);
+  //   return (
+  //     <Wrapper {...wrapperProps}>
+  //       <Flex
+  //         width={"100%"}
+  //         position={"relative"}
+  //         height={"100%"}
+  //         justifyContent={"space-between"}
+  //       >
+  //         <Flex flexDirection={"column"} marginTop={"auto"} padding={padding}>
+  //           <Text
+  //             fontSize={`${layout.font}px`}
+  //             color={logosAndText}
+  //             fontFamily={"Switzer"}
+  //             fontWeight={600}
+  //           >
+  //             {entry.firstName} {entry.lastName}
+  //           </Text>
+  //           {entry.companyName && (
+  //             <Text
+  //               fontSize={`${layout.font}px`}
+  //               color={logosAndText}
+  //               opacity={"50%"}
+  //               fontFamily={"Switzer"}
+  //               noOfLines={1}
+  //             >
+  //               {entry.companyName}
+  //             </Text>
+  //           )}
+  //         </Flex>
+  //         {showBackupImage ? (
+  //           <BackupForImage
+  //             id={entry.id}
+  //             fontSize={layout.font}
+  //             toolTipLabel={toolTipLabel}
+  //           />
+  //         ) : (
+  //           <Tooltip label={toolTipLabel} aria-label={toolTipLabel}>
+  //             <Image
+  //               position={"absolute"}
+  //               right={0}
+  //               top={0}
+  //               borderTopRightRadius={borderRadius}
+  //               borderBottomLeftRadius={borderRadius}
+  //               marginBottom={"auto"}
+  //               src={entry.image}
+  //               alt={"Test alt"}
+  //               height={`${layout.image}px`}
+  //               width={`${layout.image}px`}
+  //               maxWidth={`${layout.image}px`}
+  //               maxHeight={`${layout.image}px`}
+  //               filter={grayScale ? `grayScale(${opacity})` : undefined}
+  //             />
+  //           </Tooltip>
+  //         )}
+  //       </Flex>
+  //     </Wrapper>
+  //   );
+  // }
 
   return (
     <Wrapper {...wrapperProps}>
diff --git a/hooks/useFetchHyperboardContents.ts b/hooks/useFetchHyperboardContents.ts
index 6c74ba9..af8162e 100644
--- a/hooks/useFetchHyperboardContents.ts
+++ b/hooks/useFetchHyperboardContents.ts
@@ -413,10 +413,8 @@ export const registryContentItemToHyperboardEntry = ({
   // }
   return {
     type: "company",
-    companyName: display_name,
-    lastName: display_name,
-    firstName: display_name,
-    image: avatar || "",
+    displayName: display_name,
+    avatar: avatar,
     value: percentage_owned!,
     id: address!,
     isBlueprint: false,
diff --git a/types/Hyperboard.ts b/types/Hyperboard.ts
index 4541308..16e4af0 100644
--- a/types/Hyperboard.ts
+++ b/types/Hyperboard.ts
@@ -1,10 +1,8 @@
 export interface HyperboardEntry {
   type: string;
   id: string;
-  companyName: string | null;
-  firstName: string | null;
-  lastName: string | null;
-  image: string;
+  avatar?: string | null;
+  displayName?: string | null;
   value: number;
   isBlueprint: boolean;
 }