feat: extend the profile fields with the already existing extended_profile_fields

package.json

@@ -44,6 +44,7 @@
     "@redux-devtools/extension": "3.3.0",
     "classnames": "2.5.1",
     "core-js": "3.42.0",
+    "dompurify": "3.2.4",
     "history": "5.3.0",
     "lodash.camelcase": "4.3.0",
     "lodash.get": "4.4.2",

src/profile/ProfilePage.jsx

@@ -17,6 +17,7 @@ import {
   openForm,
   closeForm,
   updateDraft,
+  getExtendedProfileFields as fetchExtraFieldsInfo,
 } from './data/actions';
 
 // Components
@@ -42,6 +43,7 @@ import { profilePageSelector } from './data/selectors';
 import messages from './ProfilePage.messages';
 
 import withParams from '../utils/hoc';
+import ExtendedProfileFields from './forms/ExtendedProfileFields';
 
 ensureConfig(['CREDENTIALS_BASE_URL', 'LMS_BASE_URL'], 'ProfilePage');
 
@@ -65,6 +67,7 @@ class ProfilePage extends React.Component {
 
   componentDidMount() {
     this.props.fetchProfile(this.props.params.username);
+    this.props.fetchExtraFieldsInfo();
     sendTrackingLogEvent('edx.profile.viewed', {
       username: this.props.params.username,
     });
@@ -186,6 +189,7 @@ class ProfilePage extends React.Component {
       username,
       saveState,
       navigate,
+      extendedProfileFields,
     } = this.props;
 
     if (isLoadingProfile) {
@@ -213,6 +217,11 @@ class ProfilePage extends React.Component {
     const isCertificatesBlockVisible = isBlockVisible(courseCertificates.length);
     const isNameBlockVisible = isBlockVisible(name);
     const isLocationBlockVisible = isBlockVisible(country);
+    // TODO: modify /api/user/v1/accounts/{{username}} to return extended profile field values
+    // So these fields can be shown for no-authenticated user profiles
+    const isExtendedProfileFieldsVisible = isBlockVisible(
+      extendedProfileFields.length > 0 && this.isAuthenticatedUserProfile(),
+    );
 
     return (
       <div className="container-fluid">
@@ -280,6 +289,13 @@ class ProfilePage extends React.Component {
                 {...commonFormProps}
               />
             )}
+            {isExtendedProfileFieldsVisible && (
+              <ExtendedProfileFields
+                extendedProfileFields={extendedProfileFields}
+                formId="extendedProfile"
+                {...commonFormProps}
+              />
+            )}
             {isSocialLinksBLockVisible && (
               <SocialLinks
                 socialLinks={socialLinks}
@@ -368,6 +384,31 @@ ProfilePage.propTypes = {
   name: PropTypes.string,
   visibilityName: PropTypes.string.isRequired,
 
+  // Extra profile fields
+  extendedProfileFields: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    default: PropTypes.unknown,
+    placeholder: PropTypes.string,
+    instructions: PropTypes.string,
+    options: PropTypes.arrayOf(PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+    })),
+    // https://github.com/openedx/edx-platform/blob/master/openedx/core/djangoapps/user_api/helpers.py#L179
+    errorMessage: PropTypes.shape({
+      required: PropTypes.string,
+    }),
+    // https://github.com/openedx/edx-platform/blob/master/openedx/core/djangoapps/user_api/helpers.py#L167
+    restrictions: PropTypes.shape({
+      max_length: PropTypes.number,
+      min_length: PropTypes.number,
+    }),
+    // https://github.com/openedx/edx-platform/blob/master/openedx/core/djangoapps/user_api/helpers.py#L151
+    type: PropTypes.string.isRequired,
+    value: PropTypes.unknown,
+  })),
+
   // Social links form data
   socialLinks: PropTypes.arrayOf(PropTypes.shape({
     platform: PropTypes.string,
@@ -404,6 +445,7 @@ ProfilePage.propTypes = {
   closeForm: PropTypes.func.isRequired,
   updateDraft: PropTypes.func.isRequired,
   navigate: PropTypes.func.isRequired,
+  fetchExtraFieldsInfo: PropTypes.func.isRequired,
 
   // Router
   params: PropTypes.shape({
@@ -432,6 +474,7 @@ ProfilePage.defaultProps = {
   courseCertificates: null,
   requiresParentalConsent: null,
   dateJoined: null,
+  extendedProfileFields: [],
 };
 
 export default connect(
@@ -444,5 +487,6 @@ export default connect(
     openForm,
     closeForm,
     updateDraft,
+    fetchExtraFieldsInfo,
   },
 )(injectIntl(withParams(ProfilePage)));

src/profile/__snapshots__/ProfilePage.test.jsx.snap

@@ -442,6 +442,7 @@ exports[`<ProfilePage /> Renders correctly in various states successfully redire
               </div>
             </div>
           </div>
+          <div />
           <div
             class="pgn-transition-replace-group position-relative mb-5"
           >
@@ -2483,6 +2484,7 @@ exports[`<ProfilePage /> Renders correctly in various states test country edit w
               </p>
             </div>
           </div>
+          <div />
           <div
             class="pgn-transition-replace-group position-relative mb-5"
           >
@@ -3482,6 +3484,7 @@ exports[`<ProfilePage /> Renders correctly in various states test education edit
               </div>
             </div>
           </div>
+          <div />
           <div
             class="pgn-transition-replace-group position-relative mb-5"
           >
@@ -5356,6 +5359,7 @@ exports[`<ProfilePage /> Renders correctly in various states test preferreded la
               </p>
             </div>
           </div>
+          <div />
           <div
             class="pgn-transition-replace-group position-relative mb-5"
           >
@@ -6076,6 +6080,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
               </p>
             </div>
           </div>
+          <div />
           <div
             class="pgn-transition-replace-group position-relative mb-5"
           >
@@ -6639,6 +6644,7 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
               </p>
             </div>
           </div>
+          <div />
           <div
             class="pgn-transition-replace-group position-relative mb-5"
           >
@@ -7516,6 +7522,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               </p>
             </div>
           </div>
+          <div />
           <div
             class="pgn-transition-replace-group position-relative mb-5"
           >
@@ -8457,6 +8464,7 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
               </p>
             </div>
           </div>
+          <div />
           <div
             class="pgn-transition-replace-group position-relative mb-5"
           >
@@ -9326,6 +9334,7 @@ exports[`<ProfilePage /> Renders correctly in various states without credentials
               </p>
             </div>
           </div>
+          <div />
           <div
             class="pgn-transition-replace-group position-relative mb-5"
           >

src/profile/data/actions.js

@@ -147,3 +147,23 @@ export const updateDraft = (name, value) => ({
 export const resetDrafts = () => ({
   type: RESET_DRAFTS,
 });
+
+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 = () => ({
+  type: EXTENDED_PROFILE_FIELDS.BASE,
+});
+
+export const getExtendedProfileFieldsBegin = () => ({
+  type: EXTENDED_PROFILE_FIELDS.BEGIN,
+});
+
+export const getExtendedProfileFieldsSuccess = (fields) => ({
+  type: EXTENDED_PROFILE_FIELDS.SUCCESS,
+  payload: fields,
+});
+
+export const getExtendedProfileFieldsFailure = () => ({
+  type: EXTENDED_PROFILE_FIELDS.FAILURE,
+});

src/profile/data/reducers.js

@@ -7,6 +7,7 @@
   FETCH_PROFILE,
   UPDATE_DRAFT,
   RESET_DRAFTS,
+  EXTENDED_PROFILE_FIELDS,
 } from './actions';
 
 export const initialState = {
@@ -22,6 +23,7 @@
   drafts: {},
   isLoadingProfile: true,
   isAuthenticatedUserProfile: false,
+  extendedProfileFields: [],
 };
 
 const profilePage = (state = initialState, action = {}) => {
@@ -128,11 +130,23 @@
         errors: {},
       };
 
-    case UPDATE_DRAFT:
+    case UPDATE_DRAFT: {
+      const { name, value } = action.payload;
+      const updatedDrafts = { ...state.drafts, [name]: value };
+
+      if (name === 'visibilityExtendedProfile') {
+        const visibilityExtendedProfile = {
+          ...state.preferences.visibilityExtendedProfile,
+          ...value,
+        };
+        updatedDrafts[name] = visibilityExtendedProfile;
+      }
+
       return {
         ...state,
-        drafts: { ...state.drafts, [action.payload.name]: action.payload.value },
+        drafts: updatedDrafts,
       };
+    }
 
     case RESET_DRAFTS:
       return {
@@ -155,6 +169,14 @@
         };
       }
       return state;
+    case EXTENDED_PROFILE_FIELDS.BEGIN:
+    case EXTENDED_PROFILE_FIELDS.FAILURE:
+    case EXTENDED_PROFILE_FIELDS.SUCCESS:
+      if (!action.payload) { return state; }
+      return {
+        ...state,
+        extendedProfileFields: action.payload,
+      };
     default:
       return state;
   }

src/profile/data/sagas.js

@@ -29,6 +29,10 @@ import {
   saveProfileSuccess,
   SAVE_PROFILE,
   SAVE_PROFILE_PHOTO,
+  EXTENDED_PROFILE_FIELDS,
+  getExtendedProfileFieldsBegin,
+  getExtendedProfileFieldsSuccess,
+  getExtendedProfileFieldsFailure,
 } from './actions';
 import { handleSaveProfileSelector, userAccountSelector } from './selectors';
 import * as ProfileApiService from './services';
@@ -93,7 +97,7 @@ export function* handleFetchProfile(action) {
 
     yield put(fetchProfileReset());
   } catch (e) {
-    if (e.response.status === 404) {
+    if (e.response?.status === 404) {
       if (e.processedData && e.processedData.fieldErrors) {
         yield put(saveProfileFailure(e.processedData.fieldErrors));
       } else {
@@ -117,6 +121,7 @@ export function* handleSaveProfile(action) {
       'languageProficiencies',
       'name',
       'socialLinks',
+      'extendedProfile',
     ]);
 
     const preferencesDrafts = pick(drafts, [
@@ -127,6 +132,7 @@ export function* handleSaveProfile(action) {
       'visibilityLanguageProficiencies',
       'visibilityName',
       'visibilitySocialLinks',
+      'visibilityExtendedProfile',
     ]);
 
     if (Object.keys(preferencesDrafts).length > 0) {
@@ -204,9 +210,24 @@ export function* handleDeleteProfilePhoto(action) {
   }
 }
 
+export function* fetchExtendedProfileFields() {
+  try {
+    yield put(getExtendedProfileFieldsBegin());
+    const {
+      fields,
+    } = yield call(ProfileApiService.getExtendedProfileFields);
+
+    yield put(getExtendedProfileFieldsSuccess(fields));
+  } catch (e) {
+    yield put(getExtendedProfileFieldsFailure());
+    throw e;
+  }
+}
+
 export default function* profileSaga() {
   yield takeEvery(FETCH_PROFILE.BASE, handleFetchProfile);
   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, fetchExtendedProfileFields);
 }