Self-review of SelectFormField and TextAreaFormField

Author: wintondeshong

src/molecules/form-fields/select-form-field.tsx

@@ -1,6 +1,15 @@
 import React from "react";
 import uuid from "uuid";
 import { Select, SelectOption } from "../../atoms/forms/select";
+import { StringUtils, CollectionUtils } from "andculturecode-javascript-core";
+
+// -----------------------------------------------------------------------------------------
+// #region Component
+// -----------------------------------------------------------------------------------------
+
+const COMPONENT_CLASS = "c-form-field";
+
+// #endregion Component
 
 // -----------------------------------------------------------------------------------------
 // #region Interfaces
@@ -40,23 +49,25 @@ const SelectFormField: React.FC<SelectFormFieldProps> = (
         values,
     } = props;
 
+    const cssIsValid = isValid ? "" : "-invalid";
     const fieldId = props.fieldId ?? uuid.v4();
+    const hasErrorMessage = StringUtils.hasValue(errorMessage);
+    const hasErrors = CollectionUtils.hasValues(errorMessages);
 
     return (
-        <div className={`c-form-field ${isValid ? "" : "-invalid"}`}>
+        <div className={`${COMPONENT_CLASS} ${cssIsValid}`}>
             <label htmlFor={fieldId}>
                 {label}
-                {required ? "*" : ""}
+                {// if
+                required && "*"}
             </label>
             <Select options={values} id={id} onChange={onChange} name={name} />
-            <div className="c-form-field__errors">
+            <div className={`${COMPONENT_CLASS}__errors`}>
                 {// if
-                errorMessage != null && errorMessage.length > 0 && (
-                    <label>{errorMessage}</label>
-                )}
+                hasErrorMessage && <label>{errorMessage}</label>}
                 {// if
-                errorMessages != null &&
-                    errorMessages.map((s: string) => (
+                hasErrors &&
+                    errorMessages?.map((s: string) => (
                         <label key={s}>{s}</label>
                     ))}
             </div>

src/molecules/form-fields/text-area-form-field.tsx

@@ -1,6 +1,15 @@
 import React from "react";
 import uuid from "uuid";
 import { TextArea } from "../../atoms/forms/text-area";
+import { StringUtils, CollectionUtils } from "andculturecode-javascript-core";
+
+// -----------------------------------------------------------------------------------------
+// #region Constants
+// -----------------------------------------------------------------------------------------
+
+const COMPONENT_CLASS = "c-form-field";
+
+// #endregion Constants
 
 // -----------------------------------------------------------------------------------------
 // #region Interfaces
@@ -51,33 +60,35 @@ const TextAreaFormField: React.FC<TextAreaFormFieldProps> = (
         value,
     } = props;
 
+    const cssIsValid = isValid ? "" : "-invalid";
     const fieldId = props.fieldId ?? uuid.v4();
+    const hasErrorMessage = StringUtils.hasValue(errorMessage);
+    const hasErrors = CollectionUtils.hasValues(errorMessages);
 
     return (
-        <div className={`c-form-field ${isValid ? "" : "-invalid"}`}>
+        <div className={`${COMPONENT_CLASS} ${cssIsValid}`}>
             <label htmlFor={fieldId}>
                 {label}
-                {required ? "*" : ""}
+                {// if
+                required ?? "*"}
             </label>
             <TextArea
                 disabled={disabled}
                 id={fieldId}
-                testId={inputTestId}
                 maxLength={maxLength}
                 name={name}
                 onChange={onChange}
                 placeholder={placeholder}
                 rows={rows}
+                testId={inputTestId}
                 value={value}
             />
-            <div className="c-form-field__errors">
+            <div className={`${COMPONENT_CLASS}__errors`}>
                 {// if
-                errorMessage != null && errorMessage.length > 0 && (
-                    <label>{errorMessage}</label>
-                )}
+                hasErrorMessage && <label>{errorMessage}</label>}
                 {// if
-                errorMessages != null &&
-                    errorMessages.map((s: string) => (
+                hasErrors &&
+                    errorMessages?.map((s: string) => (
                         <label key={s}>{s}</label>
                     ))}
             </div>