Merge pull request #183 from blockydevs/HAM-26-handle-routing-in-jobs…

…-flow

fix(app/worker/jobs): extend job routing

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

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: (

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<OracleSuccessResponse>[] => {
   return [
     {
@@ -53,10 +51,7 @@ const getColumns = (
           <Grid sx={{ display: 'flex', justifyContent: 'flex-end' }}>
             <TableButton
               onClick={() => {
-                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({

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,

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;

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 <Navigate to={routerPaths.worker.jobsDiscovery} />;
-  }
-
   return (
     <>
       <Modal

packages/apps/human-app/frontend/src/router/routes.tsx

@@ -100,7 +100,7 @@ export const protectedRoutes: {
   },
   {
     routerProps: {
-      path: routerPaths.worker.jobs,
+      path: `${routerPaths.worker.jobs}/:address`,
       element: <JobsPage />,
     },
     pageHeaderProps: {