Merge pull request #4316 from omnivore-app/fix/web-highlights-crash

Allow the highlights attribute of articles to be undefined

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}

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)

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,
               ],
             }

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

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({