feat: add visibility settings for extended profile fields in profile management

bra-i-am · bra-i-am · commit dddfd9051f4c · 2025-02-11T15:45:21.000-05:00
diff --git a/src/profile/data/sagas.js b/src/profile/data/sagas.js
@@ -129,6 +129,7 @@ export function* handleSaveProfile(action) {
       'visibilityLanguageProficiencies',
       'visibilityName',
       'visibilitySocialLinks',
+      'visibilityExtendedProfile',
     ]);
 
     if (Object.keys(preferencesDrafts).length > 0) {
diff --git a/src/profile/data/selectors.js b/src/profile/data/selectors.js
@@ -239,6 +239,7 @@ export const visibilitiesSelector = createSelector(
           visibilityLanguageProficiencies: preferences.visibilityLanguageProficiencies || 'all_users',
           visibilityName: preferences.visibilityName || 'all_users',
           visibilitySocialLinks: preferences.visibilitySocialLinks || 'all_users',
+          visibilityExtendedProfile: preferences.visibilityExtendedProfile || 'all_users',
         };
       case 'private':
         return {
@@ -249,6 +250,7 @@ export const visibilitiesSelector = createSelector(
           visibilityLanguageProficiencies: 'private',
           visibilityName: 'private',
           visibilitySocialLinks: 'private',
+          visibilityExtendedProfile: 'private',
         };
       case 'all_users':
       default:
@@ -264,6 +266,7 @@ export const visibilitiesSelector = createSelector(
           visibilityLanguageProficiencies: 'all_users',
           visibilityName: 'all_users',
           visibilitySocialLinks: 'all_users',
+          visibilityExtendedProfile: 'all_users',
         };
     }
   },
@@ -312,6 +315,10 @@ export const formValuesSelector = createSelector(
       drafts.visibilitySocialLinks,
       visibilities.visibilitySocialLinks,
     ),
+    visibilityExtendedProfile: chooseFormValue(
+      drafts.visibilityExtendedProfile,
+      visibilities.visibilityExtendedProfile,
+    ),
   }),
 );
 
diff --git a/src/profile/data/services.js b/src/profile/data/services.js
@@ -89,7 +89,12 @@ export async function deleteProfilePhoto(username) {
 export async function getPreferences(username) {
   const { data } = await getHttpClient().get(`${getConfig().LMS_BASE_URL}/api/user/v1/preferences/${username}`);
 
-  return camelCaseObject(data);
+  const processedData = camelCaseObject(data);
+
+  return {
+    ...processedData,
+    visibilityExtendedProfile: JSON.parse(data['visibility.extended_profile']),
+  };
 }
 
 // PATCH PREFERENCES
@@ -105,8 +110,11 @@ export async function patchPreferences(username, params) {
     visibility_name: 'visibility.name',
     visibility_social_links: 'visibility.social_links',
     visibility_time_zone: 'visibility.time_zone',
+    visibility_extended_profile: 'visibility.extended_profile',
   });
 
+  processedParams['visibility.extended_profile'] = JSON.stringify(processedParams['visibility.extended_profile']);
+
   await getHttpClient().patch(`${getConfig().LMS_BASE_URL}/api/user/v1/preferences/${username}`, processedParams, {
     headers: { 'Content-Type': 'application/merge-patch+json' },
   });
diff --git a/src/profile/forms/ExtendedProfileFields.jsx b/src/profile/forms/ExtendedProfileFields.jsx
@@ -1,11 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import get from 'lodash.get';
-
-// Mock Data
-import mockData from '../data/mock_data';
 
 // Components
 import EditableItemHeader from './elements/EditableItemHeader';
@@ -19,17 +15,41 @@ const ExtendedProfileFields = (props) => {
     extendedProfileFields, formId, changeHandler, submitHandler, closeHandler, openHandler, editMode,
   } = props;
 
-  //   if (!learningGoal) {
-  //     learningGoal = mockData.learningGoal;
-  //   }
+  const draftProfile = useSelector((state) => state.profilePage.drafts);
+  const extendedProfile = useSelector((state) => state.profilePage.account.extendedProfile);
+  const visibilityExtendedProfile = useSelector((state) => state.profilePage.preferences.visibilityExtendedProfile);
+  const [currentEditingField, setCurrentEditingField] = useState(null);
+
+  const handleOpenEdit = (form) => {
+    const [parentFormId, fieldId] = form.split('/');
+
+    openHandler(parentFormId);
+    setCurrentEditingField(fieldId);
+  };
+
+  const handleCloseEdit = () => {
+    closeHandler(null);
+    setCurrentEditingField(null);
+  };
 
-  //   if (!editMode || editMode === 'empty') { // editMode defaults to 'empty', not sure why yet
-  //     editMode = mockData.editMode;
-  //   }
+  const handleChangeExtendedField = (name, value) => {
+    const [parentFormId, fieldName] = name.split('/');
+    if (name.includes('visibility')) {
+      changeHandler(parentFormId, { [fieldName]: value });
+    } else {
+      const fieldIndex = extendedProfile.findIndex((field) => field.fieldName === fieldName);
+      const newFields = extendedProfile.map(
+        (extendedField, index) => (index === fieldIndex ? { ...extendedField, fieldValue: value } : extendedField),
+      );
+      changeHandler(parentFormId, newFields);
+    }
+  };
 
-  //   if (!visibilityLearningGoal) {
-  //     visibilityLearningGoal = mockData.visibilityLearningGoal;
-  //   }
+  const handleSubmitExtendedField = (form) => {
+    const [parentFormId] = form.split('/');
+    submitHandler(parentFormId);
+    setCurrentEditingField(null);
+  };
 
   return extendedProfileFields?.map((field) => (
     <SwitchContent
@@ -46,24 +66,30 @@ const ExtendedProfileFields = (props) => {
         ),
         text: (
           <TextField
-            formId={formId}
-            changeHandler={changeHandler}
-            submitHandler={submitHandler}
-            closeHandler={closeHandler}
-            openHandler={openHandler}
-            editMode={editMode}
+            formId={`${formId}/${field.name}`}
+            editMode={currentEditingField === field.name ? editMode : 'editable'}
+            changeHandler={handleChangeExtendedField}
+            submitHandler={handleSubmitExtendedField}
+            closeHandler={handleCloseEdit}
+            openHandler={handleOpenEdit}
             {...field}
           />
         ),
         select: (
           <SelectField
-            formId={formId}
-            changeHandler={changeHandler}
-            submitHandler={submitHandler}
-            closeHandler={closeHandler}
-            openHandler={openHandler}
-            editMode={editMode}
+            formId={`${formId}/${field.name}`}
+            editMode={currentEditingField === field.name ? editMode : 'editable'}
+            changeHandler={handleChangeExtendedField}
+            submitHandler={handleSubmitExtendedField}
+            closeHandler={handleCloseEdit}
+            openHandler={handleOpenEdit}
             {...field}
+            value={draftProfile?.extendedProfile?.find(
+              (extendedField) => extendedField.fieldName === field.name,
+            )?.fieldValue ?? field.value}
+            visibility={
+                draftProfile?.visibilityExtendedProfile?.[field.name] ?? visibilityExtendedProfile?.[field.name]
+            }
           />
         ),
       }}
diff --git a/src/profile/forms/elements/SelectField.jsx b/src/profile/forms/elements/SelectField.jsx
@@ -6,6 +6,7 @@ import FormControls from './FormControls';
 import EditableItemHeader from './EditableItemHeader';
 import EmptyContent from './EmptyContent';
 import SwitchContent from './SwitchContent';
+import { capitalizeFirstLetter } from '../../utils';
 
 const SelectField = ({
   formId,
@@ -76,7 +77,7 @@ const SelectField = ({
                 )}
               </Form.Group>
               <FormControls
-                visibilityId={`visibility${formId}`}
+                visibilityId={`visibility${capitalizeFirstLetter(formId)}`}
                 saveState={saveState}
                 visibility={visibility}
                 cancelHandler={handleClose}
@@ -131,7 +132,7 @@ SelectField.propTypes = {
     code: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
   })).isRequired,
-  fieldMessages: PropTypes.objectOf(PropTypes.string).isRequired,
+  //   fieldMessages: PropTypes.objectOf(PropTypes.string).isRequired,
   label: PropTypes.string.isRequired,
   emptyMessage: PropTypes.string.isRequired,
   changeHandler: PropTypes.func.isRequired,
diff --git a/src/profile/utils.js b/src/profile/utils.js
@@ -23,6 +23,10 @@ export function modifyObjectKeys(object, modify) {
   return result;
 }
 
+export function capitalizeFirstLetter(val) {
+  return String(val).charAt(0).toUpperCase() + String(val).slice(1);
+}
+
 export function camelCaseObject(object) {
   return modifyObjectKeys(object, camelCase);
 }

Original file line number	Diff line number	Diff line change
`@@ -23,6 +23,10 @@ export function modifyObjectKeys(object, modify) {`
`23`	`23`	`return result;`
`24`	`24`	`}`
`25`	`25`
	`26`	`+export function capitalizeFirstLetter(val) {`
	`27`	`+ return String(val).charAt(0).toUpperCase() + String(val).slice(1);`
	`28`	`+}`
	`29`	`+`
`26`	`30`	`export function camelCaseObject(object) {`
`27`	`31`	`return modifyObjectKeys(object, camelCase);`
`28`	`32`	`}`