From dfd6582f942b7ae7051ee727d229484ffebdd3ee Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Fri, 27 Oct 2023 09:36:57 +0700
Subject: [PATCH 1/7] Add user form and fix bug

---
 hotel-management/src/hooks/useForm.ts         |   3 +-
 hotel-management/src/pages/User/Dialog.tsx    |  39 ++++
 hotel-management/src/pages/User/Form.tsx      | 193 ++++++++++++++++++
 .../pages/User/{UserTable.tsx => Table.tsx}   |   0
 hotel-management/src/pages/User/index.tsx     |  37 +++-
 5 files changed, 261 insertions(+), 11 deletions(-)
 create mode 100644 hotel-management/src/pages/User/Dialog.tsx
 create mode 100644 hotel-management/src/pages/User/Form.tsx
 rename hotel-management/src/pages/User/{UserTable.tsx => Table.tsx} (100%)

diff --git a/hotel-management/src/hooks/useForm.ts b/hotel-management/src/hooks/useForm.ts
index 74be96e..fa5e71c 100644
--- a/hotel-management/src/hooks/useForm.ts
+++ b/hotel-management/src/hooks/useForm.ts
@@ -33,7 +33,6 @@ const useForm = (
 
   // Get a local copy of stateSchema
   useEffect(() => {
-    setDisable(true); // Disable button in initial render.
     setInitialErrorState();
   }, []); // eslint-disable-line
 
@@ -116,8 +115,10 @@ const useForm = (
 
       // Making sure that there's no error in the state
       // before calling the submit callback function
+      // and disabled button
       if (!validateErrorState()) {
         submitFormCallback(values);
+        setDisable(true);
       }
     },
     [validateErrorState, submitFormCallback, values],
diff --git a/hotel-management/src/pages/User/Dialog.tsx b/hotel-management/src/pages/User/Dialog.tsx
new file mode 100644
index 0000000..a3d0427
--- /dev/null
+++ b/hotel-management/src/pages/User/Dialog.tsx
@@ -0,0 +1,39 @@
+import { forwardRef, useEffect } from 'react';
+
+// Components
+import Dialog from '../../components/Dialog';
+import UserForm from './Form';
+
+// Interfaces
+import { IDialogProps } from '../../globals/interfaces';
+
+const UserDialog = forwardRef((props, ref) => {
+  const dialogRef = ref as React.MutableRefObject<
+    HTMLDialogElement | undefined
+  >;
+  const { onClose } = props;
+
+  useEffect(() => {
+    if (dialogRef.current) {
+      dialogRef.current.addEventListener('click', (e: MouseEvent) => {
+        const dialogDimensions = dialogRef.current!.getBoundingClientRect();
+        if (
+          e.clientX < dialogDimensions.left ||
+          e.clientX > dialogDimensions.right ||
+          e.clientY < dialogDimensions.top ||
+          e.clientY > dialogDimensions.bottom
+        ) {
+          dialogRef.current!.close();
+        }
+      });
+    }
+  });
+
+  return (
+    <Dialog title={'Add user'} onClose={onClose} ref={dialogRef}>
+      <UserForm onClose={onClose!} />
+    </Dialog>
+  );
+}) as React.FC<IDialogProps>;
+
+export default UserDialog;
diff --git a/hotel-management/src/pages/User/Form.tsx b/hotel-management/src/pages/User/Form.tsx
new file mode 100644
index 0000000..25f046f
--- /dev/null
+++ b/hotel-management/src/pages/User/Form.tsx
@@ -0,0 +1,193 @@
+import styled from 'styled-components';
+
+// Styled
+import Input from '../../commons/styles/Input';
+import { useState } from 'react';
+import TextArea from '../../commons/styles/TextArea';
+
+// Components
+import Form from '../../components/Form';
+import FormRow from '../../components/FormRow';
+import Button from '../../commons/styles/Button.ts';
+
+// Types
+import { TKeyValue, TStateSchema } from '../../globals/types';
+
+// Hooks
+import useForm from '../../hooks/useForm';
+
+// Utils
+import {
+  isValidAddress,
+  isValidNumber,
+  isValidPhoneNumber,
+  isValidString,
+} from '../../helpers/validators';
+
+const FormBtn = styled(Button)`
+  width: 100%;
+
+  &:disabled,
+  &[disabled] {
+    background-color: var(--disabled-btn-color);
+  }
+`;
+
+interface IUserFormProp {
+  onClose: () => void;
+}
+
+const UserForm = ({ onClose }: IUserFormProp) => {
+  const [reset, setReset] = useState(true);
+
+  // Define your state schema
+  const stateSchema: TStateSchema = {
+    fullName: { value: '', error: '' },
+    identifiedCode: { value: '', error: '' },
+    phone: { value: '', error: '' },
+    room: { value: '', error: '' },
+    address: { value: '', error: '' },
+  };
+
+  // Submit form
+  const onSubmitForm = (state: TKeyValue) => {
+    alert(JSON.stringify(state, null, 2));
+    onClose();
+    onResetForm();
+  };
+
+  const { values, errors, dirty, handleOnChange, handleOnSubmit, disable } =
+    useForm(
+      stateSchema,
+      {
+        fullName: {
+          required: true,
+          validator: {
+            func: (input) => isValidString(input),
+            error: 'Invalid full name format.',
+          },
+        },
+        identifiedCode: {
+          required: true,
+          validator: {
+            func: (input) => isValidNumber(input),
+            error: 'Invalid identified code format.',
+          },
+        },
+        phone: {
+          required: true,
+          validator: {
+            func: (input) => isValidPhoneNumber(input),
+            error: 'Invalid phone format.',
+          },
+        },
+        room: {
+          required: true,
+          validator: {
+            func: (input) => isValidNumber(input),
+            error: 'Invalid room number format.',
+          },
+        },
+        address: {
+          required: true,
+          validator: {
+            func: (input) => isValidAddress(input),
+            error: 'Invalid address format.',
+          },
+        },
+      },
+      onSubmitForm,
+    );
+
+  const { fullName, identifiedCode, phone, room, address } = values;
+
+  // Reset form
+  const onResetForm = () => {
+    setReset(() => !reset);
+    Object.keys(values).forEach((key) => (values[key] = ''));
+  };
+
+  return (
+    <Form onSubmit={handleOnSubmit}>
+      <Input type="hidden" id="id" />
+      <FormRow
+        label="Full Name"
+        error={
+          errors.fullName && dirty.fullName ? (errors.fullName as string) : ''
+        }
+      >
+        <Input
+          type="text"
+          name="fullName"
+          value={fullName as string}
+          onChange={handleOnChange}
+        />
+      </FormRow>
+
+      <FormRow
+        label="Identified Code"
+        error={
+          errors.identifiedCode && dirty.identifiedCode
+            ? (errors.identifiedCode as string)
+            : ''
+        }
+      >
+        <Input
+          type="text"
+          name="identifiedCode"
+          value={identifiedCode as string}
+          onChange={handleOnChange}
+        />
+      </FormRow>
+
+      <FormRow
+        label="Phone"
+        error={errors.phone && dirty.phone ? (errors.phone as string) : ''}
+      >
+        <Input
+          type="text"
+          name="phone"
+          value={phone as string}
+          onChange={handleOnChange}
+        />
+      </FormRow>
+
+      <FormRow
+        label="Room"
+        error={errors.room && dirty.room ? (errors.room as string) : ''}
+      >
+        <Input
+          type="text"
+          name="room"
+          value={room as string}
+          onChange={handleOnChange}
+        />
+      </FormRow>
+
+      <FormRow
+        label="Address"
+        error={
+          errors.address && dirty.address ? (errors.address as string) : ''
+        }
+      >
+        <TextArea
+          name="address"
+          rows={3}
+          value={address as string}
+          onChange={handleOnChange}
+        />
+      </FormRow>
+
+      <Form.Action>
+        <FormBtn type="submit" name="submit" disabled={disable}>
+          Add
+        </FormBtn>
+        <FormBtn type="button" styled="secondary" onClick={onClose}>
+          Close
+        </FormBtn>
+      </Form.Action>
+    </Form>
+  );
+};
+
+export default UserForm;
diff --git a/hotel-management/src/pages/User/UserTable.tsx b/hotel-management/src/pages/User/Table.tsx
similarity index 100%
rename from hotel-management/src/pages/User/UserTable.tsx
rename to hotel-management/src/pages/User/Table.tsx
diff --git a/hotel-management/src/pages/User/index.tsx b/hotel-management/src/pages/User/index.tsx
index d6cda30..a972efb 100644
--- a/hotel-management/src/pages/User/index.tsx
+++ b/hotel-management/src/pages/User/index.tsx
@@ -1,21 +1,38 @@
+import { useRef } from 'react';
+
 // Components
 import Direction from '../../commons/styles/Direction';
-import Button from '../../commons/styles/Button';
-import UserTable from './UserTable';
+import Button from '../../commons/styles/Button.ts';
+import UserTable from './Table';
 
 // Styled
 import { StyledUser, Title } from './styled';
+import UserDialog from './Dialog';
 
 const User = () => {
-  return (
-    <StyledUser>
-      <Direction type="horizontal">
-        <Title>List User</Title>
-        <Button>Add user</Button>
-      </Direction>
+  const dialogRef = useRef<HTMLDialogElement>();
 
-      <UserTable />
-    </StyledUser>
+  const openDialog = () => {
+    dialogRef.current?.showModal();
+  };
+
+  const closeDialog = () => {
+    dialogRef.current?.close();
+  };
+
+  return (
+    <>
+      <StyledUser>
+        <Direction type="horizontal">
+          <Title>List User</Title>
+          <Button onClick={openDialog}>Add user</Button>
+        </Direction>
+
+        <UserTable />
+      </StyledUser>
+
+      <UserDialog onClose={closeDialog} ref={dialogRef} />
+    </>
   );
 };
 

From 1ddddaa89848ad1ef1d774f2796df69f3c828a49 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Fri, 27 Oct 2023 09:45:30 +0700
Subject: [PATCH 2/7] Fix code format

---
 hotel-management/src/pages/User/Dialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/hotel-management/src/pages/User/Dialog.tsx b/hotel-management/src/pages/User/Dialog.tsx
index a3d0427..defe696 100644
--- a/hotel-management/src/pages/User/Dialog.tsx
+++ b/hotel-management/src/pages/User/Dialog.tsx
@@ -27,7 +27,7 @@ const UserDialog = forwardRef((props, ref) => {
         }
       });
     }
-  });
+  }, [dialogRef]);
 
   return (
     <Dialog title={'Add user'} onClose={onClose} ref={dialogRef}>

From 4ab846da3ca82c8279318179399532b9cc9406d4 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Fri, 27 Oct 2023 09:53:03 +0700
Subject: [PATCH 3/7] Fix code format style

---
 hotel-management/src/pages/User/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/hotel-management/src/pages/User/index.tsx b/hotel-management/src/pages/User/index.tsx
index a972efb..8fa2d9a 100644
--- a/hotel-management/src/pages/User/index.tsx
+++ b/hotel-management/src/pages/User/index.tsx
@@ -2,7 +2,7 @@ import { useRef } from 'react';
 
 // Components
 import Direction from '../../commons/styles/Direction';
-import Button from '../../commons/styles/Button.ts';
+import Button from '../../commons/styles/Button';
 import UserTable from './Table';
 
 // Styled

From e95ac9c4ca2469fa6b0cde955c49745fbcf83cb4 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Fri, 27 Oct 2023 11:31:03 +0700
Subject: [PATCH 4/7] Fix code style format

---
 hotel-management/src/constants/messages.ts |   5 +
 hotel-management/src/helpers/utils.ts      |   9 ++
 hotel-management/src/pages/User/Form.tsx   | 121 +++++++++++++--------
 3 files changed, 91 insertions(+), 44 deletions(-)
 create mode 100644 hotel-management/src/constants/messages.ts

diff --git a/hotel-management/src/constants/messages.ts b/hotel-management/src/constants/messages.ts
new file mode 100644
index 0000000..67eb3df
--- /dev/null
+++ b/hotel-management/src/constants/messages.ts
@@ -0,0 +1,5 @@
+const invalidFormatMessage = (field: string) => {
+  return `Invalid ${field} format`;
+};
+
+export { invalidFormatMessage };
diff --git a/hotel-management/src/helpers/utils.ts b/hotel-management/src/helpers/utils.ts
index 767a3d0..6ba313c 100644
--- a/hotel-management/src/helpers/utils.ts
+++ b/hotel-management/src/helpers/utils.ts
@@ -1,3 +1,4 @@
+import { invalidFormatMessage } from '../constants/messages';
 import { TKeyValue, TPropValues, TStateSchema } from '../globals/types';
 
 const VALUE = 'value';
@@ -27,10 +28,18 @@ const getPropValues = (stateSchema: TStateSchema, prop?: TPropValues) => {
   }, {} as TKeyValue);
 };
 
+const addValidator = (func: (input: string) => boolean, error: string) => {
+  return {
+    func: func,
+    error: invalidFormatMessage(error),
+  };
+};
+
 export {
   isObject,
   isRequired,
   getPropValues,
+  addValidator,
   VALUE,
   ERROR,
   REQUIRED_FIELD_ERROR,
diff --git a/hotel-management/src/pages/User/Form.tsx b/hotel-management/src/pages/User/Form.tsx
index 25f046f..b455f04 100644
--- a/hotel-management/src/pages/User/Form.tsx
+++ b/hotel-management/src/pages/User/Form.tsx
@@ -23,6 +23,7 @@ import {
   isValidPhoneNumber,
   isValidString,
 } from '../../helpers/validators';
+import { addValidator } from '../../helpers/utils.ts';
 
 const FormBtn = styled(Button)`
   width: 100%;
@@ -49,6 +50,44 @@ const UserForm = ({ onClose }: IUserFormProp) => {
     address: { value: '', error: '' },
   };
 
+  const stateValidatorSchema = {
+    fullName: {
+      required: true,
+      validator: addValidator(
+        (input: string) => isValidString(input),
+        'full name',
+      ),
+    },
+    identifiedCode: {
+      required: true,
+      validator: addValidator(
+        (input: string) => isValidNumber(input),
+        'identified code',
+      ),
+    },
+    phone: {
+      required: true,
+      validator: addValidator(
+        (input: string) => isValidPhoneNumber(input),
+        'phone',
+      ),
+    },
+    room: {
+      required: true,
+      validator: addValidator(
+        (input: string) => isValidNumber(input),
+        'room number',
+      ),
+    },
+    address: {
+      required: true,
+      validator: addValidator(
+        (input: string) => isValidAddress(input),
+        'address',
+      ),
+    },
+  };
+
   // Submit form
   const onSubmitForm = (state: TKeyValue) => {
     alert(JSON.stringify(state, null, 2));
@@ -56,54 +95,32 @@ const UserForm = ({ onClose }: IUserFormProp) => {
     onResetForm();
   };
 
-  const { values, errors, dirty, handleOnChange, handleOnSubmit, disable } =
+  // prettier-ignore
+  const { 
+    values, 
+    errors, 
+    dirty, 
+    handleOnChange, 
+    handleOnSubmit, 
+    disable }  =
     useForm(
       stateSchema,
-      {
-        fullName: {
-          required: true,
-          validator: {
-            func: (input) => isValidString(input),
-            error: 'Invalid full name format.',
-          },
-        },
-        identifiedCode: {
-          required: true,
-          validator: {
-            func: (input) => isValidNumber(input),
-            error: 'Invalid identified code format.',
-          },
-        },
-        phone: {
-          required: true,
-          validator: {
-            func: (input) => isValidPhoneNumber(input),
-            error: 'Invalid phone format.',
-          },
-        },
-        room: {
-          required: true,
-          validator: {
-            func: (input) => isValidNumber(input),
-            error: 'Invalid room number format.',
-          },
-        },
-        address: {
-          required: true,
-          validator: {
-            func: (input) => isValidAddress(input),
-            error: 'Invalid address format.',
-          },
-        },
-      },
+      stateValidatorSchema,
       onSubmitForm,
     );
 
-  const { fullName, identifiedCode, phone, room, address } = values;
+  // prettier-ignore
+  const { 
+    fullName, 
+    identifiedCode,
+    phone,
+    room, 
+    address 
+  } = values;
 
   // Reset form
   const onResetForm = () => {
-    setReset(() => !reset);
+    setReset(!reset);
     Object.keys(values).forEach((key) => (values[key] = ''));
   };
 
@@ -113,7 +130,10 @@ const UserForm = ({ onClose }: IUserFormProp) => {
       <FormRow
         label="Full Name"
         error={
-          errors.fullName && dirty.fullName ? (errors.fullName as string) : ''
+          // prettier-ignore
+          errors.fullName && dirty.fullName ? 
+            (errors.fullName as string) 
+            : ''
         }
       >
         <Input
@@ -142,7 +162,12 @@ const UserForm = ({ onClose }: IUserFormProp) => {
 
       <FormRow
         label="Phone"
-        error={errors.phone && dirty.phone ? (errors.phone as string) : ''}
+        error={
+          // prettier-ignore
+          errors.phone && dirty.phone ? 
+            (errors.phone as string) 
+            : ''
+        }
       >
         <Input
           type="text"
@@ -154,7 +179,12 @@ const UserForm = ({ onClose }: IUserFormProp) => {
 
       <FormRow
         label="Room"
-        error={errors.room && dirty.room ? (errors.room as string) : ''}
+        error={
+          // prettier-ignore
+          errors.room && dirty.room ? 
+            (errors.room as string) 
+            : ''
+        }
       >
         <Input
           type="text"
@@ -167,7 +197,10 @@ const UserForm = ({ onClose }: IUserFormProp) => {
       <FormRow
         label="Address"
         error={
-          errors.address && dirty.address ? (errors.address as string) : ''
+          // prettier-ignore
+          errors.address && dirty.address ? 
+            (errors.address as string) 
+            : ''
         }
       >
         <TextArea

From cce36788ac20e137cbeecb99ef6d4575a595bd55 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Fri, 27 Oct 2023 14:15:47 +0700
Subject: [PATCH 5/7] Update name variable and optimzed code

---
 hotel-management/src/helpers/utils.ts    | 15 +++++--
 hotel-management/src/pages/User/Form.tsx | 57 +++++++++---------------
 2 files changed, 32 insertions(+), 40 deletions(-)

diff --git a/hotel-management/src/helpers/utils.ts b/hotel-management/src/helpers/utils.ts
index 6ba313c..954bb9f 100644
--- a/hotel-management/src/helpers/utils.ts
+++ b/hotel-management/src/helpers/utils.ts
@@ -28,10 +28,19 @@ const getPropValues = (stateSchema: TStateSchema, prop?: TPropValues) => {
   }, {} as TKeyValue);
 };
 
-const addValidator = (func: (input: string) => boolean, error: string) => {
+type test = {
+  validatorFunc: (value: string) => boolean;
+  prop: string;
+  required?: boolean;
+};
+
+const addValidator = ({ validatorFunc, prop, required = true }: test) => {
   return {
-    func: func,
-    error: invalidFormatMessage(error),
+    required: required,
+    validator: {
+      func: validatorFunc,
+      error: invalidFormatMessage(prop),
+    },
   };
 };
 
diff --git a/hotel-management/src/pages/User/Form.tsx b/hotel-management/src/pages/User/Form.tsx
index b455f04..c3d399a 100644
--- a/hotel-management/src/pages/User/Form.tsx
+++ b/hotel-management/src/pages/User/Form.tsx
@@ -11,7 +11,7 @@ import FormRow from '../../components/FormRow';
 import Button from '../../commons/styles/Button.ts';
 
 // Types
-import { TKeyValue, TStateSchema } from '../../globals/types';
+import { TKeyValue, TStateSchema, TValidator } from '../../globals/types';
 
 // Hooks
 import useForm from '../../hooks/useForm';
@@ -50,42 +50,25 @@ const UserForm = ({ onClose }: IUserFormProp) => {
     address: { value: '', error: '' },
   };
 
-  const stateValidatorSchema = {
-    fullName: {
-      required: true,
-      validator: addValidator(
-        (input: string) => isValidString(input),
-        'full name',
-      ),
-    },
-    identifiedCode: {
-      required: true,
-      validator: addValidator(
-        (input: string) => isValidNumber(input),
-        'identified code',
-      ),
-    },
-    phone: {
-      required: true,
-      validator: addValidator(
-        (input: string) => isValidPhoneNumber(input),
-        'phone',
-      ),
-    },
-    room: {
-      required: true,
-      validator: addValidator(
-        (input: string) => isValidNumber(input),
-        'room number',
-      ),
-    },
-    address: {
-      required: true,
-      validator: addValidator(
-        (input: string) => isValidAddress(input),
-        'address',
-      ),
-    },
+  // prettier-ignore
+  const stateValidatorSchema: TValidator = {
+    fullName: addValidator({ 
+      validatorFunc: isValidString, 
+      prop: 'full name' }),
+    identifiedCode: addValidator({
+      validatorFunc: isValidNumber,
+      prop: 'identified code',
+    }),
+    phone: addValidator({
+      validatorFunc: isValidPhoneNumber,
+      prop: 'phone number',
+    }),
+    room: addValidator({ 
+      validatorFunc: isValidNumber, 
+      prop: 'room number' }),
+    address: addValidator({ 
+      validatorFunc: isValidAddress, 
+      prop: 'address' }),
   };
 
   // Submit form

From 28a375091bb7097f8f64ee72f8579ba5a18153e3 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Fri, 27 Oct 2023 14:20:48 +0700
Subject: [PATCH 6/7] Change type name

---
 hotel-management/src/helpers/utils.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/hotel-management/src/helpers/utils.ts b/hotel-management/src/helpers/utils.ts
index 954bb9f..aa6e92a 100644
--- a/hotel-management/src/helpers/utils.ts
+++ b/hotel-management/src/helpers/utils.ts
@@ -28,13 +28,13 @@ const getPropValues = (stateSchema: TStateSchema, prop?: TPropValues) => {
   }, {} as TKeyValue);
 };
 
-type test = {
+type TValidator = {
   validatorFunc: (value: string) => boolean;
   prop: string;
   required?: boolean;
 };
 
-const addValidator = ({ validatorFunc, prop, required = true }: test) => {
+const addValidator = ({ validatorFunc, prop, required = true }: TValidator) => {
   return {
     required: required,
     validator: {

From 10dcbb7cb0e22b09eb8261637b63d716d55ceed8 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Fri, 27 Oct 2023 14:32:39 +0700
Subject: [PATCH 7/7] Update coding style

---
 hotel-management/src/helpers/utils.ts    | 2 +-
 hotel-management/src/pages/User/Form.tsx | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/hotel-management/src/helpers/utils.ts b/hotel-management/src/helpers/utils.ts
index aa6e92a..b5a3c19 100644
--- a/hotel-management/src/helpers/utils.ts
+++ b/hotel-management/src/helpers/utils.ts
@@ -36,7 +36,7 @@ type TValidator = {
 
 const addValidator = ({ validatorFunc, prop, required = true }: TValidator) => {
   return {
-    required: required,
+    required,
     validator: {
       func: validatorFunc,
       error: invalidFormatMessage(prop),
diff --git a/hotel-management/src/pages/User/Form.tsx b/hotel-management/src/pages/User/Form.tsx
index c3d399a..01bf120 100644
--- a/hotel-management/src/pages/User/Form.tsx
+++ b/hotel-management/src/pages/User/Form.tsx
@@ -54,7 +54,8 @@ const UserForm = ({ onClose }: IUserFormProp) => {
   const stateValidatorSchema: TValidator = {
     fullName: addValidator({ 
       validatorFunc: isValidString, 
-      prop: 'full name' }),
+      prop: 'full name' 
+    }),
     identifiedCode: addValidator({
       validatorFunc: isValidNumber,
       prop: 'identified code',
@@ -65,10 +66,12 @@ const UserForm = ({ onClose }: IUserFormProp) => {
     }),
     room: addValidator({ 
       validatorFunc: isValidNumber, 
-      prop: 'room number' }),
+      prop: 'room number' 
+    }),
     address: addValidator({ 
       validatorFunc: isValidAddress, 
-      prop: 'address' }),
+      prop: 'address' 
+    }),
   };
 
   // Submit form