feat: add extended profile fields functionality with context and form components

Author: bra-i-am

package-lock.json

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

package.json

@@ -0,0 +1,13 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import ExtendedProfileFields from '../../profile/extended-profile';
+
+const ExtendedProfileFieldsSlot = () => (
+  <PluginSlot
+    id="org.openedx.frontend.profile.extended_profile_fields.v1"
+    idAliases={['extended_profile_fields_plugin']}
+  >
+    <ExtendedProfileFields />
+  </PluginSlot>
+);
+
+export default ExtendedProfileFieldsSlot;

src/plugin-slots/ExtendedProfileFieldsSlot/index.jsx

@@ -8,6 +8,8 @@ import { AppContext } from '@edx/frontend-platform/react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Alert, Hyperlink } from '@openedx/paragon';
 
+import ExtendedProfileFieldsSlot from '../plugin-slots/ExtendedProfileFieldsSlot';
+
 // Actions
 import {
   fetchProfile,
@@ -280,6 +282,9 @@ class ProfilePage extends React.Component {
                 {...commonFormProps}
               />
             )}
+
+            <ExtendedProfileFieldsSlot />
+
             {isSocialLinksBLockVisible && (
               <SocialLinks
                 socialLinks={socialLinks}

src/profile/ProfilePage.jsx

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const ExtendedProfileFieldsContext = createContext();
+
+export default ExtendedProfileFieldsContext;

src/profile/extended-profile/ExtendedProfileContext.js

@@ -0,0 +1,61 @@
+import { useEffect, useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import ExtendedProfileFieldsContext from './ExtendedProfileContext';
+import { getExtendedProfileFields } from './data/service';
+import { patchProfile } from '../data/services';
+
+const ExtendedProfileFieldsProvider = ({ children }) => {
+  const [extendedProfileFields, setExtendedProfileFields] = useState();
+  const [editMode, setEditMode] = useState('editable');
+  const [editingInput, setEditingInput] = useState(null);
+  const [saveState, setSaveState] = useState('default');
+
+  useEffect(() => {
+    (async () => {
+      const res = await getExtendedProfileFields();
+      setExtendedProfileFields(res.fields);
+    })();
+  }, []);
+
+  const handleChangeFormMode = (mode, fieldName = null) => {
+    setEditMode(mode);
+    setEditingInput(fieldName);
+  };
+
+  const handleSaveExtendedProfile = async (username, params) => {
+    await patchProfile(username, params);
+  };
+
+  const handleResetFormEdition = () => {
+    setEditMode('editable');
+    setEditingInput(null);
+    setSaveState('default');
+  };
+
+  const handleChangeSaveState = (state) => {
+    setSaveState(state);
+  };
+
+  const value = useMemo(() => ({
+    editMode,
+    extendedProfileFields,
+    editingInput,
+    saveState,
+    handleChangeFormMode,
+    handleResetFormEdition,
+    handleSaveExtendedProfile,
+    handleChangeSaveState,
+  }), [editMode, editingInput, extendedProfileFields, saveState]);
+
+  return (
+    <ExtendedProfileFieldsContext.Provider value={value}>
+      {children}
+    </ExtendedProfileFieldsContext.Provider>
+  );
+};
+
+ExtendedProfileFieldsProvider.propTypes = {
+  children: PropTypes.node || PropTypes.arrayOf(PropTypes.node),
+};
+
+export default ExtendedProfileFieldsProvider;

src/profile/extended-profile/ExtendedProfileProvider.jsx

@@ -0,0 +1,6 @@
+export const FORM_MODE = {
+  EDITING: 'editing',
+  EDITABLE: 'editable',
+  EMPTY: 'empty',
+  STATIC: 'static',
+};

src/profile/extended-profile/constants.js

@@ -0,0 +1,16 @@
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+export async function getExtendedProfileFields() {
+  const url = `${getConfig().LMS_BASE_URL}/user_api/v1/account/registration/`;
+
+  const { data } = await getAuthenticatedHttpClient()
+    .get(
+      url,
+    )
+    .catch((e) => {
+      throw (e);
+    });
+
+  return { fields: data.fields };
+}

src/profile/extended-profile/data/service.js

@@ -0,0 +1,10 @@
+import ExtendedProfileFieldsProvider from './ExtendedProfileProvider';
+import ProfileFields from './profile-fields';
+
+const ExtendedProfileFields = () => (
+  <ExtendedProfileFieldsProvider>
+    <ProfileFields />
+  </ExtendedProfileFieldsProvider>
+);
+
+export default ExtendedProfileFields;

src/profile/extended-profile/index.jsx

@@ -0,0 +1,41 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'profile.formcontrols.who.can.see': {
+    id: 'profile.formcontrols.who.can.see',
+    defaultMessage: 'Who can see this:',
+    description: 'What users can see this area?',
+  },
+  'profile.formcontrols.button.cancel': {
+    id: 'profile.formcontrols.button.cancel',
+    defaultMessage: 'Cancel',
+    description: 'A button label',
+  },
+  'profile.formcontrols.button.save': {
+    id: 'profile.formcontrols.button.save',
+    defaultMessage: 'Save',
+    description: 'A button label',
+  },
+  'profile.formcontrols.button.saving': {
+    id: 'profile.formcontrols.button.saving',
+    defaultMessage: 'Saving',
+    description: 'A button label',
+  },
+  'profile.formcontrols.button.saved': {
+    id: 'profile.formcontrols.button.saved',
+    defaultMessage: 'Saved',
+    description: 'A button label',
+  },
+  'profile.formcontrols.error.min_length': {
+    id: 'profile.formcontrols.error.min_length',
+    defaultMessage: 'This field must be at least {minLength} characters long.',
+    description: 'Error message when the field is too short',
+  },
+  'profile.formcontrols.error.max_length': {
+    id: 'profile.formcontrols.error.max_length',
+    defaultMessage: 'This field must be at most {maxLength} characters long.',
+    description: 'Error message when the field is too long',
+  },
+});
+
+export default messages;