From 5ea67a0bea87525b3e20e9e6ca408ce1670a771c Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 3 May 2022 12:09:32 -0700 Subject: [PATCH] Pull in new highlight cards --- packages/api/src/elastic/pages.ts | 2 + .../web/components/elements/StyledText.tsx | 4 + .../LibraryCards/HighlightItemCard.tsx | 89 +++++++++++++++++++ .../patterns/LibraryCards/LinkedItemCard.tsx | 5 ++ .../templates/homeFeed/HomeFeedContainer.tsx | 2 +- .../networking/fragments/articleFragment.ts | 10 +++ .../queries/useGetLibraryItemsQuery.tsx | 13 ++- .../web/stories/HighlightItemCard.stories.tsx | 71 +++++++++++++++ 8 files changed, 193 insertions(+), 3 deletions(-) create mode 100644 packages/web/components/patterns/LibraryCards/HighlightItemCard.tsx create mode 100644 packages/web/stories/HighlightItemCard.stories.tsx diff --git a/packages/api/src/elastic/pages.ts b/packages/api/src/elastic/pages.ts index f0a19434a..67a4a5e42 100644 --- a/packages/api/src/elastic/pages.ts +++ b/packages/api/src/elastic/pages.ts @@ -447,6 +447,8 @@ export const searchPages = async ( body, }) + console.log('resopnse', response) + if (response.body.hits.total.value === 0) { return [[], 0] } diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx index f5113ffb3..55ef94b5e 100644 --- a/packages/web/components/elements/StyledText.tsx +++ b/packages/web/components/elements/StyledText.tsx @@ -177,3 +177,7 @@ export const StyledImg = styled('img', { export const StyledAnchor = styled('a', { textDecoration: 'none' }) + +export const StyledMark = styled('mark', { + +}) \ No newline at end of file diff --git a/packages/web/components/patterns/LibraryCards/HighlightItemCard.tsx b/packages/web/components/patterns/LibraryCards/HighlightItemCard.tsx new file mode 100644 index 000000000..f3f685ab7 --- /dev/null +++ b/packages/web/components/patterns/LibraryCards/HighlightItemCard.tsx @@ -0,0 +1,89 @@ +import { styled } from '@stitches/react' +import { VStack, HStack } from '../../elements/LayoutPrimitives' +import { StyledMark, StyledText } from '../../elements/StyledText' +import { LinkedItemCardAction, LinkedItemCardProps } from './CardTypes' + +export interface HighlightItemCardProps + extends Pick { + handleAction: (action: LinkedItemCardAction) => void +} + +export const PreviewImage = styled('img', { + objectFit: 'cover', + cursor: 'pointer', +}) + +export function HighlightItemCard(props: HighlightItemCardProps): JSX.Element { + return ( + { + props.handleAction('showDetail') + }} + > + + + {props.item.quote} + + + + {props.item.image && ( + { + ;(e.target as HTMLElement).style.display = 'none' + }} + /> + )} + + {props.item.title + .substring(0, 50) + .concat(props.item.title.length > 50 ? '...' : '')} + + + + ) +} diff --git a/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx b/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx index 12a4a4be7..0b201184d 100644 --- a/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx @@ -1,6 +1,8 @@ import { GridLinkedItemCard } from './GridLinkedItemCard' import { ListLinkedItemCard } from './ListLinkedItemCard' import type { LinkedItemCardProps } from './CardTypes' +import { HighlightItemCard } from './HighlightItemCard' +import { PageType } from '../../../lib/networking/fragments/articleFragment' const siteName = (originalArticleUrl: string, itemUrl: string): string => { try { @@ -15,6 +17,9 @@ const siteName = (originalArticleUrl: string, itemUrl: string): string => { export function LinkedItemCard(props: LinkedItemCardProps): JSX.Element { const originText = siteName(props.item.originalArticleUrl, props.item.url) + if (props.item.pageType === PageType.HIGHLIGHTS) { + return + } if (props.layout == 'LIST_LAYOUT') { return } else { diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index 04f73a6ad..faad41b5e 100644 --- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx +++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx @@ -53,7 +53,7 @@ const timeZoneHourDiff = -new Date().getTimezoneOffset() / 60 const SAVED_SEARCHES: Record = { Inbox: `in:inbox`, 'Read Later': `in:inbox -label:Newsletter`, - Highlighted: `in:inbox has:highlights`, + Highlights: `type:highlights`, Today: `in:inbox saved:${ new Date(new Date().getTime() - 24 * 3600000).toISOString().split('T')[0] }Z${timeZoneHourDiff.toLocaleString('en-US', { diff --git a/packages/web/lib/networking/fragments/articleFragment.ts b/packages/web/lib/networking/fragments/articleFragment.ts index 59794687b..a8cc4636a 100644 --- a/packages/web/lib/networking/fragments/articleFragment.ts +++ b/packages/web/lib/networking/fragments/articleFragment.ts @@ -30,6 +30,16 @@ export enum State { FAILED = 'FAILED', } +export enum PageType { + ARTICLE = 'ARTICLE', + BOOK = 'BOOK', + FILE = 'FILE', + PROFILE = 'PROFILE', + WEBSITE = 'WEBSITE', + HIGHLIGHTS = 'HIGHLIGHTS', + UNKNOWN = 'UNKNOWN', +} + export type ArticleFragmentData = { id: string title: string diff --git a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx index cd57f9ada..fefa32b22 100644 --- a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx +++ b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx @@ -1,7 +1,7 @@ import { gql } from 'graphql-request' import useSWRInfinite from 'swr/infinite' import { gqlFetcher } from '../networkHelpers' -import type { ArticleFragmentData } from '../fragments/articleFragment' +import type { ArticleFragmentData, PageType, State } from '../fragments/articleFragment' import { ContentReader } from '../fragments/articleFragment' import { setLinkArchivedMutation } from '../mutations/setLinkArchivedMutation' import { deleteLinkMutation } from '../mutations/deleteLinkMutation' @@ -73,6 +73,8 @@ export type LibraryItemNode = { shortId: string quote: string annotation: string + state: State + pageType: PageType } export type PageInfo = { @@ -195,6 +197,8 @@ export function useGetLibraryItemsQuery({ let responseError = error let responsePages = data as LibraryItemsData[] | undefined + console.log('data', data) + // We need to check the response errors here and return the error // it will be nested in the data pages, if there is one error, // we invalidate the data and return the error. We also zero out @@ -330,7 +334,8 @@ export function useGetLibraryItemsQuery({ } } - return { + + const res = { isValidating, itemsPages: responsePages || undefined, itemsDataError: responseError, @@ -339,4 +344,8 @@ export function useGetLibraryItemsQuery({ size, setSize, } + + console.log('itemsPages', responsePages, 'error:', responseError) + + return res } diff --git a/packages/web/stories/HighlightItemCard.stories.tsx b/packages/web/stories/HighlightItemCard.stories.tsx new file mode 100644 index 000000000..260338eb4 --- /dev/null +++ b/packages/web/stories/HighlightItemCard.stories.tsx @@ -0,0 +1,71 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react' +import { HighlightItemCard, HighlightItemCardProps } from '../components/patterns/LibraryCards/HighlightItemCard' +import { updateThemeLocally } from '../lib/themeUpdater' +import { ThemeId } from '../components/tokens/stitches.config' +import { PageType, State } from '../lib/networking/fragments/articleFragment' + +export default { + title: 'Components/HighlightItemCard', + component: HighlightItemCard, + argTypes: { + item: { + description: 'The highlight.', + }, + handleAction: { + description: 'Action that fires on click.' + } + } +} as ComponentMeta + +const highlight: HighlightItemCardProps = { + handleAction: () => console.log('Handling Action'), + item:{ + id: "nnnnn", + shortId: "shortId", + quote: "children not only participate in herding work, but are also encouraged to act independently in most other areas of life. They have a say in deciding when to eat, when to sleep, and what to wear, even at temperatures of -30C (-22F).", + annotation: "Okay… this is wild! I love this independence. Wondering how I can reponsibly instill this type of indepence in my own kids…", + createdAt: '', + description: '', + isArchived: false, + originalArticleUrl: 'https://example.com', + ownedByViewer: true, + pageId: '1', + readingProgressAnchorIndex: 12, + readingProgressPercent: 50, + slug: 'slug', + title: "This is a title", + uploadFileId: '1', + url: 'https://example.com', + author: 'Author', + image: 'https://logos-world.net/wp-content/uploads/2021/11/Unity-New-Logo.png', + state: State.SUCCEEDED, + pageType: PageType.HIGHLIGHTS, + }, +} + +const Template = (props: HighlightItemCardProps) => + +export const LightHighlightItemCard: ComponentStory< + typeof HighlightItemCard +> = (args: any) => { + updateThemeLocally(ThemeId.Light) + return ( +