Feat/user avatar

frontend/src/actions/userAction.ts

@@ -1,21 +1,26 @@
 import { USER_DETAILS_REQUEST, USER_DETAILS_SUCCESS, USER_DETAILS_FAIL } from '../constants/userConstants';
 import { isCurrentAuthUser } from "../services/AuthService";
 
-export const getUserDetails = () =>  async (dispatch:any) => {
-    try {
-      dispatch({
-        type: USER_DETAILS_REQUEST,
-      })
-      //readt the localStorage Here
-      const data = await isCurrentAuthUser(); 
-      dispatch({
-        type: USER_DETAILS_SUCCESS,
-        payload: {TestUser:'Jazz as always',isLoggedIn:data},
-      })
-    } catch (error) {
-      dispatch({
-        type: USER_DETAILS_FAIL,
-        payload: {error:error},
-      })
-    }
+const FAM_LOGIN_USER = 'famLoginUser';
+export const getUserDetails = () => async (dispatch: any) => {
+  try {
+    dispatch({
+      type: USER_DETAILS_REQUEST,
+    });
+
+    const userJSON = localStorage.getItem(FAM_LOGIN_USER); // Retrieve the JSON string from local storage
+    const user = userJSON ? JSON.parse(userJSON) : null; // Parse the JSON string to a JavaScript object
+
+    const data = await isCurrentAuthUser();
+
+    dispatch({
+      type: USER_DETAILS_SUCCESS,
+      payload: { ...user, isLoggedIn: data },
+    });
+  } catch (error) {
+    dispatch({
+      type: USER_DETAILS_FAIL,
+      payload: { error: error },
+    });
   }
+};

frontend/src/components/AvatarImage/AvatarImage.scss

@@ -1,5 +1,12 @@
 .profile-image {
   border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+  background-color: #c7d4e7; 
+  color: #072251; 
+  font-size: 1.4rem;
 }
 
 .small {
@@ -10,4 +17,5 @@
 .large {
   width: 4rem;
   height: 4rem;
-}
+}
+

frontend/src/components/AvatarImage/index.tsx

@@ -1,18 +1,32 @@
 import React from 'react';
 
-import emptyUser from '../../assets/img/emptyUser.jpg';
 import './AvatarImage.scss';
 
 type Size = 'small' | 'large';
 
 interface AvatarImageProps {
   userName: string;
-  source?: string;
   size: Size;
 }
 
-const AvatarImage = ({ userName, source, size }: AvatarImageProps) => (
-  <img src={source || emptyUser} alt={`${userName}`} className={`profile-image ${size}`} />
-);
+const getInitials = (userName: string) => {
+  const nameParts = userName.split(' ');
+  if (nameParts.length >= 2) {
+    return nameParts[0][0] + nameParts[1][0];
+  } else if (nameParts.length === 1) {
+    return nameParts[0][0];
+  }
+  return '';
+};
+
+const AvatarImage = ({ userName, size }: AvatarImageProps) => {
+  const initials = getInitials(userName);
+
+  return (
+    <div className={`profile-image ${size}`}>
+      <div className="initials">{initials}</div>
+    </div>
+  );
+};
 
 export default AvatarImage;

frontend/src/components/MyProfile/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-
+import { useSelector } from 'react-redux';
 import {
   SideNavLink
 } from '@carbon/react';
@@ -16,8 +16,9 @@ import { logout } from '../../services/AuthService';
 
 const MyProfile = () => {
   const { theme, setTheme } = useThemePreference();
-  const userData = {firstName:'Jazz', lastName:"Grewal", idirUsername:"Jasgrewal", email:"[email protected]"};
-
+  const userData = {firstName:'Catherine', lastName:"Meng", idirUsername:"Jasgrewal", email:"[email protected]"};
+  const userDetails = useSelector((state:any) => state.userDetails)
+
   const [goToURL, setGoToURL] = useState<string>('');
   const [goTo, setGoTo] = useState<boolean>(false);
 
@@ -45,12 +46,13 @@ const MyProfile = () => {
     <>
       <div className="user-info-section">
         <div className="user-image">
-          <AvatarImage userName={`${userData.firstName} ${userData.lastName}`} size="large" />
+          <AvatarImage userName={`${userDetails.user.firstName} ${userDetails.user.lastName}`} size="large" />
         </div>
         <div className="user-data">
-          <p className="user-name">{`${userData.firstName} ${userData.lastName}`}</p>
-          <p>{`IDIR: ${userData.idirUsername}`}</p>
-          <p>{userData.email}</p>
+          <p className="user-name">{`${userDetails.user.firstName} ${userDetails.user.lastName}`}</p>
+          <p>{`IDIR: ${userDetails.user.userName}`}</p>
+          <p>{`Email:${userDetails.user.email}`}</p>
+
         </div>
       </div>
       <hr className="divisory" />

frontend/src/services/AuthService.ts

@@ -90,15 +90,26 @@ async function refreshToken(): Promise<FamLoginUser | undefined> {
 function parseToken(authToken: CognitoUserSession): FamLoginUser {
   const decodedIdToken = authToken.getIdToken().decodePayload();
   const decodedAccessToken = authToken.getAccessToken().decodePayload();
+
+  // Extract the first name and last name from the displayName and remove unwanted part
+  const displayName = decodedIdToken['custom:idp_display_name'];
+  const [lastName, firstName] = displayName.split(', ');
+  const sanitizedFirstName = firstName.split(' ')[0].trim(); // Remove unwanted part
   const famLoginUser = {
-      username: decodedIdToken['custom:idp_username'],
-      idpProvider: decodedIdToken['identities']['providerName'],
-      roles: decodedAccessToken['cognito:groups'],
-      authToken: authToken,
+    userName: decodedIdToken['custom:idp_username'],
+    displayName,
+    email: decodedIdToken['email'],
+    idpProvider: decodedIdToken['identities']['providerName'],
+    roles: decodedAccessToken['cognito:groups'],
+    authToken: authToken,
+    firstName: sanitizedFirstName,
+    lastName,  // Add lastName field
   };
+
   return famLoginUser;
 }
 
+
 function removeFamUser() {
   storeFamUser(undefined);
   // clean up local storage for selected application