[Job Launcher] job list api integration (#1106)

* job list api integration

* fix all networks

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);
     }

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 = ({

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 [];
+    }
+  });
+};

packages/apps/job-launcher/client/src/layouts/AuthLayout.tsx

@@ -59,9 +59,9 @@ export default function AuthLayout() {
                 <ListItem>
                   <Link to="/jobs/pending">Pending</Link>
                 </ListItem>
-                {/* <ListItem>
+                <ListItem>
                   <Link to="/jobs/completed">Completed</Link>
-                </ListItem> */}
+                </ListItem>
                 <ListItem>
                   <Link to="/jobs/cancelled">Cancelled</Link>
                 </ListItem>

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(

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' },

packages/apps/job-launcher/client/src/services/job.ts

@@ -1,3 +1,5 @@
+import { ChainId } from '@human-protocol/sdk';
+import { SUPPORTED_CHAIN_IDS } from '../constants/chains';
 import {
   CreateFortuneJobRequest,
   CreateCvatJobRequest,
@@ -41,8 +43,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 === ChainId.ALL ? SUPPORTED_CHAIN_IDS : chainId,
+      status,
+    },
+  });
   return data;
 };
 

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<typeof store.getState>;

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 = {