From 39da8e60c1b10103e8b2d806980ec1df7e93cbfc Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 15 Aug 2024 11:39:26 +0800
Subject: [PATCH 01/33] More debugging on infinite scroll

---
 .../templates/library/LibraryContainer.tsx    | 30 +++++++++----------
 .../library_items/useLibraryItems.tsx         | 24 +++++++++++----
 2 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx
index 589dce6a3..e9d6e97de 100644
--- a/packages/web/components/templates/library/LibraryContainer.tsx
+++ b/packages/web/components/templates/library/LibraryContainer.tsx
@@ -86,7 +86,7 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
   const [searchResults, setSearchResults] = useState<SearchItem[]>([])
 
   const defaultQuery = {
-    limit: 10,
+    limit: 5,
     folder: props.folder,
     sortDescending: true,
     searchQuery: undefined,
@@ -178,22 +178,22 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
     }
   }, [libraryItems])
 
-  const processingItems = useMemo(() => {
-    return libraryItems
-      .filter((li) => li.node.state === State.PROCESSING)
-      .map((li) => li.node.id)
-  }, [libraryItems])
+  // const processingItems = useMemo(() => {
+  //   return libraryItems
+  //     .filter((li) => li.node.state === State.PROCESSING)
+  //     .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) {
diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx
index 50d1ba518..1e9bdd510 100644
--- a/packages/web/lib/networking/library_items/useLibraryItems.tsx
+++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx
@@ -218,8 +218,9 @@ export function useGetLibraryItems(
     ? (`in:${folder} use:folders ` + (searchQuery ?? '')).trim()
     : searchQuery ?? ''
 
+  console.log('fullQuery: ', fullQuery)
   return useInfiniteQuery({
-    queryKey: ['libraryItems', fullQuery],
+    queryKey: ['libraryItems', folder, fullQuery],
     queryFn: async ({ pageParam }) => {
       const response = (await gqlFetcher(gqlSearchQuery(includeCount), {
         after: pageParam,
@@ -231,14 +232,25 @@ export function useGetLibraryItems(
     },
     enabled,
     initialPageParam: '0',
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-    staleTime: 10 * 60 * 1000,
+    // maxPages: 3,
     getNextPageParam: (lastPage: LibraryItems) => {
+      console.log(
+        'lastPage.pageInfo.hasNextPage: ',
+        lastPage.pageInfo.hasNextPage,
+        'lastPage?.pageInfo?.endCursor:',
+        lastPage?.pageInfo?.endCursor
+      )
       return lastPage.pageInfo.hasNextPage
         ? lastPage?.pageInfo?.endCursor
         : undefined
     },
+    // getPreviousPageParam: (firstPage, pages) => {
+    //   return firstPage.pageInfo.hasPreviousPage
+    //     ? firstPage?.pageInfo?.startCursor
+    //     : undefined
+    //   // console.log('getPreviousPageParam: firstPage, pages', firstPage, pages)
+    //   // return undefined
+    // },
   })
 }
 
@@ -531,7 +543,9 @@ export function useRefreshProcessingItems() {
     attempt: number
     itemIds: string[]
   }) => {
-    const fullQuery = `in:all includes:${variables.itemIds.join(',')}`
+    const fullQuery = `in:all includes:${variables.itemIds
+      .slice(0, 5)
+      .join(',')}`
     const result = (await gqlFetcher(gqlSearchQuery(), {
       first: 10,
       query: fullQuery,

From 5373f163280185dee24ab2455752dc1c6dca9bf4 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 15 Aug 2024 11:56:22 +0800
Subject: [PATCH 02/33] Add a staleTime to library items query

---
 packages/web/lib/networking/library_items/useLibraryItems.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx
index 1e9bdd510..208793bfd 100644
--- a/packages/web/lib/networking/library_items/useLibraryItems.tsx
+++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx
@@ -232,7 +232,7 @@ export function useGetLibraryItems(
     },
     enabled,
     initialPageParam: '0',
-    // maxPages: 3,
+    staleTime: 5 * 60 * 1000,
     getNextPageParam: (lastPage: LibraryItems) => {
       console.log(
         'lastPage.pageInfo.hasNextPage: ',

From 9e86ddc39b2613f8a7f6a404eff35e8e157cb219 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 15 Aug 2024 12:20:24 +0800
Subject: [PATCH 03/33] Improve cache key when no query, reduce stale time

---
 .../web/lib/networking/library_items/useLibraryItems.tsx     | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx
index 208793bfd..a4a3f4725 100644
--- a/packages/web/lib/networking/library_items/useLibraryItems.tsx
+++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx
@@ -220,7 +220,8 @@ export function useGetLibraryItems(
 
   console.log('fullQuery: ', fullQuery)
   return useInfiniteQuery({
-    queryKey: ['libraryItems', folder, fullQuery],
+    // If no folder is specified cache this as `home`
+    queryKey: ['libraryItems', folder ?? 'home', fullQuery],
     queryFn: async ({ pageParam }) => {
       const response = (await gqlFetcher(gqlSearchQuery(includeCount), {
         after: pageParam,
@@ -232,7 +233,7 @@ export function useGetLibraryItems(
     },
     enabled,
     initialPageParam: '0',
-    staleTime: 5 * 60 * 1000,
+    staleTime: 60 * 1000,
     getNextPageParam: (lastPage: LibraryItems) => {
       console.log(
         'lastPage.pageInfo.hasNextPage: ',

From 5f94a2a38bfff726bfa1eaa8d0ca464d72a434b7 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 15 Aug 2024 12:35:39 +0800
Subject: [PATCH 04/33] Remove stale time on infinite query

---
 packages/web/lib/networking/library_items/useLibraryItems.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx
index a4a3f4725..aefc4c39a 100644
--- a/packages/web/lib/networking/library_items/useLibraryItems.tsx
+++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx
@@ -233,7 +233,6 @@ export function useGetLibraryItems(
     },
     enabled,
     initialPageParam: '0',
-    staleTime: 60 * 1000,
     getNextPageParam: (lastPage: LibraryItems) => {
       console.log(
         'lastPage.pageInfo.hasNextPage: ',

From 913ad0c5d4bc5dc4899552d74a2863637cb0195a Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 15 Aug 2024 13:20:29 +0800
Subject: [PATCH 05/33] More cache key debugging

---
 .../templates/library/LibraryContainer.tsx    | 22 ++++++++++++++--
 .../library_items/useLibraryItems.tsx         | 26 +++++++------------
 packages/web/pages/l/[section].tsx            |  6 +++++
 3 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx
index e9d6e97de..f774ea3bb 100644
--- a/packages/web/components/templates/library/LibraryContainer.tsx
+++ b/packages/web/components/templates/library/LibraryContainer.tsx
@@ -54,7 +54,11 @@ import { theme } from '../../tokens/stitches.config'
 import { emptyTrashMutation } from '../../../lib/networking/mutations/emptyTrashMutation'
 import { State } from '../../../lib/networking/fragments/articleFragment'
 import { useHandleAddUrl } from '../../../lib/hooks/useHandleAddUrl'
-import { QueryClient, useQueryClient } from '@tanstack/react-query'
+import {
+  InfiniteData,
+  QueryClient,
+  useQueryClient,
+} from '@tanstack/react-query'
 import { useGetViewer } from '../../../lib/networking/viewer/useGetViewer'
 
 export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
@@ -86,7 +90,7 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
   const [searchResults, setSearchResults] = useState<SearchItem[]>([])
 
   const defaultQuery = {
-    limit: 5,
+    limit: 10,
     folder: props.folder,
     sortDescending: true,
     searchQuery: undefined,
@@ -210,6 +214,20 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
     activateCard(firstItem.node.id)
   }, [libraryItems])
 
+  // const queryClient = useQueryClient()
+  // useEffect(() => {
+  //   return () => {
+  //     console.log('clearing old items')
+  //     queryClient.setQueryData(
+  //       ['libraryItems'],
+  //       (data: InfiniteData<LibraryItems, unknown>) => ({
+  //         pages: data.pages.slice(0, 1),
+  //         pageParams: data.pageParams.slice(0, 1),
+  //       })
+  //     )
+  //   }
+  // }, [])
+
   const activateCard = useCallback(
     (id: string) => {
       if (!document.getElementById(id)) {
diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx
index aefc4c39a..c898dfd91 100644
--- a/packages/web/lib/networking/library_items/useLibraryItems.tsx
+++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx
@@ -202,7 +202,6 @@ export const insertItemInCache = (
           },
         ]
         data.pages[0] = firstPage
-        console.log('data: ', data)
         return data
       }
     })
@@ -222,7 +221,8 @@ export function useGetLibraryItems(
   return useInfiniteQuery({
     // If no folder is specified cache this as `home`
     queryKey: ['libraryItems', folder ?? 'home', fullQuery],
-    queryFn: async ({ pageParam }) => {
+    queryFn: async ({ queryKey, pageParam }) => {
+      console.log('querying: ', pageParam, fullQuery, queryKey)
       const response = (await gqlFetcher(gqlSearchQuery(includeCount), {
         after: pageParam,
         first: limit,
@@ -233,24 +233,18 @@ export function useGetLibraryItems(
     },
     enabled,
     initialPageParam: '0',
-    getNextPageParam: (lastPage: LibraryItems) => {
-      console.log(
-        'lastPage.pageInfo.hasNextPage: ',
-        lastPage.pageInfo.hasNextPage,
-        'lastPage?.pageInfo?.endCursor:',
-        lastPage?.pageInfo?.endCursor
-      )
+    getNextPageParam: (lastPage: LibraryItems, pages) => {
+      console.log('getting next page: ', pages)
       return lastPage.pageInfo.hasNextPage
         ? lastPage?.pageInfo?.endCursor
         : undefined
     },
-    // getPreviousPageParam: (firstPage, pages) => {
-    //   return firstPage.pageInfo.hasPreviousPage
-    //     ? firstPage?.pageInfo?.startCursor
-    //     : undefined
-    //   // console.log('getPreviousPageParam: firstPage, pages', firstPage, pages)
-    //   // return undefined
-    // },
+    getPreviousPageParam: (firstPage, pages) => {
+      console.log('firstPage.pageInfo', firstPage?.pageInfo?.startCursor)
+      return firstPage.pageInfo.hasPreviousPage
+        ? firstPage?.pageInfo?.startCursor
+        : undefined
+    },
   })
 }
 
diff --git a/packages/web/pages/l/[section].tsx b/packages/web/pages/l/[section].tsx
index 522563e89..cb75330ec 100644
--- a/packages/web/pages/l/[section].tsx
+++ b/packages/web/pages/l/[section].tsx
@@ -45,6 +45,7 @@ export default function Home(): JSX.Element {
         // return <HomeContainer />
         return (
           <LibraryContainer
+            key={name}
             folder={undefined}
             filterFunc={(item) => {
               return (
@@ -59,6 +60,7 @@ export default function Home(): JSX.Element {
       case 'library':
         return (
           <LibraryContainer
+            key={name}
             folder="inbox"
             filterFunc={(item) => {
               return (
@@ -73,6 +75,7 @@ export default function Home(): JSX.Element {
       case 'subscriptions':
         return (
           <LibraryContainer
+            key={name}
             folder="following"
             filterFunc={(item) => {
               return (
@@ -87,6 +90,7 @@ export default function Home(): JSX.Element {
       case 'search':
         return (
           <LibraryContainer
+            key={name}
             folder={undefined}
             filterFunc={(item) => {
               console.log('item: ', item)
@@ -98,6 +102,7 @@ export default function Home(): JSX.Element {
       case 'archive':
         return (
           <LibraryContainer
+            key={name}
             folder="archive"
             filterFunc={(item) => {
               return item.state == 'ARCHIVED'
@@ -108,6 +113,7 @@ export default function Home(): JSX.Element {
       case 'trash':
         return (
           <LibraryContainer
+            key={name}
             folder="trash"
             filterFunc={(item) => {
               return item.state == 'DELETED'

From 3ceb18400cea754e9936492159ce6a6852160cfe Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 15 Aug 2024 15:24:02 +0800
Subject: [PATCH 06/33] Only allow three pages of data to be refreshed

---
 .../nav-containers/HomeContainer.tsx          |  1 +
 .../templates/library/LibraryContainer.tsx    | 43 +++++++++++--------
 .../library_items/useLibraryItems.tsx         |  4 +-
 packages/web/pages/settings/account.tsx       |  2 +-
 packages/web/pages/tools/bulk.tsx             | 16 ++++---
 5 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/packages/web/components/nav-containers/HomeContainer.tsx b/packages/web/components/nav-containers/HomeContainer.tsx
index b6f80a65f..e4dabc403 100644
--- a/packages/web/components/nav-containers/HomeContainer.tsx
+++ b/packages/web/components/nav-containers/HomeContainer.tsx
@@ -211,6 +211,7 @@ export function HomeContainer(): JSX.Element {
   const shouldFallback =
     homeData.error || (!homeData.isValidating && !hasTopPicks(homeData))
   const searchData = useGetLibraryItems(
+    'home',
     undefined,
     {
       limit: 10,
diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx
index f774ea3bb..26cda5a09 100644
--- a/packages/web/components/templates/library/LibraryContainer.tsx
+++ b/packages/web/components/templates/library/LibraryContainer.tsx
@@ -54,11 +54,7 @@ import { theme } from '../../tokens/stitches.config'
 import { emptyTrashMutation } from '../../../lib/networking/mutations/emptyTrashMutation'
 import { State } from '../../../lib/networking/fragments/articleFragment'
 import { useHandleAddUrl } from '../../../lib/hooks/useHandleAddUrl'
-import {
-  InfiniteData,
-  QueryClient,
-  useQueryClient,
-} from '@tanstack/react-query'
+import { InfiniteData, useQueryClient } from '@tanstack/react-query'
 import { useGetViewer } from '../../../lib/networking/viewer/useGetViewer'
 
 export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
@@ -125,7 +121,7 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
     fetchNextPage,
     hasNextPage,
     error: fetchItemsError,
-  } = useGetLibraryItems(props.folder, queryInputs)
+  } = useGetLibraryItems(props.folder ?? 'home', props.folder, queryInputs)
 
   useEffect(() => {
     if (queryValue.startsWith('#')) {
@@ -214,19 +210,28 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
     activateCard(firstItem.node.id)
   }, [libraryItems])
 
-  // const queryClient = useQueryClient()
-  // useEffect(() => {
-  //   return () => {
-  //     console.log('clearing old items')
-  //     queryClient.setQueryData(
-  //       ['libraryItems'],
-  //       (data: InfiniteData<LibraryItems, unknown>) => ({
-  //         pages: data.pages.slice(0, 1),
-  //         pageParams: data.pageParams.slice(0, 1),
-  //       })
-  //     )
-  //   }
-  // }, [])
+  const queryClient = useQueryClient()
+  useEffect(() => {
+    return () => {
+      const keys = queryClient
+        .getQueryCache()
+        .findAll({ queryKey: ['libraryItems', props.folder ?? 'home'] })
+
+      keys.forEach((query) => {
+        console.log('clearing old items')
+        queryClient.setQueryData(
+          query.queryKey,
+          (data: InfiniteData<LibraryItems, unknown>) => {
+            console.log('unloading data: ', data)
+            return {
+              pages: data.pages.slice(0, 3),
+              pageParams: data.pageParams.slice(0, 3),
+            }
+          }
+        )
+      })
+    }
+  }, [queryClient])
 
   const activateCard = useCallback(
     (id: string) => {
diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx
index c898dfd91..eca1eb681 100644
--- a/packages/web/lib/networking/library_items/useLibraryItems.tsx
+++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx
@@ -209,6 +209,7 @@ export const insertItemInCache = (
 }
 
 export function useGetLibraryItems(
+  section: string,
   folder: string | undefined,
   { limit, searchQuery, includeCount }: LibraryItemsQueryInput,
   enabled = true
@@ -217,10 +218,9 @@ export function useGetLibraryItems(
     ? (`in:${folder} use:folders ` + (searchQuery ?? '')).trim()
     : searchQuery ?? ''
 
-  console.log('fullQuery: ', fullQuery)
   return useInfiniteQuery({
     // If no folder is specified cache this as `home`
-    queryKey: ['libraryItems', folder ?? 'home', fullQuery],
+    queryKey: ['libraryItems', section, fullQuery],
     queryFn: async ({ queryKey, pageParam }) => {
       console.log('querying: ', pageParam, fullQuery, queryKey)
       const response = (await gqlFetcher(gqlSearchQuery(includeCount), {
diff --git a/packages/web/pages/settings/account.tsx b/packages/web/pages/settings/account.tsx
index a86ad183e..40d215c91 100644
--- a/packages/web/pages/settings/account.tsx
+++ b/packages/web/pages/settings/account.tsx
@@ -92,7 +92,7 @@ export default function Account(): JSX.Element {
     isUsernameValidationLoading,
   ])
 
-  const { data: itemsPages, isLoading } = useGetLibraryItems('all', {
+  const { data: itemsPages, isLoading } = useGetLibraryItems('search', 'all', {
     limit: 0,
     searchQuery: '',
     sortDescending: false,
diff --git a/packages/web/pages/tools/bulk.tsx b/packages/web/pages/tools/bulk.tsx
index b5083f8a4..9e82a389a 100644
--- a/packages/web/pages/tools/bulk.tsx
+++ b/packages/web/pages/tools/bulk.tsx
@@ -33,12 +33,16 @@ export default function BulkPerformer(): JSX.Element {
   const [runningState, setRunningState] = useState<RunningState>('none')
   const bulkAction = useBulkActions()
 
-  const { data: itemsPages, isLoading } = useGetLibraryItems(undefined, {
-    searchQuery: query,
-    limit: 1,
-    sortDescending: false,
-    includeCount: true,
-  })
+  const { data: itemsPages, isLoading } = useGetLibraryItems(
+    'search',
+    undefined,
+    {
+      searchQuery: query,
+      limit: 1,
+      sortDescending: false,
+      includeCount: true,
+    }
+  )
 
   useEffect(() => {
     setExpectedCount(itemsPages?.pages.find(() => true)?.pageInfo.totalCount)

From 49b66f3504d27cba472db74a41efe4b8aeb18565 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 15 Aug 2024 16:27:05 +0800
Subject: [PATCH 07/33] Remove the cache busting

---
 .../templates/library/LibraryContainer.tsx    | 49 ++++++-------------
 .../library_items/useLibraryItems.tsx         |  2 +
 .../web/pages/[username]/[slug]/index.tsx     |  2 +-
 3 files changed, 19 insertions(+), 34 deletions(-)

diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx
index 26cda5a09..97d43f8aa 100644
--- a/packages/web/components/templates/library/LibraryContainer.tsx
+++ b/packages/web/components/templates/library/LibraryContainer.tsx
@@ -56,6 +56,7 @@ import { State } from '../../../lib/networking/fragments/articleFragment'
 import { useHandleAddUrl } from '../../../lib/hooks/useHandleAddUrl'
 import { InfiniteData, useQueryClient } from '@tanstack/react-query'
 import { useGetViewer } from '../../../lib/networking/viewer/useGetViewer'
+import { Spinner } from '@phosphor-icons/react/dist/ssr'
 
 export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
 
@@ -210,29 +211,6 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
     activateCard(firstItem.node.id)
   }, [libraryItems])
 
-  const queryClient = useQueryClient()
-  useEffect(() => {
-    return () => {
-      const keys = queryClient
-        .getQueryCache()
-        .findAll({ queryKey: ['libraryItems', props.folder ?? 'home'] })
-
-      keys.forEach((query) => {
-        console.log('clearing old items')
-        queryClient.setQueryData(
-          query.queryKey,
-          (data: InfiniteData<LibraryItems, unknown>) => {
-            console.log('unloading data: ', data)
-            return {
-              pages: data.pages.slice(0, 3),
-              pageParams: data.pageParams.slice(0, 3),
-            }
-          }
-        )
-      })
-    }
-  }, [queryClient])
-
   const activateCard = useCallback(
     (id: string) => {
       if (!document.getElementById(id)) {
@@ -318,6 +296,7 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
   }, [libraryItems, activeCardId])
 
   useEffect(() => {
+    console.log('active card id: ', activeCardId)
     if (activeCardId && !alreadyScrolled.current) {
       scrollToActiveCard(activeCardId)
       alreadyScrolled.current = true
@@ -1173,16 +1152,20 @@ export function LibraryItemsLayout(
             css={{ width: '100%', mt: '$2', mb: '$4' }}
           >
             {props.hasMore ? (
-              <Button
-                style="ctaGray"
-                css={{
-                  cursor: props.isValidating ? 'not-allowed' : 'pointer',
-                }}
-                onClick={props.loadMore}
-                disabled={props.isValidating}
-              >
-                {props.isValidating ? 'Loading' : 'Load More'}
-              </Button>
+              props.isValidating ? (
+                <Spinner />
+              ) : (
+                <Button
+                  style="ctaGray"
+                  css={{
+                    cursor: props.isValidating ? 'not-allowed' : 'pointer',
+                  }}
+                  onClick={props.loadMore}
+                  disabled={props.isValidating}
+                >
+                  {props.isValidating ? 'Loading' : 'More search results'}
+                </Button>
+              )
             ) : (
               <StyledText style="caption"></StyledText>
             )}
diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx
index eca1eb681..b22335535 100644
--- a/packages/web/lib/networking/library_items/useLibraryItems.tsx
+++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx
@@ -86,6 +86,7 @@ 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 = {
@@ -107,6 +108,7 @@ export const updateItemProperty = (
       return updatedData
     })
   })
+  console.log('updated: foundItemSlug', foundItemSlug)
   if (foundItemSlug || slug) {
     queryClient.setQueryData(
       ['libraryItem', foundItemSlug ?? slug],
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index 7fcd54189..087c7ed06 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -305,7 +305,7 @@ export default function Reader(): JSX.Element {
         perform: () => {
           const navReturn = window.localStorage.getItem('nav-return')
           if (navReturn) {
-            router.push(navReturn)
+            router.push(navReturn, navReturn, { scroll: false })
             return
           }
           const query = window.sessionStorage.getItem('q')

From 641c64e108c7438c5262eda449c66bc6ae7186e4 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 15 Aug 2024 16:51:08 +0800
Subject: [PATCH 08/33] Try max pages 5

---
 packages/web/lib/networking/library_items/useLibraryItems.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx
index b22335535..f1a408f19 100644
--- a/packages/web/lib/networking/library_items/useLibraryItems.tsx
+++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx
@@ -234,6 +234,7 @@ export function useGetLibraryItems(
       return response.search
     },
     enabled,
+    maxPages: 5,
     initialPageParam: '0',
     getNextPageParam: (lastPage: LibraryItems, pages) => {
       console.log('getting next page: ', pages)

From e3fd98e47c00679675be52eed94f64217f99a4c4 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 16 Aug 2024 10:47:48 +0800
Subject: [PATCH 09/33] More debugging

---
 packages/web/components/templates/library/LibraryContainer.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx
index 97d43f8aa..5b5733dcd 100644
--- a/packages/web/components/templates/library/LibraryContainer.tsx
+++ b/packages/web/components/templates/library/LibraryContainer.tsx
@@ -158,6 +158,7 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
   }, [router.asPath])
 
   const libraryItems = useMemo(() => {
+    console.log('library items: ', itemsPages)
     const items =
       itemsPages?.pages
         .flatMap((ad: LibraryItems) => {

From 9a2490253cbcec6e84379e4b598b9349d9d1c66c Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 16 Aug 2024 15:55:36 +0800
Subject: [PATCH 10/33] Improve fetchMore, add debug

---
 .../templates/library/LibraryContainer.tsx      | 10 +++++++++-
 .../library_items/useLibraryItems.tsx           | 17 ++++++++---------
 packages/web/pages/_app.tsx                     |  2 +-
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx
index 5b5733dcd..58b20ab57 100644
--- a/packages/web/components/templates/library/LibraryContainer.tsx
+++ b/packages/web/components/templates/library/LibraryContainer.tsx
@@ -118,6 +118,7 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
   const {
     data: itemsPages,
     isLoading,
+    isFetchingNextPage,
     isFetching,
     fetchNextPage,
     hasNextPage,
@@ -677,6 +678,13 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
     }
   })
 
+  console.log(
+    'isFetching && !isLoading, isFetchingNextPage',
+    isFetching,
+    isLoading,
+    isFetchingNextPage
+  )
+
   const setIsChecked = useCallback(
     (itemId: string, set: boolean) => {
       if (set && checkedItems.indexOf(itemId) === -1) {
@@ -824,7 +832,7 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
       loadMore={fetchNextPage}
       hasMore={hasNextPage ?? false}
       hasData={!!itemsPages}
-      isValidating={isLoading}
+      isValidating={isLoading || isFetchingNextPage}
       fetchItemsError={!!fetchItemsError}
       labelsTarget={labelsTarget}
       setLabelsTarget={setLabelsTarget}
diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx
index f1a408f19..096c30040 100644
--- a/packages/web/lib/networking/library_items/useLibraryItems.tsx
+++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx
@@ -224,7 +224,7 @@ export function useGetLibraryItems(
     // If no folder is specified cache this as `home`
     queryKey: ['libraryItems', section, fullQuery],
     queryFn: async ({ queryKey, pageParam }) => {
-      console.log('querying: ', pageParam, fullQuery, queryKey)
+      console.log('queryKey, pageParam', queryKey, pageParam)
       const response = (await gqlFetcher(gqlSearchQuery(includeCount), {
         after: pageParam,
         first: limit,
@@ -234,20 +234,19 @@ export function useGetLibraryItems(
       return response.search
     },
     enabled,
-    maxPages: 5,
     initialPageParam: '0',
     getNextPageParam: (lastPage: LibraryItems, pages) => {
-      console.log('getting next page: ', 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
-    },
+    // getPreviousPageParam: (firstPage, pages) => {
+    //   console.log('firstPage.pageInfo', firstPage?.pageInfo?.startCursor)
+    //   return firstPage.pageInfo.hasPreviousPage
+    //     ? firstPage?.pageInfo?.startCursor
+    //     : undefined
+    // },
   })
 }
 
diff --git a/packages/web/pages/_app.tsx b/packages/web/pages/_app.tsx
index 234192d3b..2a0b38aa9 100644
--- a/packages/web/pages/_app.tsx
+++ b/packages/web/pages/_app.tsx
@@ -33,7 +33,7 @@ import React from 'react'
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      gcTime: 1000 * 60 * 60 * 48, // 48 hours
+      gcTime: 1000 * 60 * 60 * 4, // 4hrs
     },
   },
 })

From 675e17da792f2b24df443a0baeaa9d91b4444ef4 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 16 Aug 2024 17:16:29 +0800
Subject: [PATCH 11/33] Add pending items

---
 .../templates/library/LibraryContainer.tsx    | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx
index 58b20ab57..9d03a431f 100644
--- a/packages/web/components/templates/library/LibraryContainer.tsx
+++ b/packages/web/components/templates/library/LibraryContainer.tsx
@@ -181,22 +181,22 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
     }
   }, [libraryItems])
 
-  // const processingItems = useMemo(() => {
-  //   return libraryItems
-  //     .filter((li) => li.node.state === State.PROCESSING)
-  //     .map((li) => li.node.id)
-  // }, [libraryItems])
+  const processingItems = useMemo(() => {
+    return libraryItems
+      .filter((li) => li.node.state === State.PROCESSING)
+      .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) {

From 095e75f7bda0369944eda7c9096a0b4f8ebd9ec0 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Sat, 17 Aug 2024 14:19:26 +0800
Subject: [PATCH 12/33] Attempt at using maxPages

---
 .../templates/library/LibraryContainer.tsx    | 35 ++++++++++++-------
 packages/web/lib/hooks/useFetchMoreScroll.tsx | 30 +++++++++++-----
 .../library_items/useLibraryItems.tsx         | 28 ++++++++++-----
 3 files changed, 64 insertions(+), 29 deletions(-)

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

From 35c7954809b5fb7ed9704e20b49406cb37dfea93 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Sat, 17 Aug 2024 14:23:37 +0800
Subject: [PATCH 13/33] Comment out old containers temporarily

---
 packages/web/components/nav-containers/HighlightsContainer.tsx  | 2 +-
 .../web/components/templates/discoverFeed/DiscoverContainer.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web/components/nav-containers/HighlightsContainer.tsx b/packages/web/components/nav-containers/HighlightsContainer.tsx
index bc35a9d9f..04c5207f1 100644
--- a/packages/web/components/nav-containers/HighlightsContainer.tsx
+++ b/packages/web/components/nav-containers/HighlightsContainer.tsx
@@ -59,7 +59,7 @@ export function HighlightsContainer(): JSX.Element {
     setSize(size + 1)
   }, [isLoading, hasMore, setSize, size])
 
-  useFetchMore(handleFetchMore)
+  // useFetchMore(handleFetchMore)
 
   const highlights = useMemo(() => {
     if (!data) {
diff --git a/packages/web/components/templates/discoverFeed/DiscoverContainer.tsx b/packages/web/components/templates/discoverFeed/DiscoverContainer.tsx
index 76174e877..9ece5196b 100644
--- a/packages/web/components/templates/discoverFeed/DiscoverContainer.tsx
+++ b/packages/web/components/templates/discoverFeed/DiscoverContainer.tsx
@@ -89,7 +89,7 @@ export function DiscoverContainer(): JSX.Element {
     }
     setPage(page + 1)
   }, [page, isLoading])
-  useFetchMore(handleFetchMore)
+  // useFetchMore(handleFetchMore)
 
   const handleSaveDiscover = async (
     discoverArticleId: string,

From b0e7737e18d7782d224a19e455f4292caa9a6ef2 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Sat, 17 Aug 2024 14:43:22 +0800
Subject: [PATCH 14/33] Add getPreviousPage

---
 .../library_items/useLibraryItems.tsx         | 21 ++++---------------
 1 file changed, 4 insertions(+), 17 deletions(-)

diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx
index 6fde24046..de46d5334 100644
--- a/packages/web/lib/networking/library_items/useLibraryItems.tsx
+++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx
@@ -241,23 +241,10 @@ export function useGetLibraryItems(
         ? lastPage?.pageInfo?.endCursor
         : 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
+    getPreviousPageParam: (firstPage: LibraryItems, pages) => {
+      return firstPage.pageInfo.hasPreviousPage
+        ? firstPage?.pageInfo?.startCursor
+        : undefined
     },
   })
 }

From 3435edfb51e8336cfdb09cdf5bbd13cafe8e67a4 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Sat, 17 Aug 2024 15:21:57 +0800
Subject: [PATCH 15/33] Remove maxPages

---
 .../web/lib/networking/library_items/useLibraryItems.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx
index de46d5334..8a21c78e7 100644
--- a/packages/web/lib/networking/library_items/useLibraryItems.tsx
+++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx
@@ -234,18 +234,15 @@ export function useGetLibraryItems(
       return response.search
     },
     enabled,
-    maxPages: 3,
     initialPageParam: '0',
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
     getNextPageParam: (lastPage: LibraryItems, pages) => {
       return lastPage.pageInfo.hasNextPage
         ? lastPage?.pageInfo?.endCursor
         : undefined
     },
-    getPreviousPageParam: (firstPage: LibraryItems, pages) => {
-      return firstPage.pageInfo.hasPreviousPage
-        ? firstPage?.pageInfo?.startCursor
-        : undefined
-    },
   })
 }
 

From 975ae6bee566ab5deaaaf289f30c9e6f6c46467c Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Sat, 17 Aug 2024 15:36:27 +0800
Subject: [PATCH 16/33] TEst out react-infinite-scroll-component

---
 .../templates/library/LibraryContainer.tsx    | 19 ++++++++
 packages/web/package.json                     |  1 +
 yarn.lock                                     | 43 +++++++------------
 3 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx
index 6c53bf13b..80c07059d 100644
--- a/packages/web/components/templates/library/LibraryContainer.tsx
+++ b/packages/web/components/templates/library/LibraryContainer.tsx
@@ -57,6 +57,7 @@ import { useHandleAddUrl } from '../../../lib/hooks/useHandleAddUrl'
 import { InfiniteData, useQueryClient } from '@tanstack/react-query'
 import { useGetViewer } from '../../../lib/networking/viewer/useGetViewer'
 import { Spinner } from '@phosphor-icons/react/dist/ssr'
+import InfiniteScroll from 'react-infinite-scroll-component'
 
 export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
 
@@ -809,6 +810,24 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
     [itemsPages, multiSelectMode, checkedItems]
   )
 
+  return (
+    <InfiniteScroll
+      dataLength={libraryItems} //This is important field to render the next data
+      next={fetchNextPage}
+      hasMore={hasNextPage}
+      loader={<h4>Loading...</h4>}
+      endMessage={
+        <p style={{ textAlign: 'center' }}>
+          <b>Yay! You have seen it all</b>
+        </p>
+      }
+    >
+      {libraryItems.map((item) => {
+        return <Box key={item.node.id}>{item.node.title}</Box>
+      })}
+    </InfiniteScroll>
+  )
+
   return (
     <HomeFeedGrid
       folder={props.folder}
diff --git a/packages/web/package.json b/packages/web/package.json
index 6d6ba26e4..23a10bc0c 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -61,6 +61,7 @@
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-hot-toast": "^2.1.1",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-input-autosize": "^3.0.0",
     "react-markdown": "^8.0.6",
     "react-markdown-editor-lite": "^1.3.4",
diff --git a/yarn.lock b/yarn.lock
index 9e721740f..cc7584c27 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -27058,6 +27058,13 @@ react-hot-toast@^2.1.1:
   dependencies:
     goober "^2.1.10"
 
+react-infinite-scroll-component@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz#7e511e7aa0f728ac3e51f64a38a6079ac522407f"
+  integrity sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==
+  dependencies:
+    throttle-debounce "^2.1.0"
+
 react-input-autosize@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85"
@@ -29421,7 +29428,7 @@ string-template@~0.2.1:
   resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add"
   integrity sha1-QpMuWYo1LQH8IuwzZ9nYTuxsmt0=
 
-"string-width-cjs@npm:string-width@^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -29447,15 +29454,6 @@ string-width@^1.0.1:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.2.2, string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
 string-width@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
@@ -29610,7 +29608,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -29645,13 +29643,6 @@ strip-ansi@^6.0.0:
   dependencies:
     ansi-regex "^5.0.0"
 
-strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2"
@@ -30233,6 +30224,11 @@ throat@^6.0.1:
   resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.1.tgz#d514fedad95740c12c2d7fc70ea863eb51ade375"
   integrity sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==
 
+throttle-debounce@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz#fd31865e66502071e411817e241465b3e9c372e2"
+  integrity sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==
+
 throttle-debounce@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb"
@@ -32351,7 +32347,7 @@ workerpool@6.2.1:
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.2.1.tgz#46fc150c17d826b86a008e5a4508656777e9c343"
   integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -32377,15 +32373,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From 1e2c3b1f8f98ebba23170dd94fab0d512fc19cbb Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Sat, 17 Aug 2024 15:40:33 +0800
Subject: [PATCH 17/33] Fix typo

---
 packages/web/components/templates/library/LibraryContainer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx
index 80c07059d..89db8d040 100644
--- a/packages/web/components/templates/library/LibraryContainer.tsx
+++ b/packages/web/components/templates/library/LibraryContainer.tsx
@@ -812,7 +812,7 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
 
   return (
     <InfiniteScroll
-      dataLength={libraryItems} //This is important field to render the next data
+      dataLength={libraryItems.length}
       next={fetchNextPage}
       hasMore={hasNextPage}
       loader={<h4>Loading...</h4>}

From 1e0df9016c6332a23fc364b0da1c09665fd78597 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Sat, 17 Aug 2024 15:54:19 +0800
Subject: [PATCH 18/33] More debugging

---
 .../components/templates/library/LibraryContainer.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx
index 89db8d040..5042f57b3 100644
--- a/packages/web/components/templates/library/LibraryContainer.tsx
+++ b/packages/web/components/templates/library/LibraryContainer.tsx
@@ -823,7 +823,16 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
       }
     >
       {libraryItems.map((item) => {
-        return <Box key={item.node.id}>{item.node.title}</Box>
+        return (
+          <Box
+            key={item.node.id}
+            onClick={() => {
+              router.push(`${viewerData?.profile.username}/${item.node.slug}`)
+            }}
+          >
+            {item.node.title}
+          </Box>
+        )
       })}
     </InfiniteScroll>
   )

From f80570a1acabe470eeb8da5498d31a7795690cf9 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Sat, 17 Aug 2024 16:13:15 +0800
Subject: [PATCH 19/33] More debug

---
 packages/web/components/templates/library/LibraryContainer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx
index 5042f57b3..b6f16d409 100644
--- a/packages/web/components/templates/library/LibraryContainer.tsx
+++ b/packages/web/components/templates/library/LibraryContainer.tsx
@@ -830,7 +830,7 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
               router.push(`${viewerData?.profile.username}/${item.node.slug}`)
             }}
           >
-            {item.node.title}
+            {item.cursor}: {item.node.title}
           </Box>
         )
       })}

From 541aa859d21f8b8d1a23c1b94b99dd612f65cacf Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Sat, 17 Aug 2024 17:07:14 +0800
Subject: [PATCH 20/33] Use staleTime

---
 .../web/components/templates/library/LibraryContainer.tsx     | 2 +-
 packages/web/lib/networking/library_items/useLibraryItems.tsx | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx
index b6f16d409..6e006615b 100644
--- a/packages/web/components/templates/library/LibraryContainer.tsx
+++ b/packages/web/components/templates/library/LibraryContainer.tsx
@@ -827,7 +827,7 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
           <Box
             key={item.node.id}
             onClick={() => {
-              router.push(`${viewerData?.profile.username}/${item.node.slug}`)
+              router.push(`/${viewerData?.profile.username}/${item.node.slug}`)
             }}
           >
             {item.cursor}: {item.node.title}
diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx
index 8a21c78e7..e2c2bee5a 100644
--- a/packages/web/lib/networking/library_items/useLibraryItems.tsx
+++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx
@@ -235,9 +235,7 @@ export function useGetLibraryItems(
     },
     enabled,
     initialPageParam: '0',
-    refetchOnMount: false,
-    refetchOnReconnect: false,
-    refetchOnWindowFocus: false,
+    staleTime: 10_000,
     getNextPageParam: (lastPage: LibraryItems, pages) => {
       return lastPage.pageInfo.hasNextPage
         ? lastPage?.pageInfo?.endCursor

From 4bfcbde65da53d93e1323ba3c2b415d72e45720a Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 19 Aug 2024 12:42:43 +0800
Subject: [PATCH 21/33] 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<void>,
   options?: ToastOptions
 ) => {
-  console.trace('show success: ', message)
-
   return toast(
     ({ id }) => (
       <FullWidthContainer alignment="center">

From e6a220c984c328bf8aebbd9ca6a1447b6c37546f Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 19 Aug 2024 13:00:14 +0800
Subject: [PATCH 22/33] Remove stale time to force refreshed, start using the
 cached result

---
 packages/web/lib/networking/library_items/useLibraryItems.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx
index 457309a4a..96fa96626 100644
--- a/packages/web/lib/networking/library_items/useLibraryItems.tsx
+++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx
@@ -260,8 +260,7 @@ export function useGetLibraryItems(
           if (idx > -1 && idx < cached.pages.length) {
             const cachedResult = cached.pages[idx]
             console.log('found cached page result: ', cachedResult)
-            // check
-            // return cachedResult
+            return cachedResult
           }
         }
       }
@@ -301,7 +300,6 @@ export function useGetLibraryItems(
     },
     enabled,
     initialPageParam: '0',
-    staleTime: 10_000,
     getNextPageParam: (lastPage: LibraryItems, pages) => {
       return lastPage.pageInfo.hasNextPage
         ? lastPage?.pageInfo?.endCursor

From ca7b515488fe2f6ab007ae847e1097c29843e908 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 19 Aug 2024 13:21:06 +0800
Subject: [PATCH 23/33] Remove some of the cache logging to make debugging
 easier

---
 .../networking/library_items/useLibraryItems.tsx  | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx
index 96fa96626..72500f493 100644
--- a/packages/web/lib/networking/library_items/useLibraryItems.tsx
+++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx
@@ -245,6 +245,11 @@ export function useGetLibraryItems(
       const cached = queryClient.getQueryData(queryKey) as CachedPagesData
       if (Number(pageParam) > limit) {
         // check in the query cache
+        console.log(
+          'cached, previousPageUnchanged',
+          cached,
+          previousPageUnchanged
+        )
         if (cached && previousPageUnchanged) {
           // First check if the previous page had detected a modification
           // if it had we keep fetching until we find a
@@ -271,11 +276,8 @@ export function useGetLibraryItems(
         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 {
@@ -284,13 +286,6 @@ export function useGetLibraryItems(
           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)

From 45c7a57696297eb02b4c5c8810882e0c255d4930 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 19 Aug 2024 13:51:41 +0800
Subject: [PATCH 24/33] More debugging

---
 packages/web/lib/networking/library_items/useLibraryItems.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx
index 72500f493..0afefda6d 100644
--- a/packages/web/lib/networking/library_items/useLibraryItems.tsx
+++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx
@@ -286,7 +286,9 @@ export function useGetLibraryItems(
           const compareFunc = (a: string[], b: string[]) =>
             a.length === b.length &&
             a.every((element, index) => element === b[index])
-          setPreviousPageUnchanged(compareFunc(cachedIds, resultIds))
+          const unchanged = compareFunc(cachedIds, resultIds)
+          console.log('previous unchanged', unchanged, cachedIds, resultIds)
+          setPreviousPageUnchanged(unchanged)
         } catch (err) {
           console.log('error: ', err)
         }

From 8f480d654a187a84d96ba91eccecdce6140e351c Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 19 Aug 2024 14:08:25 +0800
Subject: [PATCH 25/33] More debugging

---
 packages/web/lib/networking/library_items/useLibraryItems.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx
index 0afefda6d..25dfb5dc8 100644
--- a/packages/web/lib/networking/library_items/useLibraryItems.tsx
+++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx
@@ -276,6 +276,10 @@ export function useGetLibraryItems(
         includeContent: false,
       })) as LibraryItemsData
 
+      console.log(
+        'cached.pageParams.indexOf(pageParam)',
+        cached.pageParams.indexOf(pageParam)
+      )
       if (cached && cached.pageParams.indexOf(pageParam) > -1) {
         const idx = cached.pageParams.indexOf(pageParam)
         // // if there is a cache, check to see if the page is already in it

From 2282a6adde5360e51ed7a54ed7617c2e53e48f88 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 19 Aug 2024 14:38:03 +0800
Subject: [PATCH 26/33] Set cache info in the cache pageInfo section

---
 .../library_items/useLibraryItems.tsx         | 55 ++++++++++++-------
 1 file changed, 35 insertions(+), 20 deletions(-)

diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx
index 25dfb5dc8..3dcdfc9cb 100644
--- a/packages/web/lib/networking/library_items/useLibraryItems.tsx
+++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx
@@ -230,7 +230,6 @@ export function useGetLibraryItems(
   { limit, searchQuery, includeCount }: LibraryItemsQueryInput,
   enabled = true
 ) {
-  const [previousPageUnchanged, setPreviousPageUnchanged] = useState(false)
   const queryClient = useQueryClient()
   const fullQuery = folder
     ? (`in:${folder} use:folders ` + (searchQuery ?? '')).trim()
@@ -244,28 +243,33 @@ export function useGetLibraryItems(
       console.log('pageParam and limit', Number(pageParam), limit)
       const cached = queryClient.getQueryData(queryKey) as CachedPagesData
       if (Number(pageParam) > limit) {
-        // check in the query cache
-        console.log(
-          'cached, previousPageUnchanged',
-          cached,
-          previousPageUnchanged
-        )
-        if (cached && previousPageUnchanged) {
+        // check in the query cache, if there is an item for this page
+        // in the query page, check if pageIndex - 1 was unchanged since
+        // the last query, this will determine if we should refetch this
+        // page and subsequent pages.
+        if (cached) {
+          const idx = cached.pageParams.indexOf(pageParam)
+
           // 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)
+            cached.pages[idx - 1].pageInfo.wasUnchanged
           )
-          const idx = cached.pageParams.indexOf(pageParam)
-          if (idx > -1 && idx < cached.pages.length) {
+          if (
+            idx > 0 &&
+            idx < cached.pages.length &&
+            cached.pages[idx - 1].pageInfo.wasUnchanged
+          ) {
             const cachedResult = cached.pages[idx]
             console.log('found cached page result: ', cachedResult)
-            return cachedResult
+            return {
+              edges: cachedResult.edges,
+              pageInfo: {
+                ...cachedResult.pageInfo,
+                wasUnchanged: true,
+              },
+            }
           }
         }
       }
@@ -280,6 +284,7 @@ export function useGetLibraryItems(
         'cached.pageParams.indexOf(pageParam)',
         cached.pageParams.indexOf(pageParam)
       )
+      let wasUnchanged = false
       if (cached && cached.pageParams.indexOf(pageParam) > -1) {
         const idx = cached.pageParams.indexOf(pageParam)
         // // if there is a cache, check to see if the page is already in it
@@ -290,14 +295,20 @@ export function useGetLibraryItems(
           const compareFunc = (a: string[], b: string[]) =>
             a.length === b.length &&
             a.every((element, index) => element === b[index])
-          const unchanged = compareFunc(cachedIds, resultIds)
-          console.log('previous unchanged', unchanged, cachedIds, resultIds)
-          setPreviousPageUnchanged(unchanged)
+          wasUnchanged = compareFunc(cachedIds, resultIds)
+          console.log('previous unchanged', wasUnchanged, cachedIds, resultIds)
         } catch (err) {
           console.log('error: ', err)
         }
       }
-      return response.search
+      return {
+        edges: response.search.edges,
+        pageInfo: {
+          ...response.search.pageInfo,
+          wasUnchanged,
+          lastUpdated: new Date(),
+        },
+      }
     },
     enabled,
     initialPageParam: '0',
@@ -1098,6 +1109,10 @@ export type PageInfo = {
   startCursor: string
   endCursor: string
   totalCount: number
+
+  // used internally for some cache handling
+  lastUpdated?: Date
+  wasUnchanged?: boolean
 }
 
 type SetLinkArchivedInput = {

From e2a49aec71f0f5ec89285f8ee31f7754e89da28c Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 19 Aug 2024 15:10:20 +0800
Subject: [PATCH 27/33] Trim old pages from the cache

---
 .../library_items/useLibraryItems.tsx         | 31 +++++++++++++------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx
index 3dcdfc9cb..517fe0ba9 100644
--- a/packages/web/lib/networking/library_items/useLibraryItems.tsx
+++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx
@@ -252,10 +252,6 @@ export function useGetLibraryItems(
 
           // 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: ',
-            cached.pages[idx - 1].pageInfo.wasUnchanged
-          )
           if (
             idx > 0 &&
             idx < cached.pages.length &&
@@ -279,11 +275,6 @@ export function useGetLibraryItems(
         query: fullQuery,
         includeContent: false,
       })) as LibraryItemsData
-
-      console.log(
-        'cached.pageParams.indexOf(pageParam)',
-        cached.pageParams.indexOf(pageParam)
-      )
       let wasUnchanged = false
       if (cached && cached.pageParams.indexOf(pageParam) > -1) {
         const idx = cached.pageParams.indexOf(pageParam)
@@ -317,6 +308,28 @@ export function useGetLibraryItems(
         ? lastPage?.pageInfo?.endCursor
         : undefined
     },
+    select: (data) => {
+      const now = new Date()
+
+      // Filter pages based on the lastUpdated condition
+      const filteredPages = data.pages.slice(0, 5).concat(
+        data.pages.slice(5).filter((page, index) => {
+          if (page.pageInfo?.lastUpdated) {
+            const lastUpdatedDate = new Date(page.pageInfo.lastUpdated)
+            const diffMinutes =
+              (now.getTime() - lastUpdatedDate.getTime()) / (1000 * 60)
+            console.log(`page: ${index} age: ${diffMinutes}`)
+            return diffMinutes <= 10
+          }
+          return true
+        })
+      )
+
+      return {
+        ...data,
+        pages: filteredPages,
+      }
+    },
   })
 }
 

From 82f5c5017c876f2e1584329e387518395e22416e Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 19 Aug 2024 15:30:47 +0800
Subject: [PATCH 28/33] log filteredPages

---
 packages/web/lib/networking/library_items/useLibraryItems.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx
index 517fe0ba9..a95830ce7 100644
--- a/packages/web/lib/networking/library_items/useLibraryItems.tsx
+++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx
@@ -324,6 +324,7 @@ export function useGetLibraryItems(
           return true
         })
       )
+      console.log('setting filteredPages: ', filteredPages)
 
       return {
         ...data,

From 64cb4eb2497d6d3f7ec81d2d603a6931c35b682e Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 19 Aug 2024 15:35:02 +0800
Subject: [PATCH 29/33] Instead of checking limit use initial index for cache
 checks

---
 .../web/lib/networking/library_items/useLibraryItems.tsx    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/web/lib/networking/library_items/useLibraryItems.tsx b/packages/web/lib/networking/library_items/useLibraryItems.tsx
index a95830ce7..d9fa8ccbc 100644
--- a/packages/web/lib/networking/library_items/useLibraryItems.tsx
+++ b/packages/web/lib/networking/library_items/useLibraryItems.tsx
@@ -231,6 +231,8 @@ export function useGetLibraryItems(
   enabled = true
 ) {
   const queryClient = useQueryClient()
+
+  const INITIAL_INDEX = '0'
   const fullQuery = folder
     ? (`in:${folder} use:folders ` + (searchQuery ?? '')).trim()
     : searchQuery ?? ''
@@ -242,7 +244,7 @@ export function useGetLibraryItems(
     queryFn: async ({ queryKey, pageParam, meta }) => {
       console.log('pageParam and limit', Number(pageParam), limit)
       const cached = queryClient.getQueryData(queryKey) as CachedPagesData
-      if (Number(pageParam) > limit) {
+      if (pageParam !== INITIAL_INDEX) {
         // check in the query cache, if there is an item for this page
         // in the query page, check if pageIndex - 1 was unchanged since
         // the last query, this will determine if we should refetch this
@@ -302,7 +304,7 @@ export function useGetLibraryItems(
       }
     },
     enabled,
-    initialPageParam: '0',
+    initialPageParam: INITIAL_INDEX,
     getNextPageParam: (lastPage: LibraryItems, pages) => {
       return lastPage.pageInfo.hasNextPage
         ? lastPage?.pageInfo?.endCursor

From 5f59a1d36475839870ffb8cbb48bdf5a82e38bc5 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 19 Aug 2024 15:58:56 +0800
Subject: [PATCH 30/33] Can go back to old items list now

---
 .../templates/library/LibraryContainer.tsx    | 83 +++++++++----------
 packages/web/lib/hooks/useFetchMoreScroll.tsx |  8 +-
 2 files changed, 42 insertions(+), 49 deletions(-)

diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx
index 60b335ebd..5c1d1a12a 100644
--- a/packages/web/components/templates/library/LibraryContainer.tsx
+++ b/packages/web/components/templates/library/LibraryContainer.tsx
@@ -675,25 +675,18 @@ 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()
-  //     }
-  //   }
-  // )
-
-  // console.log(
-  //   'isFetching && !isLoading, isFetchingNextPage',
-  //   isFetching,
-  //   isLoading,
-  //   isFetchingNextPage
-  // )
+  useFetchMore(
+    () => {
+      if (!isFetching && !isLoading && hasNextPage) {
+        fetchNextPage()
+      }
+    },
+    () => {
+      if (!isFetching && !isLoading && hasPreviousPage) {
+        fetchPreviousPage()
+      }
+    }
+  )
 
   const setIsChecked = useCallback(
     (itemId: string, set: boolean) => {
@@ -810,32 +803,32 @@ export function LibraryContainer(props: LibraryContainerProps): JSX.Element {
     [itemsPages, multiSelectMode, checkedItems]
   )
 
-  return (
-    <InfiniteScroll
-      dataLength={libraryItems.length}
-      next={fetchNextPage}
-      hasMore={hasNextPage}
-      loader={<h4>Loading...</h4>}
-      endMessage={
-        <p style={{ textAlign: 'center' }}>
-          <b>Yay! You have seen it all</b>
-        </p>
-      }
-    >
-      {libraryItems.map((item) => {
-        return (
-          <Box
-            key={item.node.id}
-            onClick={() => {
-              router.push(`/${viewerData?.profile.username}/${item.node.slug}`)
-            }}
-          >
-            {item.cursor}: {item.node.title}
-          </Box>
-        )
-      })}
-    </InfiniteScroll>
-  )
+  // return (
+  //   <InfiniteScroll
+  //     dataLength={libraryItems.length}
+  //     next={fetchNextPage}
+  //     hasMore={hasNextPage}
+  //     loader={<h4>Loading...</h4>}
+  //     endMessage={
+  //       <p style={{ textAlign: 'center' }}>
+  //         <b>Yay! You have seen it all</b>
+  //       </p>
+  //     }
+  //   >
+  //     {libraryItems.map((item) => {
+  //       return (
+  //         <Box
+  //           key={item.node.id}
+  //           onClick={() => {
+  //             router.push(`/${viewerData?.profile.username}/${item.node.slug}`)
+  //           }}
+  //         >
+  //           {item.cursor}: {item.node.title}
+  //         </Box>
+  //       )
+  //     })}
+  //   </InfiniteScroll>
+  // )
 
   return (
     <HomeFeedGrid
diff --git a/packages/web/lib/hooks/useFetchMoreScroll.tsx b/packages/web/lib/hooks/useFetchMoreScroll.tsx
index eecea39de..943a67a18 100644
--- a/packages/web/lib/hooks/useFetchMoreScroll.tsx
+++ b/packages/web/lib/hooks/useFetchMoreScroll.tsx
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react'
 
 export const useFetchMore = (
   fetchNextPage: () => void,
-  fetchPreviousPage: () => void,
+  // fetchPreviousPage: () => void,
   delay = 500
 ): void => {
   const [first, setFirst] = useState(true)
@@ -21,10 +21,10 @@ export const useFetchMore = (
         scrollTop + clientHeight >= scrollHeight - scrollHeight / 3
       ) {
         fetchNextPage()
-      } else if (direction == 'up' && scrollTop < 300) {
+      } /* else if (direction == 'up' && scrollTop < 300) {
         console.log('calling fetchPrevious: ', scrollTop)
         fetchPreviousPage()
-      }
+      } */
 
       throttleTimeout.current = undefined
     }
@@ -45,5 +45,5 @@ export const useFetchMore = (
     return () => {
       window.removeEventListener('scroll', handleScroll)
     }
-  }, [fetchNextPage, fetchPreviousPage, delay, first, setFirst])
+  }, [fetchNextPage, /* fetchPreviousPage, */ delay, first, setFirst])
 }

From 529a81dd8aac7b2b9123054e3009935e6fac60bc Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 19 Aug 2024 16:06:10 +0800
Subject: [PATCH 31/33] Dont need previous fetching anymore

---
 .../templates/library/LibraryContainer.tsx        | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx
index 5c1d1a12a..2aaa5adf9 100644
--- a/packages/web/components/templates/library/LibraryContainer.tsx
+++ b/packages/web/components/templates/library/LibraryContainer.tsx
@@ -675,18 +675,11 @@ 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()
     }
-  )
+  })
 
   const setIsChecked = useCallback(
     (itemId: string, set: boolean) => {

From ca1dba7bd61d16468418d6bd03bafdcc52a01fa4 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 19 Aug 2024 16:21:34 +0800
Subject: [PATCH 32/33] Remove fetchPreviousPage from fetchMore

---
 .../nav-containers/HighlightsContainer.tsx          |  2 +-
 packages/web/lib/hooks/useFetchMoreScroll.tsx       | 13 +++----------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/packages/web/components/nav-containers/HighlightsContainer.tsx b/packages/web/components/nav-containers/HighlightsContainer.tsx
index 04c5207f1..bc35a9d9f 100644
--- a/packages/web/components/nav-containers/HighlightsContainer.tsx
+++ b/packages/web/components/nav-containers/HighlightsContainer.tsx
@@ -59,7 +59,7 @@ export function HighlightsContainer(): JSX.Element {
     setSize(size + 1)
   }, [isLoading, hasMore, setSize, size])
 
-  // useFetchMore(handleFetchMore)
+  useFetchMore(handleFetchMore)
 
   const highlights = useMemo(() => {
     if (!data) {
diff --git a/packages/web/lib/hooks/useFetchMoreScroll.tsx b/packages/web/lib/hooks/useFetchMoreScroll.tsx
index 943a67a18..93bf9a557 100644
--- a/packages/web/lib/hooks/useFetchMoreScroll.tsx
+++ b/packages/web/lib/hooks/useFetchMoreScroll.tsx
@@ -1,10 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 
-export const useFetchMore = (
-  fetchNextPage: () => void,
-  // fetchPreviousPage: () => void,
-  delay = 500
-): void => {
+export const useFetchMore = (fetchNextPage: () => void, delay = 500): void => {
   const [first, setFirst] = useState(true)
   const [lastScrollTop, setLastScrollTop] = useState(0)
   const throttleTimeout = useRef<NodeJS.Timeout | undefined>(undefined)
@@ -21,10 +17,7 @@ export const useFetchMore = (
         scrollTop + clientHeight >= scrollHeight - scrollHeight / 3
       ) {
         fetchNextPage()
-      } /* else if (direction == 'up' && scrollTop < 300) {
-        console.log('calling fetchPrevious: ', scrollTop)
-        fetchPreviousPage()
-      } */
+      }
 
       throttleTimeout.current = undefined
     }
@@ -45,5 +38,5 @@ export const useFetchMore = (
     return () => {
       window.removeEventListener('scroll', handleScroll)
     }
-  }, [fetchNextPage, /* fetchPreviousPage, */ delay, first, setFirst])
+  }, [fetchNextPage, delay, first, setFirst])
 }

From 587df5c3a56d45657deb7ebd3996dd1d4a6aa495 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 19 Aug 2024 16:37:24 +0800
Subject: [PATCH 33/33] Remove unused component

---
 .../templates/library/LibraryContainer.tsx           |  2 --
 packages/web/package.json                            |  1 -
 yarn.lock                                            | 12 ------------
 3 files changed, 15 deletions(-)

diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx
index 2aaa5adf9..f344e609f 100644
--- a/packages/web/components/templates/library/LibraryContainer.tsx
+++ b/packages/web/components/templates/library/LibraryContainer.tsx
@@ -54,10 +54,8 @@ import { theme } from '../../tokens/stitches.config'
 import { emptyTrashMutation } from '../../../lib/networking/mutations/emptyTrashMutation'
 import { State } from '../../../lib/networking/fragments/articleFragment'
 import { useHandleAddUrl } from '../../../lib/hooks/useHandleAddUrl'
-import { InfiniteData, useQueryClient } from '@tanstack/react-query'
 import { useGetViewer } from '../../../lib/networking/viewer/useGetViewer'
 import { Spinner } from '@phosphor-icons/react/dist/ssr'
-import InfiniteScroll from 'react-infinite-scroll-component'
 
 export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
 
diff --git a/packages/web/package.json b/packages/web/package.json
index 23a10bc0c..6d6ba26e4 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -61,7 +61,6 @@
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-hot-toast": "^2.1.1",
-    "react-infinite-scroll-component": "^6.1.0",
     "react-input-autosize": "^3.0.0",
     "react-markdown": "^8.0.6",
     "react-markdown-editor-lite": "^1.3.4",
diff --git a/yarn.lock b/yarn.lock
index cc7584c27..1b90621f6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -27058,13 +27058,6 @@ react-hot-toast@^2.1.1:
   dependencies:
     goober "^2.1.10"
 
-react-infinite-scroll-component@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz#7e511e7aa0f728ac3e51f64a38a6079ac522407f"
-  integrity sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==
-  dependencies:
-    throttle-debounce "^2.1.0"
-
 react-input-autosize@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-3.0.0.tgz#6b5898c790d4478d69420b55441fcc31d5c50a85"
@@ -30224,11 +30217,6 @@ throat@^6.0.1:
   resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.1.tgz#d514fedad95740c12c2d7fc70ea863eb51ade375"
   integrity sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==
 
-throttle-debounce@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz#fd31865e66502071e411817e241465b3e9c372e2"
-  integrity sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==
-
 throttle-debounce@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb"