UI temp remove polling

tavern/internal/www/src/App.tsx

@@ -9,7 +9,6 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import 'react-virtualized/styles.css';
 import { TagContextProvider } from "./context/TagContext";
 import { AuthorizationContextProvider } from "./context/AuthorizationContext";
-import { PollingProvider } from "./context/PollingContext";
 import Tasks from "./pages/tasks/Tasks";
 import HostList from "./pages/host-list/HostList";
 import HostDetails from "./pages/host-details/HostDetails";
@@ -81,13 +80,11 @@ export const App = () => {
   return (
     <ChakraProvider theme={theme}>
       <AuthorizationContextProvider>
-        <PollingProvider>
           <TagContextProvider>
             <UserPreferencesContextProvider>
               <RouterProvider router={router} />
             </UserPreferencesContextProvider>
           </TagContextProvider>
-        </PollingProvider>
       </AuthorizationContextProvider>
     </ChakraProvider>
   )

tavern/internal/www/src/components/page-wrapper/FullSidebarNav.tsx

@@ -3,7 +3,6 @@ import { classNames } from '../../utils/utils';
 import logo from '../../assets/eldrich.png';
 import { ArrowLeftOnRectangleIcon } from '@heroicons/react/24/outline';
 import { usePageNavigation } from './usePageNavigation';
-import { PollingCountdown } from '../../context/PollingContext';
 
 type FullSidebarNavProps = {
     currNavItem?: string;
@@ -74,7 +73,6 @@ const FullSidebarNav = ({ currNavItem, handleSidebarMinimized }: FullSidebarNavP
                         </li>
                     </ul>
                 </nav>
-                <PollingCountdown variant="full" />
             </div>
         </div>
     );

tavern/internal/www/src/components/page-wrapper/MinimizedSidebarNav.tsx

@@ -3,7 +3,6 @@ import { classNames } from '../../utils/utils';
 import { ArrowRightOnRectangleIcon } from '@heroicons/react/24/outline';
 import logo from '../../assets/eldrich.png';
 import { usePageNavigation } from './usePageNavigation';
-import { PollingCountdown } from '../../context/PollingContext';
 
 type MinimizedSidebarNavProps = {
     currNavItem?: string;
@@ -63,7 +62,6 @@ const MinimizedSidebarNav = ({ currNavItem, handleSidebarMinimized }: MinimizedS
                     </ul>
                 </nav>
             </div>
-            <PollingCountdown variant="minimal" />
             <div className="my-8">
                 <a href='/'>
                     <img

tavern/internal/www/src/components/page-wrapper/MobileNav.tsx

@@ -7,7 +7,6 @@ import {
 import { Link } from 'react-router-dom';
 import { classNames } from '../../utils/utils';
 import { usePageNavigation } from './usePageNavigation';
-import { PollingCountdown } from '../../context/PollingContext';
 
 type MobileNavProps = {
     sidebarOpen: boolean;
@@ -113,7 +112,6 @@ const MobileNav = ({ handleSidebarOpen, sidebarOpen, currNavItem }: MobileNavPro
                                             </li>
                                         </ul>
                                     </nav>
-                                    <PollingCountdown variant="full" />
                                 </div>
                             </Dialog.Panel>
                         </Transition.Child>

tavern/internal/www/src/components/tavern-base-ui/table/TablePagination.tsx

@@ -8,22 +8,30 @@ type Props = {
   page: number;
   setPage: any;
   rowLimit: number;
+  loading?: boolean;
 }
 export default function TablePagination(props: Props) {
-  const { totalCount, pageInfo, refetchTable, page, setPage, rowLimit } = props;
+  const { totalCount, pageInfo, refetchTable, page, setPage, rowLimit, loading = false } = props;
 
   function handlePreviousClick() {
-    if (refetchTable && pageInfo.hasPreviousPage) {
-      setPage((page: number) => page - 1);
+    if (page <= 1) return;
+
+    setPage((prevPage: number) => Math.max(1, prevPage - 1));
+    if (refetchTable && pageInfo.startCursor) {
       refetchTable(null, pageInfo.startCursor);
     }
   }
+
   function handleNextClick() {
-    if (refetchTable && pageInfo.hasNextPage) {
-      setPage((page: number) => page + 1);
+    const maxPage = getPageCount();
+    if (page >= maxPage) return;
+
+    setPage((prevPage: number) => Math.min(maxPage, prevPage + 1));
+    if (refetchTable && pageInfo.endCursor) {
       refetchTable(pageInfo.endCursor, null);
     }
   }
+
   const getPageCount = () => {
     return Math.ceil(totalCount / rowLimit);
   }
@@ -47,14 +55,14 @@ export default function TablePagination(props: Props) {
         <Button
           buttonVariant="outline"
           buttonStyle={{ color: 'gray', size: "md" }}
-          disabled={!pageInfo.hasPreviousPage}
+          disabled={page <= 1 || loading}
           onClick={() => handlePreviousClick()}
         >
           Previous
         </Button>
         <Button
           buttonVariant="outline"
-          disabled={!pageInfo.hasNextPage}
+          disabled={page >= getPageCount() || loading}
           buttonStyle={{ color: 'gray', size: "md" }}
           onClick={() => handleNextClick()}
         >

tavern/internal/www/src/components/tavern-base-ui/table/__tests__/TablePagination.test.tsx

@@ -62,12 +62,11 @@ describe('TablePagination', () => {
 
   describe('Button states', () => {
     it.each([
-      { hasPreviousPage: false, hasNextPage: true, expectedPrevDisabled: true, expectedNextDisabled: false },
-      { hasPreviousPage: true, hasNextPage: false, expectedPrevDisabled: false, expectedNextDisabled: true },
-    ])('should set button states based on pageInfo (prev: $hasPreviousPage, next: $hasNextPage)',
-      ({ hasPreviousPage, hasNextPage, expectedPrevDisabled, expectedNextDisabled }) => {
-      const pageInfo = { ...mockPageInfo, hasPreviousPage, hasNextPage };
-      render(<TablePagination {...defaultProps} pageInfo={pageInfo} />);
+      { page: 1, expectedPrevDisabled: true, expectedNextDisabled: false },
+      { page: 10, expectedPrevDisabled: false, expectedNextDisabled: true },
+    ])('should set button states based on page position (page: $page)',
+      ({ page, expectedPrevDisabled, expectedNextDisabled }) => {
+      render(<TablePagination {...defaultProps} page={page} />);
 
       const previousButton = screen.getByTestId('button-previous');
       const nextButton = screen.getByTestId('button-next');
@@ -89,10 +88,9 @@ describe('TablePagination', () => {
   describe('Navigation callbacks', () => {
     it('should call refetchTable with startCursor on Previous click', async () => {
       const user = userEvent.setup();
-      const pageInfo = { ...mockPageInfo, hasPreviousPage: true };
       const mockRefetch = vi.fn();
 
-      render(<TablePagination {...defaultProps} pageInfo={pageInfo} refetchTable={mockRefetch} />);
+      render(<TablePagination {...defaultProps} page={5} refetchTable={mockRefetch} />);
 
       const previousButton = screen.getByTestId('button-previous');
       await user.click(previousButton);

tavern/internal/www/src/pages/host-details/components/BeaconTable.tsx

@@ -10,7 +10,6 @@ import Badge from "../../../components/tavern-base-ui/badge/Badge";
 import { BeaconEdge } from "../../../utils/interfacesQuery";
 
 const BeaconTable = ({ beacons }: { beacons: Array<BeaconEdge> }) => {
-    console.log(beacons);
     const nav = useNavigate();
     const currentDate = new Date();
     const princialColors = Object.values(PrincipalAdminTypes);

tavern/internal/www/src/pages/host-details/components/HostTaskTab.tsx

@@ -12,6 +12,7 @@ const HostTaskTab = () => {
     const {
         data,
         loading,
+        initialLoading,
         error,
         updateTaskList,
         page,
@@ -22,7 +23,7 @@ const HostTaskTab = () => {
         <TableWrapper
             title="Tasks"
             totalItems={data?.tasks?.totalCount}
-            loading={loading}
+            loading={initialLoading}
             error={error}
             table={
                 <div className="w-full flex flex-col gap-4 my-4">
@@ -41,6 +42,7 @@ const HostTaskTab = () => {
                     page={page}
                     setPage={setPage}
                     rowLimit={TableRowLimit.TaskRowLimit}
+                    loading={loading}
                 />
             }
         />

tavern/internal/www/src/pages/host-details/useHostTasks.ts

@@ -1,10 +1,10 @@
-import { useQuery } from "@apollo/client";
-import { useCallback, useEffect, useState } from "react";
+import { useQuery, NetworkStatus } from "@apollo/client";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { PageNavItem, TableRowLimit } from "../../utils/enums";
 import { GET_TASK_QUERY } from "../../utils/queries";
-import { useFilters } from "../../context/FilterContext";
+import { Filters, useFilters } from "../../context/FilterContext";
 import { constructHostTaskFilterQuery } from "../../utils/constructQueryUtils";
-import { Cursor } from "../../utils/interfacesQuery";
+import { Cursor, OrderByField } from "../../utils/interfacesQuery";
 import { useSorts } from "../../context/SortContext";
 import { useTags } from "../../context/TagContext";
 
@@ -15,62 +15,69 @@ export const useHostTasks = (id?: string) => {
   const { lastFetchedTimestamp } = useTags();
   const taskSort = sorts[PageNavItem.tasks];
 
-  const constructDefaultQuery = useCallback((afterCursor?: Cursor, beforeCursor?: Cursor) => {
-    const defaultRowLimit = TableRowLimit.TaskRowLimit;
-    const filterQueryFields = constructHostTaskFilterQuery(filters, lastFetchedTimestamp);
-
-    const query = {
-      "where": {
-        "hasBeaconWith": {
-          "hasHostWith": {
-            "id": id
-          }
-        },
-        ...filterQueryFields && filterQueryFields.hasTasksWith,
-      },
-      "first": beforeCursor ? null : defaultRowLimit,
-      "last": beforeCursor ? defaultRowLimit : null,
-      "after": afterCursor ? afterCursor : null,
-      "before": beforeCursor ? beforeCursor : null,
-      ...(taskSort && { orderBy: [taskSort] })
-    } as any;
-
-    return query;
-  }, [id, filters, taskSort, lastFetchedTimestamp]);
-
+  const queryVariables = useMemo(
+    () => getDefaultHostTaskQuery(filters, undefined, undefined, id, taskSort, lastFetchedTimestamp),
+    [filters, id, taskSort, lastFetchedTimestamp]
+  );
 
-  const { loading, error, data, refetch } = useQuery(
+  const { data, previousData, error, refetch, networkStatus, loading } = useQuery(
     GET_TASK_QUERY,
     {
-      variables: constructDefaultQuery(),
+      variables: queryVariables,
       notifyOnNetworkStatusChange: true,
+      fetchPolicy: 'cache-and-network',
     }
   );
 
   const updateTaskList = useCallback((afterCursor?: Cursor, beforeCursor?: Cursor) => {
-    const query = constructDefaultQuery(afterCursor, beforeCursor);
-    return refetch(query);
-  }, [constructDefaultQuery, refetch]);
+    return refetch(
+      getDefaultHostTaskQuery(filters, afterCursor, beforeCursor, id, taskSort, lastFetchedTimestamp)
+    );
+  }, [filters, id, taskSort, lastFetchedTimestamp, refetch]);
 
   useEffect(() => {
-    const abortController = new AbortController();
-    updateTaskList();
-
-    return () => {
-      abortController.abort();
-    };
-  }, [updateTaskList]);
+    setPage(prev => prev !== 1 ? 1 : prev);
+  }, [filters, taskSort]);
 
-  useEffect(() => {
-    setPage(1);
-  }, [filters, taskSort])
+  const currentData = data ?? previousData;
 
   return {
-    data,
+    data: currentData,
     loading,
+    initialLoading: networkStatus === NetworkStatus.loading && !currentData,
     error,
     page,
     setPage,
     updateTaskList
-  }
+  };
+};
+
+const getDefaultHostTaskQuery = (
+  filters: Filters,
+  afterCursor?: Cursor,
+  beforeCursor?: Cursor,
+  id?: string,
+  sort?: OrderByField,
+  currentTimestamp?: Date
+) => {
+  const defaultRowLimit = TableRowLimit.TaskRowLimit;
+  const filterQueryFields = constructHostTaskFilterQuery(filters, currentTimestamp);
+
+  const query = {
+    "where": {
+      "hasBeaconWith": {
+        "hasHostWith": {
+          "id": id
+        }
+      },
+      ...filterQueryFields && filterQueryFields.hasTasksWith,
+    },
+    "first": beforeCursor ? null : defaultRowLimit,
+    "last": beforeCursor ? defaultRowLimit : null,
+    "after": afterCursor ? afterCursor : null,
+    "before": beforeCursor ? beforeCursor : null,
+    ...(sort && { orderBy: [sort] })
+  } as any;
+
+  return query;
 };

tavern/internal/www/src/pages/host-list/HostList.tsx

@@ -6,7 +6,7 @@ import HostTable from "./HostTable";
 import { TablePagination, TableWrapper } from "../../components/tavern-base-ui/table";
 
 const HostList: React.FC = () => {
-    const { loading, error, data, updateHosts, page, setPage } = useHosts(true);
+    const { loading, initialLoading, error, data, updateHosts, page, setPage } = useHosts(true);
 
     return (
         <>
@@ -19,7 +19,7 @@ const HostList: React.FC = () => {
             <TableWrapper
                 title="Hosts"
                 totalItems={data?.hosts?.totalCount}
-                loading={loading}
+                loading={initialLoading}
                 error={error}
                 table={<HostTable data={data?.hosts?.edges || []} />}
                 pagination={
@@ -30,6 +30,7 @@ const HostList: React.FC = () => {
                         page={page}
                         setPage={setPage}
                         rowLimit={TableRowLimit.HostRowLimit}
+                        loading={loading}
                     />
                 }
             />