diff --git a/new-lamassu-admin/src/pages/AddMachine/AddMachine.js b/new-lamassu-admin/src/pages/AddMachine/AddMachine.js index 368a522f..45d531d1 100644 --- a/new-lamassu-admin/src/pages/AddMachine/AddMachine.js +++ b/new-lamassu-admin/src/pages/AddMachine/AddMachine.js @@ -109,8 +109,13 @@ const initialValues = { const validationSchema = Yup.object().shape({ name: Yup.string() - .required() + .required('Machine name is required.') .max(50) + .test( + 'unique-name', + 'Machine name is already in use.', + (value, context) => !context.options.context.machineNames.includes(value) + ) }) const MachineNameComponent = ({ nextStep, classes, setQrCode, setName }) => { @@ -125,6 +130,19 @@ const MachineNameComponent = ({ nextStep, classes, setQrCode, setName }) => { onError: e => console.log(e) }) + const { data } = useQuery(GET_MACHINES) + const machineNames = R.map(R.prop('name'), data?.machines || {}) + + const uniqueNameValidator = value => { + try { + validationSchema.validateSync(value, { + context: { machineNames: machineNames } + }) + } catch (error) { + return error + } + } + return ( <> @@ -134,23 +152,26 @@ const MachineNameComponent = ({ nextStep, classes, setQrCode, setName }) => { validateOnBlur={false} validateOnChange={false} initialValues={initialValues} - validationSchema={validationSchema} + validate={uniqueNameValidator} onSubmit={({ name }) => { setName(name) register({ variables: { name } }) }}> -
-
- -
-
- -
-
+ {({ errors }) => ( +
+
+ +
+ {errors &&

{errors.message}

} +
+ +
+
+ )} ) diff --git a/new-lamassu-admin/src/pages/AddMachine/styles.js b/new-lamassu-admin/src/pages/AddMachine/styles.js index f29e9f24..8e11e216 100644 --- a/new-lamassu-admin/src/pages/AddMachine/styles.js +++ b/new-lamassu-admin/src/pages/AddMachine/styles.js @@ -5,7 +5,8 @@ import { primaryColor, mainWidth, spring2, - spring3 + spring3, + errorColor } from 'src/styling/variables' const { tl2, p } = typographyStyles @@ -122,6 +123,9 @@ const styles = { display: 'flex', flexDirection: 'col', alignItems: 'center' + }, + errorMessage: { + color: errorColor } }