From c12b2caf4ca9edb3dc15254bc30f42d6194b7da1 Mon Sep 17 00:00:00 2001 From: m00n620 Date: Fri, 20 Oct 2023 08:33:27 -0400 Subject: [PATCH 1/2] job list api integration --- .../client/src/components/Auth/SignInForm.jsx | 2 -- .../client/src/components/Jobs/Table.tsx | 2 +- .../job-launcher/client/src/hooks/useJobs.ts | 21 +++++++++++++ .../client/src/layouts/AuthLayout.tsx | 4 +-- .../apps/job-launcher/client/src/main.tsx | 2 -- .../client/src/pages/Job/JobList/index.tsx | 1 + .../job-launcher/client/src/services/job.ts | 16 ++++++++-- .../job-launcher/client/src/state/index.ts | 3 +- .../client/src/state/jobs/hooks.ts | 25 ---------------- .../client/src/state/jobs/reducer.ts | 30 ------------------- .../client/src/state/jobs/types.ts | 15 ---------- .../job-launcher/client/src/types/index.ts | 3 +- 12 files changed, 41 insertions(+), 83 deletions(-) create mode 100644 packages/apps/job-launcher/client/src/hooks/useJobs.ts delete mode 100644 packages/apps/job-launcher/client/src/state/jobs/hooks.ts delete mode 100644 packages/apps/job-launcher/client/src/state/jobs/reducer.ts delete mode 100644 packages/apps/job-launcher/client/src/state/jobs/types.ts diff --git a/packages/apps/job-launcher/client/src/components/Auth/SignInForm.jsx b/packages/apps/job-launcher/client/src/components/Auth/SignInForm.jsx index f6d46ec925..b71b96e9b1 100644 --- a/packages/apps/job-launcher/client/src/components/Auth/SignInForm.jsx +++ b/packages/apps/job-launcher/client/src/components/Auth/SignInForm.jsx @@ -7,7 +7,6 @@ import { Link } from 'react-router-dom'; import * as authService from '../../services/auth'; import { useAppDispatch } from '../../state'; import { fetchUserBalanceAsync, signIn } from '../../state/auth/reducer'; -import { fetchUserJobsAsync } from '../../state/jobs/reducer'; import { Password } from './Password'; import { LoginValidationSchema } from './schema'; @@ -35,7 +34,6 @@ export const SignInForm = ({ onError }) => { }); dispatch(signIn(data)); dispatch(fetchUserBalanceAsync()); - dispatch(fetchUserJobsAsync()); } catch (err) { onError(err?.response?.data?.message ?? err.message); } diff --git a/packages/apps/job-launcher/client/src/components/Jobs/Table.tsx b/packages/apps/job-launcher/client/src/components/Jobs/Table.tsx index 3808a64362..f28279a12a 100644 --- a/packages/apps/job-launcher/client/src/components/Jobs/Table.tsx +++ b/packages/apps/job-launcher/client/src/components/Jobs/Table.tsx @@ -3,7 +3,7 @@ import { Box, Button, IconButton, Typography } from '@mui/material'; import { Link, useNavigate } from 'react-router-dom'; import { CopyLinkIcon } from '../../components/Icons/CopyLinkIcon'; import { Table } from '../../components/Table'; -import { useJobs } from '../../state/jobs/hooks'; +import { useJobs } from '../../hooks/useJobs'; import { JobStatus } from '../../types'; export const JobTable = ({ diff --git a/packages/apps/job-launcher/client/src/hooks/useJobs.ts b/packages/apps/job-launcher/client/src/hooks/useJobs.ts new file mode 100644 index 0000000000..f72366bf5d --- /dev/null +++ b/packages/apps/job-launcher/client/src/hooks/useJobs.ts @@ -0,0 +1,21 @@ +import { ChainId } from '@human-protocol/sdk'; +import useSWR from 'swr'; +import * as jobService from '../services/job'; +import { JobStatus } from '../types'; + +export const useJobs = ({ + chainId, + status, +}: { + chainId?: ChainId; + status?: JobStatus; +}) => { + return useSWR(`human-protocol-jobs-${chainId}-${status}`, async () => { + try { + const jobs = await jobService.getJobList({ chainId, status }); + return jobs; + } catch (err) { + return []; + } + }); +}; diff --git a/packages/apps/job-launcher/client/src/layouts/AuthLayout.tsx b/packages/apps/job-launcher/client/src/layouts/AuthLayout.tsx index 1ed70450c3..68c048b908 100644 --- a/packages/apps/job-launcher/client/src/layouts/AuthLayout.tsx +++ b/packages/apps/job-launcher/client/src/layouts/AuthLayout.tsx @@ -59,9 +59,9 @@ export default function AuthLayout() { Pending - {/* + Completed - */} + Cancelled diff --git a/packages/apps/job-launcher/client/src/main.tsx b/packages/apps/job-launcher/client/src/main.tsx index b0b249debf..390234fc54 100644 --- a/packages/apps/job-launcher/client/src/main.tsx +++ b/packages/apps/job-launcher/client/src/main.tsx @@ -28,7 +28,6 @@ import { LOCAL_STORAGE_KEYS } from './constants'; import reportWebVitals from './reportWebVitals'; import { store } from './state'; import { fetchUserBalanceAsync, signIn } from './state/auth/reducer'; -import { fetchUserJobsAsync } from './state/jobs/reducer'; import theme from './theme'; // import { isJwtExpired } from './utils/jwt'; @@ -109,7 +108,6 @@ loadStripe(publishableKey).then((stripePromise) => { }) ); store.dispatch(fetchUserBalanceAsync()); - store.dispatch(fetchUserJobsAsync()); } root.render( diff --git a/packages/apps/job-launcher/client/src/pages/Job/JobList/index.tsx b/packages/apps/job-launcher/client/src/pages/Job/JobList/index.tsx index 54a2de09b7..5c3db69df3 100644 --- a/packages/apps/job-launcher/client/src/pages/Job/JobList/index.tsx +++ b/packages/apps/job-launcher/client/src/pages/Job/JobList/index.tsx @@ -8,6 +8,7 @@ import { JobStatus } from '../../../types'; const JOB_NAV_ITEMS = [ { status: JobStatus.LAUNCHED, label: 'launched' }, + { status: JobStatus.COMPLETED, label: 'completed' }, { status: JobStatus.PENDING, label: 'pending' }, { status: JobStatus.CANCELED, label: 'cancelled' }, { status: JobStatus.FAILED, label: 'failed' }, diff --git a/packages/apps/job-launcher/client/src/services/job.ts b/packages/apps/job-launcher/client/src/services/job.ts index 94d8d2565a..ba13131b22 100644 --- a/packages/apps/job-launcher/client/src/services/job.ts +++ b/packages/apps/job-launcher/client/src/services/job.ts @@ -1,3 +1,4 @@ +import { ChainId } from '@human-protocol/sdk'; import { CreateFortuneJobRequest, CreateCvatJobRequest, @@ -41,8 +42,19 @@ export const createCvatJob = async ( await api.post('/job/cvat', body); }; -export const getJobList = async (status?: JobStatus) => { - const { data } = await api.get(`/job/list`, { params: { status } }); +export const getJobList = async ({ + chainId = ChainId.ALL, + status, +}: { + chainId?: ChainId; + status?: JobStatus; +}) => { + const { data } = await api.get(`/job/list`, { + params: { + networks: chainId, + status, + }, + }); return data; }; diff --git a/packages/apps/job-launcher/client/src/state/index.ts b/packages/apps/job-launcher/client/src/state/index.ts index ab5f61b3ba..526600069a 100644 --- a/packages/apps/job-launcher/client/src/state/index.ts +++ b/packages/apps/job-launcher/client/src/state/index.ts @@ -3,10 +3,9 @@ import { useDispatch, useSelector, TypedUseSelectorHook } from 'react-redux'; import auth from './auth/reducer'; import dashboard from './dashboard/reducer'; -import jobs from './jobs/reducer'; export const store = configureStore({ - reducer: { auth, dashboard, jobs }, + reducer: { auth, dashboard }, }); export type AppState = ReturnType; diff --git a/packages/apps/job-launcher/client/src/state/jobs/hooks.ts b/packages/apps/job-launcher/client/src/state/jobs/hooks.ts deleted file mode 100644 index a74bedbbfa..0000000000 --- a/packages/apps/job-launcher/client/src/state/jobs/hooks.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ChainId, NETWORKS } from '@human-protocol/sdk'; -import { useAppSelector } from '..'; -import { JobStatus } from '../../types'; - -export const useJobs = ({ - status, - chainId, -}: { - status: JobStatus; - chainId: ChainId; -}) => { - const { jobs, dataLoaded, loadingFailed } = useAppSelector( - (state) => state.jobs - ); - - return { - data: jobs.filter( - (job) => - (status === JobStatus.ALL || job.status === status) && - (chainId === ChainId.ALL || NETWORKS[chainId]?.title === job.network) - ), - isLoading: !dataLoaded && !loadingFailed, - isError: loadingFailed, - }; -}; diff --git a/packages/apps/job-launcher/client/src/state/jobs/reducer.ts b/packages/apps/job-launcher/client/src/state/jobs/reducer.ts deleted file mode 100644 index 56d012b016..0000000000 --- a/packages/apps/job-launcher/client/src/state/jobs/reducer.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { createAsyncThunk, createReducer } from '@reduxjs/toolkit'; -import { AppState } from '..'; -import * as jobService from '../../services/job'; -import { JobsState, UserJob } from './types'; - -const initialState: JobsState = { - jobs: [], - dataLoaded: false, - loadingFailed: false, -}; - -export const fetchUserJobsAsync = createAsyncThunk< - UserJob[], - void, - { state: AppState } ->('auth/fetchUserJobsAsync', async () => { - const jobs = await jobService.getJobList(); - return jobs; -}); - -export default createReducer(initialState, (builder) => { - builder.addCase(fetchUserJobsAsync.fulfilled, (state, action) => { - state.jobs = action.payload; - state.dataLoaded = true; - }); - builder.addCase(fetchUserJobsAsync.rejected, (state, action) => { - state.loadingFailed = true; - state.dataLoaded = false; - }); -}); diff --git a/packages/apps/job-launcher/client/src/state/jobs/types.ts b/packages/apps/job-launcher/client/src/state/jobs/types.ts deleted file mode 100644 index 196ff6b35e..0000000000 --- a/packages/apps/job-launcher/client/src/state/jobs/types.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { JobStatus } from '../../types'; - -export type UserJob = { - address: string; - fundAmount: number; - jobId: number; - network: string; - status: JobStatus; -}; - -export type JobsState = { - jobs: UserJob[]; - dataLoaded: boolean; - loadingFailed: boolean; -}; diff --git a/packages/apps/job-launcher/client/src/types/index.ts b/packages/apps/job-launcher/client/src/types/index.ts index 718195eb8e..96975d338d 100644 --- a/packages/apps/job-launcher/client/src/types/index.ts +++ b/packages/apps/job-launcher/client/src/types/index.ts @@ -102,8 +102,7 @@ export enum JobStatus { PENDING = 'PENDING', CANCELED = 'CANCELED', FAILED = 'FAILED', - PAID = 'PAID', - TO_CANCEL = 'TO_CANCEL', + COMPLETED = 'COMPLETED', } export type JobDetailsResponse = { From 9cc4975a1180d07b13a24069c3697b040356503d Mon Sep 17 00:00:00 2001 From: m00n620 Date: Mon, 23 Oct 2023 12:02:16 -0400 Subject: [PATCH 2/2] fix all networks --- packages/apps/job-launcher/client/src/services/job.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/apps/job-launcher/client/src/services/job.ts b/packages/apps/job-launcher/client/src/services/job.ts index ba13131b22..888a876c17 100644 --- a/packages/apps/job-launcher/client/src/services/job.ts +++ b/packages/apps/job-launcher/client/src/services/job.ts @@ -1,4 +1,5 @@ import { ChainId } from '@human-protocol/sdk'; +import { SUPPORTED_CHAIN_IDS } from '../constants/chains'; import { CreateFortuneJobRequest, CreateCvatJobRequest, @@ -51,7 +52,7 @@ export const getJobList = async ({ }) => { const { data } = await api.get(`/job/list`, { params: { - networks: chainId, + networks: chainId === ChainId.ALL ? SUPPORTED_CHAIN_IDS : chainId, status, }, });