Attempt at using maxPages

packages/web/components/templates/library/LibraryContainer.tsx

@@ -121,7 +121,9 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
     isFetchingNextPage,
     isFetching,
     fetchNextPage,
+    fetchPreviousPage,
     hasNextPage,
+    hasPreviousPage,
     error: fetchItemsError,
   } = useGetLibraryItems(props.folder ?? 'home', props.folder, queryInputs)
 
@@ -187,16 +189,16 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
       .map((li) => li.node.id)
   }, [libraryItems])
 
-  const refreshProcessingItems = useRefreshProcessingItems()
+  // const refreshProcessingItems = useRefreshProcessingItems()
 
-  useEffect(() => {
-    if (processingItems.length) {
-      refreshProcessingItems.mutateAsync({
-        attempt: 0,
-        itemIds: processingItems,
-      })
-    }
-  }, [processingItems])
+  // useEffect(() => {
+  //   if (processingItems.length) {
+  //     refreshProcessingItems.mutateAsync({
+  //       attempt: 0,
+  //       itemIds: processingItems,
+  //     })
+  //   }
+  // }, [processingItems])
 
   const focusFirstItem = useCallback(() => {
     if (libraryItems.length < 1) {
@@ -672,11 +674,18 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
     activeCardId ? [...ACTIVE_ACTIONS, ...UNACTIVE_ACTIONS] : UNACTIVE_ACTIONS,
     [activeCardId, activeItem]
   )
-  useFetchMore(() => {
-    if (!isFetching && !isLoading && hasNextPage) {
-      fetchNextPage()
+  useFetchMore(
+    () => {
+      if (!isFetching && !isLoading && hasNextPage) {
+        fetchNextPage()
+      }
+    },
+    () => {
+      if (!isFetching && !isLoading && hasPreviousPage) {
+        fetchPreviousPage()
+      }
     }
-  })
+  )
 
   console.log(
     'isFetching && !isLoading, isFetchingNextPage',

packages/web/lib/hooks/useFetchMoreScroll.tsx

@@ -1,19 +1,27 @@
 import { useEffect, useRef, useState } from 'react'
 
-export const useFetchMore = (callback: () => void, delay = 500): void => {
+export const useFetchMore = (
+  fetchNextPage: () => void,
+  fetchPreviousPage: () => void,
+  delay = 500
+): void => {
   const [first, setFirst] = useState(true)
+  const [lastScrollTop, setLastScrollTop] = useState(0)
   const throttleTimeout = useRef<NodeJS.Timeout | undefined>(undefined)
 
   useEffect(() => {
-    if (typeof window === 'undefined') {
-      return
-    }
-
     const callbackInternal = (): void => {
       const { scrollTop, scrollHeight, clientHeight } =
         window.document.documentElement
+      const direction = scrollTop > lastScrollTop ? 'down' : 'up'
+      setLastScrollTop(scrollTop)
 
-      if (scrollTop + clientHeight >= scrollHeight - scrollHeight / 3) {
+      console.log('direction: ', direction)
+
+      if (
+        direction == 'down' &&
+        scrollTop + clientHeight >= scrollHeight - scrollHeight / 3
+      ) {
         console.log(
           'calling fetchMore: scrollTop + clientHeight >= scrollHeight - scrollHeight / 3',
           scrollTop,
@@ -21,8 +29,14 @@ export const useFetchMore = (callback: () => void, delay = 500): void => {
           scrollHeight,
           scrollHeight / 3
         )
-        callback()
+        fetchNextPage()
+      } else if (direction == 'up' && scrollTop < 300) {
+        console.log('calling fetchPrevious: ', scrollTop)
+        fetchPreviousPage()
       }
+
+      console.log('scrollTop: ', scrollTop)
+
       throttleTimeout.current = undefined
     }
 
@@ -42,5 +56,5 @@ export const useFetchMore = (callback: () => void, delay = 500): void => {
     return () => {
       window.removeEventListener('scroll', handleScroll)
     }
-  }, [callback, delay, first, setFirst])
+  }, [fetchNextPage, fetchPreviousPage, delay, first, setFirst])
 }

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

@@ -23,6 +23,7 @@ import {
   GQL_SET_LINK_ARCHIVED,
   GQL_UPDATE_LIBRARY_ITEM,
 } from './gql'
+import { useState } from 'react'
 
 function gqlFetcher(
   query: string,
@@ -224,7 +225,6 @@ export function useGetLibraryItems(
     // If no folder is specified cache this as `home`
     queryKey: ['libraryItems', section, fullQuery],
     queryFn: async ({ queryKey, pageParam }) => {
-      console.log('queryKey, pageParam', queryKey, pageParam)
       const response = (await gqlFetcher(gqlSearchQuery(includeCount), {
         after: pageParam,
         first: limit,
@@ -234,19 +234,31 @@ export function useGetLibraryItems(
       return response.search
     },
     enabled,
+    maxPages: 3,
     initialPageParam: '0',
     getNextPageParam: (lastPage: LibraryItems, pages) => {
-      console.log('getting next page: ', lastPage?.pageInfo?.endCursor, pages)
       return lastPage.pageInfo.hasNextPage
         ? lastPage?.pageInfo?.endCursor
         : undefined
     },
-    // getPreviousPageParam: (firstPage, pages) => {
-    //   console.log('firstPage.pageInfo', firstPage?.pageInfo?.startCursor)
-    //   return firstPage.pageInfo.hasPreviousPage
-    //     ? firstPage?.pageInfo?.startCursor
-    //     : undefined
-    // },
+    select: (data) => {
+      console.log('data: ', data, 'infiniteQuery')
+      return data
+      // console.log('data: ', data)
+      // // Keep the rest of the data the same and only refetch the first page
+      // console.log(
+      //   'data.pages.length > 1 && infiniteQuery.isRefetching',
+      //   data.pages.length,
+      //   infiniteQuery.isRefetching
+      // )
+      // // if (data.pages.length > 1 && infiniteQuery.isRefetching) {
+      // //   return {
+      // //     ...data,
+      // //     pages: [data.pages[0], ...data.pages.slice(1)],
+      // //   }
+      // // }
+      // return data
+    },
   })
 }