From f294a83ebc8de0d4acd9a4a8fd4b1909c6e6917d Mon Sep 17 00:00:00 2001
From: Nikola Ubavic <53820106+ubavic@users.noreply.github.com>
Date: Mon, 18 Oct 2021 12:28:13 +0200
Subject: [PATCH] fix: add unique machine name validation

---
 .../src/pages/AddMachine/AddMachine.js        | 52 ++++++++++++++-----
 .../src/pages/AddMachine/styles.js            |  6 ++-
 2 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/new-lamassu-admin/src/pages/AddMachine/AddMachine.js b/new-lamassu-admin/src/pages/AddMachine/AddMachine.js
index 368a522f..5c5bd46f 100644
--- a/new-lamassu-admin/src/pages/AddMachine/AddMachine.js
+++ b/new-lamassu-admin/src/pages/AddMachine/AddMachine.js
@@ -109,8 +109,16 @@ 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) => {
+        if (context.options.context.machineNames.includes(value)) return false
+        return true
+      }
+    )
 })
 
 const MachineNameComponent = ({ nextStep, classes, setQrCode, setName }) => {
@@ -125,6 +133,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 (
     <>
       <Info2 className={classes.nameTitle}>
@@ -134,23 +155,26 @@ const MachineNameComponent = ({ nextStep, classes, setQrCode, setName }) => {
         validateOnBlur={false}
         validateOnChange={false}
         initialValues={initialValues}
-        validationSchema={validationSchema}
+        validate={uniqueNameValidator}
         onSubmit={({ name }) => {
           setName(name)
           register({ variables: { name } })
         }}>
-        <Form className={classes.form}>
-          <div>
-            <FastField
-              name="name"
-              label="Enter machine name"
-              component={TextInput}
-            />
-          </div>
-          <div className={classes.button}>
-            <Button type="submit">Submit</Button>
-          </div>
-        </Form>
+        {({ errors }) => (
+          <Form className={classes.form}>
+            <div>
+              <FastField
+                name="name"
+                label="Enter machine name"
+                component={TextInput}
+              />
+            </div>
+            {errors && <P className={classes.errorMessage}>{errors.message}</P>}
+            <div className={classes.button}>
+              <Button type="submit">Submit</Button>
+            </div>
+          </Form>
+        )}
       </Formik>
     </>
   )
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
   }
 }