fix: handle projectId validation (#823)

* fix: handle projectId validation

* chore: remove unused function

* fix: update PR based on feedback

frontend/src/component/project/Project/CreateProject/CreateProject.tsx

@@ -24,7 +24,7 @@ const CreateProject = () => {
         setProjectDesc,
         getProjectPayload,
         clearErrors,
-        validateIdUniqueness,
+        validateProjectId,
         validateName,
         errors,
     } = useProjectForm();
@@ -35,7 +35,7 @@ const CreateProject = () => {
         e.preventDefault();
         clearErrors();
         const validName = validateName();
-        const validId = await validateIdUniqueness();
+        const validId = await validateProjectId();
 
         if (validName && validId) {
             const payload = getProjectPayload();
@@ -88,7 +88,7 @@ const CreateProject = () => {
                 setProjectDesc={setProjectDesc}
                 mode="Create"
                 clearErrors={clearErrors}
-                validateIdUniqueness={validateIdUniqueness}
+                validateProjectId={validateProjectId}
             >
                 <CreateButton name="project" permission={CREATE_PROJECT} />
             </ProjectForm>

frontend/src/component/project/Project/EditProject/EditProject.tsx

@@ -25,9 +25,8 @@ const EditProject = () => {
         setProjectDesc,
         getProjectPayload,
         clearErrors,
-        validateIdUniqueness,
-        validateName,
         validateProjectId,
+        validateName,
         errors,
     } = useProjectForm(id, project.name, project.description);
 
@@ -48,9 +47,8 @@ const EditProject = () => {
         const payload = getProjectPayload();
 
         const validName = validateName();
-        const validId = validateProjectId();
 
-        if (validName && validId) {
+        if (validName) {
             try {
                 await editProject(id, payload);
                 refetch();
@@ -89,7 +87,7 @@ const EditProject = () => {
                 setProjectDesc={setProjectDesc}
                 mode="Edit"
                 clearErrors={clearErrors}
-                validateIdUniqueness={validateIdUniqueness}
+                validateProjectId={validateProjectId}
             >
                 <UpdateButton permission={UPDATE_PROJECT} />
             </ProjectForm>

frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx

@@ -16,7 +16,7 @@ interface IProjectForm {
     errors: { [key: string]: string };
     mode: 'Create' | 'Edit';
     clearErrors: () => void;
-    validateIdUniqueness: () => void;
+    validateProjectId: () => void;
 }
 
 const ProjectForm: React.FC<IProjectForm> = ({
@@ -31,7 +31,7 @@ const ProjectForm: React.FC<IProjectForm> = ({
     setProjectDesc,
     errors,
     mode,
-    validateIdUniqueness,
+    validateProjectId,
     clearErrors,
 }) => {
     const styles = useStyles();
@@ -50,9 +50,10 @@ const ProjectForm: React.FC<IProjectForm> = ({
                     error={Boolean(errors.id)}
                     errorText={errors.id}
                     onFocus={() => clearErrors()}
-                    onBlur={validateIdUniqueness}
+                    onBlur={validateProjectId}
                     disabled={mode === 'Edit'}
                     autoFocus
+                    required
                 />
 
                 <p className={styles.inputDescription}>
@@ -66,6 +67,7 @@ const ProjectForm: React.FC<IProjectForm> = ({
                     error={Boolean(errors.name)}
                     errorText={errors.name}
                     onFocus={() => clearErrors()}
+                    required
                 />
 
                 <p className={styles.inputDescription}>

frontend/src/component/project/Project/hooks/useProjectForm.ts

@@ -33,7 +33,7 @@ const useProjectForm = (
     };
     const NAME_EXISTS_ERROR = 'Error: A project with this id already exists.';
 
-    const validateIdUniqueness = async () => {
+    const validateProjectId = async () => {
         if (projectId.length === 0) {
             setErrors(prev => ({ ...prev, id: 'Id can not be empty.' }));
             return false;
@@ -47,19 +47,16 @@ const useProjectForm = (
                     ...prev,
                     id: 'A project with this id already exists',
                 }));
+            } else {
+                setErrors(prev => ({
+                    ...prev,
+                    id: e.toString(),
+                }));
             }
             return false;
         }
     };
 
-    const validateProjectId = () => {
-        if (projectId.length === 0) {
-            setErrors(prev => ({ ...prev, id: 'id can not be empty.' }));
-            return false;
-        }
-        return true;
-    };
-
     const validateName = () => {
         if (projectName.length === 0) {
             setErrors(prev => ({ ...prev, name: 'Name can not be empty.' }));
@@ -83,7 +80,6 @@ const useProjectForm = (
         getProjectPayload,
         validateName,
         validateProjectId,
-        validateIdUniqueness,
         clearErrors,
         errors,
     };