blockydevs · MicDebBlocky · Jun 27, 2024 · Jun 27, 2024 · Jun 27, 2024 · Jun 27, 2024
diff --git a/packages/apps/human-app/frontend/src/hooks/use-jobs-filter-store.tsx b/packages/apps/human-app/frontend/src/hooks/use-jobs-filter-store.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable camelcase -- api params*/
 import { create } from 'zustand';
+import type { PageSize } from '@/shared/types/entity.type';
 
 export interface JobsFilterStoreProps {
   filterParams: {
@@ -22,7 +23,7 @@ export interface JobsFilterStoreProps {
       | 'REJECTED';
     escrow_address?: string;
     page: number;
-    page_size: number;
+    page_size: PageSize;
     fields: string[];
     oracle_address?: string;
     chain_id?: number;
@@ -33,13 +34,17 @@ export interface JobsFilterStoreProps {
   resetFilterParams: () => void;
   setSearchEscrowAddress: (escrow_address: string) => void;
   setOracleAddress: (oracleAddress: string) => void;
+  setPageParams: (pageIndex: number, pageSize: PageSize) => void;
 }
 
 const initialFiltersState = {
   page: 0,
   page_size: 5,
   fields: ['reward_amount', 'job_description', 'reward_token'],
-};
+} satisfies Pick<
+  JobsFilterStoreProps['filterParams'],
+  'page_size' | 'page' | 'fields'
+>;
 
 export const useJobsFilterStore = create<JobsFilterStoreProps>((set) => ({
   filterParams: initialFiltersState,
@@ -55,6 +60,16 @@ export const useJobsFilterStore = create<JobsFilterStoreProps>((set) => ({
       },
     }));
   },
+  setPageParams: (pageIndex: number, pageSize: PageSize) => {
+    set((state) => ({
+      ...state,
+      filterParams: {
+        ...state.filterParams,
+        page: pageIndex,
+        page_size: pageSize,
+      },
+    }));
+  },
   resetFilterParams: () => {
     set({ filterParams: initialFiltersState });
   },

diff --git a/packages/apps/human-app/frontend/src/hooks/use-my-jobs-filter-store.tsx b/packages/apps/human-app/frontend/src/hooks/use-my-jobs-filter-store.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable camelcase -- api params*/
 import { create } from 'zustand';
+import type { PageSize } from '@/shared/types/entity.type';
 
 export const jobStatuses = [
   'ACTIVE',
@@ -20,7 +21,7 @@ export interface MyJobsFilterStoreProps {
     status?: JobStatus;
     escrow_address?: string;
     page: number;
-    page_size: number;
+    page_size: PageSize;
     chain_id?: number;
     address?: string;
   };
@@ -32,12 +33,13 @@ export interface MyJobsFilterStoreProps {
   setSearchEscrowAddress: (escrow_address: string) => void;
   setOracleAddress: (oracleAddress: string) => void;
   setAvailableJobTypes: (jobTypes: string[]) => void;
+  setPageParams: (pageIndex: number, pageSize: PageSize) => void;
 }
 
 const initialFiltersState = {
   page: 0,
   page_size: 5,
-};
+} as const;
 
 export const useMyJobsFilterStore = create<MyJobsFilterStoreProps>((set) => ({
   filterParams: initialFiltersState,
@@ -54,6 +56,16 @@ export const useMyJobsFilterStore = create<MyJobsFilterStoreProps>((set) => ({
       },
     }));
   },
+  setPageParams: (pageIndex: number, pageSize: PageSize) => {
+    set((state) => ({
+      ...state,
+      filterParams: {
+        ...state.filterParams,
+        page: pageIndex,
+        page_size: pageSize,
+      },
+    }));
+  },
   resetFilterParams: () => {
     set({ filterParams: initialFiltersState });
   },

diff --git a/...human-app/frontend/src/pages/worker/jobs-discovery/oracles-table/oracles-table-mobile.tsx b/...human-app/frontend/src/pages/worker/jobs-discovery/oracles-table/oracles-table-mobile.tsx
@@ -60,7 +60,7 @@ export function OraclesTableMobile({
             />
             <ProfileListItem
               header={t('worker.oraclesTable.annotationTool')}
-              paragraph={d.url}
+              paragraph={d.url || ''}
             />
             <Typography
               component="div"

diff --git a/...rc/pages/worker/jobs/components/available-jobs/desktop/available-jobs-job-type-filter.tsx b/...rc/pages/worker/jobs/components/available-jobs/desktop/available-jobs-job-type-filter.tsx
@@ -2,6 +2,7 @@
 import capitalize from 'lodash/capitalize';
 import { Filtering } from '@/components/ui/table/table-header-menu.tsx/filtering';
 import { useJobsFilterStore } from '@/hooks/use-jobs-filter-store';
+import { stringToUpperSnakeCase } from '@/shared/helpers/string-to-upper-snake-case';
 
 export function AvailableJobsJobTypeFilter({
   jobTypes,
@@ -22,11 +23,13 @@ export function AvailableJobsJobTypeFilter({
         name: capitalize(jobType),
         option: jobType,
       }))}
-      isChecked={(option) => option === filterParams.job_type}
+      isChecked={(option) =>
+        stringToUpperSnakeCase(option) === filterParams.job_type
+      }
       setFiltering={(jobType) => {
         setFilterParams({
           ...filterParams,
-          job_type: jobType,
+          job_type: stringToUpperSnakeCase(jobType),
         });
       }}
     />

diff --git a/...frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx b/...frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx
@@ -49,7 +49,7 @@ const getColumns = (callbacks: {
       accessorKey: 'escrow_address',
       header: t('worker.jobs.escrowAddress'),
       size: 100,
-      enableSorting: true,
+      enableSorting: false,
       Cell: (props) => {
         return <EvmAddress address={props.cell.getValue() as string} />;
       },
@@ -149,7 +149,7 @@ const getColumns = (callbacks: {
 };
 
 export function AvailableJobsTable() {
-  const { setFilterParams, filterParams, setSearchEscrowAddress } =
+  const { setSearchEscrowAddress, setPageParams, filterParams } =
     useJobsFilterStore();
   const { onJobAssignmentError, onJobAssignmentSuccess } =
     useJobsNotifications();
@@ -170,34 +170,18 @@ export function AvailableJobsTable() {
     pageSize: 5,
   });
 
-  const [sortingState, setSortingState] = useState<
-    { id: string; desc: boolean }[]
-  >([]);
-
-  useEffect(() => {
-    setFilterParams({
-      ...filterParams,
-      page: paginationState.pageIndex,
-      page_size: paginationState.pageSize,
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- avoid loop
-  }, [paginationState]);
   useEffect(() => {
-    if (sortingState.length) {
-      setFilterParams({
-        ...filterParams,
-        sort_field: sortingState[0].id as 'escrow_address',
-        sort: sortingState[0].desc ? 'DESC' : 'ASC',
-      });
+    if (!(paginationState.pageSize === 5 || paginationState.pageSize === 10))
       return;
-    }
-    setFilterParams({
-      ...filterParams,
-      sort_field: undefined,
-      sort: undefined,
+    setPageParams(paginationState.pageIndex, paginationState.pageSize);
+  }, [paginationState, setPageParams]);
+
+  useEffect(() => {
+    setPaginationState({
+      pageIndex: filterParams.page,
+      pageSize: filterParams.page_size,
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- avoid loop
-  }, [sortingState]);
+  }, [filterParams.page, filterParams.page_size]);
 
   const table = useMaterialReactTable({
     columns: getColumns({
@@ -211,18 +195,19 @@ export function AvailableJobsTable() {
       showAlertBanner: tableStatus === 'error',
       showProgressBars: tableStatus === 'pending' || isAssignJobMutationPending,
       pagination: paginationState,
-      sorting: sortingState,
     },
     enablePagination: true,
     manualPagination: true,
     onPaginationChange: setPaginationState,
-    pageCount: tableData?.total_pages,
+    muiPaginationProps: {
+      rowsPerPageOptions: [5, 10],
+    },
+    pageCount: tableData?.total_pages || -1,
     rowCount: tableData?.total_results,
     enableColumnActions: false,
     enableColumnFilters: false,
     enableSorting: true,
     manualSorting: true,
-    onSortingChange: setSortingState,
     renderTopToolbar: () => (
       <SearchForm
         columnId={t('worker.jobs.escrowAddressColumnId')}

diff --git a/...es/worker/jobs/components/available-jobs/mobile/available-jobs-job-type-filter-mobile.tsx b/...es/worker/jobs/components/available-jobs/mobile/available-jobs-job-type-filter-mobile.tsx
@@ -2,6 +2,7 @@
 import capitalize from 'lodash/capitalize';
 import { Filtering } from '@/components/ui/table/table-header-menu.tsx/filtering';
 import { useJobsFilterStore } from '@/hooks/use-jobs-filter-store';
+import { stringToUpperSnakeCase } from '@/shared/helpers/string-to-upper-snake-case';
 
 export function AvailableJobsJobTypeFilterMobile({
   jobTypes,
@@ -23,12 +24,14 @@ export function AvailableJobsJobTypeFilterMobile({
         name: capitalize(jobType),
         option: jobType.toUpperCase(),
       }))}
-      isChecked={(option) => option === filterParams.job_type?.toUpperCase()}
+      isChecked={(option) =>
+        stringToUpperSnakeCase(option) === filterParams.job_type
+      }
       isMobile={false}
       setFiltering={(jobType) => {
         setFilterParams({
           ...filterParams,
-          job_type: jobType,
+          job_type: stringToUpperSnakeCase(jobType),
           page: 0,
         });
       }}

diff --git a/...app/frontend/src/pages/worker/jobs/components/my-jobs/desktop/my-jobs-job-type-filter.tsx b/...app/frontend/src/pages/worker/jobs/components/my-jobs/desktop/my-jobs-job-type-filter.tsx
@@ -2,6 +2,7 @@
 import capitalize from 'lodash/capitalize';
 import { useMyJobsFilterStore } from '@/hooks/use-my-jobs-filter-store';
 import { Filtering } from '@/components/ui/table/table-header-menu.tsx/filtering';
+import { stringToUpperSnakeCase } from '@/shared/helpers/string-to-upper-snake-case';
 
 export function MyJobsJobTypeFilter({ jobTypes }: { jobTypes: string[] }) {
   const { setFilterParams, filterParams } = useMyJobsFilterStore();
@@ -18,11 +19,13 @@ export function MyJobsJobTypeFilter({ jobTypes }: { jobTypes: string[] }) {
         name: capitalize(jobType),
         option: jobType,
       }))}
-      isChecked={(option) => option === filterParams.job_type}
+      isChecked={(option) =>
+        stringToUpperSnakeCase(option) === filterParams.job_type
+      }
       setFiltering={(jobType) => {
         setFilterParams({
           ...filterParams,
-          job_type: jobType,
+          job_type: stringToUpperSnakeCase(jobType),
         });
       }}
     />

diff --git a/...pps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/desktop/my-jobs-table.tsx b/...pps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/desktop/my-jobs-table.tsx
@@ -29,10 +29,10 @@ import { TableButton } from '@/components/ui/table-button';
 import { useRejectTaskMutation } from '@/api/servieces/worker/reject-task';
 import { useJobsFilterStore } from '@/hooks/use-jobs-filter-store';
 import { RejectButton } from '@/pages/worker/jobs/components/reject-button';
+import { JOB_TYPES } from '@/shared/consts';
 import { parseJobStatusChipColor } from '../parse-job-status-chip-color';
 
 const getColumnsDefinition = (
-  jobTypes: string[],
   resignJob: (assignment_id: number) => void
 ): MRT_ColumnDef<MyJob>[] => [
   {
@@ -104,7 +104,7 @@ const getColumnsDefinition = (
             {...props}
             headerText={t('worker.jobs.jobType')}
             iconType="filter"
-            popoverContent={<MyJobsJobTypeFilter jobTypes={jobTypes} />}
+            popoverContent={<MyJobsJobTypeFilter jobTypes={JOB_TYPES} />}
           />
         );
       },
@@ -190,12 +190,8 @@ const getColumnsDefinition = (
 ];
 
 export function MyJobsTable() {
-  const {
-    setFilterParams,
-    filterParams,
-    availableJobTypes,
-    setSearchEscrowAddress,
-  } = useMyJobsFilterStore();
+  const { setSearchEscrowAddress, setPageParams, filterParams } =
+    useMyJobsFilterStore();
   const { data: tableData, status: tableStatus } = useGetMyJobsData();
   const memoizedTableDataResults = useMemo(
     () => tableData?.results || [],
@@ -217,19 +213,20 @@ export function MyJobsTable() {
     };
   };
   useEffect(() => {
-    setFilterParams({
-      ...filterParams,
-      page: paginationState.pageIndex,
-      page_size: paginationState.pageSize,
+    if (!(paginationState.pageSize === 5 || paginationState.pageSize === 10))
+      return;
+    setPageParams(paginationState.pageIndex, paginationState.pageSize);
+  }, [paginationState, setPageParams]);
+
+  useEffect(() => {
+    setPaginationState({
+      pageIndex: filterParams.page,
+      pageSize: filterParams.page_size,
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- avoid loop
-  }, [paginationState]);
+  }, [filterParams.page, filterParams.page_size]);
 
   const table = useMaterialReactTable({
-    columns: getColumnsDefinition(
-      availableJobTypes,
-      rejectTask(oracle_address || '')
-    ),
+    columns: getColumnsDefinition(rejectTask(oracle_address || '')),
     data: memoizedTableDataResults,
     state: {
       isLoading: tableStatus === 'pending',
@@ -242,7 +239,10 @@ export function MyJobsTable() {
     onPaginationChange: (updater) => {
       setPaginationState(updater);
     },
-    pageCount: tableData?.total_pages,
+    muiPaginationProps: {
+      rowsPerPageOptions: [5, 10],
+    },
+    pageCount: tableData?.total_pages || -1,
     rowCount: tableData?.total_results,
     enableColumnActions: false,
     enableColumnFilters: false,

diff --git a/...ontend/src/pages/worker/jobs/components/my-jobs/mobile/my-jobs-job-type-filter-mobile.tsx b/...ontend/src/pages/worker/jobs/components/my-jobs/mobile/my-jobs-job-type-filter-mobile.tsx
@@ -2,6 +2,7 @@
 import capitalize from 'lodash/capitalize';
 import { useMyJobsFilterStore } from '@/hooks/use-my-jobs-filter-store';
 import { Filtering } from '@/components/ui/table/table-header-menu.tsx/filtering';
+import { stringToUpperSnakeCase } from '@/shared/helpers/string-to-upper-snake-case';
 
 export function MyJobsJobTypeFilter({ jobTypes }: { jobTypes: string[] }) {
   const { setFilterParams, filterParams } = useMyJobsFilterStore();
@@ -19,12 +20,14 @@ export function MyJobsJobTypeFilter({ jobTypes }: { jobTypes: string[] }) {
         name: capitalize(jobType),
         option: jobType.toLowerCase(),
       }))}
-      isChecked={(option) => option === filterParams.job_type?.toLowerCase()}
+      isChecked={(option) =>
+        stringToUpperSnakeCase(option) === filterParams.job_type
+      }
       isMobile={false}
       setFiltering={(jobType) => {
         setFilterParams({
           ...filterParams,
-          job_type: jobType,
+          job_type: stringToUpperSnakeCase(jobType),
           page: 0,
         });
       }}

diff --git a/packages/apps/human-app/frontend/src/shared/helpers/string-to-upper-snake-case.ts b/packages/apps/human-app/frontend/src/shared/helpers/string-to-upper-snake-case.ts
@@ -0,0 +1,3 @@
+export function stringToUpperSnakeCase(text: string): string {
+  return text.toUpperCase().split(' ').join('_');
+}
diff --git a/packages/apps/human-app/frontend/src/shared/types/entity.type.ts b/packages/apps/human-app/frontend/src/shared/types/entity.type.ts
@@ -2,3 +2,4 @@ import { z } from 'zod';
 
 export const testDataSchema = z.coerce.date();
 export type TestData = z.infer<typeof testDataSchema>;
+export type PageSize = 5 | 10;