Merge pull request #4261 from omnivore-app/fix/web-library-infinite-scroll

WIP: infinite scroll on the library with react-query

packages/api/src/utils/corsConfig.ts

@@ -19,4 +19,5 @@ export const corsConfig = {
     'capacitor://localhost',
     'http://localhost',
   ],
+  maxAge: 86400,
 }

packages/web/lib/hooks/useFetchMoreScroll.tsx

@@ -10,13 +10,17 @@ export const useFetchMore = (callback: () => void, delay = 500): void => {
     }
 
     const callbackInternal = (): void => {
-      const {
-        scrollTop,
-        scrollHeight,
-        clientHeight
-      } = window.document.documentElement;
+      const { scrollTop, scrollHeight, clientHeight } =
+        window.document.documentElement
 
-      if (scrollTop + clientHeight >= scrollHeight - (scrollHeight / 3)) {
+      if (scrollTop + clientHeight >= scrollHeight - scrollHeight / 3) {
+        console.log(
+          'calling fetchMore: scrollTop + clientHeight >= scrollHeight - scrollHeight / 3',
+          scrollTop,
+          clientHeight,
+          scrollHeight,
+          scrollHeight / 3
+        )
         callback()
       }
       throttleTimeout.current = undefined

packages/web/lib/networking/library_items/useLibraryItems.tsx

@@ -232,6 +232,7 @@ export function useGetLibraryItems(
       return response.search
     },
     enabled,
+    maxPages: 2,
     initialPageParam: '0',
     getNextPageParam: (lastPage: LibraryItems) => {
       return lastPage.pageInfo.hasNextPage
@@ -537,7 +538,7 @@ export function useRefreshProcessingItems() {
       includeContent: false,
     })) as LibraryItemsData
     if (result.search.errorCodes?.length) {
-      throw new Error(result.search.errorCodes[0])
+      return undefined
     }
     return result.search
   }
@@ -546,33 +547,38 @@ export function useRefreshProcessingItems() {
     retry: 3,
     retryDelay: 10,
     onSuccess: async (
-      data: LibraryItems,
+      data: LibraryItems | undefined,
       variables: {
         attempt: number
         itemIds: string[]
       }
     ) => {
-      let shouldRefetch = false
-      console.log('got processing items: ', data.edges)
-      for (const item of data.edges) {
-        if (item.node.state !== State.PROCESSING) {
-          overwriteItemPropertiesInCache(
-            queryClient,
-            item.node.id,
-            undefined,
-            item.node
-          )
-        } else {
-          shouldRefetch = true
+      let shouldRefetch = data == undefined
+      if (data) {
+        for (const item of data.edges) {
+          if (item.node.state !== State.PROCESSING) {
+            overwriteItemPropertiesInCache(
+              queryClient,
+              item.node.id,
+              undefined,
+              item.node
+            )
+          } else {
+            shouldRefetch = true
+          }
         }
+      } else {
+        shouldRefetch = true
       }
       if (shouldRefetch && variables.attempt < maxAttempts) {
         await delay(5000 * variables.attempt + 1)
         mutation.mutate({
           attempt: variables.attempt + 1,
-          itemIds: data.edges
-            .filter((item) => item.node.state == State.PROCESSING)
-            .map((it) => it.node.id),
+          itemIds: data
+            ? data.edges
+                .filter((item) => item.node.state == State.PROCESSING)
+                .map((it) => it.node.id)
+            : variables.itemIds,
         })
       }
     },