feat: User Profile image (#4)

edly-io · Dec 1, 2023 · f2816a0 · f2816a0
1 parent a0e96c3
commit f2816a0
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git 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
@@ -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,
 };