diff --git a/packages/web/components/templates/article/ArticleContainer.tsx b/packages/web/components/templates/article/ArticleContainer.tsx index 1e5af9281..5ceabb2b6 100644 --- a/packages/web/components/templates/article/ArticleContainer.tsx +++ b/packages/web/components/templates/article/ArticleContainer.tsx @@ -520,7 +520,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element { viewer={props.viewer} item={props.article} scrollToHighlight={highlightHref} - highlights={props.article.highlights} + highlights={props.article.highlights ?? []} isAppleAppEmbed={props.isAppleAppEmbed} highlightBarDisabled={props.highlightBarDisabled} showHighlightsModal={props.showHighlightsModal} diff --git a/packages/web/components/templates/article/PdfArticleContainer.tsx b/packages/web/components/templates/article/PdfArticleContainer.tsx index 4e63e694f..d0afbffa5 100644 --- a/packages/web/components/templates/article/PdfArticleContainer.tsx +++ b/packages/web/components/templates/article/PdfArticleContainer.tsx @@ -204,7 +204,7 @@ export default function PdfArticleContainer( : null if (highlightHref) { // find the page index if possible - const highlight = props.article.highlights.find( + const highlight = props.article.highlights?.find( (h) => h.id === highlightHref ) if (highlight) { @@ -252,8 +252,8 @@ export default function PdfArticleContainer( }) // Store the highlights in the highlightsRef and apply them to the PDF - highlightsRef.current = props.article.highlights - for (const highlight of props.article.highlights.filter( + highlightsRef.current = props.article.highlights ?? [] + for (const highlight of (props.article.highlights ?? []).filter( (h) => h.type == 'HIGHLIGHT' )) { const patch = JSON.parse(highlight.patch) diff --git a/packages/web/lib/networking/highlights/useItemHighlights.tsx b/packages/web/lib/networking/highlights/useItemHighlights.tsx index 6e7943b3a..11af95475 100644 --- a/packages/web/lib/networking/highlights/useItemHighlights.tsx +++ b/packages/web/lib/networking/highlights/useItemHighlights.tsx @@ -37,7 +37,7 @@ export const useCreateHighlight = () => { (item) => { return { ...item, - highlights: [...item.highlights, newHighlight], + highlights: [...(item.highlights ?? []), newHighlight], } } ) @@ -72,7 +72,7 @@ export const useDeleteHighlight = () => { (item) => { return { ...item, - highlights: item.highlights.filter( + highlights: (item.highlights ?? []).filter( (h) => h.id != deletedHighlight.id ), } @@ -115,7 +115,9 @@ export const useUpdateHighlight = () => { return { ...item, highlights: [ - ...item.highlights.filter((h) => h.id != updatedHighlight.id), + ...(item.highlights ?? []).filter( + (h) => h.id != updatedHighlight.id + ), updatedHighlight, ], } @@ -169,7 +171,9 @@ export const useMergeHighlight = () => { return { ...item, highlights: [ - ...item.highlights.filter((h) => mergedIds.indexOf(h.id) == -1), + ...(item.highlights ?? []).filter( + (h) => mergedIds.indexOf(h.id) == -1 + ), newHighlight, ], } diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx index 8545357b7..454c96229 100644 --- a/packages/web/lib/networking/library_items/useLibraryItems.tsx +++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx @@ -982,7 +982,7 @@ export type ArticleAttributes = { folder: string savedByViewer?: boolean content: string - highlights: Highlight[] + highlights?: Highlight[] linkId: string labels?: Label[] state?: State diff --git a/packages/web/pages/[username]/[slug]/debug.tsx b/packages/web/pages/[username]/[slug]/debug.tsx index 2e74926fa..0f4c86eb1 100644 --- a/packages/web/pages/[username]/[slug]/debug.tsx +++ b/packages/web/pages/[username]/[slug]/debug.tsx @@ -101,7 +101,7 @@ export default function Debug(): JSX.Element { }) }) - article.highlights.forEach((highlight, idx) => { + article.highlights?.forEach((highlight, idx) => { result.push({ name: `highlight[${idx}].id`, value: highlight.id }) result.push({ name: `highlight[${idx}].type`, value: highlight.type }) result.push({