Narrow down to what is breaking in the card - Interactive Link

NASA-IMPACT · Aug 12, 2024 · 9cc1062 · 9cc1062
1 parent a0f9313
commit 9cc1062
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 42 deletions.
diff --git a/app/scripts/components/common/card/index.tsx b/app/scripts/components/common/card/index.tsx
@@ -263,15 +263,14 @@ function CardComponent(props: CardComponentProps) {
 
 
   return (
-    // <ElementInteractive
-    //   as={CardItem}
-    //   cardType={cardType}
-    //   className={className}
-    //   linkLabel={linkLabel ?? 'View more'}
-    //   linkProps={linkProps}
-    //   onClickCapture={onCardClickCapture}
-    // >
-    <>
+    <ElementInteractive
+      as={CardItem}
+      cardType={cardType}
+      className={className}
+      linkLabel={linkLabel ?? 'View more'}
+      linkProps={linkProps}
+      onClickCapture={onCardClickCapture}
+    >
       {
         cardType !== 'horizontal-info' && (
           <>
@@ -325,8 +324,7 @@ function CardComponent(props: CardComponentProps) {
           />
         )
       }
-    {/* </ElementInteractive> */}
-    </>
+    </ElementInteractive>
   );
 }
 

diff --git a/app/scripts/components/common/catalog/catalog-card.tsx b/app/scripts/components/common/catalog/catalog-card.tsx
@@ -120,9 +120,9 @@ export const CatalogCard = (props: CatalogCardProps) => {
           <CardSourcesList sources={sources} />
         </CardMeta>
       }
-      // linkTo={getDatasetPath(dataset)}
+      linkTo={getDatasetPath(dataset)}
       linkLabel='View dataset'
-      // onLinkClick={handleClick}
+      onLinkClick={handleClick}
       title={
         <TextHighlight value={searchTerm} disabled={searchTerm.length < 3}>
           {title}
@@ -135,24 +135,24 @@ export const CatalogCard = (props: CatalogCardProps) => {
       }
       imgSrc={imgSrc}
       imgAlt={imgAlt}
-      // footerContent={
-      //   <>
-      //     {topics?.length ? (
-      //       <CardTopicsList>
-      //         <dt>Topics</dt>
-      //         {topics.map((t) => (
-      //           <dd key={t.id}>
-      //             <Pill variation='primary'>
-      //               <TextHighlight value={searchTerm} disabled={searchTerm.length < 3}>
-      //                 {t.name}
-      //               </TextHighlight>
-      //             </Pill>
-      //           </dd>
-      //         ))}
-      //       </CardTopicsList>
-      //     ) : null}
-      //   </>
-      // }
+      footerContent={
+        <>
+          {topics?.length ? (
+            <CardTopicsList>
+              <dt>Topics</dt>
+              {topics.map((t) => (
+                <dd key={t.id}>
+                  <Pill variation='primary'>
+                    <TextHighlight value={searchTerm} disabled={searchTerm.length < 3}>
+                      {t.name}
+                    </TextHighlight>
+                  </Pill>
+                </dd>
+              ))}
+            </CardTopicsList>
+          ) : null}
+        </>
+      }
     />
   );
 };
diff --git a/app/scripts/components/common/element-interactive.js b/app/scripts/components/common/element-interactive.js
@@ -2,14 +2,14 @@ import React, { useCallback, useState } from 'react';
 import T from 'prop-types';
 import styled from 'styled-components';
 
-const InteractiveLink = styled.a`
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: auto;
-  font-size: 0;
-  margin: 0;
-`;
+// const InteractiveLink = styled.a`
+//   position: absolute;
+//   inset: 0;
+//   z-index: -1;
+//   pointer-events: auto;
+//   font-size: 0;
+//   margin: 0;
+// `;
 
 export const Wrapper = styled.div`
   position: relative;
@@ -77,7 +77,7 @@ export const ElementInteractive = React.forwardRef(
     const [isStateOver, setStateOver] = useState(false);
     const [isStateActive, setStateActive] = useState(false);
     const [isStateFocus, setStateFocus] = useState(false);
-
+    console.log(`linkLabel: `, linkLabel)
     return (
       <Wrapper
         ref={ref}
@@ -94,15 +94,24 @@ export const ElementInteractive = React.forwardRef(
         }, [])}
       >
         {children}
-        <InteractiveLink
+        {/* <InteractiveLink
+          {...linkProps}
+          onMouseDown={useCallback(() => setStateActive(true), [])}
+          onMouseUp={useCallback(() => setStateActive(false), [])}
+          onFocus={useCallback(() => setStateFocus(true), [])}
+          onBlur={useCallback(() => setStateFocus(false), [])}
+        >
+          {linkLabel}
+        </InteractiveLink> */}
+        <a
           {...linkProps}
           onMouseDown={useCallback(() => setStateActive(true), [])}
           onMouseUp={useCallback(() => setStateActive(false), [])}
           onFocus={useCallback(() => setStateFocus(true), [])}
           onBlur={useCallback(() => setStateFocus(false), [])}
         >
           {linkLabel}
-        </InteractiveLink>
+        </a>
       </Wrapper>
     );
   }