From 46089b8b2ef57a304f9a14d690e31707bb9e033b Mon Sep 17 00:00:00 2001
From: RahatAli <rahatali@A006-00935.local>
Date: Thu, 30 Nov 2023 16:17:24 +0500
Subject: [PATCH] feat: User Profile image

---
 .../AuthenticatedUserDropdown.jsx              | 18 +++++++++++++++---
 src/learning-header/LearningHeader.jsx         |  5 ++++-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/learning-header/AuthenticatedUserDropdown.jsx b/src/learning-header/AuthenticatedUserDropdown.jsx
index c7c8fee1b..9d87076cf 100644
--- a/src/learning-header/AuthenticatedUserDropdown.jsx
+++ b/src/learning-header/AuthenticatedUserDropdown.jsx
@@ -5,14 +5,14 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Dropdown } from '@edx/paragon';
+import { Dropdown, Image } from '@edx/paragon';
 import {
   ProfileIcon, LogoutIcon, AccountIcon, DashboardIcon,
 } from '../Icons';
 
 import messages from './messages';
 
-const AuthenticatedUserDropdown = ({ intl, username }) => {
+const AuthenticatedUserDropdown = ({ intl, username, userProfileImage }) => {
   const dashboardMenuItem = (
     <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
       <span className="drop-icon"><DashboardIcon className="text-primary" /></span>
@@ -25,7 +25,14 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
       {/* <a className="text-gray-700" href={}>{intl.formatMessage(messages.help)}</a> */}
       <Dropdown className="user-dropdown ml-3">
         <Dropdown.Toggle variant="none" className="user-dropdown-toggle">
-          <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
+          <FontAwesomeIcon icon={faUserCircle} className="d-none" size="lg" />
+          {
+            userProfileImage && (
+              <div className="user-profile mr-3">
+                <Image src={userProfileImage} fluid alt={username} />
+              </div>
+            )
+          }
           <span data-hj-suppress className="d-none d-md-inline">
             {username}
           </span>
@@ -57,7 +64,12 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
 
 AuthenticatedUserDropdown.propTypes = {
   intl: intlShape.isRequired,
+  userProfileImage: PropTypes.string,
   username: PropTypes.string.isRequired,
 };
 
+AuthenticatedUserDropdown.defaultProps = {
+  userProfileImage: null,
+};
+
 export default injectIntl(AuthenticatedUserDropdown);
diff --git a/src/learning-header/LearningHeader.jsx b/src/learning-header/LearningHeader.jsx
index a2f3e480d..9c92f66f0 100644
--- a/src/learning-header/LearningHeader.jsx
+++ b/src/learning-header/LearningHeader.jsx
@@ -26,7 +26,7 @@ LinkedLogo.propTypes = {
 };
 
 const LearningHeader = ({
-  courseOrg, courseNumber, courseTitle, intl, showUserDropdown,
+  courseOrg, courseNumber, courseTitle, intl, showUserDropdown, userProfileImage,
 }) => {
   const { authenticatedUser } = useContext(AppContext);
 
@@ -50,6 +50,7 @@ const LearningHeader = ({
         </div>
         {showUserDropdown && authenticatedUser && (
         <AuthenticatedUserDropdown
+          userProfileImage={userProfileImage}
           username={authenticatedUser.username}
         />
         )}
@@ -65,6 +66,7 @@ LearningHeader.propTypes = {
   courseOrg: PropTypes.string,
   courseNumber: PropTypes.string,
   courseTitle: PropTypes.string,
+  userProfileImage: PropTypes.string,
   intl: intlShape.isRequired,
   showUserDropdown: PropTypes.bool,
 };
@@ -73,6 +75,7 @@ LearningHeader.defaultProps = {
   courseOrg: null,
   courseNumber: null,
   courseTitle: null,
+  userProfileImage: null,
   showUserDropdown: true,
 };