feat: made user profile image visible (#778)

* feat: made user profile image visible

* refactor: updated selector name

* refactor: updated selector name

Author: eemaanamir

src/discussions/learners/data/selectors.js

@@ -12,3 +12,7 @@ export const selectUsernameSearch = () => state => state.learners.usernameSearch
 export const selectLearnerSorting = () => state => state.learners.sortedBy;
 
 export const selectLearnerNextPage = () => state => state.learners.nextPage;
+
+export const selectLearnerAvatar = author => state => (
+  state.learners.learnerProfiles[author]?.profileImage?.imageUrlLarge
+);

src/discussions/learners/learner/LearnerAvatar.jsx

@@ -2,19 +2,26 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { Avatar } from '@openedx/paragon';
+import { useSelector } from 'react-redux';
 
-const LearnerAvatar = ({ username }) => (
-  <div className="mr-3 mt-1">
-    <Avatar
-      size="sm"
-      alt={username}
-      style={{
-        height: '2rem',
-        width: '2rem',
-      }}
-    />
-  </div>
-);
+import { selectLearnerAvatar } from '../data/selectors';
+
+const LearnerAvatar = ({ username }) => {
+  const learnerAvatar = useSelector(selectLearnerAvatar(username));
+  return (
+    <div className="mr-3 mt-1">
+      <Avatar
+        size="sm"
+        alt={username}
+        src={learnerAvatar}
+        style={{
+          height: '2rem',
+          width: '2rem',
+        }}
+      />
+    </div>
+  );
+};
 
 LearnerAvatar.propTypes = {
   username: PropTypes.string.isRequired,

src/discussions/post-comments/comments/comment/CommentHeader.jsx

@@ -3,10 +3,12 @@ import PropTypes from 'prop-types';
 
 import { Avatar } from '@openedx/paragon';
 import classNames from 'classnames';
+import { useSelector } from 'react-redux';
 
 import { AvatarOutlineAndLabelColors } from '../../../../data/constants';
 import { AuthorLabel } from '../../../common';
 import { useAlertBannerVisible } from '../../../data/hooks';
+import { selectAuthorAvatar } from '../../../posts/data/selectors';
 
 const CommentHeader = ({
   author,
@@ -23,6 +25,7 @@ const CommentHeader = ({
     lastEdit,
     closed,
   });
+  const authorAvatar = useSelector(selectAuthorAvatar(author));
 
   return (
     <div className={classNames('d-flex flex-row justify-content-between', {
@@ -33,6 +36,7 @@ const CommentHeader = ({
         <Avatar
           className={`border-0 ml-0.5 mr-2.5 ${colorClass ? `outline-${colorClass}` : 'outline-anonymous'}`}
           alt={author}
+          src={authorAvatar?.imageUrlSmall}
           style={{
             width: '32px',
             height: '32px',

src/discussions/post-comments/comments/comment/Reply.jsx

@@ -15,6 +15,7 @@ import {
 import timeLocale from '../../../common/time-locale';
 import { ContentTypes } from '../../../data/constants';
 import { useAlertBannerVisible } from '../../../data/hooks';
+import { selectAuthorAvatar } from '../../../posts/data/selectors';
 import { selectCommentOrResponseById } from '../../data/selectors';
 import { editComment, removeComment } from '../../data/thunks';
 import messages from '../../messages';
@@ -38,6 +39,7 @@ const Reply = ({ responseId }) => {
     lastEdit,
     closed,
   });
+  const authorAvatar = useSelector(selectAuthorAvatar(author));
 
   const handleDeleteConfirmation = useCallback(() => {
     dispatch(removeComment(id));
@@ -121,6 +123,7 @@ const Reply = ({ responseId }) => {
           <Avatar
             className={`ml-0.5 mt-0.5 border-0 ${colorClass ? `outline-${colorClass}` : 'outline-anonymous'}`}
             alt={author}
+            src={authorAvatar?.imageUrlSmall}
             style={{
               width: '32px',
               height: '32px',

src/discussions/posts/data/selectors.js

@@ -56,3 +56,7 @@ export const selectThreadSorting = () => state => state.threads.sortedBy;
 export const selectThreadFilters = () => state => state.threads.filters;
 
 export const selectThreadNextPage = () => state => state.threads.nextPage;
+
+export const selectAuthorAvatar = author => state => (
+  state.threads.avatars?.[author]?.profile.image
+);

src/discussions/posts/post/PostHeader.jsx

@@ -4,18 +4,21 @@ import PropTypes from 'prop-types';
 import { Avatar, Badge, Icon } from '@openedx/paragon';
 import { Question } from '@openedx/paragon/icons';
 import classNames from 'classnames';
+import { useSelector } from 'react-redux';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { AvatarOutlineAndLabelColors, ThreadType } from '../../../data/constants';
 import { AuthorLabel } from '../../common';
 import { useAlertBannerVisible } from '../../data/hooks';
+import { selectAuthorAvatar } from '../data/selectors';
 import messages from './messages';
 
 export const PostAvatar = React.memo(({
   author, postType, authorLabel, fromPostLink, read,
 }) => {
   const outlineColor = AvatarOutlineAndLabelColors[authorLabel];
+  const authorAvatars = useSelector(selectAuthorAvatar(author));
 
   const avatarSize = useMemo(() => {
     let size = '2rem';
@@ -60,6 +63,7 @@ export const PostAvatar = React.memo(({
           width: avatarSize,
         }}
         alt={author}
+        src={authorAvatars?.imageUrlSmall}
       />
     </div>
   );