From f20cbed5633e553bed90bd8edc04655176e3d7fa Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 3 Apr 2023 13:46:19 +0800 Subject: [PATCH] Improve highlight scrolling from notebooks --- .../web/components/patterns/HighlightView.tsx | 9 +- .../templates/article/ArticleContainer.tsx | 21 ++- .../templates/article/HighlightViewItem.tsx | 16 +- .../templates/article/HighlightsLayer.tsx | 137 ++++++++++-------- .../components/templates/article/Notebook.tsx | 20 ++- .../templates/article/NotebookModal.tsx | 28 ++-- .../templates/article/PdfArticleContainer.tsx | 107 +++++++------- .../templates/homeFeed/HighlightItem.tsx | 59 +++++++- .../templates/homeFeed/HighlightsLayout.tsx | 49 ++++++- packages/web/lib/appConfig.ts | 17 --- .../queries/useGetLibraryItemsQuery.tsx | 6 + .../web/pages/[username]/[slug]/index.tsx | 4 +- .../web/pages/app/[username]/[slug]/index.tsx | 12 +- 13 files changed, 303 insertions(+), 182 deletions(-) diff --git a/packages/web/components/patterns/HighlightView.tsx b/packages/web/components/patterns/HighlightView.tsx index 89000c99d..79e295bf9 100644 --- a/packages/web/components/patterns/HighlightView.tsx +++ b/packages/web/components/patterns/HighlightView.tsx @@ -18,7 +18,6 @@ type HighlightViewProps = { highlight: Highlight author?: string title?: string - scrollToHighlight?: (arg: string) => void updateHighlight: (highlight: Highlight) => void } @@ -67,13 +66,7 @@ export function HighlightView(props: HighlightViewProps): JSX.Element { paddingLeft: '15px', }} > - { - if (props.scrollToHighlight) { - props.scrollToHighlight(props.highlight.id) - } - }} - > + *': { diff --git a/packages/web/components/templates/article/ArticleContainer.tsx b/packages/web/components/templates/article/ArticleContainer.tsx index 174f74f4e..5f80488e9 100644 --- a/packages/web/components/templates/article/ArticleContainer.tsx +++ b/packages/web/components/templates/article/ArticleContainer.tsx @@ -18,14 +18,15 @@ import { LabelChip } from '../../elements/LabelChip' import { Label } from '../../../lib/networking/fragments/labelFragment' import { Recommendation } from '../../../lib/networking/queries/useGetLibraryItemsQuery' import { Avatar } from '../../elements/Avatar' +import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery' type ArticleContainerProps = { + viewer: UserBasicData article: ArticleAttributes labels: Label[] articleMutations: ArticleMutations isAppleAppEmbed: boolean highlightBarDisabled: boolean - highlightsBaseURL: string margin?: number fontSize?: number fontFamily?: string @@ -107,15 +108,12 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element { const [showReportIssuesModal, setShowReportIssuesModal] = useState(false) const [fontSize, setFontSize] = useState(props.fontSize ?? 20) // iOS app embed can overide the original margin and line height - const [maxWidthPercentageOverride, setMaxWidthPercentageOverride] = useState< - number | null - >(null) - const [lineHeightOverride, setLineHeightOverride] = useState( - null - ) - const [fontFamilyOverride, setFontFamilyOverride] = useState( - null - ) + const [maxWidthPercentageOverride, setMaxWidthPercentageOverride] = + useState(null) + const [lineHeightOverride, setLineHeightOverride] = + useState(null) + const [fontFamilyOverride, setFontFamilyOverride] = + useState(null) const [highContrastText, setHighContrastText] = useState( props.highContrastText ?? false ) @@ -388,13 +386,14 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element { void + + viewInReader: (highlightId: string) => void + deleteHighlightAction: () => void updateHighlight: (highlight: Highlight) => void @@ -26,7 +36,6 @@ export function HighlightViewItem(props: HighlightViewItemProps): JSX.Element { @@ -42,7 +51,10 @@ export function HighlightViewItem(props: HighlightViewItemProps): JSX.Element { }} > + setShowHighlightsModal: React.Dispatch> articleMutations: ArticleMutations } @@ -59,6 +66,7 @@ interface SpeakingSectionEvent extends Event { } export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element { + const router = useRouter() const [highlights, setHighlights] = useState(props.highlights) const [highlightModalAction, setHighlightModalAction] = useState({ highlightModalAction: 'none' }) @@ -68,15 +76,13 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element { >([]) const focusedHighlightMousePos = useRef({ pageX: 0, pageY: 0 }) - const [focusedHighlight, setFocusedHighlight] = useState< - Highlight | undefined - >(undefined) + const [focusedHighlight, setFocusedHighlight] = + useState(undefined) const [selectionData, setSelectionData] = useSelection(highlightLocations) - const [labelsTarget, setLabelsTarget] = useState( - undefined - ) + const [labelsTarget, setLabelsTarget] = + useState(undefined) const canShareNative = useCanShareNative() @@ -141,7 +147,10 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element { `[omnivore-highlight-id="${props.scrollToHighlight.current}"]` ) if (anchorElement) { - anchorElement.scrollIntoView({ behavior: 'auto' }) + anchorElement.scrollIntoView({ + block: 'center', + behavior: 'auto', + }) } } }, [highlights, setHighlightLocations, props.scrollToHighlight]) @@ -181,23 +190,20 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element { [highlights, highlightLocations] ) - const handleNativeShare = useCallback( - (highlightID: string) => { - navigator - ?.share({ - title: props.articleTitle, - url: `${props.highlightsBaseURL}/${highlightID}`, - }) - .then(() => { - setFocusedHighlight(undefined) - }) - .catch((error) => { - console.log(error) - setFocusedHighlight(undefined) - }) - }, - [props.articleTitle, props.highlightsBaseURL] - ) + // const handleNativeShare = useCallback((highlightID: string) => { + // // navigator + // // ?.share({ + // // title: props.articleTitle, + // // url: `${props.highlightsBaseURL}/${highlightID}`, + // // }) + // // .then(() => { + // // setFocusedHighlight(undefined) + // // }) + // // .catch((error) => { + // // console.log(error) + // // setFocusedHighlight(undefined) + // // }) + // }, []) const openNoteModal = useCallback( (inputs: HighlightActionProps) => { @@ -282,7 +288,6 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element { } }, [ - handleNativeShare, highlights, openNoteModal, props.articleId, @@ -408,37 +413,37 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element { }) } break - case 'share': - if (props.isAppleAppEmbed) { - window?.webkit?.messageHandlers.highlightAction?.postMessage({ - actionID: 'share', - highlightID: focusedHighlight?.id, - }) - } + // case 'share': + // if (props.isAppleAppEmbed) { + // window?.webkit?.messageHandlers.highlightAction?.postMessage({ + // actionID: 'share', + // highlightID: focusedHighlight?.id, + // }) + // } - window?.AndroidWebKitMessenger?.handleIdentifiableMessage( - 'shareHighlight', - JSON.stringify({ - highlightID: focusedHighlight?.id, - }) - ) + // window?.AndroidWebKitMessenger?.handleIdentifiableMessage( + // 'shareHighlight', + // JSON.stringify({ + // highlightID: focusedHighlight?.id, + // }) + // ) - if (focusedHighlight) { - if (canShareNative) { - handleNativeShare(focusedHighlight.shortId) - } else { - setHighlightModalAction({ - highlight: focusedHighlight, - highlightModalAction: 'share', - }) - } - } else { - await createHighlightCallback('share') - } - break - case 'unshare': - console.log('unshare') - break // TODO: implement -- need to show confirmation dialog + // if (focusedHighlight) { + // if (canShareNative) { + // handleNativeShare(focusedHighlight.shortId) + // } else { + // setHighlightModalAction({ + // highlight: focusedHighlight, + // highlightModalAction: 'share', + // }) + // } + // } else { + // await createHighlightCallback('share') + // } + // break + // case 'unshare': + // console.log('unshare') + // break // TODO: implement -- need to show confirmation dialog case 'setHighlightLabels': if (props.isAppleAppEmbed) { window?.webkit?.messageHandlers.highlightAction?.postMessage({ @@ -454,7 +459,6 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element { [ createHighlightCallback, focusedHighlight, - handleNativeShare, openNoteModal, props.highlightBarDisabled, props.isAppleAppEmbed, @@ -667,9 +671,28 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element { if (props.showHighlightsModal) { return ( { + // The timeout here is a bit of a hack to work around rerendering + setTimeout(() => { + const target = document.querySelector( + `[omnivore-highlight-id="${highlightId}"]` + ) + target?.scrollIntoView({ + block: 'center', + behavior: 'auto', + }) + }, 1) + history.replaceState( + undefined, + window.location.href, + `#${highlightId}` + ) + props.setShowHighlightsModal(false) + }} /> ) } diff --git a/packages/web/components/templates/article/Notebook.tsx b/packages/web/components/templates/article/Notebook.tsx index e00fe9b60..1d852c8cf 100644 --- a/packages/web/components/templates/article/Notebook.tsx +++ b/packages/web/components/templates/article/Notebook.tsx @@ -20,14 +20,22 @@ import { HighlightNoteBox } from '../../patterns/HighlightNotes' import { HighlightViewItem } from './HighlightViewItem' import { ConfirmationModal } from '../../patterns/ConfirmationModal' import { TrashIcon } from '../../elements/images/TrashIcon' +import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery' +import { + LibraryItem, + ReadableItem, +} from '../../../lib/networking/queries/useGetLibraryItemsQuery' type NotebookProps = { - pageId: string + viewer: UserBasicData + + item: ReadableItem highlights: Highlight[] - scrollToHighlight?: (arg: string) => void sizeMode: 'normal' | 'maximized' + viewInReader: (highlightId: string) => void + onAnnotationsChanged?: ( highlights: Highlight[], deletedAnnotations: Highlight[] @@ -242,7 +250,7 @@ export function Notebook(props: NotebookProps): JSX.Element { id: noteId, shortId: nanoid(8), type: 'NOTE', - articleId: props.pageId, + articleId: props.item.id, annotation: text, }) console.log('success creating annotation note: ', success) @@ -277,7 +285,7 @@ export function Notebook(props: NotebookProps): JSX.Element { return } }, - [annotations, props.pageId] + [annotations, props.item] ) return ( ( { diff --git a/packages/web/components/templates/article/NotebookModal.tsx b/packages/web/components/templates/article/NotebookModal.tsx index 1bc5ce552..249b3001a 100644 --- a/packages/web/components/templates/article/NotebookModal.tsx +++ b/packages/web/components/templates/article/NotebookModal.tsx @@ -17,11 +17,16 @@ import { MenuTrigger } from '../../elements/MenuTrigger' import { highlightsAsMarkdown } from '../homeFeed/HighlightItem' import 'react-markdown-editor-lite/lib/index.css' import { Notebook } from './Notebook' +import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery' +import { ReadableItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery' type NotebookModalProps = { - pageId: string + viewer: UserBasicData + + item: ReadableItem highlights: Highlight[] - scrollToHighlight?: (arg: string) => void + + viewHighlightInReader: (arg: string) => void onClose: (highlights: Highlight[], deletedAnnotations: Highlight[]) => void } @@ -31,16 +36,6 @@ export const getHighlightLocation = (patch: string): number | undefined => { return patches[0].start1 || undefined } -type AnnotationInfo = { - loaded: boolean - - note: Highlight | undefined - noteId: string - - allAnnotations: Highlight[] - deletedAnnotations: Highlight[] -} - export function NotebookModal(props: NotebookModalProps): JSX.Element { const [sizeMode, setSizeMode] = useState<'normal' | 'maximized'>('normal') const [showConfirmDeleteNote, setShowConfirmDeleteNote] = useState(false) @@ -73,6 +68,14 @@ export function NotebookModal(props: NotebookModalProps): JSX.Element { })() }, [allAnnotations]) + const viewInReader = useCallback( + (highlightId) => { + props.viewHighlightInReader(highlightId) + handleClose() + }, + [props, handleClose] + ) + return ( @@ -141,6 +144,7 @@ export function NotebookModal(props: NotebookModalProps): JSX.Element { diff --git a/packages/web/components/templates/article/PdfArticleContainer.tsx b/packages/web/components/templates/article/PdfArticleContainer.tsx index 256220c97..81c859fc1 100644 --- a/packages/web/components/templates/article/PdfArticleContainer.tsx +++ b/packages/web/components/templates/article/PdfArticleContainer.tsx @@ -2,7 +2,7 @@ import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticle import { Box } from '../../elements/LayoutPrimitives' import { v4 as uuidv4 } from 'uuid' import { nanoid } from 'nanoid' -import { useState, useEffect, useCallback, useRef } from 'react' +import { useState, useEffect, useRef } from 'react' import { isDarkTheme } from '../../../lib/themeUpdater' import PSPDFKit from 'pspdfkit' import { Instance, HighlightAnnotation, List, Annotation, Rect } from 'pspdfkit' @@ -12,15 +12,15 @@ import { deleteHighlightMutation } from '../../../lib/networking/mutations/delet import { articleReadingProgressMutation } from '../../../lib/networking/mutations/articleReadingProgressMutation' import { mergeHighlightMutation } from '../../../lib/networking/mutations/mergeHighlightMutation' import { useCanShareNative } from '../../../lib/hooks/useCanShareNative' -import { webBaseURL } from '../../../lib/appConfig' import { pspdfKitKey } from '../../../lib/appConfig' import { NotebookModal } from './NotebookModal' import { HighlightNoteModal } from './HighlightNoteModal' import { showErrorToast } from '../../../lib/toastHelpers' import { HEADER_HEIGHT, MOBILE_HEADER_HEIGHT } from '../homeFeed/HeaderSpacer' +import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery' export type PdfArticleContainerProps = { - viewerUsername: string + viewer: UserBasicData article: ArticleAttributes showHighlightsModal: boolean setShowHighlightsModal: React.Dispatch> @@ -30,43 +30,41 @@ export default function PdfArticleContainer( props: PdfArticleContainerProps ): JSX.Element { const containerRef = useRef(null) - const [shareTarget, setShareTarget] = useState( - undefined - ) + const [shareTarget, setShareTarget] = + useState(undefined) const [notebookKey, setNotebookKey] = useState(uuidv4()) const [noteTarget, setNoteTarget] = useState(undefined) - const [noteTargetPageIndex, setNoteTargetPageIndex] = useState< - number | undefined - >(undefined) + const [noteTargetPageIndex, setNoteTargetPageIndex] = + useState(undefined) const highlightsRef = useRef([]) const canShareNative = useCanShareNative() - const getHighlightURL = useCallback( - (highlightID: string): string => - `${webBaseURL}/${props.viewerUsername}/${props.article.slug}/highlights/${highlightID}`, - [props.article.slug, props.viewerUsername] - ) + // const getHighlightURL = useCallback( + // (highlightID: string): string => + // `${webBaseURL}/${props.viewerUsername}/${props.article.slug}/highlights/${highlightID}`, + // [props.article.slug, props.viewerUsername] + // ) - const nativeShare = useCallback( - async (highlightID: string, title: string) => { - await navigator?.share({ - title: title, - url: getHighlightURL(highlightID), - }) - }, - [getHighlightURL] - ) + // const nativeShare = useCallback( + // async (highlightID: string, title: string) => { + // await navigator?.share({ + // title: title, + // url: getHighlightURL(highlightID), + // }) + // }, + // [getHighlightURL] + // ) - const handleOpenShare = useCallback( - (highlight: Highlight) => { - if (canShareNative) { - nativeShare(highlight.shortId, props.article.title) - } else { - setShareTarget(highlight) - } - }, - [nativeShare, canShareNative, props.article.title] - ) + // const handleOpenShare = useCallback( + // (highlight: Highlight) => { + // if (canShareNative) { + // nativeShare(highlight.shortId, props.article.title) + // } else { + // setShareTarget(highlight) + // } + // }, + // [nativeShare, canShareNative, props.article.title] + // ) const annotationOmnivoreId = (annotation: Annotation): string | undefined => { if ( @@ -178,23 +176,23 @@ export default function PdfArticleContainer( instance.setSelectedAnnotation(null) }, } - const share = { - type: 'custom' as const, - title: 'Share', - id: 'tooltip-share-annotation', - className: 'TooltipItem-Share', - onPress: () => { - if ( - annotation.customData && - annotation.customData.omnivoreHighlight && - (annotation.customData.omnivoreHighlight as Highlight).shortId - ) { - const data = annotation.customData.omnivoreHighlight as Highlight - handleOpenShare(data) - } - instance.setSelectedAnnotation(null) - }, - } + // const share = { + // type: 'custom' as const, + // title: 'Share', + // id: 'tooltip-share-annotation', + // className: 'TooltipItem-Share', + // onPress: () => { + // if ( + // annotation.customData && + // annotation.customData.omnivoreHighlight && + // (annotation.customData.omnivoreHighlight as Highlight).shortId + // ) { + // const data = annotation.customData.omnivoreHighlight as Highlight + // handleOpenShare(data) + // } + // instance.setSelectedAnnotation(null) + // }, + // } return [copy, note, remove] } @@ -424,7 +422,6 @@ export default function PdfArticleContainer( document.addEventListener('deleteHighlightbyId', async (event) => { const annotationId = (event as CustomEvent).detail as string - console.log(' DELETING ANNOTATION BY ID: ', annotationId) for (let pageIdx = 0; pageIdx < instance.totalPageCount; pageIdx++) { const annotations = await instance.getAnnotations(pageIdx) for (let annIdx = 0; annIdx < annotations.size; annIdx++) { @@ -433,7 +430,6 @@ export default function PdfArticleContainer( continue } const storedId = annotationOmnivoreId(annotation) - console.log(' --- storedId:', storedId) if (storedId == annotationId) { await instance.delete(annotation) await deleteHighlightMutation(annotationId) @@ -495,7 +491,8 @@ export default function PdfArticleContainer( {props.showHighlightsModal && ( { console.log( @@ -511,6 +508,10 @@ export default function PdfArticleContainer( }) props.setShowHighlightsModal(false) }} + viewHighlightInReader={(highlightId) => { + // TODO: scroll to highlight in PDF + props.setShowHighlightsModal(false) + }} /> )} diff --git a/packages/web/components/templates/homeFeed/HighlightItem.tsx b/packages/web/components/templates/homeFeed/HighlightItem.tsx index 59cd263cf..acdc83db9 100644 --- a/packages/web/components/templates/homeFeed/HighlightItem.tsx +++ b/packages/web/components/templates/homeFeed/HighlightItem.tsx @@ -1,19 +1,50 @@ +import { Item } from '@radix-ui/react-dropdown-menu' +import Link from 'next/link' +import { useRouter } from 'next/router' import { DotsThreeVertical } from 'phosphor-react' import { useCallback } from 'react' import { Highlight } from '../../../lib/networking/fragments/highlightFragment' +import { ReadableItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery' +import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery' import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers' -import { Dropdown, DropdownOption } from '../../elements/DropdownElements' -import { Box } from '../../elements/LayoutPrimitives' +import { + Dropdown, + DropdownOption, + DropdownSeparator, +} from '../../elements/DropdownElements' +import { Box, SpanBox } from '../../elements/LayoutPrimitives' -import { theme } from '../../tokens/stitches.config' +import { styled, theme } from '../../tokens/stitches.config' type HighlightsMenuProps = { + viewer: UserBasicData + + item: ReadableItem highlight: Highlight + viewInReader: (highlightId: string) => void + setLabelsTarget: (target: Highlight) => void setShowConfirmDeleteHighlightId: (set: string) => void } +const StyledLinkItem = styled('a', { + display: 'flex', + fontSize: '14px', + fontWeight: '400', + py: '10px', + px: '15px', + borderRadius: 3, + cursor: 'pointer', + color: '$utilityTextDefault', + textDecoration: 'none', + + '&:hover': { + outline: 'none', + backgroundColor: '$grayBgHover', + }, +}) + export function HighlightsMenu(props: HighlightsMenuProps): JSX.Element { const copyHighlight = useCallback(() => { const quote = props.highlight.quote @@ -69,6 +100,28 @@ export function HighlightsMenu(props: HighlightsMenuProps): JSX.Element { }} title="Delete" /> + + + { + console.log('event.ctrlKey: ', event.ctrlKey, event.metaKey) + if (event.ctrlKey || event.metaKey) { + window.open( + `/${props.viewer.profile.username}/${props.item.slug}#${props.highlight.id}`, + '_blank' + ) + return + } + props.viewInReader(props.highlight.id) + event.preventDefault() + event.stopPropagation() + }} + > + View In Reader + + ) } diff --git a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx index 5acb20656..f0519a710 100644 --- a/packages/web/components/templates/homeFeed/HighlightsLayout.tsx +++ b/packages/web/components/templates/homeFeed/HighlightsLayout.tsx @@ -1,5 +1,6 @@ +import { useRouter } from 'next/router' import { HighlighterCircle } from 'phosphor-react' -import { useCallback, useEffect, useMemo, useReducer, useState } from 'react' +import { useCallback, useEffect, useReducer, useState } from 'react' import { Toaster } from 'react-hot-toast' import { Highlight } from '../../../lib/networking/fragments/highlightFragment' import { @@ -361,6 +362,8 @@ type HighlightListProps = { } function HighlightList(props: HighlightListProps): JSX.Element { + const router = useRouter() + const exportHighlights = useCallback(() => { ;(async () => { if (!props.item.node.highlights) { @@ -373,6 +376,36 @@ function HighlightList(props: HighlightListProps): JSX.Element { })() }, [props.item.node.highlights]) + const viewInReader = useCallback( + (highlightId) => { + if (!router || !router.isReady || !props.viewer) { + showErrorToast('Error navigating to highlight') + return + } + console.log( + 'pushing user: ', + props.viewer, + 'slug: ', + props.item.node.slug + ) + router.push( + { + pathname: '/[username]/[slug]', + query: { + username: props.viewer.profile.username, + slug: props.item.node.slug, + }, + hash: highlightId, + }, + `${props.viewer.profile.username}/${props.item.node.slug}#${highlightId}`, + { + scroll: false, + } + ) + }, + [router, props] + ) + return ( - + {props.viewer && ( + + )} ) diff --git a/packages/web/lib/appConfig.ts b/packages/web/lib/appConfig.ts index d28608bec..cf5c573a5 100644 --- a/packages/web/lib/appConfig.ts +++ b/packages/web/lib/appConfig.ts @@ -4,7 +4,6 @@ type AppEnvironment = 'prod' | 'dev' | 'demo' | 'local' type BaseURLs = { webBaseURL: string serverBaseURL: string - highlightsBaseURL: string } type BaseURLRecords = Record @@ -14,22 +13,18 @@ const baseURLRecords: BaseURLRecords = { prod: { webBaseURL: process.env.NEXT_PUBLIC_BASE_URL ?? '', serverBaseURL: process.env.NEXT_PUBLIC_SERVER_BASE_URL ?? '', - highlightsBaseURL: process.env.NEXT_PUBLIC_HIGHLIGHTS_BASE_URL ?? '', }, dev: { webBaseURL: process.env.NEXT_PUBLIC_DEV_BASE_URL ?? '', serverBaseURL: process.env.NEXT_PUBLIC_DEV_SERVER_BASE_URL ?? '', - highlightsBaseURL: process.env.NEXT_PUBLIC_DEV_HIGHLIGHTS_BASE_URL ?? '', }, demo: { webBaseURL: process.env.NEXT_PUBLIC_DEMO_BASE_URL ?? '', serverBaseURL: process.env.NEXT_PUBLIC_DEMO_SERVER_BASE_URL ?? '', - highlightsBaseURL: process.env.NEXT_PUBLIC_DEMO_HIGHLIGHTS_BASE_URL ?? '', }, local: { webBaseURL: process.env.NEXT_PUBLIC_LOCAL_BASE_URL ?? '', serverBaseURL: process.env.NEXT_PUBLIC_LOCAL_SERVER_BASE_URL ?? '', - highlightsBaseURL: process.env.NEXT_PUBLIC_LOCAL_HIGHLIGHTS_BASE_URL ?? '', }, } @@ -43,16 +38,6 @@ function serverBaseURL(env: AppEnvironment): string { return value } -function highlightsURL(env: AppEnvironment): string { - const value = baseURLRecords[appEnv].highlightsBaseURL - if (value.length == 0) { - throw new Error( - `Couldn't find environment variable for highlights base url in ${env} environment` - ) - } - return value -} - function webURL(env: AppEnvironment): string { const value = baseURLRecords[appEnv].webBaseURL if (value.length == 0) { @@ -96,6 +81,4 @@ export const gqlEndpoint = `${serverBaseURL(appEnv)}/api/graphql` export const fetchEndpoint = `${serverBaseURL(appEnv)}/api` -export const highlightsBaseURL = highlightsURL(appEnv) - export const webBaseURL = webURL(appEnv) diff --git a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx index c0f459b38..9b175684d 100644 --- a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx +++ b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx @@ -11,6 +11,12 @@ import { Label } from './../fragments/labelFragment' import { showErrorToast, showSuccessToast } from '../../toastHelpers' import { Highlight, highlightFragment } from '../fragments/highlightFragment' +export interface ReadableItem { + id: string + title: string + slug: string +} + export type LibraryItemsQueryInput = { limit: number sortDescending: boolean diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx index dec8d6c90..e0388352b 100644 --- a/packages/web/pages/[username]/[slug]/index.tsx +++ b/packages/web/pages/[username]/[slug]/index.tsx @@ -346,7 +346,7 @@ export default function Home(): JSX.Element { article={article} showHighlightsModal={showHighlightsModal} setShowHighlightsModal={setShowHighlightsModal} - viewerUsername={viewerData.me?.profile?.username} + viewer={viewerData.me} /> ) : ( {article && viewerData?.me ? ( (undefined) + const [contentProps, setContentProps] = + useState(undefined) useEffect(() => { if (!router.isReady) return @@ -62,7 +62,7 @@ export default function AppArticleEmbed(): JSX.Element { function AppArticleEmbedContent( props: AppArticleEmbedContentProps ): JSX.Element { - const scrollRef = useRef(null) + const { viewerData } = useGetViewerQuery() const [showHighlightsModal, setShowHighlightsModal] = useState(false) const { articleData } = useGetArticleQuery({ @@ -71,7 +71,7 @@ function AppArticleEmbedContent( includeFriendsHighlights: false, }) - if (articleData) { + if (articleData && viewerData?.me) { return (