[HUMAN App] refactor: available jobs service (#3032)

humanprotocol · Mar 3, 2025 · d7e9a3a · d7e9a3a
1 parent c58e033
commit d7e9a3a
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 22 deletions.
diff --git a/...ontend/src/modules/worker/components/jobs/available-jobs/desktop/available-jobs-table.tsx b/...ontend/src/modules/worker/components/jobs/available-jobs/desktop/available-jobs-table.tsx
@@ -166,7 +166,7 @@ const getColumns = (
 
 export function AvailableJobsTable({
   chainIdsEnabled,
-}: AvailableJobsTableProps) {
+}: Readonly<AvailableJobsTableProps>) {
   const { colorPalette, isDarkMode } = useColorMode();
   const {
     setSearchEscrowAddress,

diff --git a/.../src/modules/worker/components/jobs/available-jobs/mobile/available-jobs-table-mobile.tsx b/.../src/modules/worker/components/jobs/available-jobs/mobile/available-jobs-table-mobile.tsx
@@ -8,8 +8,6 @@ import { useJobsFilterStore } from '@/modules/worker/hooks/use-jobs-filter-store
 import { Alert } from '@/shared/components/ui/alert';
 import { getNetworkName } from '@/modules/smart-contracts/get-network-name';
 import { getErrorMessageForError } from '@/shared/errors';
-import type { AvailableJob } from '@/modules/worker/services/available-jobs-data';
-import { useInfiniteGetAvailableJobsData } from '@/modules/worker/services/available-jobs-data';
 import { Loader } from '@/shared/components/ui/loader';
 import { EvmAddress } from '@/modules/worker/components/jobs/evm-address';
 import { Chip } from '@/shared/components/ui/chip';
@@ -19,14 +17,18 @@ import { useColorMode } from '@/shared/contexts/color-mode';
 import type { JobType } from '@/modules/smart-contracts/EthKVStore/config';
 import { EscrowAddressSearchForm } from '@/modules/worker/components/jobs/escrow-address-search-form';
 import { AvailableJobsAssignJobButton } from '@/modules/worker/components/jobs/available-jobs/mobile/available-jobs-assign-job-button';
+import {
+  type AvailableJob,
+  useInfiniteAvailableJobsQuery,
+} from '@/modules/worker/services/available-jobs-data';
 
 interface AvailableJobsTableMobileProps {
   setIsMobileFilterDrawerOpen: Dispatch<SetStateAction<boolean>>;
 }
 
 export function AvailableJobsTableMobile({
   setIsMobileFilterDrawerOpen,
-}: AvailableJobsTableMobileProps) {
+}: Readonly<AvailableJobsTableMobileProps>) {
   const { colorPalette } = useColorMode();
   const [allPages, setAllPages] = useState<AvailableJob[]>([]);
 
@@ -37,7 +39,7 @@ export function AvailableJobsTableMobile({
     error: tableError,
     fetchNextPage,
     hasNextPage,
-  } = useInfiniteGetAvailableJobsData();
+  } = useInfiniteAvailableJobsQuery();
   const { filterParams, setPageParams, resetFilterParams } =
     useJobsFilterStore();
   const { t } = useTranslation();

diff --git a/packages/apps/human-app/frontend/src/modules/worker/services/available-jobs-data.ts b/packages/apps/human-app/frontend/src/modules/worker/services/available-jobs-data.ts
@@ -27,22 +27,22 @@ export type AvailableJobsSuccessResponse = z.infer<
   typeof availableJobsSuccessResponseSchema
 >;
 
-type GetJobTableDataDto = JobsFilterStoreProps['filterParams'] & {
+type JobTableQueryParams = JobsFilterStoreProps['filterParams'] & {
   oracle_address: string;
 };
 
 const getAvailableJobsTableData = async (
-  dto: GetJobTableDataDto,
+  params: JobTableQueryParams,
   abortSignal: AbortSignal
 ) => {
+  const endpoint = `${apiPaths.worker.jobs.path}?${stringifyUrlQueryObject(params)}`;
+
   return apiClient(
-    `${apiPaths.worker.jobs.path}?${stringifyUrlQueryObject({ ...dto })}`,
+    endpoint,
     {
       authenticated: true,
       successSchema: availableJobsSuccessResponseSchema,
-      options: {
-        method: 'GET',
-      },
+      options: { method: 'GET' },
     },
     abortSignal
   );
@@ -59,19 +59,20 @@ export function useGetAvailableJobsData() {
   });
 }
 
-export function useInfiniteGetAvailableJobsData() {
+export function useInfiniteAvailableJobsQuery() {
   const { filterParams } = useJobsFilterStore();
-  const { address: oracle_address } = useParams<{ address: string }>();
-  const dto = { ...filterParams, oracle_address: oracle_address ?? '' };
+  const { address: oracleAddress } = useParams<{ address: string }>();
 
-  return useInfiniteQuery({
+  const queryParams = {
+    ...filterParams,
+    oracle_address: oracleAddress ?? '',
+  };
+
+  return useInfiniteQuery<AvailableJobsSuccessResponse>({
+    queryKey: ['availableJobsInfinite', queryParams],
+    queryFn: ({ signal }) => getAvailableJobsTableData(queryParams, signal),
     initialPageParam: 0,
-    queryKey: ['availableJobsInfinite', dto],
-    queryFn: ({ signal }) => getAvailableJobsTableData(dto, signal),
-    getNextPageParam: (pageParams) => {
-      return pageParams.total_pages - 1 <= pageParams.page
-        ? undefined
-        : pageParams.page;
-    },
+    getNextPageParam: (lastPage) =>
+      lastPage.total_pages - 1 <= lastPage.page ? undefined : lastPage.page,
   });
 }