Merge pull request #7 from eduNEXT/bc/fix-errors-displaying

feat: intercept error to display 'em in the UI

Author: bra-i-am

package-lock.json

@@ -36,7 +36,9 @@
 		"@edx/frontend-platform": "^7.0.0 || ^8.0.0",
 		"@openedx/frontend-plugin-framework": "^1.0.0",
 		"dompurify": "^3.2.6",
-		"prop-types": "15.8.1"
+		"prop-types": "15.8.1",
+		"@fortawesome/free-solid-svg-icons": "^6.0.0",
+		"@fortawesome/react-fontawesome": "^0.2.0"
 	},
 	"peerDependencies": {
 		"@edx/frontend-platform": "^7.0.0 || ^8.0.0",

package.json

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import ExtendedProfileFieldsContext from './ExtendedProfileContext';
 import { getExtendedProfileFieldsV2 } from './data/service';
 
@@ -10,10 +11,12 @@ import { FORM_MODE } from './constants';
 const ExtendedProfileFieldsProvider = ({
   patchProfile, profileFieldErrors, components, children,
 }) => {
+  const editingInputRef = React.useRef(null);
   const [extendedProfileFields, setExtendedProfileFields] = React.useState();
   const [editMode, setEditMode] = React.useState(FORM_MODE.EDITABLE);
   const [editingInput, setEditingInput] = React.useState(null);
   const [saveState, setSaveState] = React.useState('default');
+  const [localErrors, setLocalErrors] = React.useState({});
 
   React.useEffect(() => {
     (async () => {
@@ -23,20 +26,25 @@ const ExtendedProfileFieldsProvider = ({
   }, []);
 
   useEffect(() => {
-    if (Object.keys(profileFieldErrors).length) {
+    const filteredKeys = Object.keys(profileFieldErrors)
+      .filter(key => key !== 'extended_profile');
+
+    if (filteredKeys.length > 0 || Object.keys(localErrors).length) {
       setSaveState('error');
       setEditMode(FORM_MODE.EDITING);
-      setEditingInput(Object.keys(profileFieldErrors)[0]);
+      setEditingInput(filteredKeys?.[0] ?? localErrors ? editingInputRef.current : null);
     } else {
       setSaveState('default');
       setEditMode(FORM_MODE.EDITABLE);
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [Object.keys(profileFieldErrors).length]);
+  }, [Object.keys(profileFieldErrors).length, Object.keys(localErrors).length]);
 
   const handleChangeFormMode = (mode, fieldName = null) => {
     setEditMode(mode);
     setEditingInput(fieldName);
+    setSaveState('default');
+    editingInputRef.current = fieldName;
   };
 
   const handleSaveExtendedProfile = async ({ username, params }) => {
@@ -54,13 +62,58 @@ const ExtendedProfileFieldsProvider = ({
     setSaveState(state);
   };
 
+  useEffect(() => {
+    const httpClient = getAuthenticatedHttpClient?.();
+
+    const interceptor = httpClient.interceptors.response.use(
+      res => {
+        if (res.config.url.includes('user/v1/accounts/')) {
+          setLocalErrors((prevState) => {
+            const fieldName = editingInputRef.current;
+
+            if (!fieldName) { return prevState; }
+
+            const { [fieldName]: _, ...rest } = prevState;
+            return rest;
+          });
+          editingInputRef.current = null;
+          handleResetFormEdition();
+        }
+        return res;
+      },
+      error => {
+        if (
+          error.response?.status === 400
+          && error.response.config.url.includes('user/v1/accounts/')
+        ) {
+          const fieldErrors = error.response.data?.field_errors;
+
+          if (fieldErrors) {
+            setLocalErrors({ [editingInputRef.current]: fieldErrors.extended_profile.user_message });
+          }
+        }
+
+        return Promise.reject(error);
+      },
+    );
+
+    return () => {
+      httpClient.interceptors.response.eject(interceptor);
+    };
+  }, []);
+
+  const mergedErrors = {
+    ...profileFieldErrors,
+    ...localErrors,
+  };
+
   const value = React.useMemo(
     () => ({
       editMode,
       extendedProfileFields,
       editingInput,
       saveState,
-      profileFieldErrors,
+      profileFieldErrors: mergedErrors,
       handleChangeFormMode,
       handleResetFormEdition,
       handleSaveExtendedProfile,

src/extended-profile/ExtendedProfileProvider.jsx

@@ -74,8 +74,8 @@ const BaseField = ({
       return renderEmptyLabel();
     }
 
-	// If it is a select field, we want to display the option label instead of the value
-	const fieldOption = fieldOptions?.find((option) => option.value === rawValue);
+    // If it is a select field, we want to display the option label instead of the value
+    const fieldOption = fieldOptions?.find((option) => option.value === rawValue);
     return fieldOption ? fieldOption.name : rawValue;
   };
 
@@ -170,6 +170,7 @@ BaseField.propTypes = {
       label: PropTypes.string.isRequired,
     }),
   ),
+  savingErrors: PropTypes.objectOf(PropTypes.string),
 };
 
 BaseField.defaultProps = {

src/extended-profile/account-fields/elements/BaseField.jsx

@@ -167,6 +167,7 @@ BaseField.propTypes = {
       label: PropTypes.string.isRequired,
     }),
   ),
+  savingErrors: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.string)),
 };
 
 BaseField.defaultProps = {

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

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import PropTypes from 'prop-types';
 
 import ExtendedProfileFieldsContext from '../ExtendedProfileContext';
 
@@ -80,4 +81,14 @@ const ProfileFields = ({ fetchProfile, extendedProfileValues }) => {
   );
 };
 
+ProfileFields.propTypes = {
+  fetchProfile: PropTypes.func.isRequired,
+  extendedProfileValues: PropTypes.arrayOf(
+    PropTypes.shape({
+      fieldName: PropTypes.string.isRequired,
+      fieldValue: PropTypes.string,
+    }),
+  ).isRequired,
+};
+
 export default ProfileFields;