refactor: General cleanup

Author: PintoGideon

src/components/FeedOutputBrowser/useFeedBrowser.tsx

@@ -1,5 +1,5 @@
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useAppSelector } from "../../store/hooks";
 import { fetchFolders } from "../NewLibrary";
 
@@ -56,9 +56,9 @@ export const useFeedBrowser = () => {
   });
 
   // Handle pagination by incrementing the page number
-  const handlePagination = () => {
+  const handlePagination = useCallback(() => {
     setPageNumber((prevState) => prevState + 1);
-  };
+  }, []);
 
   const observerTarget = useRef(null);
 
@@ -87,7 +87,7 @@ export const useFeedBrowser = () => {
         observer.unobserve(observerTarget.current);
       }
     };
-  }, [fetchMore]);
+  }, [fetchMore, handlePagination]);
 
   useEffect(() => {
     if ((statusTitle && status.includes(statusTitle)) || finished) {
@@ -103,7 +103,7 @@ export const useFeedBrowser = () => {
         }, 3000);
       }
     }
-  }, [finished, pluginFilesPayload, statusTitle, download.error]);
+  }, [finished, statusTitle, download.error]);
 
   useEffect(() => {
     setCurrentPath(selected?.data.output_path);

src/components/NewLibrary/index.tsx

@@ -6,7 +6,7 @@ import type {
 import { Button, Grid, PageSection } from "@patternfly/react-core";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { debounce } from "lodash";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useLocation, useNavigate } from "react-router";
 import ChrisAPIClient from "../../api/chrisapiclient";
 import { useAppSelector } from "../../store/hooks";
@@ -146,7 +146,7 @@ const NewLibrary = () => {
         });
       });
     }
-  }, [data?.errorMessages]);
+  }, [api.error, data?.errorMessages]);
 
   const fetchMore =
     data?.foldersPagination?.hasNextPage ||
@@ -158,12 +158,34 @@ const NewLibrary = () => {
     navigate(url);
   }, 500);
 
-  const handlePagination = () => {
+  const handlePagination = useCallback(() => {
     setPageNumber((prevState) => prevState + 1);
-  };
+  }, []);
 
   const observerTarget = useRef(null);
 
+  // Set up an intersection observer to load more data when the user scrolls to the bottom of the page
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && fetchMore) {
+          handlePagination();
+        }
+      },
+      { threshold: 0.5 },
+    );
+
+    if (observerTarget.current) {
+      observer.observe(observerTarget.current);
+    }
+
+    return () => {
+      if (observerTarget.current) {
+        observer.unobserve(observerTarget.current);
+      }
+    };
+  }, [fetchMore, handlePagination]);
+
   if (isFirstLoad && pathname === "/library") {
     return null;
   }