feat: wip, enable infinite scroll

HHS · Jan 23, 2025 · 09cd4c9 · 09cd4c9
1 parent bb8de13
commit 09cd4c9
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 63 deletions.
diff --git a/frontend/src/components/CANs/CANDetailView/CANDetailView.jsx b/frontend/src/components/CANs/CANDetailView/CANDetailView.jsx
@@ -1,9 +1,7 @@
-import React from "react";
-import InfiniteScroll from "../../Agreements/AgreementDetails/InfiniteScroll";
-import LogItem from "../../UI/LogItem";
 import Tag from "../../UI/Tag";
 import Term from "../../UI/Term";
 import TermTag from "../../UI/Term/TermTag";
+import CanHistoryPanel from "../CANHistoryPanel";
 /**
  * @typedef {Object} CANDetailViewProps
  * @property {string} description
@@ -13,7 +11,7 @@ import TermTag from "../../UI/Term/TermTag";
  * @property {import("../../Users/UserTypes").SafeUser[]} teamLeaders
  * @property {string} divisionDirectorFullName
  * @property {string} divisionName
- * @property {import("../../CANs/CANTypes").CanHistoryItem[]} canHistoryItems
+ * @property {number} canId
  */
 /**
  * This component needs to wrapped in a <dl> element.
@@ -22,7 +20,7 @@ import TermTag from "../../UI/Term/TermTag";
  * @returns {JSX.Element} - The rendered component.
  */
 const CANDetailView = ({
-    canHistoryItems = [],
+    canId,
     description,
     number,
     nickname,
@@ -31,8 +29,6 @@ const CANDetailView = ({
     divisionDirectorFullName,
     divisionName
 }) => {
-    const [isLoading, setIsLoading] = React.useState(false);
-
     return (
         <div className="grid-row font-12px">
             {/* // NOTE: Left Column */}
@@ -48,34 +44,7 @@ const CANDetailView = ({
                 </dl>
                 <section data-cy="history">
                     <h3 className="text-base-dark margin-top-3 text-normal font-12px">History</h3>
-                    <div
-                        className="overflow-y-scroll force-show-scrollbars"
-                        style={{ height: "15rem" }}
-                    >
-                        {canHistoryItems.length > 0 ? (
-                            <ul
-                                className="usa-list--unstyled"
-                                data-cy="can-history-list"
-                            >
-                                {canHistoryItems.map((canHistoryItem) => (
-                                    <LogItem
-                                        key={canHistoryItem.id}
-                                        title={canHistoryItem.history_title}
-                                        createdOn={canHistoryItem.timestamp}
-                                        message={canHistoryItem.history_message}
-                                    />
-                                ))}
-                                <InfiniteScroll
-                                    fetchMoreData={() => {
-                                        setIsLoading(true);
-                                    }}
-                                    isLoading={isLoading}
-                                />
-                            </ul>
-                        ) : (
-                            <p>No History</p>
-                        )}
-                    </div>
+                    <CanHistoryPanel canId={canId} />
                 </section>
             </div>
             {/* // NOTE: Right Column */}

diff --git a/frontend/src/components/CANs/CANHistoryPanel/CANHistoryPanel.jsx b/frontend/src/components/CANs/CANHistoryPanel/CANHistoryPanel.jsx
@@ -1,30 +1,99 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import InfiniteScroll from "../../Agreements/AgreementDetails/InfiniteScroll";
+import { useGetCanHistoryQuery } from "../../../api/opsAPI";
+import LogItem from "../../UI/LogItem";
 
-const CanHistoryPanel = ({ canId, fetchMoreData, isLoading, stopped }) => {
-    const [canHistory, setCantHistory] = useState([]);
-    console.log(canHistory, setCantHistory, canId);
+/**
+ * @typedef {Object} CanHistoryPanelProps
+ * @property {number} canId
+ */
+
+/**
+ * @param {CanHistoryPanelProps} props
+ */
+
+const CanHistoryPanel = ({ canId }) => {
+    const [offset, setOffset] = useState(0);
+    const [isFetching, setIsFetching] = useState(false);
+    const [stopped, setStopped] = useState(false);
+    /**
+     * @type {CanHistoryItem[]}
+     */
+    const initialHistory = [];
+    /**
+     * @typedef {import('../../CANs/CANTypes').CanHistoryItem} CanHistoryItem
+     * @type {[CanHistoryItem[], React.Dispatch<React.SetStateAction<CanHistoryItem[]>>]}
+     */
+    const [cantHistory, setCanHistory] = useState(initialHistory);
+
+    const {
+        data: canHistoryItems,
+        error,
+        isLoading
+    } = useGetCanHistoryQuery({
+        canId,
+        limit: 5,
+        offset: offset
+    });
+
+    useEffect(() => {
+        if (canHistoryItems && canHistoryItems.length > 0) {
+            console.log({ canHistoryItems });
+            setCanHistory([...cantHistory, ...canHistoryItems]);
+        }
+        if (error) {
+            setStopped(true);
+        }
+    }, [canHistoryItems]);
+
+    const fetchMoreData = () => {
+        if (stopped) return;
+        if (!isFetching && !stopped) {
+            setIsFetching(true);
+            setOffset(offset + 5);
+            setIsFetching(false);
+        }
+    };
+
+    if (isLoading) {
+        return <div>Loading...</div>;
+    }
 
     return (
-        <div
-            className="overflow-y-scroll force-show-scrollbars"
-            style={{ height: "15rem" }}
-            data-cy="agreement-history-container"
-            role="region"
-            aria-live="polite"
-            aria-label="Agreement History"
-            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-            tabIndex={0}
-        >
-            <>
-                {!stopped && (
-                    <InfiniteScroll
-                        fetchMoreData={fetchMoreData}
-                        isLoading={isLoading}
-                    />
-                )}
-            </>
-        </div>
+        <>
+            {cantHistory.length > 0 ? (
+                <div
+                    className="overflow-y-scroll force-show-scrollbars"
+                    style={{ height: "15rem" }}
+                    data-cy="can-history-container"
+                    role="region"
+                    aria-live="polite"
+                    aria-label="CAN History"
+                >
+                    <ul
+                        className="usa-list--unstyled"
+                        data-cy="can-history-list"
+                    >
+                        {cantHistory.map((item) => (
+                            <LogItem
+                                key={item.id}
+                                title={item.history_title}
+                                createdOn={item.timestamp}
+                                message={item.history_message}
+                            />
+                        ))}
+                    </ul>
+                    {!stopped && (
+                        <InfiniteScroll
+                            fetchMoreData={fetchMoreData}
+                            isLoading={isFetching}
+                        />
+                    )}
+                </div>
+            ) : (
+                <p>No History</p>
+            )}
+        </>
     );
 };
 

diff --git a/frontend/src/pages/cans/detail/CanDetail.jsx b/frontend/src/pages/cans/detail/CanDetail.jsx
@@ -48,15 +48,15 @@ const CanDetail = ({
 }) => {
     const { data: division, isSuccess } = useGetDivisionQuery(divisionId);
     const divisionDirectorFullName = useGetUserFullNameFromId(isSuccess ? division.division_director_id : null);
-    const { data: canHistoryItems, isLoading } = useGetCanHistoryQuery({ canId, limit: 5, offset: 0 });
+    //const { data: canHistoryItems, isLoading } = useGetCanHistoryQuery({ canId, limit: 5, offset: 0 });
 
     const currentFiscalYear = getCurrentFiscalYear();
     const showButton = isBudgetTeamMember && fiscalYear === Number(currentFiscalYear);
     const divisionName = division?.display_name ?? NO_DATA;
 
-    if (isLoading) {
-        return <div>Loading...</div>;
-    }
+    // if (isLoading) {
+    //     return <div>Loading...</div>;
+    // }
 
     return (
         <article>
@@ -91,7 +91,7 @@ const CanDetail = ({
             ) : (
                 <>
                     <CANDetailView
-                        canHistoryItems={canHistoryItems}
+                        canId={canId}
                         description={description}
                         number={canNumber}
                         nickname={nickname}