fix: reset lastPageReached state on search change for infinite scrolling

amalv · Dec 29, 2023 · d868c69 · d868c69
1 parent a0083c2
commit d868c69
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/src/apolloClient.ts b/src/apolloClient.ts
@@ -7,7 +7,7 @@ import {
 import { setContext } from "@apollo/client/link/context";
 
 export const darkModeVar = makeVar(
-  window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
+  window?.matchMedia("(prefers-color-scheme: dark)")?.matches
 );
 
 const API_URL =

diff --git a/src/components/LibraryPage/components/Books/hooks/useBooks.ts b/src/components/LibraryPage/components/Books/hooks/useBooks.ts
@@ -100,19 +100,25 @@ export const useBooks = ({ search, limit }: UseBooksProps) => {
   const [lastPageReached, setLastPageReached] = useState(false);
   const [isErrorSnackbarOpen, setIsErrorSnackbarOpen] = useState(false);
   // Fetch books
-  const { loading, error, data, fetchMore } = useQuery<BooksData, BooksVars>(
-    BOOKS_QUERY,
-    {
-      variables: { title: search, author: search, limit, cursor: "0" },
-    }
-  );
+  const { loading, error, data, fetchMore, refetch } = useQuery<
+    BooksData,
+    BooksVars
+  >(BOOKS_QUERY, {
+    variables: { title: search, author: search, limit, cursor: "0" },
+  });
 
   useEffect(() => {
     if (error) {
       setIsErrorSnackbarOpen(true);
     }
   }, [error]);
 
+  useEffect(() => {
+    setLastPageReached(false);
+    lastPageReachedRef.current = false;
+    refetch({ title: search, author: search, limit, cursor: "0" });
+  }, [search, refetch, limit]);
+
   const handleCloseSnackbar = getCloseSnackbarHandler(setIsErrorSnackbarOpen);
   const updateQuery = getUpdateQuery(setLastPageReached);
   const loader = useRef(null);