From 59a2a70a534796e37029d219fe053326686092d9 Mon Sep 17 00:00:00 2001 From: KacperKoza343 Date: Thu, 27 Jun 2024 11:33:11 +0200 Subject: [PATCH 1/3] fix(app/woreker/jobs): fix jobs tables --- .../src/hooks/use-jobs-filter-store.tsx | 11 +++++ .../src/hooks/use-my-jobs-filter-store.tsx | 11 +++++ .../oracles-table/oracles-table-mobile.tsx | 2 +- .../available-jobs-job-type-filter.tsx | 7 +++- .../desktop/available-jobs-table.tsx | 41 ++++--------------- .../available-jobs-job-type-filter-mobile.tsx | 7 +++- .../desktop/my-jobs-job-type-filter.tsx | 7 +++- .../my-jobs/desktop/my-jobs-table.tsx | 30 +++++--------- .../mobile/my-jobs-job-type-filter-mobile.tsx | 7 +++- .../helpers/string-to-upper-snake-case.ts | 3 ++ 10 files changed, 64 insertions(+), 62 deletions(-) create mode 100644 packages/apps/human-app/frontend/src/shared/helpers/string-to-upper-snake-case.ts 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 index ceaf9de970..07876bd794 100644 --- 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 @@ -33,6 +33,7 @@ export interface JobsFilterStoreProps { resetFilterParams: () => void; setSearchEscrowAddress: (escrow_address: string) => void; setOracleAddress: (oracleAddress: string) => void; + setPageParams: (pageIndex: number, pageSize: number) => void; } const initialFiltersState = { @@ -55,6 +56,16 @@ export const useJobsFilterStore = create((set) => ({ }, })); }, + setPageParams: (pageIndex: number, pageSize: number) => { + 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 index a8a8ef4e2b..716b8f1b67 100644 --- 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 @@ -32,6 +32,7 @@ export interface MyJobsFilterStoreProps { setSearchEscrowAddress: (escrow_address: string) => void; setOracleAddress: (oracleAddress: string) => void; setAvailableJobTypes: (jobTypes: string[]) => void; + setPageParams: (pageIndex: number, pageSize: number) => void; } const initialFiltersState = { @@ -54,6 +55,16 @@ export const useMyJobsFilterStore = create((set) => ({ }, })); }, + setPageParams: (pageIndex: number, pageSize: number) => { + set((state) => ({ + ...state, + filterParams: { + ...state.filterParams, + page: pageIndex, + page_size: pageSize, + }, + })); + }, resetFilterParams: () => { set({ filterParams: initialFiltersState }); }, diff --git a/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/oracles-table/oracles-table-mobile.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/oracles-table/oracles-table-mobile.tsx index 497b26735d..8dc48a3972 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/oracles-table/oracles-table-mobile.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/oracles-table/oracles-table-mobile.tsx @@ -60,7 +60,7 @@ export function OraclesTableMobile({ /> 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/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx index f90fb01c83..c12eb48855 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx +++ b/packages/apps/human-app/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 ; }, @@ -149,8 +149,7 @@ const getColumns = (callbacks: { }; export function AvailableJobsTable() { - const { setFilterParams, filterParams, setSearchEscrowAddress } = - useJobsFilterStore(); + const { setSearchEscrowAddress, setPageParams } = useJobsFilterStore(); const { onJobAssignmentError, onJobAssignmentSuccess } = useJobsNotifications(); const { data: tableData, status: tableStatus } = useGetAvailableJobsData(); @@ -170,34 +169,9 @@ 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', - }); - return; - } - setFilterParams({ - ...filterParams, - sort_field: undefined, - sort: undefined, - }); - // eslint-disable-next-line react-hooks/exhaustive-deps -- avoid loop - }, [sortingState]); + setPageParams(paginationState.pageIndex, paginationState.pageSize); + }, [paginationState, setPageParams]); const table = useMaterialReactTable({ columns: getColumns({ @@ -211,18 +185,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: () => ( 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/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/desktop/my-jobs-job-type-filter.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/desktop/my-jobs-job-type-filter.tsx index a0f40678ef..1464cf443b 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/desktop/my-jobs-job-type-filter.tsx +++ b/packages/apps/human-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/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/desktop/my-jobs-table.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/desktop/my-jobs-table.tsx index 3df04d8bb2..9a86474ce2 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/desktop/my-jobs-table.tsx +++ b/packages/apps/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[] => [ { @@ -104,7 +104,7 @@ const getColumnsDefinition = ( {...props} headerText={t('worker.jobs.jobType')} iconType="filter" - popoverContent={} + popoverContent={} /> ); }, @@ -190,12 +190,7 @@ const getColumnsDefinition = ( ]; export function MyJobsTable() { - const { - setFilterParams, - filterParams, - availableJobTypes, - setSearchEscrowAddress, - } = useMyJobsFilterStore(); + const { setSearchEscrowAddress, setPageParams } = useMyJobsFilterStore(); const { data: tableData, status: tableStatus } = useGetMyJobsData(); const memoizedTableDataResults = useMemo( () => tableData?.results || [], @@ -217,19 +212,11 @@ export function MyJobsTable() { }; }; useEffect(() => { - setFilterParams({ - ...filterParams, - page: paginationState.pageIndex, - page_size: paginationState.pageSize, - }); - // eslint-disable-next-line react-hooks/exhaustive-deps -- avoid loop - }, [paginationState]); + setPageParams(paginationState.pageIndex, paginationState.pageSize); + }, [paginationState, setPageParams]); const table = useMaterialReactTable({ - columns: getColumnsDefinition( - availableJobTypes, - rejectTask(oracle_address || '') - ), + columns: getColumnsDefinition(rejectTask(oracle_address || '')), data: memoizedTableDataResults, state: { isLoading: tableStatus === 'pending', @@ -242,7 +229,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/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/mobile/my-jobs-job-type-filter-mobile.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/mobile/my-jobs-job-type-filter-mobile.tsx index 0ffe5c75fa..e2b7fb7921 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/mobile/my-jobs-job-type-filter-mobile.tsx +++ b/packages/apps/human-app/frontend/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 new file mode 100644 index 0000000000..88a5ded90a --- /dev/null +++ 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('_'); +} From 569abee82da520c0c2fbcf834b3c02b857d0fee5 Mon Sep 17 00:00:00 2001 From: KacperKoza343 Date: Thu, 27 Jun 2024 12:38:44 +0200 Subject: [PATCH 2/3] refactor(app/woreker/jobs): refactor according to review --- .../frontend/src/hooks/use-jobs-filter-store.tsx | 2 +- .../frontend/src/hooks/use-my-jobs-filter-store.tsx | 2 +- .../available-jobs/desktop/available-jobs-table.tsx | 12 +++++++++++- .../components/my-jobs/desktop/my-jobs-table.tsx | 12 +++++++++++- 4 files changed, 24 insertions(+), 4 deletions(-) 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 index 07876bd794..e3cf910926 100644 --- 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 @@ -33,7 +33,7 @@ export interface JobsFilterStoreProps { resetFilterParams: () => void; setSearchEscrowAddress: (escrow_address: string) => void; setOracleAddress: (oracleAddress: string) => void; - setPageParams: (pageIndex: number, pageSize: number) => void; + setPageParams: (pageIndex: number, pageSize: 5 | 10) => void; } const 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 index 716b8f1b67..e226cf053b 100644 --- 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 @@ -32,7 +32,7 @@ export interface MyJobsFilterStoreProps { setSearchEscrowAddress: (escrow_address: string) => void; setOracleAddress: (oracleAddress: string) => void; setAvailableJobTypes: (jobTypes: string[]) => void; - setPageParams: (pageIndex: number, pageSize: number) => void; + setPageParams: (pageIndex: number, pageSize: 5 | 10) => void; } const initialFiltersState = { diff --git a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx index c12eb48855..995dd89524 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table.tsx @@ -149,7 +149,8 @@ const getColumns = (callbacks: { }; export function AvailableJobsTable() { - const { setSearchEscrowAddress, setPageParams } = useJobsFilterStore(); + const { setSearchEscrowAddress, setPageParams, filterParams } = + useJobsFilterStore(); const { onJobAssignmentError, onJobAssignmentSuccess } = useJobsNotifications(); const { data: tableData, status: tableStatus } = useGetAvailableJobsData(); @@ -170,9 +171,18 @@ export function AvailableJobsTable() { }); useEffect(() => { + if (!(paginationState.pageSize === 5 || paginationState.pageSize === 10)) + return; setPageParams(paginationState.pageIndex, paginationState.pageSize); }, [paginationState, setPageParams]); + useEffect(() => { + setPaginationState({ + pageIndex: filterParams.page, + pageSize: filterParams.page_size, + }); + }, [filterParams.page, filterParams.page_size]); + const table = useMaterialReactTable({ columns: getColumns({ assignJob: (data) => { diff --git a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/desktop/my-jobs-table.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/desktop/my-jobs-table.tsx index 9a86474ce2..af5001857c 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/desktop/my-jobs-table.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/desktop/my-jobs-table.tsx @@ -190,7 +190,8 @@ const getColumnsDefinition = ( ]; export function MyJobsTable() { - const { setSearchEscrowAddress, setPageParams } = useMyJobsFilterStore(); + const { setSearchEscrowAddress, setPageParams, filterParams } = + useMyJobsFilterStore(); const { data: tableData, status: tableStatus } = useGetMyJobsData(); const memoizedTableDataResults = useMemo( () => tableData?.results || [], @@ -212,9 +213,18 @@ export function MyJobsTable() { }; }; useEffect(() => { + if (!(paginationState.pageSize === 5 || paginationState.pageSize === 10)) + return; setPageParams(paginationState.pageIndex, paginationState.pageSize); }, [paginationState, setPageParams]); + useEffect(() => { + setPaginationState({ + pageIndex: filterParams.page, + pageSize: filterParams.page_size, + }); + }, [filterParams.page, filterParams.page_size]); + const table = useMaterialReactTable({ columns: getColumnsDefinition(rejectTask(oracle_address || '')), data: memoizedTableDataResults, From cd381390858e7657cef1bd097dae02fea911b7bb Mon Sep 17 00:00:00 2001 From: KacperKoza343 Date: Thu, 27 Jun 2024 14:13:43 +0200 Subject: [PATCH 3/3] fix(app/worker/jobs): type pagination arguments --- .../frontend/src/hooks/use-jobs-filter-store.tsx | 12 ++++++++---- .../frontend/src/hooks/use-my-jobs-filter-store.tsx | 9 +++++---- .../frontend/src/shared/types/entity.type.ts | 1 + 3 files changed, 14 insertions(+), 8 deletions(-) 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 index e3cf910926..64cde4b760 100644 --- 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,14 +34,17 @@ export interface JobsFilterStoreProps { resetFilterParams: () => void; setSearchEscrowAddress: (escrow_address: string) => void; setOracleAddress: (oracleAddress: string) => void; - setPageParams: (pageIndex: number, pageSize: 5 | 10) => 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((set) => ({ filterParams: initialFiltersState, @@ -56,7 +60,7 @@ export const useJobsFilterStore = create((set) => ({ }, })); }, - setPageParams: (pageIndex: number, pageSize: number) => { + setPageParams: (pageIndex: number, pageSize: PageSize) => { set((state) => ({ ...state, filterParams: { 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 index e226cf053b..6e5c398571 100644 --- 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,13 +33,13 @@ export interface MyJobsFilterStoreProps { setSearchEscrowAddress: (escrow_address: string) => void; setOracleAddress: (oracleAddress: string) => void; setAvailableJobTypes: (jobTypes: string[]) => void; - setPageParams: (pageIndex: number, pageSize: 5 | 10) => void; + setPageParams: (pageIndex: number, pageSize: PageSize) => void; } const initialFiltersState = { page: 0, page_size: 5, -}; +} as const; export const useMyJobsFilterStore = create((set) => ({ filterParams: initialFiltersState, @@ -55,7 +56,7 @@ export const useMyJobsFilterStore = create((set) => ({ }, })); }, - setPageParams: (pageIndex: number, pageSize: number) => { + setPageParams: (pageIndex: number, pageSize: PageSize) => { set((state) => ({ ...state, filterParams: { 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 index c0c9e55c7c..892e45b12d 100644 --- 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; +export type PageSize = 5 | 10;