From 1887ccb4c35f9e65b1e252c120998bbf7a934db5 Mon Sep 17 00:00:00 2001 From: KacperKoza343 Date: Wed, 3 Jul 2024 14:16:58 +0200 Subject: [PATCH] fix(app/worker/jobs): extend job routing --- .../servieces/worker/available-jobs-data.ts | 17 +++++++++++----- .../src/hooks/use-jobs-filter-store.tsx | 1 - .../oracles-table/oracles-table.tsx | 20 ++++--------------- .../my-jobs/desktop/my-jobs-table.tsx | 8 +++----- .../my-jobs/mobile/my-jobs-table-mobile.tsx | 8 +++----- .../src/pages/worker/jobs/jobs.page.tsx | 16 --------------- .../human-app/frontend/src/router/routes.tsx | 2 +- 7 files changed, 23 insertions(+), 49 deletions(-) diff --git a/packages/apps/human-app/frontend/src/api/servieces/worker/available-jobs-data.ts b/packages/apps/human-app/frontend/src/api/servieces/worker/available-jobs-data.ts index 6a1d14eaed..580137b0b3 100644 --- a/packages/apps/human-app/frontend/src/api/servieces/worker/available-jobs-data.ts +++ b/packages/apps/human-app/frontend/src/api/servieces/worker/available-jobs-data.ts @@ -1,6 +1,7 @@ /* eslint-disable camelcase -- api response*/ import { useInfiniteQuery, useQuery } from '@tanstack/react-query'; import { z } from 'zod'; +import { useParams } from 'react-router-dom'; import { apiClient } from '@/api/api-client'; import { apiPaths } from '@/api/api-paths'; import { stringifyUrlQueryObject } from '@/shared/helpers/stringify-url-query-object'; @@ -26,7 +27,9 @@ export type AvailableJobsSuccessResponse = z.infer< typeof availableJobsSuccessResponseSchema >; -type GetJobTableDataDto = JobsFilterStoreProps['filterParams']; +type GetJobTableDataDto = JobsFilterStoreProps['filterParams'] & { + oracle_address: string; +}; const getAvailableJobsTableData = async (dto: GetJobTableDataDto) => { return apiClient( @@ -43,20 +46,24 @@ const getAvailableJobsTableData = async (dto: GetJobTableDataDto) => { export function useGetAvailableJobsData() { const { filterParams } = useJobsFilterStore(); + const { address: oracle_address } = useParams<{ address: string }>(); + const dto = { ...filterParams, oracle_address: oracle_address || '' }; return useQuery({ - queryKey: ['availableJobs', filterParams], - queryFn: () => getAvailableJobsTableData(filterParams), + queryKey: ['availableJobs', dto], + queryFn: () => getAvailableJobsTableData(dto), }); } export function useInfiniteGetAvailableJobsData() { const { filterParams } = useJobsFilterStore(); + const { address: oracle_address } = useParams<{ address: string }>(); + const dto = { ...filterParams, oracle_address: oracle_address || '' }; return useInfiniteQuery({ initialPageParam: 0, - queryKey: ['availableJobsInfinite', filterParams], - queryFn: () => getAvailableJobsTableData(filterParams), + queryKey: ['availableJobsInfinite', dto], + queryFn: () => getAvailableJobsTableData(dto), getNextPageParam: (pageParams) => { return pageParams.total_pages === pageParams.page ? undefined 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 64cde4b760..7451131d2b 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 @@ -25,7 +25,6 @@ export interface JobsFilterStoreProps { page: number; page_size: PageSize; fields: string[]; - oracle_address?: string; chain_id?: number; }; setFilterParams: ( diff --git a/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/oracles-table/oracles-table.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/oracles-table/oracles-table.tsx index a5caf5349c..8d78c4bfae 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/oracles-table/oracles-table.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/jobs-discovery/oracles-table/oracles-table.tsx @@ -11,14 +11,12 @@ import { useIsMobile } from '@/hooks/use-is-mobile'; import { EvmAddress } from '@/pages/worker/jobs/components/evm-address'; import { Chips } from '@/components/ui/chips'; import { TableButton } from '@/components/ui/table-button'; -import { useMyJobsFilterStore } from '@/hooks/use-my-jobs-filter-store'; -import { useJobsFilterStore } from '@/hooks/use-jobs-filter-store'; import { routerPaths } from '@/router/router-paths'; import { OraclesTableMobile } from '@/pages/worker/jobs-discovery/oracles-table/oracles-table-mobile'; import type { OraclesDataQueryResult } from '@/pages/worker/jobs-discovery/jobs-discovery.page'; const getColumns = ( - selectOracle: (oracleAddress: string, jobTypes: string[]) => void + selectOracle: (oracleAddress: string) => void ): MRT_ColumnDef[] => { return [ { @@ -53,10 +51,7 @@ const getColumns = ( { - selectOracle( - props.row.original.address, - props.row.original.jobTypes - ); + selectOracle(props.row.original.address); }} > {t('worker.oraclesTable.seeJobs')} @@ -79,17 +74,10 @@ export function OraclesTable({ isRefetching: isOraclesDataRefetching, isPending: isOraclesDataPending, } = oraclesQueryDataResult; - - const { setOracleAddress: setOracleAddressForMyJobs, setAvailableJobTypes } = - useMyJobsFilterStore(); - const { setOracleAddress: setOracleAddressForJobs } = useJobsFilterStore(); const navigate = useNavigate(); const isMobile = useIsMobile(); - const selectOracle = (oracleAddress: string, jobTypes: string[]) => { - setOracleAddressForMyJobs(oracleAddress); - setOracleAddressForJobs(oracleAddress); - setAvailableJobTypes(jobTypes); - navigate(routerPaths.worker.jobs); + const selectOracle = (oracleAddress: string) => { + navigate(`${routerPaths.worker.jobs}/${oracleAddress}`); }; const table = useMaterialReactTable({ 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 bffa26cc3b..3702d412ba 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 @@ -2,7 +2,7 @@ import { t } from 'i18next'; import { useEffect, useMemo, useState } from 'react'; import Grid from '@mui/material/Grid'; -import { Link } from 'react-router-dom'; +import { Link, useParams } from 'react-router-dom'; import { MaterialReactTable, useMaterialReactTable, @@ -27,7 +27,6 @@ import { MyJobsExpiresAtSort } from '@/pages/worker/jobs/components/my-jobs/desk import { MyJobsNetworkFilter } from '@/pages/worker/jobs/components/my-jobs/desktop/my-jobs-network-filter'; 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'; @@ -199,9 +198,8 @@ export function MyJobsTable() { ); const { mutate: rejectTaskMutation } = useRejectTaskMutation(); - const { - filterParams: { oracle_address }, - } = useJobsFilterStore(); + const { address: oracle_address } = useParams<{ address: string }>(); + const [paginationState, setPaginationState] = useState({ pageIndex: 0, pageSize: 5, diff --git a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/mobile/my-jobs-table-mobile.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/mobile/my-jobs-table-mobile.tsx index 75110c188d..057306eb03 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/mobile/my-jobs-table-mobile.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/my-jobs/mobile/my-jobs-table-mobile.tsx @@ -2,7 +2,7 @@ import { Grid, List, Paper, Stack, Typography } from '@mui/material'; import { useTranslation } from 'react-i18next'; import { useEffect, useState, type Dispatch, type SetStateAction } from 'react'; -import { Link } from 'react-router-dom'; +import { Link, useParams } from 'react-router-dom'; import { ProfileListItem } from '@/components/ui/profile-list-item'; import { colorPalette } from '@/styles/color-palette'; import { Button } from '@/components/ui/button'; @@ -45,10 +45,8 @@ export function MyJobsTableMobile({ } = useInfiniteGetMyJobsData(); const { mutate: rejectTaskMutation } = useRejectTaskMutation(); - const { - filterParams: { oracle_address }, - setSearchEscrowAddress, - } = useJobsFilterStore(); + const { setSearchEscrowAddress } = useJobsFilterStore(); + const { address: oracle_address } = useParams<{ address: string }>(); useEffect(() => { if (!tableData) return; diff --git a/packages/apps/human-app/frontend/src/pages/worker/jobs/jobs.page.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs/jobs.page.tsx index ada9659692..0d77344a80 100644 --- a/packages/apps/human-app/frontend/src/pages/worker/jobs/jobs.page.tsx +++ b/packages/apps/human-app/frontend/src/pages/worker/jobs/jobs.page.tsx @@ -1,17 +1,12 @@ -/* eslint-disable camelcase -- ... */ import React, { useState, useEffect } from 'react'; import { Box, Grid, Paper, Stack, Tab, Tabs } from '@mui/material'; import { useTranslation } from 'react-i18next'; -import { Navigate } from 'react-router-dom'; import { TableQueryContextProvider } from '@/components/ui/table/table-query-context'; import { colorPalette } from '@/styles/color-palette'; import { useBackgroundColorStore } from '@/hooks/use-background-store'; import { Modal } from '@/components/ui/modal/modal'; import { useIsMobile } from '@/hooks/use-is-mobile'; import { MyJobsTableMobile } from '@/pages/worker/jobs/components/my-jobs/mobile/my-jobs-table-mobile'; -import { useMyJobsFilterStore } from '@/hooks/use-my-jobs-filter-store'; -import { useJobsFilterStore } from '@/hooks/use-jobs-filter-store'; -import { routerPaths } from '@/router/router-paths'; import { AvailableJobsTable } from '@/pages/worker/jobs/components/available-jobs/desktop/available-jobs-table'; import { MyJobsDrawerMobile } from '@/pages/worker/jobs/components/my-jobs/mobile/my-jobs-drawer-mobile'; import { AvailableJobsDrawerMobile } from '@/pages/worker/jobs/components/available-jobs/mobile/available-jobs-drawer-mobile'; @@ -27,13 +22,6 @@ function generateTabA11yProps(index: number) { } export function JobsPage() { - const { - filterParams: { oracle_address }, - } = useJobsFilterStore(); - const { - filterParams: { address }, - } = useMyJobsFilterStore(); - const { setGrayBackground } = useBackgroundColorStore(); const { t } = useTranslation(); const [activeTab, setActiveTab] = useState(0); @@ -58,10 +46,6 @@ export function JobsPage() { setGrayBackground(); }, [setGrayBackground]); - if (!oracle_address || !address) { - return ; - } - return ( <> , }, pageHeaderProps: {