From 4bfcbde65da53d93e1323ba3c2b415d72e45720a Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 19 Aug 2024 12:42:43 +0800 Subject: [PATCH] Some more list improvements --- .../templates/library/LibraryContainer.tsx | 36 ++++----- packages/web/lib/hooks/useFetchMoreScroll.tsx | 11 --- .../library_items/useLibraryItems.tsx | 80 +++++++++++++++++-- packages/web/lib/toastHelpers.tsx | 2 - 4 files changed, 91 insertions(+), 38 deletions(-) diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx index 6e006615b..60b335ebd 100644 --- a/packages/web/components/templates/library/LibraryContainer.tsx +++ b/packages/web/components/templates/library/LibraryContainer.tsx @@ -675,25 +675,25 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element { activeCardId ? [...ACTIVE_ACTIONS, ...UNACTIVE_ACTIONS] : UNACTIVE_ACTIONS, [activeCardId, activeItem] ) - useFetchMore( - () => { - if (!isFetching && !isLoading && hasNextPage) { - fetchNextPage() - } - }, - () => { - if (!isFetching && !isLoading && hasPreviousPage) { - fetchPreviousPage() - } - } - ) + // useFetchMore( + // () => { + // if (!isFetching && !isLoading && hasNextPage) { + // fetchNextPage() + // } + // }, + // () => { + // if (!isFetching && !isLoading && hasPreviousPage) { + // fetchPreviousPage() + // } + // } + // ) - console.log( - 'isFetching && !isLoading, isFetchingNextPage', - isFetching, - isLoading, - isFetchingNextPage - ) + // console.log( + // 'isFetching && !isLoading, isFetchingNextPage', + // isFetching, + // isLoading, + // isFetchingNextPage + // ) const setIsChecked = useCallback( (itemId: string, set: boolean) => { diff --git a/packages/web/lib/hooks/useFetchMoreScroll.tsx b/packages/web/lib/hooks/useFetchMoreScroll.tsx index 0b6e9b2f4..eecea39de 100644 --- a/packages/web/lib/hooks/useFetchMoreScroll.tsx +++ b/packages/web/lib/hooks/useFetchMoreScroll.tsx @@ -16,27 +16,16 @@ export const useFetchMore = ( const direction = scrollTop > lastScrollTop ? 'down' : 'up' setLastScrollTop(scrollTop) - console.log('direction: ', direction) - if ( direction == 'down' && scrollTop + clientHeight >= scrollHeight - scrollHeight / 3 ) { - console.log( - 'calling fetchMore: scrollTop + clientHeight >= scrollHeight - scrollHeight / 3', - scrollTop, - clientHeight, - scrollHeight, - scrollHeight / 3 - ) fetchNextPage() } else if (direction == 'up' && scrollTop < 300) { console.log('calling fetchPrevious: ', scrollTop) fetchPreviousPage() } - console.log('scrollTop: ', scrollTop) - throttleTimeout.current = undefined } diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx index e2c2bee5a..457309a4a 100644 --- a/packages/web/lib/networking/library_items/useLibraryItems.tsx +++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx @@ -87,7 +87,6 @@ export const updateItemProperty = ( .findAll({ queryKey: ['libraryItems'] }) keys.forEach((query) => { - console.log('updating query: ', query.queryKey) queryClient.setQueryData(query.queryKey, (data: any) => { if (!data) return data const updatedData = { @@ -109,7 +108,6 @@ export const updateItemProperty = ( return updatedData }) }) - console.log('updated: foundItemSlug', foundItemSlug) if (foundItemSlug || slug) { queryClient.setQueryData( ['libraryItem', foundItemSlug ?? slug], @@ -176,11 +174,8 @@ export const insertItemInCache = ( const keys = queryClient .getQueryCache() .findAll({ queryKey: ['libraryItems'] }) - console.log('keys: ', keys) - keys.forEach((query) => { queryClient.setQueryData(query.queryKey, (data: any) => { - console.log('data, data.pages', data) if (!data) return data if (data.pages.length > 0) { const firstPage = data.pages[0] as LibraryItems @@ -211,26 +206,97 @@ export const insertItemInCache = ( }) } +// const useOptimizedPageFetcher = ( +// section: string, +// folder: string | undefined, +// { limit, searchQuery, includeCount }: LibraryItemsQueryInput, +// enabled = true +// ) => { +// const [pages, setPages] = useState([]) +// const queryClient = useQueryClient() +// const fullQuery = folder +// ? (`in:${folder} use:folders ` + (searchQuery ?? '')).trim() +// : searchQuery ?? '' +// } + +interface CachedPagesData { + pageParams: string[] + pages: LibraryItems[] +} + export function useGetLibraryItems( section: string, folder: string | undefined, { limit, searchQuery, includeCount }: LibraryItemsQueryInput, enabled = true ) { + const [previousPageUnchanged, setPreviousPageUnchanged] = useState(false) + const queryClient = useQueryClient() const fullQuery = folder ? (`in:${folder} use:folders ` + (searchQuery ?? '')).trim() : searchQuery ?? '' + const queryKey = ['libraryItems', section, fullQuery] return useInfiniteQuery({ // If no folder is specified cache this as `home` - queryKey: ['libraryItems', section, fullQuery], - queryFn: async ({ queryKey, pageParam }) => { + queryKey, + queryFn: async ({ queryKey, pageParam, meta }) => { + console.log('pageParam and limit', Number(pageParam), limit) + const cached = queryClient.getQueryData(queryKey) as CachedPagesData + if (Number(pageParam) > limit) { + // check in the query cache + if (cached && previousPageUnchanged) { + // First check if the previous page had detected a modification + // if it had we keep fetching until we find a + console.log( + 'GOING TO USE cached page: ', + pageParam, + typeof pageParam, + cached.pages, + cached.pageParams, + cached.pageParams.indexOf(pageParam) + ) + const idx = cached.pageParams.indexOf(pageParam) + if (idx > -1 && idx < cached.pages.length) { + const cachedResult = cached.pages[idx] + console.log('found cached page result: ', cachedResult) + // check + // return cachedResult + } + } + } const response = (await gqlFetcher(gqlSearchQuery(includeCount), { after: pageParam, first: limit, query: fullQuery, includeContent: false, })) as LibraryItemsData + + console.log('cached: ', cached) + if (cached && cached.pageParams.indexOf(pageParam) > -1) { + const idx = cached.pageParams.indexOf(pageParam) + + console.log(' -- checking cache', idx, cached.pages[idx]) + // // if there is a cache, check to see if the page is already in it + // // and mark whether or not the page has changed + try { + const cachedIds = cached.pages[idx].edges.map((m) => m.node.id) + const resultIds = response.search.edges.map((m) => m.node.id) + const compareFunc = (a: string[], b: string[]) => + a.length === b.length && + a.every((element, index) => element === b[index]) + console.log( + 'cachedIds == resultIds', + cachedIds == resultIds, + cachedIds, + resultIds, + compareFunc(cachedIds, resultIds) + ) + setPreviousPageUnchanged(compareFunc(cachedIds, resultIds)) + } catch (err) { + console.log('error: ', err) + } + } return response.search }, enabled, diff --git a/packages/web/lib/toastHelpers.tsx b/packages/web/lib/toastHelpers.tsx index b73806f84..5343acfdd 100644 --- a/packages/web/lib/toastHelpers.tsx +++ b/packages/web/lib/toastHelpers.tsx @@ -114,8 +114,6 @@ const showToastWithAction = ( action: () => Promise, options?: ToastOptions ) => { - console.trace('show success: ', message) - return toast( ({ id }) => (