[Job Launcher] - Client common fixes

packages/apps/job-launcher/client/src/components/Auth/SignInForm.jsx

@@ -7,6 +7,7 @@ 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';
 
@@ -34,6 +35,7 @@ export const SignInForm = ({ onError }) => {
       });
       dispatch(signIn(data));
       dispatch(fetchUserBalanceAsync());
+      dispatch(fetchUserJobsAsync());
     } catch (err) {
       onError(err?.response?.data?.message);
     }

packages/apps/job-launcher/client/src/components/Jobs/Create/CreateJob.tsx

@@ -31,7 +31,7 @@ export const CreateJob = () => {
           '0px 1px 5px 0px rgba(233, 235, 250, 0.20), 0px 2px 2px 0px rgba(233, 235, 250, 0.50), 0px 3px 1px -2px #E9EBFA',
       }}
     >
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 5 }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
         <FormControl variant="standard" sx={{ minWidth: 220 }}>
           <InputLabel id="job-type-select-label">Job Type</InputLabel>
           <Select

packages/apps/job-launcher/client/src/components/Jobs/Create/CvatJobRequestForm.tsx

@@ -14,18 +14,20 @@ import { Formik } from 'formik';
 import React from 'react';
 import { useCreateJobPageUI } from '../../../providers/CreateJobPageUIProvider';
 import { CvatJobType } from '../../../types';
+import { CvatJobRequestValidationSchema } from './schema';
 
 export const CvatJobRequestForm = () => {
   const { jobRequest, updateJobRequest, goToPrevStep, goToNextStep } =
     useCreateJobPageUI();
 
   const initialValues = {
     labels: [],
-    type: CvatJobType.IMAGE_LABEL_BINARY,
+    type: CvatJobType.IMAGE_POINTS,
     description: '',
     dataUrl: '',
     groundTruthUrl: '',
-    accuracyTarget: undefined,
+    userGuide: '',
+    accuracyTarget: 80,
   };
 
   const handleNext = ({
@@ -34,6 +36,7 @@ export const CvatJobRequestForm = () => {
     description,
     dataUrl,
     groundTruthUrl,
+    userGuide,
     accuracyTarget,
   }: any) => {
     updateJobRequest?.({
@@ -44,6 +47,7 @@ export const CvatJobRequestForm = () => {
         description,
         dataUrl,
         groundTruthUrl,
+        userGuide,
         accuracyTarget,
       },
     });
@@ -54,7 +58,7 @@ export const CvatJobRequestForm = () => {
     <Box>
       <Formik
         initialValues={initialValues}
-        // validationSchema={RegisterValidationSchema}
+        validationSchema={CvatJobRequestValidationSchema}
         onSubmit={handleNext}
       >
         {({
@@ -70,44 +74,10 @@ export const CvatJobRequestForm = () => {
           <form>
             <Grid container spacing={4} mb={4}>
               <Grid item xs={12} sm={12} md={6}>
-                <FormControl fullWidth sx={{ mb: 4 }}>
-                  <Autocomplete
-                    clearIcon={false}
-                    options={[]}
-                    freeSolo
-                    multiple
-                    renderTags={(value, props) =>
-                      value.map((option, index) => (
-                        <Chip label={option} {...props({ index })} />
-                      ))
-                    }
-                    renderInput={(params) => (
-                      <TextField label="Labels" {...params} />
-                    )}
-                    onChange={(e, value) => setFieldValue('labels', value)}
-                    onBlur={handleBlur}
-                    placeholder="Labels"
-                  />
-                </FormControl>
-                <FormControl fullWidth>
-                  <TextField
-                    name="description"
-                    value={values.description}
-                    onChange={(e) =>
-                      setFieldValue('description', e.target.value)
-                    }
-                    onBlur={handleBlur}
-                    placeholder="Description"
-                    error={touched.description && Boolean(errors.description)}
-                    helperText={errors.description}
-                    multiline
-                    rows={8}
-                  />
-                </FormControl>
-              </Grid>
-              <Grid item xs={12} sm={12} md={6}>
-                <FormControl variant="standard" fullWidth sx={{ mb: 4 }}>
-                  <InputLabel id="cvat-job-type-select-label">Type</InputLabel>
+                <FormControl variant="standard" fullWidth sx={{ mb: 2 }}>
+                  <InputLabel id="cvat-job-type-select-label">
+                    Type of job
+                  </InputLabel>
                   <Select
                     labelId="cvat-job-type-select-label"
                     id="cvat-job-type-select"
@@ -129,16 +99,49 @@ export const CvatJobRequestForm = () => {
                     error={touched.type && Boolean(errors.type)}
                     onBlur={handleBlur}
                   >
-                    <MenuItem value={CvatJobType.IMAGE_LABEL_BINARY}>
-                      Binary Classification
-                    </MenuItem>
                     <MenuItem value={CvatJobType.IMAGE_POINTS}>Points</MenuItem>
                     <MenuItem value={CvatJobType.IMAGE_BOXES}>
                       Bounding Boxes
                     </MenuItem>
                   </Select>
                 </FormControl>
-                <FormControl fullWidth sx={{ mb: 3 }}>
+                <FormControl fullWidth>
+                  <TextField
+                    name="description"
+                    value={values.description}
+                    onChange={(e) =>
+                      setFieldValue('description', e.target.value)
+                    }
+                    onBlur={handleBlur}
+                    placeholder="Description"
+                    error={touched.description && Boolean(errors.description)}
+                    helperText={errors.description}
+                    multiline
+                    rows={11}
+                  />
+                </FormControl>
+              </Grid>
+              <Grid item xs={12} sm={12} md={6}>
+                <FormControl fullWidth sx={{ mb: 2 }}>
+                  <Autocomplete
+                    clearIcon={false}
+                    options={[]}
+                    freeSolo
+                    multiple
+                    renderTags={(value, props) =>
+                      value.map((option, index) => (
+                        <Chip label={option} {...props({ index })} />
+                      ))
+                    }
+                    renderInput={(params) => (
+                      <TextField label="Labels" {...params} />
+                    )}
+                    onChange={(e, value) => setFieldValue('labels', value)}
+                    onBlur={handleBlur}
+                    placeholder="Labels"
+                  />
+                </FormControl>
+                <FormControl fullWidth sx={{ mb: 2 }}>
                   <TextField
                     name="dataUrl"
                     value={values.dataUrl}
@@ -149,7 +152,7 @@ export const CvatJobRequestForm = () => {
                     helperText={errors.dataUrl}
                   />
                 </FormControl>
-                <FormControl fullWidth sx={{ mb: 3 }}>
+                <FormControl fullWidth sx={{ mb: 2 }}>
                   <TextField
                     name="groundTruthUrl"
                     value={values.groundTruthUrl}
@@ -164,6 +167,17 @@ export const CvatJobRequestForm = () => {
                     helperText={errors.groundTruthUrl}
                   />
                 </FormControl>
+                <FormControl fullWidth sx={{ mb: 2 }}>
+                  <TextField
+                    name="userGuide"
+                    value={values.userGuide}
+                    onChange={(e) => setFieldValue('userGuide', e.target.value)}
+                    onBlur={handleBlur}
+                    placeholder="User Guide"
+                    error={touched.userGuide && Boolean(errors.userGuide)}
+                    helperText={errors.userGuide}
+                  />
+                </FormControl>
                 <FormControl fullWidth>
                   <TextField
                     name="accuracyTarget"
@@ -181,7 +195,6 @@ export const CvatJobRequestForm = () => {
                   />
                 </FormControl>
               </Grid>
-              <Grid item xs={12} sm={12} md={6}></Grid>
             </Grid>
             <Box
               sx={{

packages/apps/job-launcher/client/src/components/Jobs/Create/FortuneJobRequestForm.tsx

@@ -2,6 +2,7 @@ import { Box, Button, FormControl, Grid, TextField } from '@mui/material';
 import { Formik } from 'formik';
 import React from 'react';
 import { useCreateJobPageUI } from '../../../providers/CreateJobPageUIProvider';
+import { FortuneJobRequestValidationSchema } from './schema';
 
 export const FortuneJobRequestForm = () => {
   const { jobRequest, updateJobRequest, goToPrevStep, goToNextStep } =
@@ -29,7 +30,7 @@ export const FortuneJobRequestForm = () => {
     <Box>
       <Formik
         initialValues={initialValues}
-        // validationSchema={RegisterValidationSchema}
+        validationSchema={FortuneJobRequestValidationSchema}
         onSubmit={handleNext}
       >
         {({
@@ -43,7 +44,7 @@ export const FortuneJobRequestForm = () => {
           setFieldValue,
         }) => (
           <form>
-            <Grid container spacing={4} mb={4}>
+            <Grid container spacing={2} mb={4}>
               <Grid item xs={12} sm={12} md={6}>
                 <FormControl fullWidth>
                   <TextField

packages/apps/job-launcher/client/src/components/Jobs/Create/schema.ts

@@ -0,0 +1,23 @@
+import * as Yup from 'yup';
+
+export const CvatJobRequestValidationSchema = Yup.object().shape({
+  title: Yup.string().required('Title is required'),
+  description: Yup.string().required('Description is required'),
+  dataUrl: Yup.string().required('Data URL is required').url('Invalid URL'),
+  groundTruthUrl: Yup.string()
+    .required('Ground Truth URL is required')
+    .url('Invalid URL'),
+  userGuide: Yup.string()
+    .required('User Guide URL is required')
+    .url('Invalid URL'),
+  accuracyTarget: Yup.number()
+    .required('Accuracy target is required')
+    .min(0)
+    .max(100),
+});
+
+export const FortuneJobRequestValidationSchema = Yup.object().shape({
+  title: Yup.string().required('Title is required'),
+  description: Yup.string().required('Description is required'),
+  fortunesRequested: Yup.number().required('FortunesRequested is required'),
+});

packages/apps/job-launcher/client/src/components/Jobs/StatusToggleButtons.tsx

@@ -1,26 +1,21 @@
 import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
-import * as React from 'react';
+import ToggleButtonGroup, {
+  ToggleButtonGroupProps,
+} from '@mui/material/ToggleButtonGroup';
+import React, { FC } from 'react';
+import { JobStatus } from '../../types';
 
 const RANGE_BUTTONS = [
-  { label: 'All', value: 'All' },
-  { label: 'Launched', value: 'Launched' },
-  { label: 'Pending', value: 'Pending' },
-  { label: 'Completed', value: 'Completed' },
-  { label: 'Cancelled', value: 'Cancelled' },
-  { label: 'Failed', value: 'Failed' },
+  { label: 'All', value: JobStatus.ALL },
+  { label: 'Launched', value: JobStatus.LAUNCHED },
+  { label: 'Pending', value: JobStatus.PENDING },
+  { label: 'Cancelled', value: JobStatus.CANCELED },
+  { label: 'Failed', value: JobStatus.FAILED },
 ];
 
-export function StatusToggleButtons() {
-  const handleChange = (
-    event: React.MouseEvent<HTMLElement>,
-    newValue: number
-  ) => {
-    console.log(newValue);
-  };
-
+export const StatusToggleButtons: FC<ToggleButtonGroupProps> = (props) => {
   return (
-    <ToggleButtonGroup value={'All'} exclusive onChange={handleChange}>
+    <ToggleButtonGroup {...props}>
       {RANGE_BUTTONS.map(({ label, value }) => (
         <ToggleButton
           key={label}
@@ -38,4 +33,4 @@ export function StatusToggleButtons() {
       ))}
     </ToggleButtonGroup>
   );
-}
+};

packages/apps/job-launcher/client/src/components/Jobs/Table.tsx

@@ -1,13 +1,20 @@
+import { ChainId } from '@human-protocol/sdk';
 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 '../../hooks/useJobs';
+import { useJobs } from '../../state/jobs/hooks';
 import { JobStatus } from '../../types';
 
-export const JobTable = ({ status }: { status: JobStatus }) => {
+export const JobTable = ({
+  status,
+  chainId,
+}: {
+  status: JobStatus;
+  chainId?: ChainId;
+}) => {
+  const { data, isLoading } = useJobs({ status, chainId });
   const navigate = useNavigate();
-  const { data, isLoading } = useJobs(status);
 
   return (
     <Table

packages/apps/job-launcher/client/src/main.tsx

@@ -28,6 +28,7 @@ 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';
 
@@ -108,6 +109,7 @@ loadStripe(publishableKey).then((stripePromise) => {
       })
     );
     store.dispatch(fetchUserBalanceAsync());
+    store.dispatch(fetchUserJobsAsync());
   }
 
   root.render(