diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx index 1d7962527..8ead0dfd4 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx @@ -1,13 +1,14 @@ import { Box, 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' +import { CoverImage } from '../../elements/CoverImage' +import dayjs from 'dayjs' +import relativeTime from 'dayjs/plugin/relativeTime' +import { useState } from 'react' +import { DotsThree } from 'phosphor-react' + +dayjs.extend(relativeTime) //Styles const ellipsisText = { @@ -16,12 +17,12 @@ const ellipsisText = { WebkitLineClamp: 1, WebkitBoxOrient: 'vertical', margin: 'auto 0', - pr:'10px', + pr: '10px', } const cardTitleStyle = { ...ellipsisText, - width:'100%', + width: '100%', fontSize: '14px', fontWeight: '600', textAlign: 'left', @@ -33,9 +34,7 @@ type CardTitleProps = { } // Functions -function CardTitle( - props: CardTitleProps, -): JSX.Element { +function CardTitle(props: CardTitleProps): JSX.Element { return ( {props.title} @@ -43,187 +42,344 @@ function CardTitle( ) } +type ProgressBarProps = { + fillPercentage: number + fillColor: string + backgroundColor: string + borderRadius: string +} + +export function ProgressBar(props: ProgressBarProps): JSX.Element { + return ( + + + + ) +} + +const timeAgo = (date: string | undefined): string => { + if (!date) { + return '' + } + return dayjs(date).fromNow() +} + +const shouldHideUrl = (url: string): boolean => { + try { + const origin = new URL(url).origin + const hideHosts = ['https://storage.googleapis.com', 'https://omnivore.app'] + if (hideHosts.indexOf(origin) != -1) { + return true + } + } catch { + console.log('invalid url item', url) + } + return false +} + +const siteName = (originalArticleUrl: string, itemUrl: string): string => { + if (shouldHideUrl(originalArticleUrl)) { + return '' + } + try { + return new URL(originalArticleUrl).hostname.replace(/^www\./, '') + } catch {} + try { + return new URL(itemUrl).hostname.replace(/^www\./, '') + } catch {} + return '' +} + // Component export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element { + const [isHovered, setIsHovered] = useState(false) + const originText = + props.item.siteName || + siteName(props.item.originalArticleUrl, props.item.url) + return ( - <> - {props.layout === 'GRID_LAYOUT' ? ( - { - props.handleAction('showDetail') - }} - > - { + setIsHovered(true) + }} + onMouseLeave={() => { + setIsHovered(false) + }} + > + + {timeAgo(props.item.savedAt)} + {isHovered ? ( + + + + ) : ( + - - - { - // This is here to prevent menu click events from bubbling - // up and causing us to "click" on the link item. - e.stopPropagation() - }} - > - - } - actionHandler={props.handleAction} - /> - - - - - {props.item.author && ( - {removeHTMLTags(props.item.author)} - )} - {props.originText && ( - <> - - - {props.originText} - - - )} - - - + 15 min read + + )} + + + + + {props.item.title} + + + {props.item.description} + - - {props.item.description} - + {props.item.author} + {props.item.author && originText && ' | '} + {originText} + - + + + + + {props.item.labels?.map(({ name, color }, index) => ( ))} - - - ) : ( - // ELSE display List Layout - - - - { + ;(e.target as HTMLElement).style.display = 'none' }} - data-testid="listDesc" - > - {props.item.labels?.map(({ name, color }, index) => ( - - ))} - {props.item.description} - - - - {props.item.author && ( - {removeHTMLTags(props.item.author)} - )} - - + /> + )} - )} - + + ) } + +// // Component +// export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element { +// return ( +// { +// props.handleAction('showDetail') +// }} +// > +// +// +// +// { +// // This is here to prevent menu click events from bubbling +// // up and causing us to "click" on the link item. +// e.stopPropagation() +// }} +// > +// +// } +// actionHandler={props.handleAction} +// /> +// +// +// +// +// {props.item.author && ( +// {removeHTMLTags(props.item.author)} +// )} +// {props.originText && ( +// <> +// +// +// {props.originText} +// +// +// )} +// +// +// +// +// +// {props.item.description} +// +// +// +// {props.item.labels?.map(({ name, color }, index) => ( +// +// ))} +// +// +// +// +// ) +// } diff --git a/packages/web/components/templates/library/LibraryList.tsx b/packages/web/components/templates/library/LibraryList.tsx index ebea7d71a..faba3b7ac 100644 --- a/packages/web/components/templates/library/LibraryList.tsx +++ b/packages/web/components/templates/library/LibraryList.tsx @@ -8,7 +8,7 @@ import { LinkedItemCardAction } from '../../patterns/LibraryCards/CardTypes' import { LibraryGridCard } from '../../patterns/LibraryCards/LibraryGridCard' import { LayoutCoordinator } from './LibraryContainer' import { EmptyLibrary } from '../homeFeed/EmptyLibrary' -import Masonry from 'react-masonry-css' +// import Masonry from 'react-masonry-css' export type LibraryListProps = { layoutCoordinator: LayoutCoordinator @@ -54,118 +54,89 @@ export function LibraryList(props: LibraryListProps): JSX.Element { /> ) } - console.log(fileNames) + + // return ( - - {inDragOperation && uploadingFiles.length < 1 && ( - - - Drag n drop files here - - - )} - { - setInDragOperation(true) + + { - setInDragOperation(false) - }} - noClick={true} - noDragEventsBubbling={true} > - {({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => ( + {libraryItems.map((linkedItem) => ( div': { + // bg: '$libraryBackground', + // }, + // '&:focus': { + // '> div': { + // bg: '$grayBgActive', + // }, + // }, + // '&:hover': { + // '> div': { + // bg: '$grayBgActive', + // }, + // }, + // }} > - - - {libraryItems.map((linkedItem) => ( - div': { - bg: '$libraryBackground', - }, - '&:focus': { - '> div': { - bg: '$grayBgActive', - }, - }, - '&:hover': { - '> div': { - bg: '$grayBgActive', - }, - }, - }} - > - {viewerData?.me && ( - { - console.log('card clicked') - }} - /> - )} - - ))} - + {viewerData?.me && ( + { + console.log('card clicked') + }} + /> + )} - )} - - {/* Temporary code */} -
- Files: -
    - {fileNames.map((fileName) => ( -
  • {fileName}
    • - ))} -
-
{' '} - {/* Temporary code */} - {/* Extra padding at bottom to give space for scrolling */} + ))} + ) diff --git a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx index 57d1635e9..bd8ec2051 100644 --- a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx +++ b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx @@ -82,6 +82,7 @@ export type LibraryItemNode = { siteName?: string subscription?: string readAt?: string + savedAt?: string recommendations?: Recommendation[] } @@ -166,6 +167,7 @@ export function useGetLibraryItemsQuery({ siteName subscription readAt + savedAt recommendations { id name @@ -390,6 +392,8 @@ export function useGetLibraryItemsQuery({ } } + console.log('responsePages', responsePages) + return { isValidating, itemsPages: responsePages || undefined, diff --git a/packages/web/package.json b/packages/web/package.json index 4b821c258..c48beb30a 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -34,6 +34,7 @@ "axios": "^1.2.0", "color2k": "^2.0.0", "cookie": "^0.5.0", + "dayjs": "^1.11.7", "diff-match-patch": "^1.0.5", "downshift": "^6.1.9", "graphql-request": "^3.6.1", diff --git a/yarn.lock b/yarn.lock index 33ab030a3..160854925 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12650,6 +12650,11 @@ dayjs@^1.10.4: resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.0.tgz#009bf7ef2e2ea2d5db2e6583d2d39a4b5061e805" integrity sha512-JLC809s6Y948/FuCZPm5IX8rRhQwOiyMb2TfVVQEixG7P8Lm/gt5S7yoQZmC8x1UehI9Pb7sksEt4xx14m+7Ug== +dayjs@^1.11.7: + version "1.11.7" + resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2" + integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ== + debounce@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"