Resolve infinite scroll issue in Resource page

src/components/Kanban/Board.tsx

@@ -9,11 +9,13 @@ import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
+import useDebounce from "@/hooks/useDebounce";
+
 import request from "@/Utils/request/request";
 import { QueryRoute } from "@/Utils/request/types";
 import { QueryOptions } from "@/Utils/request/useQuery";
 
-interface KanbanBoardProps<T extends { id: string }> {
+export interface KanbanBoardProps<T extends { id: string }> {
   title?: ReactNode;
   onDragEnd: OnDragEndResponder<string>;
   sections: {
@@ -57,7 +59,7 @@ export default function KanbanBoard<T extends { id: string }>(
         </div>
       </div>
       <DragDropContext onDragEnd={props.onDragEnd}>
-        <div className="h-full overflow-scroll" ref={board}>
+        <div className="h-full overflow-auto" ref={board}>
           <div className="flex items-stretch px-0 pb-2">
             {props.sections.map((section, i) => (
               <KanbanSection<T>
@@ -74,7 +76,7 @@ export default function KanbanBoard<T extends { id: string }>(
   );
 }
 
-export function KanbanSection<T extends { id: string }>(
+function KanbanSection<T extends { id: string }>(
   props: Omit<KanbanBoardProps<T>, "sections" | "onDragEnd"> & {
     section: KanbanBoardProps<T>["sections"][number];
     boardRef: RefObject<HTMLDivElement>;
@@ -92,20 +94,25 @@ export function KanbanSection<T extends { id: string }>(
   const defaultLimit = 14;
   const { t } = useTranslation();
 
-  // should be replaced with useInfiniteQuery when we move over to react query
-
   const fetchNextPage = async (refresh: boolean = false) => {
     if (!refresh && (fetchingNextPage || !hasMore)) return;
-    if (refresh) setPages([]);
+    if (refresh) {
+      setPages([]);
+      setOffset(0);
+    }
     const offsetToUse = refresh ? 0 : offset;
     setFetchingNextPage(true);
     const res = await request(options.route, {
       ...options.options,
-      query: { ...options.options?.query, offsetToUse, limit: defaultLimit },
+      query: {
+        ...options.options?.query,
+        offset: offsetToUse,
+        limit: defaultLimit,
+      },
     });
+    if (res.error) return;
     const newPages = refresh ? [] : [...pages];
     const page = Math.floor(offsetToUse / defaultLimit);
-    if (res.error) return;
     newPages[page] = (res.data as any).results;
     setPages(newPages);
     setHasMore(!!(res.data as any)?.next);
@@ -116,25 +123,29 @@ export function KanbanSection<T extends { id: string }>(
 
   const items = pages.flat();
 
-  useEffect(() => {
-    const onBoardReachEnd = async () => {
-      const sectionElementHeight =
-        sectionRef.current?.getBoundingClientRect().height;
-      const scrolled = props.boardRef.current?.scrollTop;
-      // if user has scrolled 3/4th of the current items
-      if (
-        scrolled &&
-        sectionElementHeight &&
-        scrolled > sectionElementHeight * (3 / 4)
-      ) {
-        fetchNextPage();
-      }
-    };
+  const debouncedScroll = useDebounce(() => {
+    if (
+      !sectionRef.current ||
+      !props.boardRef.current ||
+      fetchingNextPage ||
+      !hasMore
+    )
+      return;
 
-    props.boardRef.current?.addEventListener("scroll", onBoardReachEnd);
+    const scrollTop = props.boardRef.current.scrollTop;
+    const visibleHeight = props.boardRef.current.offsetHeight;
+    const sectionHeight = sectionRef.current.offsetHeight;
+
+    if (scrollTop + visibleHeight >= sectionHeight - 100) {
+      fetchNextPage();
+    }
+  }, 200);
+
+  useEffect(() => {
+    props.boardRef.current?.addEventListener("scroll", debouncedScroll);
     return () =>
-      props.boardRef.current?.removeEventListener("scroll", onBoardReachEnd);
-  }, [props.boardRef, fetchingNextPage, hasMore]);
+      props.boardRef.current?.removeEventListener("scroll", debouncedScroll);
+  }, [fetchingNextPage, hasMore, props.boardRef, debouncedScroll]);
 
   useEffect(() => {
     fetchNextPage(true);
@@ -145,9 +156,7 @@ export function KanbanSection<T extends { id: string }>(
       {(provided) => (
         <div
           ref={provided.innerRef}
-          className={
-            "relative mr-2 w-[300px] shrink-0 rounded-xl bg-secondary-200"
-          }
+          className="relative mr-2 w-[300px] shrink-0 rounded-xl bg-secondary-200"
         >
           <div className="sticky top-0 rounded-xl bg-secondary-200 pt-2">
             <div className="mx-2 flex items-center justify-between rounded-lg border border-secondary-300 bg-white p-4">
@@ -165,22 +174,20 @@ export function KanbanSection<T extends { id: string }>(
                 {t("no_results_found")}
               </div>
             )}
-            {items
-              .filter((item) => item)
-              .map((item, i) => (
-                <Draggable draggableId={item.id} key={i} index={i}>
-                  {(provided) => (
-                    <div
-                      ref={provided.innerRef}
-                      {...provided.draggableProps}
-                      {...provided.dragHandleProps}
-                      className="mx-2 mt-2 w-[284px] rounded-lg border border-secondary-300 bg-white"
-                    >
-                      {props.itemRender(item)}
-                    </div>
-                  )}
-                </Draggable>
-              ))}
+            {items.map((item, i) => (
+              <Draggable draggableId={item.id} key={i} index={i}>
+                {(provided) => (
+                  <div
+                    ref={provided.innerRef}
+                    {...provided.draggableProps}
+                    {...provided.dragHandleProps}
+                    className="mx-2 mt-2 w-[284px] rounded-lg border border-secondary-300 bg-white"
+                  >
+                    {props.itemRender(item)}
+                  </div>
+                )}
+              </Draggable>
+            ))}
             {fetchingNextPage && (
               <div className="mt-2 h-[300px] w-[284px] animate-pulse rounded-lg bg-secondary-300" />
             )}
@@ -190,5 +197,3 @@ export function KanbanSection<T extends { id: string }>(
     </Droppable>
   );
 }
-
-export type KanbanBoardType = typeof KanbanBoard;

src/components/Resource/ResourceBoard.tsx

@@ -1,5 +1,5 @@
 import { navigate } from "raviger";
-import { Suspense, lazy, useState } from "react";
+import React, { Suspense, lazy, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -12,7 +12,7 @@ import PageTitle from "@/components/Common/PageTitle";
 import Tabs from "@/components/Common/Tabs";
 import { ResourceModel } from "@/components/Facility/models";
 import SearchInput from "@/components/Form/SearchInput";
-import type { KanbanBoardType } from "@/components/Kanban/Board";
+import type { KanbanBoardProps } from "@/components/Kanban/Board";
 import BadgesList from "@/components/Resource/ResourceBadges";
 import ResourceBlock from "@/components/Resource/ResourceBlock";
 import { formatFilter } from "@/components/Resource/ResourceCommons";
@@ -25,9 +25,17 @@ import { RESOURCE_CHOICES } from "@/common/constants";
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
 
-const KanbanBoard = lazy(
+// Helper function to type lazy-loaded components
+function lazyWithProps<T>(
+  factory: () => Promise<{ default: React.ComponentType<T> }>,
+) {
+  return lazy(factory) as React.LazyExoticComponent<React.ComponentType<T>>;
+}
+
+// Correctly lazy-load KanbanBoard with its props
+const KanbanBoard = lazyWithProps<KanbanBoardProps<ResourceModel>>(
   () => import("@/components/Kanban/Board"),
-) as KanbanBoardType;
+);
 
 const resourceStatusOptions = RESOURCE_CHOICES.map((obj) => obj.text);
 
@@ -39,8 +47,7 @@ export default function BoardView() {
     limit: -1,
     cacheBlacklist: ["title"],
   });
-  const [boardFilter, setBoardFilter] = useState(ACTIVE);
-  // eslint-disable-next-line
+  const [boardFilter, setBoardFilter] = useState(resourceStatusOptions);
   const appliedFilters = formatFilter(qParams);
   const { t } = useTranslation();
 
@@ -103,7 +110,7 @@ export default function BoardView() {
         </div>
       </div>
       <Suspense fallback={<Loading />}>
-        <KanbanBoard<ResourceModel>
+        <KanbanBoard
           title={<BadgesList {...{ appliedFilters, FilterBadges }} />}
           sections={boardFilter.map((board) => ({
             id: board,
@@ -127,7 +134,7 @@ export default function BoardView() {
                 />
               </h3>
             ),
-            fetchOptions: (id) => ({
+            fetchOptions: (id: string) => ({
               route: routes.listResourceRequests,
               options: {
                 query: formatFilter({
@@ -143,7 +150,9 @@ export default function BoardView() {
                 `/resource/${result.draggableId}/update?status=${result.destination?.droppableId}`,
               );
           }}
-          itemRender={(resource) => <ResourceBlock resource={resource} />}
+          itemRender={(resource: ResourceModel) => (
+            <ResourceBlock resource={resource} />
+          )}
         />
       </Suspense>
 

src/components/Shifting/ShiftingBoard.tsx

@@ -1,4 +1,5 @@
 import careConfig from "@careConfig";
+import { DropResult } from "@hello-pangea/dnd";
 import { navigate } from "raviger";
 import { Suspense, lazy, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -14,7 +15,7 @@ import PageTitle from "@/components/Common/PageTitle";
 import Tabs from "@/components/Common/Tabs";
 import { ShiftingModel } from "@/components/Facility/models";
 import SearchInput from "@/components/Form/SearchInput";
-import type { KanbanBoardType } from "@/components/Kanban/Board";
+import type { KanbanBoardProps } from "@/components/Kanban/Board";
 import BadgesList from "@/components/Shifting/ShiftingBadges";
 import ShiftingBlock from "@/components/Shifting/ShiftingBlock";
 import { formatFilter } from "@/components/Shifting/ShiftingCommons";
@@ -30,9 +31,15 @@ import {
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
 
-const KanbanBoard = lazy(
+function lazyWithProps<T>(
+  factory: () => Promise<{ default: React.ComponentType<T> }>,
+) {
+  return lazy(factory) as React.LazyExoticComponent<React.ComponentType<T>>;
+}
+
+const KanbanBoard = lazyWithProps<KanbanBoardProps<ShiftingModel>>(
   () => import("@/components/Kanban/Board"),
-) as KanbanBoardType;
+);
 
 export default function BoardView() {
   const { qParams, updateQuery, FilterBadges, advancedFilter } = useFilters({
@@ -133,7 +140,7 @@ export default function BoardView() {
         </div>
       </div>
       <Suspense fallback={<Loading />}>
-        <KanbanBoard<ShiftingModel>
+        <KanbanBoard
           title={<BadgesList {...{ qParams, FilterBadges }} />}
           sections={boardFilter.map((board) => ({
             id: board.text,
@@ -157,7 +164,7 @@ export default function BoardView() {
                 />
               </h3>
             ),
-            fetchOptions: (id) => ({
+            fetchOptions: (id: string) => ({
               route: routes.listShiftRequests,
               options: {
                 query: formatFilter({
@@ -167,13 +174,18 @@ export default function BoardView() {
               },
             }),
           }))}
-          onDragEnd={(result) => {
-            if (result.source.droppableId !== result.destination?.droppableId)
+          onDragEnd={(result: DropResult) => {
+            // Ensure destination is not null
+            if (
+              result.destination &&
+              result.source.droppableId !== result.destination.droppableId
+            ) {
               navigate(
-                `/shifting/${result.draggableId}/update?status=${result.destination?.droppableId}`,
+                `/shifting/${result.draggableId}/update?status=${result.destination.droppableId}`,
               );
+            }
           }}
-          itemRender={(shift) => (
+          itemRender={(shift: ShiftingModel) => (
             <ShiftingBlock
               onTransfer={() => setModalFor(shift)}
               shift={shift}

src/hooks/useDebounce.ts

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from "react";
+
+export default function useDebounce<T extends any[]>(
+  callback: (...args: T) => void,
+  delay: number,
+) {
+  const callbackRef = useRef(callback);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  const debouncedCallback = (...args: T) => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      callbackRef.current(...args);
+    }, delay);
+  };
+  return debouncedCallback;
+}