diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx index 9d03a431f..6c53bf13b 100644 --- a/packages/web/components/templates/library/LibraryContainer.tsx +++ b/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', diff --git a/packages/web/lib/hooks/useFetchMoreScroll.tsx b/packages/web/lib/hooks/useFetchMoreScroll.tsx index eb7a1759f..0b6e9b2f4 100644 --- a/packages/web/lib/hooks/useFetchMoreScroll.tsx +++ b/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(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]) } diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx index 096c30040..6fde24046 100644 --- a/packages/web/lib/networking/library_items/useLibraryItems.tsx +++ b/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 + }, }) }