fix: refactor extended profile fields handling and improve error message management

bra-i-am · bra-i-am · commit e394cb2da35f · 2025-05-09T15:05:45.000-05:00
diff --git a/src/profile/ProfilePage.jsx b/src/profile/ProfilePage.jsx
@@ -67,7 +67,7 @@ class ProfilePage extends React.Component {
 
   componentDidMount() {
     this.props.fetchProfile(this.props.params.username);
-    this.props.fetchExtraFieldsInfo({ is_register_page: true });
+    this.props.fetchExtraFieldsInfo();
     sendTrackingLogEvent('edx.profile.viewed', {
       username: this.props.params.username,
     });
@@ -396,7 +396,7 @@ ProfilePage.propTypes = {
       label: PropTypes.string.isRequired,
     })),
     // https://github.com/openedx/edx-platform/blob/master/openedx/core/djangoapps/user_api/helpers.py#L179
-    error_message: PropTypes.shape({
+    errorMessage: PropTypes.shape({
       required: PropTypes.string,
     }),
     // https://github.com/openedx/edx-platform/blob/master/openedx/core/djangoapps/user_api/helpers.py#L167
diff --git a/src/profile/data/actions.js b/src/profile/data/actions.js
@@ -148,13 +148,11 @@ export const resetDrafts = () => ({
   type: RESET_DRAFTS,
 });
 
-// Third party auth context
 export const EXTENDED_PROFILE_FIELDS = new AsyncActionType('EXTENDED_PROFILE_FIELDS', 'GET_EXTENDED_PROFILE_FIELDS');
 export const EXTENDED_PROFILE_FIELDS_CLEAR_ERROR_MSG = 'EXTENDED_PROFILE_FIELDS_CLEAR_ERROR_MSG';
 
-export const getExtendedProfileFields = (urlParams) => ({
+export const getExtendedProfileFields = () => ({
   type: EXTENDED_PROFILE_FIELDS.BASE,
-  payload: { urlParams },
 });
 
 export const getExtendedProfileFieldsBegin = () => ({
@@ -169,7 +167,3 @@ export const getExtendedProfileFieldsSuccess = (fields) => ({
 export const getExtendedProfileFieldsFailure = () => ({
   type: EXTENDED_PROFILE_FIELDS.FAILURE,
 });
-
-export const clearThirdPartyAuthContextErrorMessage = () => ({
-  type: EXTENDED_PROFILE_FIELDS_CLEAR_ERROR_MSG,
-});
diff --git a/src/profile/data/sagas.js b/src/profile/data/sagas.js
@@ -210,12 +210,12 @@ export function* handleDeleteProfilePhoto(action) {
   }
 }
 
-export function* fetchThirdPartyAuthContext(action) {
+export function* fetchExtendedProfileFields() {
   try {
     yield put(getExtendedProfileFieldsBegin());
     const {
       fields,
-    } = yield call(ProfileApiService.getExtendedProfileFields, action.payload.urlParams);
+    } = yield call(ProfileApiService.getExtendedProfileFields);
 
     yield put(getExtendedProfileFieldsSuccess(fields));
   } catch (e) {
@@ -229,5 +229,5 @@ export default function* profileSaga() {
   yield takeEvery(SAVE_PROFILE.BASE, handleSaveProfile);
   yield takeEvery(SAVE_PROFILE_PHOTO.BASE, handleSaveProfilePhoto);
   yield takeEvery(DELETE_PROFILE_PHOTO.BASE, handleDeleteProfilePhoto);
-  yield takeEvery(EXTENDED_PROFILE_FIELDS.BASE, fetchThirdPartyAuthContext);
+  yield takeEvery(EXTENDED_PROFILE_FIELDS.BASE, fetchExtendedProfileFields);
 }
diff --git a/src/profile/data/selectors.js b/src/profile/data/selectors.js
@@ -6,6 +6,7 @@ import {
   getCountryMessages,
   getLanguageMessages,
 } from '@edx/frontend-platform/i18n'; // eslint-disable-line
+import { moveCheckboxFieldsToEnd } from '../utils';
 
 export const formIdSelector = (state, props) => props.formId;
 export const userAccountSelector = state => state.userAccount;
@@ -414,7 +415,7 @@ export const profilePageSelector = createSelector(
       value: account.extendedProfile?.find(
         (extendedProfileField) => extendedProfileField.fieldName === field.name,
       )?.fieldValue,
-    })),
+    }))?.sort(moveCheckboxFieldsToEnd) ?? [],
   }),
 
 );
diff --git a/src/profile/data/services.js b/src/profile/data/services.js
@@ -157,25 +157,16 @@ export async function getCourseCertificates(username) {
   }
 }
 
-export async function getExtendedProfileFields(urlParams) {
-  const requestConfig = {
-    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    params: urlParams,
-    isPublic: true,
-  };
+export async function getExtendedProfileFields() {
+  const url = `${getConfig().LMS_BASE_URL}/user_api/v1/account/registration/`;
 
   const { data } = await getAuthenticatedHttpClient()
     .get(
-      `${getConfig().LMS_BASE_URL}/api/mfe_context`,
-      requestConfig,
+      url,
     )
     .catch((e) => {
       throw (e);
     });
 
-  const extendedProfileFields = data.optionalFields.extended_profile
-    .map((fieldName) => (data.registrationFields.fields[fieldName]))
-    .filter(Boolean);
-
-  return { fields: extendedProfileFields };
+  return { fields: data.fields };
 }
diff --git a/src/profile/forms/ExtendedProfileFields.jsx b/src/profile/forms/ExtendedProfileFields.jsx
@@ -8,7 +8,6 @@ import SwitchContent from './elements/SwitchContent';
 import SelectField from './elements/SelectField';
 import TextField from './elements/TextField';
 import CheckboxField from './elements/CheckboxField';
-import { moveCheckboxFieldsToEnd } from '../utils';
 
 const ExtendedProfileFields = (props) => {
   const {
@@ -42,7 +41,7 @@ const ExtendedProfileFields = (props) => {
 
   return (
     <div>
-      {extendedProfileFields.sort(moveCheckboxFieldsToEnd)?.map((field) => {
+      {extendedProfileFields?.map((field) => {
         const value = draftProfile?.extendedProfile?.find(
           (extendedField) => extendedField.fieldName === field.name,
         )?.fieldValue ?? field.value;
@@ -52,7 +51,7 @@ const ExtendedProfileFields = (props) => {
 
         const commonProps = {
           ...field,
-          errorMessage: field.error_message,
+          errorMessage: field.errorMessage,
           formId: `${formId}/${field.name}`,
           changeHandler: handleChangeExtendedField,
           submitHandler: handleSubmitExtendedField,
@@ -91,7 +90,7 @@ ExtendedProfileFields.propTypes = {
       value: PropTypes.string.isRequired,
       label: PropTypes.string.isRequired,
     })),
-    error_message: PropTypes.shape({
+    errorMessage: PropTypes.shape({
       required: PropTypes.string,
     }),
     restrictions: PropTypes.shape({
diff --git a/src/profile/forms/elements/SelectField.jsx b/src/profile/forms/elements/SelectField.jsx
@@ -66,8 +66,8 @@ const SelectField = ({
                   onChange={handleChange}
                 >
                   <option value="">&nbsp;</option>
-                  {options.map(([code, name]) => (
-                    <option key={code} value={code}>{name}</option>
+                  {options?.map(({ name, value: optionValue }) => (
+                    <option key={optionValue} value={optionValue}>{name}</option>
                   ))}
                 </select>
                 {error !== null && (
@@ -130,10 +130,9 @@ SelectField.propTypes = {
   saveState: PropTypes.string,
   error: PropTypes.string,
   options: PropTypes.arrayOf(PropTypes.shape({
-    code: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
   })).isRequired,
-  //   fieldMessages: PropTypes.objectOf(PropTypes.string).isRequired,
   label: PropTypes.string.isRequired,
   emptyMessage: PropTypes.string.isRequired,
   changeHandler: PropTypes.func.isRequired,
diff --git a/src/profile/forms/elements/TextField.jsx b/src/profile/forms/elements/TextField.jsx
@@ -30,20 +30,20 @@ const TextField = ({
 
   useEffect(() => {
     if (!value && errorMessage?.required) {
-      setErrorMessage(errorMessage.required);
-    } else if (restrictions.max_length && value.length > restrictions.max_length) {
-      setErrorMessage(errorMessage.max_length);
-    } else if (restrictions.min_length && value.length < restrictions.min_length) {
-      setErrorMessage(errorMessage.min_length);
+      setErrorMessage(errorMessage?.required);
+    } else if (restrictions?.max_length && value?.length > restrictions?.max_length) {
+      setErrorMessage(errorMessage?.max_length);
+    } else if (restrictions?.min_length && value?.length < restrictions?.min_length) {
+      setErrorMessage(errorMessage?.min_length);
     } else {
       setErrorMessage(null);
     }
   }, [
-    errorMessage.max_length,
-    errorMessage.min_length,
-    errorMessage.required,
-    restrictions.max_length,
-    restrictions.min_length,
+    errorMessage?.max_length,
+    errorMessage?.min_length,
+    errorMessage?.required,
+    restrictions?.max_length,
+    restrictions?.min_length,
     value,
   ]);
 
@@ -85,8 +85,8 @@ const TextField = ({
                   name={formId}
                   value={value}
                   onChange={handleChange}
-                  minLength={restrictions.min_length}
-                  maxLength={restrictions.max_length}
+                  minLength={restrictions?.min_length}
+                  maxLength={restrictions?.max_length}
                 />
                 {displayedMessage !== null && (
                 <Form.Control.Feedback hasIcon={false}>

Original file line number	Diff line number	Diff line change
`@@ -210,12 +210,12 @@ export function* handleDeleteProfilePhoto(action) {`
`210`	`210`	`}`
`211`	`211`	`}`
`212`	`212`
`213`		`-export function* fetchThirdPartyAuthContext(action) {`
	`213`	`+export function* fetchExtendedProfileFields() {`
`214`	`214`	`try {`
`215`	`215`	`yield put(getExtendedProfileFieldsBegin());`
`216`	`216`	`const {`
`217`	`217`	`fields,`
`218`		`- } = yield call(ProfileApiService.getExtendedProfileFields, action.payload.urlParams);`
	`218`	`+ } = yield call(ProfileApiService.getExtendedProfileFields);`
`219`	`219`
`220`	`220`	`yield put(getExtendedProfileFieldsSuccess(fields));`
`221`	`221`	`} catch (e) {`
`@@ -229,5 +229,5 @@ export default function* profileSaga() {`
`229`	`229`	`yield takeEvery(SAVE_PROFILE.BASE, handleSaveProfile);`
`230`	`230`	`yield takeEvery(SAVE_PROFILE_PHOTO.BASE, handleSaveProfilePhoto);`
`231`	`231`	`yield takeEvery(DELETE_PROFILE_PHOTO.BASE, handleDeleteProfilePhoto);`
`232`		`- yield takeEvery(EXTENDED_PROFILE_FIELDS.BASE, fetchThirdPartyAuthContext);`
	`232`	`+ yield takeEvery(EXTENDED_PROFILE_FIELDS.BASE, fetchExtendedProfileFields);`
`233`	`233`	`}`