From e805c5fade5e49346ed048df1ea6c3f4c0e1799d Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Mon, 26 Sep 2022 14:01:18 -0500
Subject: [PATCH] Removing commented out code and polish/clean up

---
 .../patterns/LibraryCards/LibraryGridCard.tsx | 229 ++++--------------
 1 file changed, 47 insertions(+), 182 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index 0219ebb60..e0d616270 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -1,12 +1,8 @@
-import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
-// import { CoverImage } from '../../elements/CoverImage'
+import { VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
 import { StyledText } from '../../elements/StyledText'
 import { removeHTMLTags } from '../ArticleSubtitle'
-// import { MoreOptionsIcon } from '../../elements/images/MoreOptionsIcon'
 import { theme } from '../../tokens/stitches.config'
-// import { CardMenu } from '../CardMenu'
 import { LabelChip } from '../../elements/LabelChip'
-// import { ProgressBar } from '../../elements/ProgressBar'
 import type { LinkedItemCardProps } from './CardTypes'
 import { ProgressBarVertical } from '../../elements/ProgressBarVertical'
 
@@ -22,184 +18,60 @@ const ellipsisText = {
 
 export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
   return (
-    <>
-      {/* <VStack
-      css={{
-        // p: '12px',
-        // height: '100%',
-        // width: '100%',
-        // maxWidth: '100%',
-        borderRadius: '5px',
-        cursor: 'pointer',
-        wordBreak: 'break-word',
-        overflow: 'clip',
-        border: '1px solid $libraryActiveMenuItem',
-        position: 'relative',
-      }}
-      alignment="start"
+    <VStack
       distribution="start"
-      onClick={() => {
-        props.handleAction('showDetail')
+      alignment="start"
+      css={{
+        width: '100%',
       }}
-    > */}
-      {/* {props.item.image && props.layout !== 'LIST_LAYOUT' && (
-        <CoverImage
-          src={props.item.image}
-          alt="Link Preview Image"
-          width="100%"
-          height={160}
-          css={{ borderRadius: '8px' }}
-          onError={(e) => {
-            ;(e.target as HTMLElement).style.display = 'none'
-          }}
-        />
-      )} */}
-      <VStack
-        distribution="start"
-        alignment="start"
-        css={{
-          // px: '0px',
-          width: '100%',
-          // pl: '$1',
-        }}
-      >
-        {/* <ProgressBar
-        fillPercentage={props.item.readingProgressPercent}
-        fillColor={theme.colors.highlight.toString()}
-        backgroundColor={theme.colors.lightBorder.toString()}
-        borderRadius={
-          props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
-        }
-      /> */}
-        <HStack
-          alignment="start"
-          distribution="between"
-          css={{
-            width: '100%',
-            display: 'grid',
-            gridTemplateColumns: '0.01fr 1fr 2fr 150px',
-            gridTemplateRows: '1fr',
-            borderBottom: '1px solid $graySolid',
-            height: '45px',
-          }}
-        >
-          <ProgressBarVertical
-            fillPercentage={props.item.readingProgressPercent}
-            fillColor={theme.colors.highlight.toString()}
-            backgroundColor={theme.colors.lightBorder.toString()}
-            borderRadius={
-              props.item.readingProgressPercent === 100
-                ? '0'
-                : '0px 8px 8px 0px'
-            }
-            height={'45px'}
-          />
-          <CardTitle title={props.item.title} />
-          <StyledText
-            css={{
-              ...ellipsisText,
-              color: '$grayTextContrast',
-              // overflow: 'hidden',
-              // display: '-webkit-box',
-              // WebkitLineClamp: 1,
-              // WebkitBoxOrient: 'vertical',
-            }}
-            data-testid="listDesc"
-          >
-            {/* <Box css={{ display: 'block', py: '12px' }}> */}
-            {props.item.labels?.map(({ name, color }, index) => (
-              <LabelChip key={index} text={name || ''} color={color} />
-            ))}
-            {/* </Box> */}
-            {props.item.description}
-          </StyledText>
-
-          <StyledText
-            style="caption"
-            css={{ ...ellipsisText, fontWeight: '400' }}
-          >
-            {props.item.author && (
-              <SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
-            )}
-          </StyledText>
-
-          {/* <Box
-            css={{ alignSelf: 'end', alignItems: 'start', height: '100%' }}
-            onClick={(e) => {
-              // This is here to prevent menu click events from bubbling
-              // up and causing us to "click" on the link item.
-              e.stopPropagation()
-            }}
-          >
-            <CardMenu
-              item={props.item}
-              viewer={props.viewer}
-              triggerElement={
-                <MoreOptionsIcon
-                  size={24}
-                  strokeColor={theme.colors.grayTextContrast.toString()}
-                  orientation="horizontal"
-                />
-              }
-              actionHandler={props.handleAction}
-            />
-          </Box> */}
-        </HStack>
-        {/* <ProgressBar
-        fillPercentage={props.item.readingProgressPercent}
-        fillColor={theme.colors.highlight.toString()}
-        backgroundColor={theme.colors.lightBorder.toString()}
-        borderRadius={
-          props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
-        }
-      /> */}
-        {/* <HStack alignment="start" distribution="between">
-          <StyledText style="caption" css={{fontWeight: '600', margin: '5px 8px 5px 0' }}>
-            {props.item.author && (
-              <SpanBox>
-                {removeHTMLTags(props.item.author)}
-              </SpanBox>
-            )}
-            {props.originText && (
-              <>
-                <Box
-                  css={{
-                    height: '4px',
-                    width: '4px',
-                    borderRadius: '50%',
-                    display: 'inline-block',
-                    background: 'var(--colors-graySolid)',
-                    margin: '1px',
-                  }}
-                ></Box>
-                <SpanBox css={{ color: 'var(--colors-graySolid)' }}>
-                  {props.originText}
-                </SpanBox>
-              </>
-            )}
-          </StyledText>
-        </HStack> */}
-      </VStack>
-      {/* <HStack
+    >
+      <HStack
         alignment="start"
         distribution="between"
         css={{
           width: '100%',
-          // pt: '$2',
-          // px: '$1',
-          pr: '12px',
-          // mt: '7px',
-          flexGrow: '1',
+          display: 'grid',
+          gridTemplateColumns: '0.01fr 1fr 2fr 150px',
+          gridTemplateRows: '1fr',
+          borderBottom: '1px solid $graySolid',
+          height: '45px',
         }}
-      ></HStack> */}
-      {/* <Box css={{ display: 'block', py: '12px' }}>
-        {props.item.labels?.map(({ name, color }, index) => (
-          <LabelChip key={index} text={name || ''} color={color} />
-        ))}
-      </Box> */}
+      >
+        <ProgressBarVertical
+          fillPercentage={props.item.readingProgressPercent}
+          fillColor={theme.colors.highlight.toString()}
+          backgroundColor={theme.colors.lightBorder.toString()}
+          borderRadius={
+            props.item.readingProgressPercent === 100 ? '0' : '0px 8px 8px 0px'
+          }
+          height={'45px'}
+        />
+        <CardTitle title={props.item.title} />
+        <StyledText
+          css={{
+            ...ellipsisText,
+            color: '$grayTextContrast',
+          }}
+          data-testid="listDesc"
+        >
+          {/* <Box css={{ display: 'block', py: '12px' }}> */}
+          {props.item.labels?.map(({ name, color }, index) => (
+            <LabelChip key={index} text={name || ''} color={color} />
+          ))}
+          {/* </Box> */}
+          {props.item.description}
+        </StyledText>
 
-      {/* </VStack> */}
-    </>
+        <StyledText
+          style="caption"
+          css={{ ...ellipsisText, fontWeight: '400' }}
+        >
+          {props.item.author && (
+            <SpanBox>{removeHTMLTags(props.item.author)}</SpanBox>
+          )}
+        </StyledText>
+      </HStack>
+    </VStack>
   )
 }
 
@@ -216,13 +88,6 @@ function CardTitle(props: CardTitleProps): JSX.Element {
         ...ellipsisText,
         fontSize: '18px',
         textAlign: 'left',
-        // lineHeight: '1.25',
-        //overflow: 'hidden',
-        // display: '-webkit-box',
-        // WebkitLineClamp: 1,
-        // WebkitBoxOrient: 'vertical',
-        // // p: '0 15px 0 0',
-        // margin: 'auto',
       }}
     >
       {props.title}