fix(generic-node): generic tooltip of node in graph

stakwork · May 26, 2024 · b7f01f4 · b7f01f4
1 parent dd8b83d
commit b7f01f4
Showing 1 changed file with 64 additions and 100 deletions.
diff --git a/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx b/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx
@@ -47,90 +47,30 @@ export const Tooltip = ({ node }: Props) => {
     type,
     name,
     twitter_handle: twitterHandle,
+    image_url: imageUrl,
+    guests: guestArray,
   } = node
 
-  const correctType = type?.toLowerCase()
+  const guests = guestArray && guestArray.length > 0
 
-  const guestArray = node.guests
+  const isGuestArrObj = guests && typeof guestArray[0] === 'object'
 
-  let guests = false
-  let isGuestArrObj = false
+  let displayImageUrl = imageUrl
 
-  if (guestArray) {
-    if (guestArray.length && guestArray[0] !== null) {
-      guests = true
-    }
-
-    if (typeof guestArray[0] === 'object') {
-      isGuestArrObj = true
-    }
+  if (nodeType === 'guest' && !imageUrl) {
+    displayImageUrl = 'person_placeholder2.png'
+  } else if (!imageUrl) {
+    displayImageUrl = 'noimage.jpeg'
   }
 
-  let imageUrl = node.image_url
-
-  if (correctType === 'twitter_space') {
-    imageUrl = 'twitter_placeholder.png'
-  }
-
-  if (imageUrl == null) {
-    switch (nodeType) {
-      case 'guest':
-        imageUrl = 'person_placeholder2.png'
-        break
-      default:
-        imageUrl = 'noimage.jpeg'
-    }
+  if (type === 'twitter_space') {
+    displayImageUrl = 'twitter_placeholder.png'
   }
 
   if (nodeType === 'topic') {
     return null
   }
 
-  const renderContent = () => {
-    switch (correctType) {
-      case 'guest':
-        return (
-          <Flex direction="column">
-            <Text>{label ?? name}</Text>
-            {text && (
-              <Flex pt={4}>
-                <Text color="primaryText1" kind="tiny">
-                  @{text}
-                </Text>
-              </Flex>
-            )}
-          </Flex>
-        )
-      case 'person':
-      case 'event':
-      case 'topic':
-      case 'corporation':
-      case 'organization':
-      case 'thing':
-      case 'host':
-      case 'place':
-      case 'product':
-        return (
-          <Flex direction="column">
-            <Text>{name ?? label}</Text>
-            {correctType === 'person' && twitterHandle && (
-              <Flex pt={4}>
-                <Text color="primaryText1" kind="tiny">
-                  @{twitterHandle}
-                </Text>
-              </Flex>
-            )}
-          </Flex>
-        )
-      default:
-        return (
-          <Text color="primaryText1" kind="tiny">
-            {showTitle}
-          </Text>
-        )
-    }
-  }
-
   return (
     <Wrapper borderRadius={8} px={24} py={16}>
       {nodeType === 'tweet' ? (
@@ -146,50 +86,74 @@ export const Tooltip = ({ node }: Props) => {
 
           <Flex direction="row">
             <Flex pr={12}>
-              <Avatar src={imageUrl} type="person" />
+              <Avatar src={displayImageUrl as string} type="person" />
             </Flex>
 
             <div>
-              {renderContent()}
+              {(name || label) && (
+                <Flex direction="column">
+                  {name ? (
+                    <Text>{name}</Text>
+                  ) : (
+                    <>
+                      <Text>{label}</Text>
+                      {text && (
+                        <Flex pt={4}>
+                          <Text color="primaryText1" kind="tiny">
+                            @{text}
+                          </Text>
+                        </Flex>
+                      )}
+                    </>
+                  )}
+                </Flex>
+              )}
+
+              {showTitle && (
+                <Text color="primaryText1" kind="tiny">
+                  {showTitle}
+                </Text>
+              )}
 
-              <Flex pt={4}>
-                {nodeType === 'clip' || (nodeType === 'episode' && <Text color="primaryText1">Episode</Text>)}
+              {episodeTitle && (
+                <Flex pt={4}>
+                  <Text color="primaryText1" kind="tiny">
+                    {episodeTitle}
+                  </Text>
+                </Flex>
+              )}
 
-                {nodeType === 'clip' ? (
+              {description && (
+                <Flex pt={12}>
                   <Text as="div" kind="regularBold">
                     {formatDescription(description)}
                   </Text>
-                ) : (
+                </Flex>
+              )}
+
+              {twitterHandle && (
+                <Flex pt={4}>
                   <Text color="primaryText1" kind="tiny">
-                    {episodeTitle}
+                    @{twitterHandle}
                   </Text>
-                )}
-              </Flex>
-
-              <Flex pt={12}>
-                {nodeType === 'clip' && <Text color="primaryText1">Episode</Text>}
-
-                <Text color="primaryText1" kind="tiny">
-                  {nodeType === 'clip' ? episodeTitle : formatDescription(description)}
-                </Text>
-              </Flex>
+                </Flex>
+              )}
 
-              {guests && (
+              {guestArray && guestArray.length > 0 && (
                 <Flex pt={12}>
                   <Text color="primaryText1">People</Text>
                   <Flex pt={4}>
                     <Text color="primaryText1" kind="tiny">
-                      {isGuestArrObj
-                        ? (guestArray as Guests[])
-                            .map((guest) => {
-                              if (guest.name) {
-                                return guest.name
-                              }
-
-                              return `@${guest.twitter_handle}`
-                            })
-                            .join(', ')
-                        : guestArray?.join(', ')}
+                      {guests && (
+                        <Flex pt={12}>
+                          <Text>Guests:</Text>
+                          <Text>
+                            {isGuestArrObj
+                              ? (guestArray as Guests[]).map((guest) => `@${guest?.twitter_handle}`).join(', ')
+                              : guestArray.join(', ')}
+                          </Text>
+                        </Flex>
+                      )}
                     </Text>
                   </Flex>
                 </Flex>