refactor: replace string literals with FORM_MODE constants in profile fields components

Author: bra-i-am

src/profile/extended-profile/ExtendedProfileProvider.jsx

@@ -4,9 +4,11 @@ import ExtendedProfileFieldsContext from './ExtendedProfileContext';
 import { getExtendedProfileFields } from './data/service';
 import { patchProfile } from '../data/services';
 
+import { FORM_MODE } from './constants';
+
 const ExtendedProfileFieldsProvider = ({ children }) => {
   const [extendedProfileFields, setExtendedProfileFields] = useState();
-  const [editMode, setEditMode] = useState('editable');
+  const [editMode, setEditMode] = useState(FORM_MODE.EDITABLE);
   const [editingInput, setEditingInput] = useState(null);
   const [saveState, setSaveState] = useState('default');
 
@@ -27,7 +29,7 @@ const ExtendedProfileFieldsProvider = ({ children }) => {
   };
 
   const handleResetFormEdition = () => {
-    setEditMode('editable');
+    setEditMode(FORM_MODE.EDITABLE);
     setEditingInput(null);
     setSaveState('default');
   };

src/profile/extended-profile/profile-fields/elements/CheckboxField.jsx

@@ -12,6 +12,8 @@ import EmptyContent from '../../../forms/elements/EmptyContent';
 import EditableItemHeader from '../../../forms/elements/EditableItemHeader';
 import messages from '../../messages';
 
+import { FORM_MODE } from '../../constants';
+
 const CheckboxField = (props) => {
   const {
     name: fieldName,
@@ -49,11 +51,11 @@ const CheckboxField = (props) => {
   }, [draftValue?.length]);
 
   const handleStartEditing = () => {
-    setFormMode('editing', fieldName);
+    setFormMode(FORM_MODE.EDITING, fieldName);
   };
 
   const handleCancelEditing = () => {
-    setFormMode('editable');
+    setFormMode(FORM_MODE.EDITABLE);
     setDraftValue(fieldValue);
   };
 
@@ -66,17 +68,17 @@ const CheckboxField = (props) => {
     handleFormSubmit(fieldName, draftValue);
   };
 
-  const isFieldBeingEdited = formEditMode === 'editing' && activeFieldName === fieldName;
+  const isFieldBeingEdited = formEditMode === FORM_MODE.EDITING && activeFieldName === fieldName;
   const isFieldEmpty = draftValue === '' || !draftValue;
 
   const getFieldDisplayMode = () => {
     if (isFieldBeingEdited) {
-      return 'editing';
+      return FORM_MODE.EDITING;
     }
     if (isFieldEmpty) {
-      return 'empty';
+      return FORM_MODE.EMPTY;
     }
-    return 'editable';
+    return FORM_MODE.EDITABLE;
   };
 
   return (

src/profile/extended-profile/profile-fields/elements/SelectField.jsx

@@ -11,6 +11,8 @@ import EmptyContent from '../../../forms/elements/EmptyContent';
 import EditableItemHeader from '../../../forms/elements/EditableItemHeader';
 import messages from '../../messages';
 
+import { FORM_MODE } from '../../constants';
+
 const SelectField = (props) => {
   const {
     name: fieldName,
@@ -51,11 +53,11 @@ const SelectField = (props) => {
   }, [draftValue?.length]);
 
   const handleStartEditing = () => {
-    setFormMode('editing', fieldName);
+    setFormMode(FORM_MODE.EDITING, fieldName);
   };
 
   const handleCancelEditing = () => {
-    setFormMode('editable');
+    setFormMode(FORM_MODE.EDITABLE);
     setDraftValue(fieldValue);
   };
 
@@ -68,17 +70,17 @@ const SelectField = (props) => {
     handleFormSubmit(fieldName, draftValue);
   };
 
-  const isFieldBeingEdited = formEditMode === 'editing' && activeFieldName === fieldName;
+  const isFieldBeingEdited = formEditMode === FORM_MODE.EDITING && activeFieldName === fieldName;
   const isFieldEmpty = draftValue === '' || !draftValue;
 
   const getFieldDisplayMode = () => {
     if (isFieldBeingEdited) {
-      return 'editing';
+      return FORM_MODE.EDITING;
     }
     if (isFieldEmpty) {
-      return 'empty';
+      return FORM_MODE.EMPTY;
     }
-    return 'editable';
+    return FORM_MODE.EDITABLE;
   };
 
   return (

src/profile/extended-profile/profile-fields/elements/TextField.jsx

@@ -7,6 +7,7 @@ import SwitchContent from '../../../forms/elements/SwitchContent';
 import EmptyContent from '../../../forms/elements/EmptyContent';
 import EditableItemHeader from '../../../forms/elements/EditableItemHeader';
 import messages from '../../messages';
+import { FORM_MODE } from '../../constants';
 
 const TextField = (props) => {
   const {
@@ -45,11 +46,11 @@ const TextField = (props) => {
   }, [draftValue?.length]);
 
   const handleStartEditing = () => {
-    setFormMode('editing', fieldName);
+    setFormMode(FORM_MODE.EDITING, fieldName);
   };
 
   const handleCancelEditing = () => {
-    setFormMode('editable');
+    setFormMode(FORM_MODE.EDITABLE);
     setDraftValue(fieldValue);
   };
 
@@ -62,17 +63,17 @@ const TextField = (props) => {
     handleFormSubmit(fieldName, draftValue);
   };
 
-  const isFieldBeingEdited = formEditMode === 'editing' && activeFieldName === fieldName;
+  const isFieldBeingEdited = formEditMode === FORM_MODE.EDITING && activeFieldName === fieldName;
   const isFieldEmpty = draftValue === '' || !draftValue;
 
   const getFieldDisplayMode = () => {
     if (isFieldBeingEdited) {
-      return 'editing';
+      return FORM_MODE.EDITING;
     }
     if (isFieldEmpty) {
-      return 'empty';
+      return FORM_MODE.EMPTY;
     }
-    return 'editable';
+    return FORM_MODE.EDITABLE;
   };
 
   return (

src/profile/extended-profile/profile-fields/index.jsx

@@ -49,6 +49,8 @@ const ProfileFields = () => {
   return (
     <div>
       {extendedProfileFields?.map((field) => {
+        // extendedProfileValues comes from the user profile values
+        // here we are looking for the field value of each extended profile field
         const value = extendedProfileValues.find((el) => el.fieldName === field.name)?.fieldValue;
 
         const commonProps = {