fix: adjusted code as requests in pr and fixed linting errors

Author: M-BenAli

.gitignore

@@ -5,7 +5,7 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.idea
+
 
 # Runtime data
 pids
@@ -58,6 +58,7 @@ typings/
 
 # dotenv environment variables file
 .env
+.idea
 
 # next.js build output
 .next

src/locales/en-US/translation.json

@@ -52,6 +52,9 @@
   "states": {
     "success": "Success!"
   },
+  "errors": {
+    "patientNameRequired": "No patient name entered!"
+  },
   "scheduling": {
     "label": "Scheduling",
     "appointments": {

src/patients/new/NewPatientForm.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Button, Checkbox } from '@hospitalrun/components'
+import { Alert, Button, Checkbox } from '@hospitalrun/components'
 import { startOfDay, subYears } from 'date-fns'
 import SelectWithLabelFormGroup from '../../components/input/SelectWithLableFormGroup'
 import TextFieldWithLabelFormGroup from '../../components/input/TextFieldWithLabelFormGroup'
@@ -19,7 +19,7 @@ const NewPatientForm = (props: Props) => {
   const [isEditable] = useState(true)
   const { onCancel, onSave } = props
   const [approximateAge, setApproximateAge] = useState(0)
-  const [errorMessage, setError] = useState('')
+  const [errorMessage, setErrorMessage] = useState('')
   const [patient, setPatient] = useState({
     givenName: '',
     familyName: '',
@@ -38,27 +38,28 @@ const NewPatientForm = (props: Props) => {
   })
 
   const onSaveButtonClick = async () => {
-    if (!patient.givenName && !patient.familyName) {
-      return setError("No patient name entered!")
-    }
-    const newPatient = {
-      prefix: patient.prefix,
-      familyName: patient.familyName,
-      givenName: patient.givenName,
-      suffix: patient.suffix,
-      sex: patient.sex,
-      dateOfBirth: patient.dateOfBirth,
-      isApproximateDateOfBirth: patient.isApproximateDateOfBirth,
-      type: patient.type,
-      occupation: patient.occupation,
-      preferredLanguage: patient.preferredLanguage,
-      phoneNumber: patient.phoneNumber,
-      email: patient.email,
-      address: patient.address,
-      fullName: getPatientName(patient.givenName, patient.familyName, patient.suffix),
-    } as Patient
+    if (!patient.givenName) {
+      setErrorMessage(t('errors.patientNameRequired'))
+    } else {
+      const newPatient = {
+        prefix: patient.prefix,
+        familyName: patient.familyName,
+        givenName: patient.givenName,
+        suffix: patient.suffix,
+        sex: patient.sex,
+        dateOfBirth: patient.dateOfBirth,
+        isApproximateDateOfBirth: patient.isApproximateDateOfBirth,
+        type: patient.type,
+        occupation: patient.occupation,
+        preferredLanguage: patient.preferredLanguage,
+        phoneNumber: patient.phoneNumber,
+        email: patient.email,
+        address: patient.address,
+        fullName: getPatientName(patient.givenName, patient.familyName, patient.suffix),
+      } as Patient
 
-    onSave(newPatient)
+      onSave(newPatient)
+    }
   }
 
   const onFieldChange = (key: string, value: string) => {
@@ -97,6 +98,7 @@ const NewPatientForm = (props: Props) => {
     <div>
       <form>
         <h3>{t('patient.basicInformation')}</h3>
+        {errorMessage && <Alert className="alert" color="danger" message={t(errorMessage)} />}
         <div className="row">
           <div className="col-md-2">
             <TextInputWithLabelFormGroup
@@ -278,9 +280,6 @@ const NewPatientForm = (props: Props) => {
             />
           </div>
         </div>
-        {errorMessage && (
-          <div className="alert alert-danger" role="alert">{t(errorMessage)}</div>
-        )}
         {isEditable && (
           <div className="row">
             <Button onClick={onSaveButtonClick}> {t('actions.save')}</Button>