Revert "Perf: improved discussions MFE's components re-rendering and loading time (#485)" (#512)

This reverts commit 59b4366edd.

src/discussions/posts/post/PostHeader.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
 
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Avatar, Badge, Icon } from '@edx/paragon';
 
 import { Issue, Question } from '../../../components/icons';
@@ -11,35 +11,36 @@ import { AvatarOutlineAndLabelColors, ThreadType } from '../../../data/constants
 import { AuthorLabel } from '../../common';
 import { useAlertBannerVisible } from '../../data/hooks';
 import messages from './messages';
+import { postShape } from './proptypes';
 
-export const PostAvatar = React.memo(({
-  author, postType, authorLabel, fromPostLink, read,
-}) => {
+export function PostAvatar({
+  post, authorLabel, fromPostLink, read,
+}) {
   const outlineColor = AvatarOutlineAndLabelColors[authorLabel];
 
   const avatarSize = useMemo(() => {
     let size = '2rem';
-    if (postType === ThreadType.DISCUSSION && !fromPostLink) {
+    if (post.type === ThreadType.DISCUSSION && !fromPostLink) {
       size = '2rem';
-    } else if (postType === ThreadType.QUESTION) {
+    } else if (post.type === ThreadType.QUESTION) {
       size = '1.5rem';
     }
     return size;
-  }, [postType]);
+  }, [post.type]);
 
   const avatarSpacing = useMemo(() => {
     let spacing = 'mr-3 ';
-    if (postType === ThreadType.DISCUSSION && fromPostLink) {
+    if (post.type === ThreadType.DISCUSSION && fromPostLink) {
       spacing += 'pt-2 ml-0.5';
-    } else if (postType === ThreadType.DISCUSSION) {
+    } else if (post.type === ThreadType.DISCUSSION) {
       spacing += 'ml-0.5 mt-0.5';
     }
     return spacing;
-  }, [postType]);
+  }, [post.type]);
 
   return (
     <div className={avatarSpacing}>
-      {postType === ThreadType.QUESTION && (
+      {post.type === ThreadType.QUESTION && (
         <Icon
           src={read ? Issue : Question}
           className={classNames('position-absolute bg-white rounded-circle question-icon-size', {
@@ -51,22 +52,21 @@ export const PostAvatar = React.memo(({
         className={classNames('border-0 mt-1', {
           [`outline-${outlineColor}`]: outlineColor,
           'outline-anonymous': !outlineColor,
-          'mt-3 ml-2': postType === ThreadType.QUESTION && fromPostLink,
-          'avarat-img-position mt-17px': postType === ThreadType.QUESTION,
+          'mt-3 ml-2': post.type === ThreadType.QUESTION && fromPostLink,
+          'avarat-img-position mt-17px': post.type === ThreadType.QUESTION,
         })}
         style={{
           height: avatarSize,
           width: avatarSize,
         }}
-        alt={author}
+        alt={post.author}
       />
     </div>
   );
-});
+}
 
 PostAvatar.propTypes = {
-  author: PropTypes.string.isRequired,
-  postType: PropTypes.string.isRequired,
+  post: postShape.isRequired,
   authorLabel: PropTypes.string,
   fromPostLink: PropTypes.bool,
   read: PropTypes.bool,
@@ -78,86 +78,65 @@ PostAvatar.defaultProps = {
   read: false,
 };
 
-const PostHeader = ({
-  abuseFlagged,
-  author,
-  authorLabel,
-  closed,
-  createdAt,
-  hasEndorsed,
-  lastEdit,
-  title,
-  postType,
+function PostHeader({
+  intl,
+  post,
   preview,
-}) => {
-  const intl = useIntl();
-  const showAnsweredBadge = preview && hasEndorsed && postType === ThreadType.QUESTION;
-  const authorLabelColor = AvatarOutlineAndLabelColors[authorLabel];
-  const hasAnyAlert = useAlertBannerVisible({
-    author, abuseFlagged, lastEdit, closed,
-  });
+}) {
+  const showAnsweredBadge = preview && post.hasEndorsed && post.type === ThreadType.QUESTION;
+  const authorLabelColor = AvatarOutlineAndLabelColors[post.authorLabel];
+  const hasAnyAlert = useAlertBannerVisible(post);
 
   return (
     <div className={classNames('d-flex flex-fill mw-100', { 'mt-10px': hasAnyAlert && !preview })}>
       <div className="flex-shrink-0">
-        <PostAvatar postType={postType} author={author} authorLabel={authorLabel} />
+        <PostAvatar post={post} authorLabel={post.authorLabel} />
       </div>
       <div className="align-items-center d-flex flex-row">
         <div className="d-flex flex-column justify-content-start mw-100">
-          {preview ? (
-            <div className="h4 d-flex align-items-center pb-0 mb-0 flex-fill">
-              <div className="flex-fill text-truncate" role="heading" aria-level="1">
-                {title}
-              </div>
-              {showAnsweredBadge
+          {preview
+            ? (
+              <div className="h4 d-flex align-items-center pb-0 mb-0 flex-fill">
+                <div className="flex-fill text-truncate" role="heading" aria-level="1">
+                  {post.title}
+                </div>
+                {showAnsweredBadge
                   && <Badge variant="success">{intl.formatMessage(messages.answered)}</Badge>}
-            </div>
-          ) : (
-            <h5
-              className="mb-0 font-style text-primary-500"
-              style={{ lineHeight: '21px' }}
-              aria-level="1"
-              tabIndex="-1"
-              accessKey="h"
-            >
-              {title}
-            </h5>
-          )}
+              </div>
+            )
+            : (
+              <h5
+                className="mb-0 font-style text-primary-500"
+                style={{ lineHeight: '21px' }}
+                aria-level="1"
+                tabIndex="-1"
+                accessKey="h"
+              >
+                {post.title}
+              </h5>
+            )}
           <AuthorLabel
-            author={author || intl.formatMessage(messages.anonymous)}
-            authorLabel={authorLabel}
+            author={post.author || intl.formatMessage(messages.anonymous)}
+            authorLabel={post.authorLabel}
             labelColor={authorLabelColor && `text-${authorLabelColor}`}
             linkToProfile
-            postCreatedAt={createdAt}
+            postCreatedAt={post.createdAt}
             postOrComment
           />
         </div>
       </div>
     </div>
   );
-};
+}
 
 PostHeader.propTypes = {
+  intl: intlShape.isRequired,
+  post: postShape.isRequired,
   preview: PropTypes.bool,
-  hasEndorsed: PropTypes.bool.isRequired,
-  postType: PropTypes.string.isRequired,
-  authorLabel: PropTypes.string,
-  author: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  createdAt: PropTypes.string.isRequired,
-  abuseFlagged: PropTypes.bool,
-  lastEdit: PropTypes.shape({
-    reason: PropTypes.string,
-  }),
-  closed: PropTypes.bool,
 };
 
 PostHeader.defaultProps = {
-  authorLabel: null,
   preview: false,
-  abuseFlagged: false,
-  lastEdit: {},
-  closed: false,
 };
 
-export default React.memo(PostHeader);
+export default injectIntl(PostHeader);