chore(react): enhance user profile handling by adding path support and integrating getMeProfile after updates

Author: brionmario

packages/react/src/components/presentation/UserProfile/BaseUserProfile.tsx

@@ -27,8 +27,12 @@ import {withVendorCSSClassPrefix} from '@asgardeo/browser';
 import clsx from 'clsx';
 import getMappedUserProfileValue from '../../../utils/getMappedUserProfileValue';
 
-interface Schema {
-  id?: string;
+interface ExtendedFlatSchema {
+  schemaId?: string;
+  path?: string;
+}
+
+interface Schema extends ExtendedFlatSchema {
   caseExact?: boolean;
   description?: string;
   displayName?: string;
@@ -109,25 +113,40 @@ const BaseUserProfile: FC<BaseUserProfileProps> = ({
     }));
   }, []);
 
+  function set(obj: Record<string, any>, path: string, value: any): void {
+    const keys = path.split('.');
+    let current = obj;
+
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i];
+
+      // If last key, set the value
+      if (i === keys.length - 1) {
+        current[key] = value;
+      } else {
+        // If the next level does not exist or is not an object, create an object
+        if (!current[key] || typeof current[key] !== 'object') {
+          current[key] = {};
+        }
+        current = current[key];
+      }
+    }
+  }
+
   const handleFieldSave = useCallback(
     (schema: Schema) => {
       let payload = {};
+      const fieldName = schema.name;
+      const fieldValue =
+        editedUser && fieldName && editedUser[fieldName] !== undefined ? editedUser[fieldName] : schema.value;
 
-      if (schema.multiValued) {
-        payload = {
-          [schema.id]: {
-            [schema.name]: schema.value,
-          },
-        };
-      } else {
-        payload = {
-          [schema.name]: schema.value,
-        };
-      }
+      set(payload, schema.path, fieldValue);
 
       onUpdate(payload);
+      // Optionally, exit edit mode for this field after save
+      toggleFieldEdit(fieldName!);
     },
-    [onChange, onSubmit, editedUser, toggleFieldEdit],
+    [editedUser, onUpdate, toggleFieldEdit],
   );
 
   const handleFieldCancel = useCallback(

packages/react/src/components/presentation/UserProfile/UserProfile.tsx

@@ -20,6 +20,7 @@ import {FC, ReactElement} from 'react';
 import useAsgardeo from '../../../hooks/useAsgardeo';
 import BaseUserProfile, {BaseUserProfileProps} from './BaseUserProfile';
 import updateMeProfile from 'packages/react/src/api/scim2/updateMeProfile';
+import getMeProfile from 'packages/react/src/api/scim2/getMeProfile';
 
 /**
  * Props for the UserProfile component.
@@ -54,7 +55,8 @@ const UserProfile: FC<UserProfileProps> = ({...rest}: UserProfileProps): ReactEl
   const {user, baseUrl} = useAsgardeo();
 
   const handleProfileUpdate = async (payload: any): Promise<void> => {
-    updateMeProfile({url: `${baseUrl}/scim2/Me`, payload});
+    await updateMeProfile({url: `${baseUrl}/scim2/Me`, payload});
+    await getMeProfile({url: `${baseUrl}/scim2/Me` });
   };
 
   return <BaseUserProfile user={user} onUpdate={handleProfileUpdate} {...rest} />;

packages/react/src/utils/getUserProfile.ts

@@ -71,17 +71,23 @@ const getUserProfile = async ({baseUrl}): Promise<any> => {
       const source = schemaId.startsWith('urn:ietf:params:scim:schemas:core:2.0') ? profile : profile[schemaId] ?? {};
 
       for (const attr of schema.attributes || []) {
-        const {name, type, subAttributes, multiValued} = attr;
+        const {name, type, subAttributes, multiValued, caseExact, returned} = attr;
 
         if (type === 'COMPLEX' && subAttributes?.length && typeof source[name] === 'object') {
           // For complex attributes with subAttributes, create an entry for each subAttribute
           const complexValue = source[name];
           for (const subAttr of subAttributes) {
             if (complexValue[subAttr.name] !== undefined) {
+              const {subAttributes, ...attrWithoutSubAttrs} = attr;
+
               result.push({
-                id: schemaId,
+                schemaId,
                 ...subAttr,
                 value: complexValue[subAttr.name],
+                parent: {
+                  ...attrWithoutSubAttrs,
+                },
+                path: `${name}.${subAttr.name}`,
               });
             }
           }
@@ -90,9 +96,10 @@ const getUserProfile = async ({baseUrl}): Promise<any> => {
           // Only include if value exists
           if (value !== undefined) {
             result.push({
-              id: schemaId,
+              schemaId,
               ...attr,
               value,
+              path: name,
             });
           }
         }