From 6bc146f5b02dcfc7e3745d44fc2ab4a017b90eb9 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 9 Mar 2023 18:46:01 +0800
Subject: [PATCH] Simplify metadata on library cards, handle plural in hacky
 way

---
 .../LibraryCards/LibraryCardStyles.tsx        | 40 +++++++++++++++++++
 .../patterns/LibraryCards/LibraryGridCard.tsx | 17 ++------
 .../patterns/LibraryCards/LibraryListCard.tsx | 29 ++++----------
 3 files changed, 50 insertions(+), 36 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
index 23a13dfc0..629ae613c 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
@@ -1,5 +1,8 @@
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
+import { useMemo } from 'react'
+import { LibraryItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
+import { Box, HStack, SpanBox } from '../../elements/LayoutPrimitives'
 
 dayjs.extend(relativeTime)
 
@@ -105,3 +108,40 @@ export const siteName = (
   } catch {}
   return ''
 }
+
+type LibraryItemMetadataProps = {
+  item: LibraryItemNode
+  showProgress?: boolean
+}
+
+export function LibraryItemMetadata(
+  props: LibraryItemMetadataProps
+): JSX.Element {
+  const highlightCount = useMemo(() => {
+    return props.item.highlights?.length ?? 0
+  }, [props.item.highlights])
+
+  return (
+    <Box>
+      {timeAgo(props.item.savedAt)}
+      {` `}
+      {props.item.wordsCount ?? 0 > 0
+        ? `  • ${Math.max(
+            1,
+            Math.round((props.item.wordsCount ?? 0) / 235)
+          )} min read`
+        : null}
+      {(props.showProgress && props.item.readingProgressPercent) ?? 0 > 0 ? (
+        <>
+          {`  • `}
+          <SpanBox css={{ color: '#55B938' }}>
+            {`${Math.round(props.item.readingProgressPercent)}%`}
+          </SpanBox>
+        </>
+      ) : null}
+      {highlightCount > 0
+        ? `  • ${highlightCount} highlight${highlightCount > 1 ? 's' : ''}`
+        : null}
+    </Box>
+  )
+}
diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index ebeb189e8..c57d89cec 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -4,13 +4,14 @@ import type { LinkedItemCardProps } from './CardTypes'
 import { CoverImage } from '../../elements/CoverImage'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { DotsThreeVertical } from 'phosphor-react'
 import Link from 'next/link'
 import { CardMenu } from '../CardMenu'
 import {
   AuthorInfoStyle,
   DescriptionStyle,
+  LibraryItemMetadata,
   MenuStyle,
   MetaStyle,
   siteName,
@@ -102,19 +103,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
             }}
             distribution="start"
           >
-            <Box>
-              {timeAgo(props.item.savedAt)}
-              {` `}
-              {props.item.wordsCount ?? 0 > 0
-                ? `  • ${Math.max(
-                    1,
-                    Math.round((props.item.wordsCount ?? 0) / 235)
-                  )} min read`
-                : null}
-              {props.item.highlights?.length ?? 0 > 0
-                ? `  • ${props.item.highlights?.length} highlights`
-                : null}
-            </Box>
+            <LibraryItemMetadata item={props.item} />
             <Box
               css={{
                 ...MenuStyle,
diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
index 21f031335..abed965d4 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
@@ -1,12 +1,13 @@
 import { Box, VStack, HStack, SpanBox } from '../../elements/LayoutPrimitives'
 import { LabelChip } from '../../elements/LabelChip'
 import type { LinkedItemCardProps } from './CardTypes'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { DotsThree } from 'phosphor-react'
 import Link from 'next/link'
 import { CardMenu } from '../CardMenu'
 import {
   AuthorInfoStyle,
+  LibraryItemMetadata,
   MenuStyle,
   MetaStyle,
   siteName,
@@ -22,6 +23,10 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
     props.item.siteName ||
     siteName(props.item.originalArticleUrl, props.item.url)
 
+  const highlightCount = useMemo(() => {
+    return props.item.highlights?.length ?? 0
+  }, [props.item.highlights])
+
   return (
     <VStack
       css={{
@@ -62,27 +67,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
           style={{ textDecoration: 'unset', width: '100%', height: '100%' }}
         >
           <HStack css={MetaStyle} distribution="start">
-            <Box>
-              {timeAgo(props.item.savedAt)}
-              {` `}
-              {props.item.wordsCount ?? 0 > 0
-                ? `  • ${Math.max(
-                    1,
-                    Math.round((props.item.wordsCount ?? 0) / 235)
-                  )} min read`
-                : null}
-              {props.item.readingProgressPercent ?? 0 > 0 ? (
-                <>
-                  {`  • `}
-                  <SpanBox css={{ color: '#55B938' }}>
-                    {`${Math.round(props.item.readingProgressPercent)}%`}
-                  </SpanBox>
-                </>
-              ) : null}
-              {props.item.highlights?.length ?? 0 > 0
-                ? `  • ${props.item.highlights?.length} highlights`
-                : null}
-            </Box>
+            <LibraryItemMetadata item={props.item} showProgress={true} />
             <Box
               css={{
                 ...MenuStyle,