[MAIN-IMP] Updating useJobsHook and integrating with the jobsList

src/components/custom/charts/AllEventStats.tsx

@@ -147,7 +147,7 @@ export function AllEventStats(props: AllEventStatsProps) {
 
   return (
     <Card className="border-border">
-      <CardHeader className="flex items-center gap-2 space-y-0 border-b py-4 px-4 sm:flex-row text-foreground bg-background border-border rounded-t-xl">
+      <CardHeader className="flex items-center gap-2 space-y-0 border-b py-4 px-4 sm:flex-row text-foreground bg-background border-border rounded-t-xl sm:flex-wrap lg:flex-nowrap">
         <div className="grid flex-1 gap-1 text-center sm:text-left">
           <CardTitle>
             {activeTab === "table"
@@ -160,7 +160,7 @@ export function AllEventStats(props: AllEventStatsProps) {
               : "Showing recurrent stats for all emitted events"}
           </CardDescription>
         </div>
-        <div className="flex gap-2 items-center">
+        <div className="flex gap-2 items-center flex-1 sm:flex-wrap lg:flex-nowrap">
           <ButtonGroup>
             <Button
               data-active={activeTab === "table"}
@@ -179,8 +179,8 @@ export function AllEventStats(props: AllEventStatsProps) {
               Chart
             </Button>
           </ButtonGroup>
-          <InputGroup>
-            <InputGroupAddon>Period (min)</InputGroupAddon>
+          <InputGroup className="w-auto">
+            <InputGroupAddon>Period</InputGroupAddon>
             <InputGroupAddon>
               <Select
                 value={periodUnit}

src/components/custom/notifications/NotificationServicesPanel.tsx

@@ -359,11 +359,11 @@ export default function NotificationServicesPanel() {
                         src={item.image}
                         alt="NoImg"
                       />
-                      <div className="flex flex-col gap-1 min-w-0">
-                        <div className="text-sm font-bold text-ellipsis overflow-hidden max-w-[200px] truncate">
+                      <div className="flex flex-col gap-1 min-w-0 max-w-[220px]">
+                        <div className="text-sm font-bold line-clamp-2">
                           {item.name}
                         </div>
-                        <div className="text-xs text-[--muted-foreground] text-ellipsis truncate min-w-0">
+                        <div className="text-xs text-[--muted-foreground] line-clamp-4 md:line-clamp-2 min-w-0">
                           {item.description}
                         </div>
                       </div>

src/features/dashboard/dashboard.tsx

@@ -1,11 +1,6 @@
 import { AllJobsStats } from "@/components/custom/charts/allJobStats"
 import StatsBar from "@/components/custom/dashboard/statsBar"
 import { AllEventStats } from "@/components/custom/charts/AllEventStats"
-import { JobEventsTable } from "@/components/custom/dashboard/JobEventsTable"
-import { defaultLogPeriod } from "@/features/jobsTable/interfaces"
-import { useJobs } from "@/hooks/useJobs"
-import { useCallback, useMemo, useState } from "react"
-import { PaginationState, Updater } from "@tanstack/react-table"
 import * as React from "react"
 
 export default function Dashboard() {

src/features/jobsTable/jobsPage.tsx

@@ -2,7 +2,7 @@ import jobsService from "@/services/JobsService"
 import { DataTable } from "@/features/jobsTable/jobsTable"
 import type { jobsTableData } from "@/features/jobsTable/interfaces"
 import { getTableColumns, jobActions } from "@/features/jobsTable/interfaces"
-import type { MouseEventHandler } from "react"
+import { MouseEventHandler } from "react"
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import Spinner from "@/components/custom/LoadingOverlay"
 import type { ColumnDef, Row, SortingState, Table } from "@tanstack/react-table"
@@ -19,7 +19,6 @@ import {
   DownloadIcon,
 } from "lucide-react"
 import { useAppDispatch, useAppSelector } from "@/app/hooks"
-import { config } from "@/app/reducers/uiReducer"
 import { getConsumersCBox, takeAction } from "@/features/jobsTable/jobsUtils"
 import {
   jobsList,
@@ -38,16 +37,14 @@ import ConfirmationDialogAction, {
 import { cn } from "@/lib/utils"
 import { BatchImportDialog } from "@/components/custom/jobsTable/batchImportDialog"
 import { useInView } from "@/hooks/useInView"
+import { useJobs } from "@/hooks/useJobs"
 
 export const defaultSortingState = [{ id: "cronSetting", desc: true }]
 
 let lastSelectedID = 0
 export default function JobsPage() {
-  const [loading, setLoading] = useState(true)
-  const [fetchingData, setFetchingStatus] = useState(false)
   const [advancedFilters, setAdvancedFilters] = useState<any>()
   const [sorting, setSorting] = useState<SortingState>(defaultSortingState)
-  const savedConfig = useAppSelector(config)
   const JobsList = useAppSelector(jobsList)
   const dispatch = useAppDispatch()
   const avFilteringRef = useRef<AdvancedJobFilteringDialogHandle>(null)
@@ -59,80 +56,47 @@ export default function JobsPage() {
     [selectedRowIds],
   )
 
-  async function fetchTableData(inputSorting?: SortingState, avFilters?: any) {
-    setFetchingStatus(true)
-    setLoading(true)
-    const targetPromise =
-      (avFilters ?? advancedFilters)
-        ? jobsService.filterJobs(
-            null,
-            inputSorting ?? sorting,
-            avFilters ?? advancedFilters,
-          )
-        : jobsService.getAllJobs(inputSorting ?? sorting, undefined, 999999, 0)
-    return await targetPromise
-      .then(data => {
-        dispatch(setJobsList(data))
-      })
-      .catch(err => {
-        dispatch(setJobsList([]))
-      })
-      .finally(() => {
-        setFetchingStatus(false)
-        setLoading(false)
-      })
-  }
+  const { jobs, isJobFetching, forceJobRefresh } = useJobs({
+    sorting,
+    advancedFilters: advancedFilters,
+    offset: 0,
+    limit: 99999,
+  })
 
-  const updateTableData = useCallback(
-    (sorting?: any, avFilters?: any) => {
-      return Promise.all([getRunningJobs(), fetchTableData(sorting, avFilters)])
-    },
-    [sorting],
-  )
+  useEffect(() => {
+    dispatch(setJobsList(jobs ?? []))
+  }, [jobs])
 
-  const onAdvancedFilterChange = useCallback(
-    (value: any, reset?: boolean) => {
-      if (!value) {
-        avFilteringRef.current?.reset()
-      }
-      setAdvancedFilters(reset ? undefined : value)
-      updateTableData(undefined, reset ? undefined : value)
-    },
-    [updateTableData],
-  )
+  const onAdvancedFilterChange = useCallback((value: any, reset?: boolean) => {
+    if (!value) {
+      avFilteringRef.current?.reset()
+    }
+    setAdvancedFilters(reset ? undefined : value)
+  }, [])
 
-  const onAdvancedExecutionSubmission = useCallback(
-    (value: any) => {
-      return jobsService
-        .queueJobExecution(value)
-        .then((data: any) => {
-          toast({
-            title: `Jobs queued`,
-            duration: 2000,
-          })
-          return data
+  const onAdvancedExecutionSubmission = useCallback((value: any) => {
+    return jobsService
+      .queueJobExecution(value)
+      .then((data: any) => {
+        toast({
+          title: `Jobs queued`,
+          duration: 2000,
         })
-        .catch(err => {
-          toast({
-            title: err.message,
-            variant: "destructive",
-          })
+        return data
+      })
+      .catch(err => {
+        toast({
+          title: err.message,
+          variant: "destructive",
         })
-    },
-    [updateTableData],
-  )
+      })
+  }, [])
 
   async function getRunningJobs() {
     return await jobsService.getRunningJobs().then((data: any) => {
       dispatch(setRunningJobsCount(data.count))
     })
   }
-  useEffect(() => {
-    if (!fetchingData) {
-      setLoading(true)
-      updateTableData()
-    }
-  }, [savedConfig.targetServer])
 
   const filterAndPaginationChange = useCallback(
     async ({ sorting: newSorting }: { sorting: any }) => {
@@ -142,19 +106,17 @@ export default function JobsPage() {
           ? newSorting
           : defaultSortingState
       setSorting(targetSorting)
-      setLoading(true)
-      await updateTableData(targetSorting, advancedFilters)
     },
     [advancedFilters],
   )
 
   const tableEventsMemoized = useMemo(
     () => ({
       onPageChange: filterAndPaginationChange,
-      actionConfirmed: updateTableData,
+      actionConfirmed: forceJobRefresh,
       onRowSelectionChange: setSelectedRowIds,
     }),
-    [filterAndPaginationChange, updateTableData, selectedRowIds],
+    [filterAndPaginationChange, forceJobRefresh],
   )
 
   const takeJobsAction = useCallback(
@@ -164,18 +126,17 @@ export default function JobsPage() {
       data?: JobUpdateType | any,
       batchProcessIds?: Array<number>,
     ) => {
-      setLoading(true)
       await takeAction(row, action, data, batchProcessIds)?.catch(err => {
         console.error(err)
         toast({
           title: err.message,
           variant: "destructive",
         })
       })
-      setLoading(false)
-      await updateTableData()
+
+      await forceJobRefresh()
     },
-    [sorting, selectedRowIds],
+    [forceJobRefresh],
   )
 
   const takeBatchJobsAction = useCallback(
@@ -192,7 +153,7 @@ export default function JobsPage() {
         if (dialogAction === ConfirmationDialogActionType.CANCEL) return
         return takeBatchJobsAction(action)
       },
-    [selectedRowIds, JobsList, takeJobsAction],
+    [takeBatchJobsAction],
   )
 
   const getRowRange = (
@@ -243,28 +204,27 @@ export default function JobsPage() {
     }
   }, [sorting])
 
-  const importJobs = useCallback(async (jobsList: any[]) => {
-    setLoading(true)
-    await jobsService
-      .importJobsFromJSON(jobsList)
-      .then(res => {
-        toast({
-          title: `${jobsList.length} Jobs imported successfully`,
-          duration: 2000,
+  const importJobs = useCallback(
+    async (jobsList: any[]) => {
+      await jobsService
+        .importJobsFromJSON(jobsList)
+        .then(res => {
+          toast({
+            title: `${jobsList.length} Jobs imported successfully`,
+            duration: 2000,
+          })
+          return forceJobRefresh()
         })
-        return updateTableData()
-      })
-      .catch(err => {
-        toast({
-          title: err.message,
-          duration: 2000,
-          variant: "destructive",
+        .catch(err => {
+          toast({
+            title: err.message,
+            duration: 2000,
+            variant: "destructive",
+          })
         })
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-  }, [])
+    },
+    [forceJobRefresh],
+  )
 
   return (
     <div className="h-full">
@@ -400,7 +360,7 @@ export default function JobsPage() {
           </ButtonGroup>
         </div>
       </div>
-      <Spinner isLoading={loading} icon={LoaderPinwheelIcon}>
+      <Spinner isLoading={isJobFetching} icon={LoaderPinwheelIcon}>
         <DataTable
           columns={columns}
           data={JobsList}