Add validation

src/components/register/RegisterForm.tsx

-import { TextField, Box, Typography, Button, styled, ButtonProps, Select, FormControl, InputLabel, MenuItem } from "@mui/material";
-import { red } from "@mui/material/colors";
+import { TextField, Box, Button, Select, FormControl, InputLabel, MenuItem } from "@mui/material";
 import React, { useEffect, useState } from "react";
-import { Navigate, useParams } from "react-router-dom";
-import { getPreRegisterData } from "../../actions/data-manager";
+import { useNavigate, useParams } from "react-router-dom";
+import { getPreRegisterData, registerUser } from "../../actions/data-manager";
 import { RegistrationInfo } from "../../internal-types";
 
 const classes = {
@@ -60,32 +59,43 @@ const classes = {
 
 export const RegisterForm = (): JSX.Element => {
 
+    let navigate = useNavigate();
+
     let { buildingId } = useParams();
 
     const [buildingUnits, setBuildingUnits] = useState([]);
-    const [invalidUrl, setInvalidUrl] = useState(false);
-    const [registerInfo, setRegisterInfo] = useState<RegistrationInfo>({ name: '', lastName: '', email: '', username: '', password: '', mobile: '', units: [] });
+    const [registerInfo, setRegisterInfo] = useState<RegistrationInfo>(
+        { firstName: '', lastName: '', email: '', username: '', password: '', mobile: '', pendingBuildings: { id: buildingId!, units: [] } });
+    const [errorField, setErrorField] = useState('');
+    const [errorMessage, setErrorMessage] = useState('');
+
+    const registerCallBack = (err: any, data: any, dsp: any) => {
+
+        if (!!err) {
+            if (err.wrongField) {
+                setErrorField(err.wrongField);
+                setErrorMessage(err.errorMessage);
+            }
+            return;
+        }
+
+        navigate('../../login', { replace: true });
+    }
 
     useEffect(() => {
         getPreRegisterData(buildingId, (err: any, data: any, dsp: any) => {
             if (err) {
-                setInvalidUrl(true);
+                navigate('../register/error', { replace: true });
                 return;
             }
-
             setBuildingUnits(data.units);
         });
-    }, [])
-
-    useEffect(() => {
-        console.log(registerInfo.units)
-    }, [registerInfo.units])
+    }, [buildingId, navigate]);
 
     return (
         <>
-            {invalidUrl && <Navigate replace to='../register/error' />}
             {buildingUnits &&
-                <Box sx={{display: 'flex', flexDirection: 'column', gap: '20px'}}>
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
                     <Box sx={{ display: 'flex', gap: '20px' }}>
                         <TextField
                             hiddenLabel
@@ -93,10 +103,13 @@ export const RegisterForm = (): JSX.Element => {
                             size='small'
                             label="First name"
                             sx={classes.textField}
-                            value={registerInfo.name}
+                            value={registerInfo.firstName}
                             onChange={(e) => {
-                                setRegisterInfo({ ...registerInfo, name: e.target.value })
-                            }} />
+                                setRegisterInfo({ ...registerInfo, firstName: e.target.value })
+                            }}
+                            error={"firstName" === errorField}
+                            helperText={"firstName" === errorField ? errorMessage : null}
+                        />
                         <TextField
                             hiddenLabel
                             variant="outlined"
@@ -106,7 +119,10 @@ export const RegisterForm = (): JSX.Element => {
                             value={registerInfo.lastName}
                             onChange={(e) => {
                                 setRegisterInfo({ ...registerInfo, lastName: e.target.value })
-                            }} />
+                            }}
+                            error={"lastName" === errorField}
+                            helperText={"lastName" === errorField ? errorMessage : null}
+                        />
                     </Box>
 
                     <TextField
@@ -118,6 +134,8 @@ export const RegisterForm = (): JSX.Element => {
                         onChange={(e) => {
                             setRegisterInfo({ ...registerInfo, email: e.target.value })
                         }}
+                        error={"email" === errorField}
+                        helperText={"email" === errorField ? errorMessage : null}
                     />
                     <TextField
                         variant="outlined"
@@ -128,6 +146,8 @@ export const RegisterForm = (): JSX.Element => {
                         onChange={(e) => {
                             setRegisterInfo({ ...registerInfo, username: e.target.value })
                         }}
+                        error={"username" === errorField}
+                        helperText={"username" === errorField ? errorMessage : null}
                     />
                     <TextField
                         variant="outlined"
@@ -150,24 +170,33 @@ export const RegisterForm = (): JSX.Element => {
                         onChange={(e) => {
                             setRegisterInfo({ ...registerInfo, mobile: e.target.value })
                         }}
+                        error={"mobile" === errorField}
+                        helperText={"mobile" === errorField ? errorMessage : null}
                     />
                     <FormControl fullWidth size="small">
                         <InputLabel>Select your units</InputLabel>
                         <Select
                             label="Select your units"
                             sx={classes.select}
-                            value={registerInfo.units}
+                            value={registerInfo.pendingBuildings.units}
                             multiple
                             onChange={(e) => {
                                 let units: string[] = typeof e.target.value === 'string' ? e.target.value.split(',') : e.target.value;
-                                setRegisterInfo({ ...registerInfo, units })
+                                setRegisterInfo({ ...registerInfo, pendingBuildings: { ...registerInfo.pendingBuildings, units } })
                             }}
+                            error={"units" === errorField}
                         >
-                            {buildingUnits.map((unit: any, index) => <MenuItem value={unit.address} key={index}>{unit.address}</MenuItem>)}
+                            {buildingUnits.map((unit: any, index) => <MenuItem value={unit} key={index}>{unit.address}</MenuItem>)}
                         </Select>
                     </FormControl>
 
-                    <Button sx={classes.registerButton} variant='contained'>Register</Button>
+                    <Button
+                        sx={classes.registerButton}
+                        variant='contained'
+                        onClick={() => {
+                            registerUser(buildingId, registerInfo, registerCallBack);
+                        }}
+                    >Register</Button>
                 </Box>
             }
         </>);

src/internal-types.ts

 export type RegistrationInfo = {
-    name: string,
+    firstName: string,
     lastName: string,
     email: string,
     username: string,
     password: string,
     mobile: string,
+    pendingBuildings: {
+        id: string,
         units: string[]
+    }
 }
 
 export type LoginInfo = {