fix: fixed dynamic learner profile issue (#493)

* fix: fixed dynamic URL issue

* refactor: removed unused selectors

---------

Co-authored-by: sundasnoreen12 <sundasnoreen12@ggmail.com>

src/discussions/learners/data/selectors.js

@@ -14,7 +14,3 @@ 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

@@ -1,20 +1,15 @@
 import React from 'react';
 
-import { useSelector } from 'react-redux';
-
 import { Avatar } from '@edx/paragon';
 
-import { selectLearnerAvatar } from '../data/selectors';
 import { learnerShape } from './proptypes';
 
 function LearnerAvatar({ learner }) {
-  const learnerAvatar = useSelector(selectLearnerAvatar(learner.username));
   return (
     <div className="mr-3 mt-1">
       <Avatar
         size="sm"
         alt={learner.username}
-        src={learnerAvatar}
         style={{
           height: '2rem',
           width: '2rem',

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

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import classNames from 'classnames';
-import { useSelector } from 'react-redux';
 
 import { injectIntl } from '@edx/frontend-platform/i18n';
 import { Avatar } from '@edx/paragon';
@@ -9,13 +8,11 @@ import { Avatar } from '@edx/paragon';
 import { AvatarOutlineAndLabelColors } from '../../../../data/constants';
 import { AuthorLabel } from '../../../common';
 import { useAlertBannerVisible } from '../../../data/hooks';
-import { selectAuthorAvatars } from '../../../posts/data/selectors';
 import { commentShape } from './proptypes';
 
 function CommentHeader({
   comment,
 }) {
-  const authorAvatars = useSelector(selectAuthorAvatars(comment.author));
   const colorClass = AvatarOutlineAndLabelColors[comment.authorLabel];
   const hasAnyAlert = useAlertBannerVisible(comment);
 
@@ -28,7 +25,6 @@ function CommentHeader({
         <Avatar
           className={`border-0 ml-0.5 mr-2.5 ${colorClass ? `outline-${colorClass}` : 'outline-anonymous'}`}
           alt={comment.author}
-          src={authorAvatars?.imageUrlSmall}
           style={{
             width: '32px',
             height: '32px',

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import * as timeago from 'timeago.js';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -14,7 +14,6 @@ import {
 } from '../../../common';
 import timeLocale from '../../../common/time-locale';
 import { useAlertBannerVisible } from '../../../data/hooks';
-import { selectAuthorAvatars } from '../../../posts/data/selectors';
 import { editComment, removeComment } from '../../data/thunks';
 import messages from '../../messages';
 import CommentEditor from './CommentEditor';
@@ -60,7 +59,6 @@ function Reply({
     [ContentActions.REPORT]: () => handleAbusedFlag(),
   }), [dispatch, handleAbusedFlag, reply.endorsed, reply.id, showDeleteConfirmation]);
 
-  const authorAvatars = useSelector(selectAuthorAvatars(reply.author));
   const colorClass = AvatarOutlineAndLabelColors[reply.authorLabel];
   const hasAnyAlert = useAlertBannerVisible(reply);
 
@@ -101,7 +99,6 @@ function Reply({
           <Avatar
             className={`ml-0.5 mt-0.5 border-0 ${colorClass ? `outline-${colorClass}` : 'outline-anonymous'}`}
             alt={reply.author}
-            src={authorAvatars?.imageUrlSmall}
             style={{
               width: '32px',
               height: '32px',

src/discussions/posts/data/selectors.js

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

src/discussions/posts/post/PostHeader.jsx

@@ -2,7 +2,6 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
-import { useSelector } from 'react-redux';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Avatar, Badge, Icon } from '@edx/paragon';
@@ -11,14 +10,12 @@ import { Issue, Question } from '../../../components/icons';
 import { AvatarOutlineAndLabelColors, ThreadType } from '../../../data/constants';
 import { AuthorLabel } from '../../common';
 import { useAlertBannerVisible } from '../../data/hooks';
-import { selectAuthorAvatars } from '../data/selectors';
 import messages from './messages';
 import { postShape } from './proptypes';
 
 export function PostAvatar({
   post, authorLabel, fromPostLink, read,
 }) {
-  const authorAvatars = useSelector(selectAuthorAvatars(post.author));
   const outlineColor = AvatarOutlineAndLabelColors[authorLabel];
 
   const avatarSize = useMemo(() => {
@@ -63,7 +60,6 @@ export function PostAvatar({
           width: avatarSize,
         }}
         alt={post.author}
-        src={authorAvatars?.imageUrlSmall}
       />
     </div>
   );