feat: Editor bar visibility (quince.master) (#583)

* feat: fixed editor bar visibility

* feat: fixed z index

.env

@@ -20,6 +20,5 @@ SEGMENT_KEY=''
 SITE_NAME=''
 USER_INFO_COOKIE_NAME=''
 SUPPORT_URL=''
-TA_FEEDBACK_FORM= ''
-STAFF_FEEDBACK_FORM= ''
-DISPLAY_FEEDBACK_BANNER='false'
+LEARNER_FEEDBACK_URL=''
+STAFF_FEEDBACK_URL=''

.env.development

@@ -21,6 +21,5 @@ SEGMENT_KEY=''
 SITE_NAME=localhost
 USER_INFO_COOKIE_NAME='edx-user-info'
 SUPPORT_URL='https://support.edx.org'
-TA_FEEDBACK_FORM='https://learner-form.test'
-STAFF_FEEDBACK_FORM='https://staff-form.test'
-DISPLAY_FEEDBACK_BANNER='false'
+LEARNER_FEEDBACK_URL=''
+STAFF_FEEDBACK_URL=''

.env.test

@@ -19,6 +19,5 @@ SEGMENT_KEY=''
 SITE_NAME='localhost'
 USER_INFO_COOKIE_NAME='edx-user-info'
 SUPPORT_URL='https://support.edx.org'
-TA_FEEDBACK_FORM='https://learner-form.test'
-STAFF_FEEDBACK_FORM='https://staff-form.test'
-DISPLAY_FEEDBACK_BANNER='false'
+LEARNER_FEEDBACK_URL=''
+STAFF_FEEDBACK_URL=''

.eslintrc.js

@@ -1,9 +1,10 @@
 const { createConfig } = require('@edx/frontend-build');
 
-module.exports = createConfig('eslint',
-{
-  "plugins": ["simple-import-sort"],
-    "rules": {
+module.exports = createConfig(
+  'eslint',
+  {
+    plugins: ['simple-import-sort'],
+    rules: {
       'import/no-extraneous-dependencies': 'off',
       'react-hooks/exhaustive-deps': 'off',
       'jsx-a11y/no-noninteractive-element-interactions': 'off',
@@ -25,7 +26,6 @@ module.exports = createConfig('eslint',
         },
       ],
       'simple-import-sort/exports': 'error',
-    }
-  }
+    },
+  },
 );
-

.github/workflows/ci.yml

@@ -9,18 +9,17 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [16]
     steps:
     - name: Checkout
       uses: actions/checkout@v2
       with:
         fetch-depth: 0
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Nodejs
       uses: actions/setup-node@v2
       with:
-        node-version: ${{ matrix.node }}
+        node-version: ${{ env.NODE_VER }}
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master

.jest/setEnvVars.js

@@ -1,2 +0,0 @@
-process.env.TA_FEEDBACK_FORM= 'https://learner-form.test';
-process.env.STAFF_FEEDBACK_FORM= 'https://staff-form.test';

.nvmrc

@@ -1 +1 @@
-16
+18

Makefile

@@ -1,7 +1,8 @@
 export TRANSIFEX_RESOURCE = frontend-app-discussions
 transifex_resource = frontend-app-discussions
-transifex_langs = "ar,fr,es_419,zh_CN,tr_TR,pl,fr_CA,fr_FR,de_DE,it_IT"
+transifex_langs = "ar,fr,es_419,zh_CN,tr_TR,pl,fr_CA,fr_FR,de_DE,it_IT,pt_PT,uk,ru,hi,cs,es_AR,es_ES,fa_IR"
 
+intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
@@ -55,9 +56,24 @@ push_translations:
 	# Pushing comments to Transifex...
 	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
 
+ifeq ($(OPENEDX_ATLAS_PULL),)
 # Pulls translations from Transifex.
 pull_translations:
 	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
+else
+# Experimental: OEP-58 Pulls translations using atlas
+pull_translations:
+	rm -rf src/i18n/messages
+	mkdir src/i18n/messages
+	cd src/i18n/messages \
+	  && atlas pull --filter=$(transifex_langs) \
+	           translations/frontend-component-header/src/i18n/messages:frontend-component-header  \
+	           translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
+	           translations/paragon/src/i18n/messages:paragon \
+	           translations/frontend-app-discussions/src/i18n/messages:frontend-app-discussions
+
+	$(intl_imports) frontend-component-header frontend-component-footer paragon frontend-app-discussions
+endif
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:

README.rst

@@ -1,10 +1,15 @@
+|Codecov| |license|
+
+.. |Codecov| image:: https://codecov.io/gh/openedx/frontend-app-discussions/branch/master/graph/badge.svg?token=3z7XvuzTq3
+   :target: https://codecov.io/gh/openedx/frontend-app-discussions
+.. |license| image:: https://img.shields.io/badge/license-AGPL-informational
+   :target: https://github.com/openedx/frontend-app-discussions/blob/master/LICENSE
+
 frontend-app-discussions
 ========================
 
-|Build Status| |Codecov| |license|
-
-Purpose
--------
+Introduction
+------------
 
 This repository is a React-based micro frontend for the Open edX discussion forums.
 
@@ -79,10 +84,3 @@ Internationalization
 --------------------
 
 Please see `edx/frontend-platform's i18n module <https://edx.github.io/frontend-platform/module-Internationalization.html>`_ for documentation on internationalization.  The documentation explains how to use it, and the `How To <https://github.com/openedx/frontend-i18n/blob/master/docs/how_tos/i18n.rst>`_ has more detail.
-
-.. |Build Status| image:: https://api.travis-ci.org/edx/frontend-app-discussions.svg?branch=master
-   :target: https://travis-ci.org/edx/frontend-app-discussions
-.. |Codecov| image:: https://codecov.io/gh/edx/frontend-app-discussions/branch/master/graph/badge.svg
-   :target: https://codecov.io/gh/edx/frontend-app-discussions
-.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-app-discussions.svg
-   :target: @edx/frontend-app-discussions

jest.config.js

@@ -1,9 +1,9 @@
 const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('jest', {
-  // setupFilesAfterEnv is used after the jest environment has been loaded.  In general this is what you want.  
+  // setupFilesAfterEnv is used after the jest environment has been loaded.  In general this is what you want.
   // If you want to add config BEFORE jest loads, use setupFiles instead.
-  setupFiles: ['<rootDir>/.jest/setEnvVars.js'],
+  setupFiles: ['<rootDir>/.env.test'],
   setupFilesAfterEnv: [
     '<rootDir>/src/setupTest.js',
   ],

package.json

@@ -34,10 +34,10 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-footer": "11.2.0",
-    "@edx/frontend-component-header": "3.2.0",
-    "@edx/frontend-platform": "2.6.1",
-    "@edx/paragon": "20.15.0",
+    "@edx/frontend-component-footer": "12.1.0",
+    "@edx/frontend-component-header": "4.3.0",
+    "@edx/frontend-platform": "4.6.0",
+    "@edx/paragon": "20.44.0",
     "@reduxjs/toolkit": "1.8.0",
     "@tinymce/tinymce-react": "3.13.1",
     "babel-polyfill": "6.26.0",
@@ -48,9 +48,9 @@
     "lodash.snakecase": "4.1.1",
     "prop-types": "15.8.1",
     "raw-loader": "4.0.2",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-redux": "7.2.6",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-redux": "7.2.9",
     "react-router": "5.2.1",
     "react-router-dom": "5.3.0",
     "redux": "4.1.2",
@@ -61,10 +61,10 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.1.0",
-    "@edx/frontend-build": "11.0.1",
+    "@edx/frontend-build": "12.8.27",
     "@edx/reactifex": "1.0.3",
     "@testing-library/jest-dom": "5.16.2",
-    "@testing-library/react": "12.1.4",
+    "@testing-library/react": "12.1.5",
     "@testing-library/user-event": "13.5.0",
     "axios-mock-adapter": "1.20.0",
     "babel-plugin-react-intl": "8.2.25",

public/index.html

@@ -9,7 +9,7 @@
       href="<%=htmlWebpackPlugin.options.FAVICON_URL%>"
       type="image/x-icon"
     />
-    <script>
+    <script defer>
       window.MathJax = {
         tex: {
           inlineMath: [
@@ -180,7 +180,6 @@
           var r = (window.lightningjs = t(e));
           (r.require = t), (r.modules = n);
         })({});
-
     </script>
     <!-- end usabilla live embed code -->
   </body>

renovate.json

@@ -1,9 +1,33 @@
 {
   "extends": [
-    "config:base"
+    "config:base",
+    "schedule:weekly",
+    ":automergeLinters",
+    ":automergeMinor",
+    ":automergeTesters",
+    ":enableVulnerabilityAlerts",
+    ":rebaseStalePrs",
+    ":semanticCommits",
+    ":updateNotScheduled"
   ],
-  "patch": {
-    "automerge": true
-  },
-  "rebaseStalePrs": true
+  "packageRules": [
+    {
+      "matchDepTypes": [
+        "devDependencies"
+      ],
+      "matchUpdateTypes": [
+        "lockFileMaintenance",
+        "minor",
+        "patch",
+        "pin"
+      ],
+      "automerge": true
+    },
+    {
+      "matchPackagePatterns": ["@edx", "@openedx"],
+      "matchUpdateTypes": ["minor", "patch"],
+      "automerge": true
+    }
+  ],
+  "timezone": "America/New_York"
 }

src/assets/Empty.jsx

@@ -0,0 +1,48 @@
+const Empty = () => (
+  <svg width="246" height="204" viewBox="0 0 246 204" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.966 80.706C1.93 101.534-5.315 125.86 4.558 148.18c17.989 40.665 116.015 29.236 158.702 13.267 120.227-44.976 62.415-162.99-67.596-133.809-36.401 8.17-65.661 32.239-79.698 53.068Z" fill="#D7D3D1" fillOpacity="0.3" />
+    <path d="M95.6307 23.4976C101.102 13.3476 109.932 6.31365 123.036 10.536C124.191 11.0005 125.403 11.311 126.639 11.4597C127.895 11.386 129.146 11.2369 130.384 11.0131C136.292 10.5259 140.656 16.2505 143.529 21.427C148.867 31.0796 158.622 44.1833 156.724 55.7847C155.252 64.7776 146.797 71.0097 138.261 74.1562C128.636 77.7063 118.244 78.655 108.136 76.9069C103.061 76.034 97.813 74.3288 94.159 70.6443C89.084 65.5084 88.069 57.6016 88.4547 50.3443C88.9926 42.2345 91.1749 31.8104 95.6307 23.4976Z" fill="#EEEAE9" />
+    <path d="M117.991 78.2569C114.66 78.2567 111.336 77.9715 108.054 77.4043C101.649 76.3081 97.0006 74.2172 93.8439 71.0098C89.4084 66.554 87.4393 59.652 87.9772 50.3952C88.5558 40.7933 91.2557 30.6534 95.2142 23.2845C99.8528 14.657 108.46 5.35964 123.137 10.0895L123.837 10.3331C124.73 10.6795 125.665 10.9015 126.618 10.9929C127.348 10.9968 128.077 10.9219 128.79 10.7696C129.278 10.6884 129.805 10.597 130.303 10.5564C135.165 10.1403 139.752 13.7334 143.894 21.2038C144.848 22.9293 145.924 24.7563 147.091 26.6949C152.278 35.3732 158.733 46.1728 157.139 55.866C155.871 63.712 148.877 70.7155 138.392 74.5928C131.864 77.0187 124.955 78.2596 117.991 78.2569ZM96.0972 23.721C92.1996 30.9782 89.5302 40.976 88.9922 50.4459C88.4543 59.3982 90.332 66.0972 94.5544 70.3602C97.5994 73.4053 102.076 75.4352 108.277 76.4502C118.3 78.1754 128.602 77.223 138.139 73.6894C148.289 69.9238 155.079 63.1842 156.307 55.6732C157.84 46.325 151.486 35.6777 146.38 27.1212C145.223 25.1826 144.127 23.3556 143.163 21.6199C139.214 14.5149 134.941 11.0741 130.465 11.4699C129.988 11.4699 129.521 11.5917 129.034 11.6729C128.218 11.8545 127.384 11.9464 126.547 11.947C125.503 11.8549 124.477 11.6122 123.502 11.2263L122.812 10.9929C108.744 6.45585 100.482 15.4284 95.9957 23.7413L96.0972 23.721Z" fill="#454545" />
+    <path d="M182.845 167.75C182.845 167.75 178.596 94.152 167.857 84.3978C152.409 70.4314 97.5788 67.5184 86.4443 70.3909C66.7533 75.4659 53.0508 106.22 53.0508 106.22L85.7135 115.985C85.7845 141.248 88.3119 167.75 88.3119 167.75H182.845Z" fill="#B5AFAB" />
+    <path d="M84.2307 146.058C84.1627 146.053 84.0963 146.035 84.0354 146.004C83.9746 145.973 83.9204 145.93 83.8761 145.878C83.8317 145.827 83.7981 145.766 83.7771 145.702C83.7561 145.637 83.7481 145.568 83.7537 145.5L88.1689 87.6451C88.1741 87.5757 88.1928 87.5081 88.2242 87.446C88.2556 87.3839 88.299 87.3286 88.3518 87.2833C88.4046 87.238 88.4659 87.2037 88.532 87.1821C88.5982 87.1606 88.668 87.1524 88.7373 87.1579C88.8063 87.163 88.8736 87.1819 88.9352 87.2134C88.9967 87.2449 89.0514 87.2884 89.0959 87.3414C89.1403 87.3944 89.1737 87.4557 89.1941 87.5219C89.2144 87.588 89.2213 87.6575 89.2144 87.7263L84.7991 145.581C84.794 145.65 84.7752 145.718 84.7437 145.779C84.7122 145.841 84.6686 145.895 84.6156 145.94C84.5627 145.984 84.5013 146.018 84.4352 146.038C84.3691 146.058 84.2995 146.065 84.2307 146.058Z" fill="#5C524D" />
+    <path d="M114.163 90.7217C117.828 95.279 123.298 98.527 129.196 98.6184C129.959 98.6607 130.724 98.5574 131.449 98.3139C132.442 97.8894 133.288 97.1838 133.885 96.2839C136.544 92.6299 136.656 87.7071 135.986 83.2411C135.509 80.1048 134.595 76.8162 132.22 74.7151C129.429 72.2487 125.379 72.0152 121.654 71.9137C117.929 71.8122 109.291 70.7262 107.911 75.314C106.622 79.5059 111.707 87.6665 114.163 90.7217Z" fill="#5C524D" />
+    <path d="M129.42 99.0646H129.187C123.553 98.9732 117.809 95.9587 113.82 91.0055C111.17 87.7169 106.146 79.536 107.476 75.1816C108.805 70.8273 115.9 71.1216 120.123 71.3855L121.676 71.4566C125.786 71.5784 129.704 71.8829 132.516 74.3696C135.327 76.8564 136.028 80.5307 136.424 83.1697C137.286 88.874 136.556 93.3197 134.252 96.5372C133.611 97.5159 132.692 98.2797 131.613 98.7296C130.908 98.9745 130.165 99.0881 129.42 99.0646ZM116.662 72.1671C113.089 72.1671 109.181 72.6847 108.339 75.4455C107.11 79.4142 112.064 87.4022 114.51 90.4472C118.336 95.1974 123.827 98.08 129.197 98.1714C129.908 98.2085 130.62 98.1157 131.298 97.8973C132.211 97.5007 132.988 96.8442 133.531 96.0094C135.683 93.0456 136.363 88.7623 135.561 83.3016C135.185 80.7946 134.404 77.2116 131.947 75.0395C129.491 72.8674 125.604 72.4614 121.666 72.3498C121.209 72.3498 120.65 72.3498 120.102 72.2787C119.067 72.228 117.88 72.1671 116.662 72.1671Z" fill="#454545" />
+    <path d="M137.874 43.808C138.249 42.5429 138.885 41.3706 139.742 40.3671C140.181 39.8733 140.761 39.5266 141.404 39.374C142.047 39.2215 142.721 39.2706 143.335 39.5145C143.762 39.7688 144.12 40.1237 144.379 40.5484C144.637 40.973 144.787 41.4544 144.817 41.9505C144.867 42.9487 144.701 43.9458 144.33 44.8737C143.765 46.6382 142.787 48.2423 141.477 49.5529C140.827 50.204 140.05 50.7154 139.195 51.0558C138.34 51.3961 137.424 51.5582 136.504 51.5321" fill="#EEEAE9" />
+    <path d="M136.89 51.9282H136.474C136.367 51.9179 136.268 51.8667 136.198 51.7854C136.128 51.7041 136.093 51.5989 136.098 51.4917C136.101 51.4379 136.114 51.3851 136.138 51.3366C136.161 51.2881 136.195 51.245 136.235 51.2098C136.276 51.1747 136.324 51.1482 136.375 51.1321C136.427 51.116 136.481 51.1106 136.535 51.1162C137.403 51.1458 138.268 50.9971 139.076 50.6794C139.884 50.3617 140.619 49.8816 141.234 49.2689C142.496 48.0042 143.436 46.4553 143.975 44.7521C144.329 43.8802 144.488 42.9414 144.442 42.0015C144.417 41.5693 144.287 41.1497 144.062 40.7798C143.837 40.4098 143.525 40.1009 143.152 39.8801C142.615 39.6774 142.028 39.6427 141.47 39.7804C140.911 39.9181 140.408 40.2218 140.026 40.6515C139.218 41.6241 138.614 42.7494 138.25 43.9604C138.232 44.0102 138.204 44.0559 138.168 44.0947C138.132 44.1336 138.089 44.1648 138.041 44.1866C137.992 44.2083 137.94 44.2202 137.887 44.2214C137.834 44.2227 137.782 44.2133 137.732 44.1939C137.632 44.1572 137.55 44.0822 137.504 43.9852C137.458 43.8883 137.453 43.7772 137.489 43.6762C137.886 42.3539 138.557 41.1298 139.458 40.0831C139.958 39.5304 140.615 39.1452 141.342 38.9799C142.069 38.8146 142.828 38.8773 143.518 39.1595C144.012 39.44 144.429 39.8394 144.73 40.3214C145.031 40.8034 145.208 41.353 145.243 41.9203C145.299 42.9602 145.126 43.9997 144.736 44.9653C144.16 46.8097 143.143 48.4856 141.772 49.8474C140.468 51.1359 138.723 51.8799 136.89 51.9282Z" fill="#454545" />
+    <path d="M130.902 61.4082L132.475 77.0595C132.475 77.0595 131.714 85.961 121.929 84.1645C119.055 83.6096 116.34 82.4241 113.979 80.6936C111.619 78.963 109.671 76.7304 108.277 74.1566L108.643 46.0715C108.582 44.9246 110.967 40.9965 109.84 31.0698C113.195 30.7268 116.441 29.6886 119.371 28.0214C122.302 26.3542 124.853 24.0946 126.862 21.3867C126.862 21.3867 131.399 26.9895 133.307 28.7252C134.839 30.0073 136.203 31.477 137.367 33.0998C140.412 37.6673 140.28 45.1174 139.549 50.3548C138.839 54.6584 136.342 61.5198 130.902 61.4082Z" fill="#EEEAE9" />
+    <path d="M124.375 84.8953C123.527 84.8897 122.681 84.8082 121.847 84.6517C118.893 84.0752 116.102 82.8527 113.676 81.0717C111.249 79.2906 109.246 76.9951 107.81 74.3495C107.795 74.2826 107.795 74.2133 107.81 74.1465C107.81 74.1465 108.175 46.2441 108.175 46.0716C108.218 45.5697 108.323 45.0751 108.49 44.5998C109.058 42.651 110.226 38.591 109.383 31.1206C109.377 31.0608 109.382 31.0004 109.4 30.9428C109.417 30.8852 109.446 30.8318 109.485 30.7857C109.519 30.736 109.565 30.6948 109.617 30.6649C109.67 30.6351 109.729 30.6174 109.789 30.6131C113.072 30.2679 116.248 29.2475 119.118 27.6161C121.988 25.9847 124.49 23.7774 126.466 21.133C126.507 21.0737 126.562 21.0246 126.625 20.9894C126.688 20.9542 126.759 20.9339 126.831 20.93C126.904 20.9272 126.977 20.9414 127.044 20.9713C127.111 21.0012 127.17 21.0461 127.217 21.1026C127.217 21.1026 131.754 26.6952 133.621 28.3801C135.158 29.6918 136.522 31.1924 137.681 32.8461C141.193 38.1647 140.422 46.8836 139.935 50.3853C139.346 54.5773 136.89 61.5503 131.439 61.865L132.952 77.0189C132.709 79.4527 131.521 81.6941 129.643 83.2612C128.121 84.3844 126.265 84.9603 124.375 84.8953ZM108.693 74.045C110.072 76.5357 111.98 78.6941 114.282 80.3687C116.585 82.0433 119.226 83.1935 122.02 83.7382C124.943 84.266 127.308 83.86 129.054 82.5304C130.698 81.131 131.753 79.1626 132.008 77.0189L130.444 61.459C130.439 61.393 130.447 61.3266 130.468 61.2637C130.489 61.2009 130.522 61.143 130.566 61.0936C130.611 61.0479 130.665 61.0118 130.724 60.9874C130.784 60.963 130.847 60.9508 130.911 60.9515H131.033C136.108 60.9515 138.433 54.2423 138.991 50.2534C139.478 46.8531 140.229 38.4185 136.89 33.3638C135.757 31.7708 134.431 30.3252 132.941 29.0602C130.797 26.8597 128.764 24.5527 126.851 22.148C122.766 27.2984 116.828 30.6462 110.307 31.4759C111.068 38.8346 109.901 42.8845 109.292 44.8536C109.159 45.2422 109.067 45.6436 109.018 46.0513C109.018 46.0513 109.058 46.0817 108.693 74.045Z" fill="#454545" />
+    <path d="M131.438 66.5538C128.868 67.0035 126.223 66.7221 123.805 65.7418C118.233 63.7828 117.908 59.9766 117.908 59.9766C117.908 59.9766 122.597 62.9201 130.9 61.3773L131.438 66.5538Z" fill="#5C524D" />
+    <path d="M129.176 67.2139C127.292 67.1821 125.427 66.8391 123.655 66.1989C117.879 64.1689 117.483 60.2206 117.463 60.1089C117.455 60.025 117.471 59.9405 117.508 59.8652C117.546 59.7899 117.605 59.7268 117.677 59.6833C117.749 59.6397 117.832 59.6175 117.916 59.6192C118.001 59.6209 118.083 59.6464 118.153 59.6928C118.153 59.6928 122.812 62.5246 130.82 61.0326C130.945 61.0116 131.073 61.0408 131.176 61.1138C131.226 61.15 131.268 61.1971 131.298 61.2516C131.327 61.306 131.345 61.3664 131.348 61.4284L131.876 66.5034C131.898 66.5877 131.895 66.6764 131.868 66.7591C131.841 66.8418 131.791 66.9151 131.724 66.9703C131.68 67.0105 131.629 67.0411 131.573 67.0603C131.517 67.0795 131.458 67.0869 131.399 67.082C130.664 67.1971 129.92 67.2413 129.176 67.2139ZM118.59 60.86C119.036 62.0273 120.315 64.0674 123.959 65.3463C126.186 66.196 128.589 66.4786 130.952 66.1685L130.516 61.9359C124.406 62.9611 120.315 61.6822 118.59 60.86Z" fill="#454545" />
+    <path d="M124.061 36.0742C124.061 36.0742 129.846 43.0879 128.78 44.519C127.715 45.9502 124.284 45.4122 124.284 45.4122" fill="#EEEAE9" />
+    <path d="M125.714 45.9592C125.211 45.9586 124.71 45.9247 124.212 45.8577C124.106 45.8253 124.017 45.7561 123.958 45.6627C123.9 45.5693 123.878 45.4581 123.895 45.3494C123.912 45.2408 123.968 45.142 124.052 45.0713C124.137 45.0006 124.244 44.9627 124.354 44.9645C125.237 45.1066 127.683 45.2385 128.414 44.2438C128.87 43.6348 126.668 39.9504 123.694 36.3573C123.657 36.312 123.628 36.2598 123.611 36.2036C123.594 36.1475 123.588 36.0885 123.594 36.03C123.6 35.9716 123.617 35.9148 123.644 35.863C123.672 35.8112 123.709 35.7653 123.755 35.728C123.849 35.6544 123.968 35.6197 124.087 35.631C124.206 35.6423 124.316 35.6988 124.394 35.7889C126.201 37.9813 130.281 43.239 129.134 44.7818C128.414 45.7562 126.881 45.9592 125.714 45.9592Z" fill="#454545" />
+    <path d="M131.302 37.6836C131.774 37.6204 132.06 36.8441 131.941 35.9495C131.821 35.055 131.341 34.381 130.869 34.4442C130.397 34.5074 130.111 35.2838 130.23 36.1783C130.35 37.0729 130.83 37.7468 131.302 37.6836Z" fill="#454545" />
+    <path d="M117.067 37.7043C117.543 37.6987 117.921 36.9626 117.911 36.0602C117.9 35.1577 117.505 34.4306 117.029 34.4362C116.552 34.4418 116.175 35.1779 116.185 36.0803C116.196 36.9828 116.59 37.7099 117.067 37.7043Z" fill="#454545" />
+    <path d="M111.798 41.8686C111.449 40.5288 110.853 39.2657 110.042 38.1436C109.575 37.5067 108.964 36.9903 108.258 36.6373C107.551 36.2842 106.771 36.1047 105.982 36.1136C105.494 36.1326 105.016 36.2622 104.586 36.4925C104.155 36.7228 103.782 37.0479 103.495 37.4432C103.153 38.0128 102.938 38.6501 102.866 39.3108C102.348 42.7923 103.515 47.3293 106.794 49.1259C107.347 49.4737 107.988 49.6582 108.641 49.6582C109.295 49.6582 109.935 49.4737 110.488 49.1259" fill="#" />
+    <path d="M108.865 50.0604C108.072 50.0422 107.296 49.8333 106.601 49.4514C103.171 47.5635 101.932 42.8844 102.47 39.2202C102.547 38.5008 102.783 37.8074 103.161 37.1902C103.481 36.7428 103.898 36.3741 104.382 36.1121C104.865 35.8501 105.402 35.7016 105.952 35.6779C106.81 35.6717 107.657 35.8702 108.423 36.2567C109.189 36.6433 109.852 37.2069 110.357 37.9007C111.203 39.0603 111.823 40.3687 112.184 41.7577C112.212 41.86 112.2 41.9693 112.148 42.0623C112.097 42.1552 112.012 42.2244 111.91 42.2551C111.86 42.2722 111.807 42.2789 111.754 42.2747C111.702 42.2706 111.651 42.2557 111.604 42.2309C111.557 42.2062 111.516 42.1721 111.483 42.1309C111.45 42.0897 111.426 42.0421 111.413 41.9912C111.077 40.6998 110.506 39.4817 109.728 38.3981C109.306 37.8037 108.747 37.3198 108.099 36.9876C107.45 36.6554 106.731 36.4847 106.003 36.4899C105.578 36.5057 105.162 36.617 104.786 36.8156C104.41 37.0141 104.083 37.2948 103.83 37.6368C103.52 38.1565 103.329 38.7391 103.272 39.342C102.765 42.722 103.881 47.0357 106.987 48.7409C107.466 49.0597 108.025 49.2365 108.599 49.2509C109.174 49.2653 109.741 49.1166 110.235 48.8221C110.321 48.7589 110.428 48.7311 110.534 48.7443C110.639 48.7575 110.736 48.8108 110.804 48.8932C110.869 48.9781 110.899 49.0855 110.885 49.192C110.872 49.2986 110.817 49.3955 110.732 49.4616C110.193 49.8617 109.536 50.0722 108.865 50.0604Z" fill="#454545" />
+    <path d="M166.029 161.964C165.906 161.964 165.786 161.92 165.691 161.84C165.597 161.76 165.533 161.65 165.512 161.528C162.03 139.797 155.362 98.3744 155.057 97.1158C155.023 96.9813 155.043 96.8387 155.114 96.719C155.184 96.5994 155.299 96.5122 155.433 96.4764C155.568 96.4454 155.711 96.4683 155.83 96.5402C155.95 96.6121 156.036 96.7275 156.072 96.8621C156.468 98.4759 166.131 158.777 166.547 161.355C166.567 161.492 166.533 161.632 166.451 161.744C166.37 161.856 166.247 161.932 166.11 161.954L166.029 161.964Z" fill="#454545" />
+    <path d="M103.112 184.842L102.977 184.655H102.747H55.0401C50.0527 184.655 45.9305 180.138 45.9305 174.453V116.416C45.9305 110.737 50.0532 106.208 55.0401 106.208H181.016C186.003 106.208 190.134 110.738 190.165 116.419V174.453C190.165 180.138 186.037 184.655 181.049 184.655H131.929H131.726L131.592 184.807L115.869 202.609L103.112 184.842Z" fill="#EEEAE9" stroke="#454545" strokeWidth="0.9" />
+    <path d="M126.486 55.034C118.985 55.034 116.59 45.1377 116.488 44.7114C116.464 44.5944 116.486 44.4726 116.551 44.372C116.615 44.2715 116.717 44.2002 116.833 44.1735C116.89 44.1599 116.95 44.1579 117.008 44.1674C117.066 44.1769 117.122 44.1979 117.172 44.229C117.222 44.2601 117.265 44.3009 117.299 44.3488C117.334 44.3968 117.358 44.451 117.371 44.5084C117.371 44.5998 119.695 54.1408 126.506 54.1408C127.212 54.168 127.916 54.0394 128.567 53.764C129.217 53.4885 129.8 53.0731 130.272 52.5472C132.616 49.8778 131.987 44.7013 131.977 44.6505C131.968 44.5918 131.972 44.532 131.986 44.4745C132.001 44.417 132.027 44.3631 132.063 44.3158C132.099 44.2686 132.144 44.229 132.196 44.1993C132.247 44.1696 132.304 44.1505 132.363 44.143C132.48 44.131 132.598 44.1642 132.692 44.2358C132.787 44.3074 132.85 44.4121 132.87 44.5287C132.87 44.7622 133.57 50.162 130.952 53.1359C130.395 53.7634 129.705 54.2592 128.932 54.5875C128.16 54.9157 127.324 55.0682 126.486 55.034Z" fill="#454545" />
+    <path d="M70.1771 103.176C73.7637 101.377 78.12 99.9134 81.6644 101.817C83.3455 102.866 84.7632 104.287 85.8078 105.971C88.0669 109.136 90.1082 112.451 91.9175 115.893C92.3914 116.848 92.7954 118.019 92.0581 118.706C91.16 119.551 89.7377 118.638 88.9482 117.701C87.5236 116.028 86.3296 114.173 85.3981 112.183C87.2805 114.936 88.7735 117.936 89.8348 121.097C90.0177 121.471 90.0817 121.891 90.0181 122.302C89.8722 122.667 89.588 122.96 89.2274 123.116C88.8667 123.273 88.4587 123.281 88.0922 123.139C87.3497 122.858 86.7046 122.367 86.2347 121.728C84.1638 119.239 82.3741 116.53 80.8983 113.649C82.3828 116.657 83.8796 119.745 84.2431 123.078C84.3088 123.353 84.3162 123.639 84.2649 123.917C84.2135 124.196 84.1045 124.46 83.9449 124.694C83.7065 124.904 83.4062 125.031 83.0894 125.055C82.7726 125.079 82.4565 124.999 82.1891 124.828C81.6793 124.464 81.2568 123.992 80.952 123.445L75.6783 115.778C77.0141 118.725 77.9793 121.827 78.5518 125.012C78.6234 125.274 78.623 125.551 78.5505 125.813C78.2358 126.713 76.8342 126.341 76.1662 125.662C75.1107 124.468 74.2905 123.084 73.7489 121.585C72.0643 117.734 70.4974 113.712 68.6538 109.896C67.1293 106.761 66.4761 105.033 70.1771 103.176Z" fill="#EEEAE9" />
+    <path d="M77.958 126.765L78.0684 126.749C78.2758 126.704 78.4681 126.606 78.6266 126.465C78.785 126.324 78.9042 126.144 78.9726 125.944C79.0614 125.607 79.0675 125.254 78.9905 124.914C78.6521 123.052 78.1839 121.216 77.5894 119.419L80.5096 123.697C80.8645 124.309 81.3549 124.832 81.9432 125.225C82.3005 125.453 82.7244 125.554 83.1464 125.512C83.5684 125.471 83.964 125.288 84.2695 124.994C84.4767 124.712 84.621 124.389 84.6929 124.047C84.7648 123.705 84.7626 123.352 84.6863 123.01C84.5274 121.793 84.252 120.594 83.864 119.429C84.4984 120.359 85.1577 121.183 85.8586 122.011C86.357 122.728 87.0556 123.282 87.867 123.604C88.1454 123.691 88.4383 123.721 88.7284 123.693C89.0186 123.665 89.3002 123.578 89.5565 123.44C89.7497 123.337 89.9205 123.198 90.0587 123.029C90.197 122.859 90.2999 122.664 90.3614 122.455C90.4574 121.958 90.4043 121.445 90.2087 120.979C89.9753 120.255 89.7117 119.535 89.4297 118.828C89.9032 119.214 90.4782 119.455 91.0854 119.521C91.3167 119.539 91.5492 119.507 91.7672 119.428C91.9853 119.348 92.184 119.224 92.3501 119.062C92.871 118.572 93.2855 117.585 92.2992 115.692C90.4856 112.233 88.4385 108.901 86.1719 105.721C85.0837 103.975 83.6092 102.503 81.8619 101.418C78.8572 99.8217 74.971 100.259 69.9541 102.778C65.9002 104.812 66.657 106.884 68.2137 110.097C69.4397 112.62 70.5521 115.275 71.623 117.791C72.1819 119.102 72.7308 120.415 73.2481 121.722C73.8155 123.272 74.6668 124.702 75.7585 125.94C76.0393 126.234 76.3829 126.461 76.7638 126.604C77.1447 126.747 77.5529 126.802 77.958 126.765ZM75.6082 115.306C75.5536 115.304 75.4993 115.313 75.4476 115.33C75.3469 115.387 75.271 115.48 75.2346 115.59C75.1982 115.7 75.2039 115.819 75.2507 115.925C76.5744 118.833 77.527 121.896 78.0858 125.042C78.1393 125.224 78.1475 125.416 78.1096 125.603C78.0928 125.657 78.061 125.706 78.0176 125.744C77.9743 125.781 77.9213 125.806 77.8647 125.814C77.6113 125.827 77.3581 125.786 77.1214 125.695C76.8847 125.604 76.6697 125.464 76.4903 125.284C75.481 124.129 74.6936 122.798 74.1677 121.357C73.6003 120.057 73.0514 118.744 72.5442 117.435C71.4641 114.858 70.3387 112.186 69.0996 109.643C67.6013 106.545 67.1227 105.222 70.4321 103.558C75.1432 101.188 78.7608 100.74 81.5158 102.179C83.1359 103.197 84.5009 104.573 85.5059 106.202C87.7534 109.348 89.7816 112.644 91.5763 116.068C91.8963 116.687 92.3545 117.808 91.808 118.333C91.7304 118.406 91.6381 118.462 91.5372 118.497C91.4363 118.532 91.3291 118.545 91.2228 118.535C90.4804 118.382 89.8188 117.964 89.3603 117.361C88.9613 116.898 88.5854 116.452 88.2259 115.911C87.5179 114.519 86.7231 113.172 85.8463 111.879C85.7786 111.784 85.6785 111.717 85.5648 111.691C85.451 111.665 85.3317 111.681 85.2292 111.737C85.1284 111.796 85.0535 111.891 85.0192 112.002C84.9848 112.114 84.9936 112.234 85.0438 112.34C85.7112 113.761 86.5088 115.118 87.4264 116.392C88.209 117.951 88.8768 119.565 89.4243 121.221C89.5572 121.517 89.6069 121.843 89.5678 122.165C89.5075 122.344 89.3789 122.493 89.2099 122.579C89.0614 122.67 88.8961 122.731 88.7237 122.757C88.5513 122.783 88.3754 122.774 88.2064 122.731C87.5704 122.454 87.0251 122.003 86.6327 121.431C84.5887 118.966 82.8207 116.284 81.3603 113.434C81.2978 113.338 81.2021 113.269 81.0916 113.239C80.981 113.209 80.8633 113.22 80.7607 113.271C80.6582 113.322 80.578 113.41 80.5355 113.516C80.493 113.622 80.491 113.741 80.53 113.848C81.9552 116.804 83.4258 119.855 83.8218 123.132C83.8773 123.341 83.89 123.56 83.8592 123.774C83.8284 123.989 83.7546 124.195 83.6423 124.381C83.4755 124.509 83.2729 124.582 83.0626 124.59C82.8523 124.598 82.6447 124.541 82.4685 124.426C82.0062 124.101 81.6199 123.68 81.3361 123.192L76.0639 115.534C76.0203 115.454 75.9533 115.389 75.8718 115.349C75.7904 115.308 75.6984 115.293 75.6082 115.306Z" fill="#454545" />
+    <path d="M207.372 99.7322C207.43 99.7275 207.486 99.7122 207.538 99.6872C215.214 94.2396 220.02 88.2106 221.846 81.7353C229.021 77.1588 232.984 70.6532 232.606 63.8795C231.975 51.8119 217.685 42.7708 200.833 43.6732C183.98 44.6076 170.809 55.1665 171.449 67.2315C172.089 79.2964 186.367 88.3304 203.184 87.4163C205.507 87.2898 207.816 86.9722 210.087 86.4668C209.922 90.8412 208.779 95.1232 206.742 98.998C206.69 99.085 206.665 99.1856 206.671 99.2869C206.677 99.3882 206.712 99.4854 206.774 99.5662C206.835 99.6469 206.919 99.7074 207.016 99.7398C207.112 99.7722 207.215 99.7751 207.313 99.7481L207.372 99.7322ZM200.922 44.7007C217.2 43.8164 230.955 52.4343 231.59 63.933C231.952 70.3746 228.141 76.5868 221.138 80.9804C221.033 81.051 220.954 81.1535 220.912 81.2727C219.332 87.1032 215.203 92.6024 208.622 97.6282C210.263 93.9118 211.129 89.9003 211.169 85.8383C211.169 85.7615 211.151 85.6857 211.117 85.6166C211.084 85.5475 211.035 85.4869 210.975 85.4395C210.914 85.392 210.844 85.3589 210.769 85.3426C210.694 85.3263 210.616 85.3272 210.541 85.3453C208.13 85.9195 205.672 86.2772 203.197 86.4139C186.902 87.3133 173.124 78.6909 172.49 67.1922C171.855 55.6935 184.6 45.6178 200.892 44.7086L200.922 44.7007Z" fill="#D3CECB" />
+    <path d="M75.9248 170.151C75.6912 170.236 75.5706 170.494 75.6553 170.728C75.7401 170.961 75.9982 171.082 76.2319 170.997L75.9248 170.151ZM105.694 146.36L105.325 146.103L105.694 146.36ZM108.515 125.736L108.549 126.184L108.515 125.736ZM96.4601 134.933L96.8292 135.19L96.4601 134.933ZM151.042 128.024L151.44 128.233L151.042 128.024ZM149.712 113.888L149.745 114.337L149.712 113.888ZM133.632 131.3L133.202 131.17L133.202 131.17L133.632 131.3ZM133.617 131.352L134.047 131.482L134.047 131.482L133.617 131.352ZM157.054 147.878C157.291 147.802 157.421 147.548 157.345 147.312C157.268 147.075 157.015 146.945 156.778 147.021L157.054 147.878ZM133.202 131.17L133.186 131.221L134.047 131.482L134.063 131.431L133.202 131.17ZM136.528 147.943C142.241 142.272 147.672 135.394 151.44 128.233L150.643 127.814C146.927 134.878 141.557 141.683 135.893 147.305L136.528 147.943ZM151.44 128.233C152.08 127.017 153.347 123.307 153.658 119.949C153.814 118.276 153.74 116.614 153.172 115.382C152.884 114.756 152.461 114.228 151.866 113.877C151.271 113.526 150.542 113.375 149.678 113.44L149.745 114.337C150.465 114.283 151.003 114.413 151.409 114.652C151.815 114.892 152.126 115.263 152.355 115.759C152.821 116.77 152.913 118.236 152.762 119.866C152.461 123.114 151.225 126.708 150.643 127.814L151.44 128.233ZM149.678 113.44C145.534 113.75 141.938 116.475 139.139 119.927C136.333 123.388 134.271 127.646 133.202 131.17L134.063 131.431C135.102 128.005 137.114 123.854 139.838 120.494C142.568 117.126 145.959 114.62 149.745 114.337L149.678 113.44ZM133.186 131.221C132.448 133.654 131.751 137 131.92 140.149C132.09 143.295 133.133 146.344 135.983 148.012L136.438 147.236C133.964 145.788 132.981 143.108 132.819 140.101C132.657 137.097 133.325 133.865 134.047 131.482L133.186 131.221ZM96.091 134.675C93.9783 137.703 91.552 142.707 90.6804 147.575C89.8122 152.425 90.4654 157.33 94.7866 159.86L95.2412 159.083C91.4248 156.849 90.7184 152.47 91.5663 147.734C92.411 143.016 94.7766 138.132 96.8292 135.19L96.091 134.675ZM108.481 125.287C105.71 125.494 103.304 126.859 101.256 128.647C99.2081 130.434 97.4895 132.671 96.091 134.675L96.8292 135.19C98.2148 133.204 99.8836 131.039 101.848 129.325C103.811 127.611 106.04 126.372 108.549 126.184L108.481 125.287ZM106.063 146.617C107.294 144.848 110.281 139.483 111.829 134.629C112.599 132.216 113.042 129.845 112.667 128.091C112.477 127.198 112.067 126.431 111.349 125.919C110.635 125.41 109.678 125.197 108.481 125.287L108.549 126.184C109.611 126.105 110.337 126.302 110.827 126.652C111.313 126.999 111.63 127.541 111.787 128.279C112.109 129.786 111.735 131.961 110.972 134.355C109.454 139.114 106.511 144.399 105.325 146.103L106.063 146.617ZM95.3309 159.791C99.3824 155.769 102.824 151.27 106.063 146.617L105.325 146.103C102.099 150.737 98.6929 155.185 94.6969 159.152L95.3309 159.791ZM76.2319 170.997C83.5488 168.342 89.6767 165.404 95.3309 159.791L94.6969 159.152C89.1766 164.632 83.1888 167.515 75.9248 170.151L76.2319 170.997ZM94.7866 159.86C101.288 163.666 109.486 162.902 117.124 160.117C124.773 157.327 131.961 152.476 136.528 147.943L135.893 147.305C131.416 151.749 124.338 156.528 116.816 159.271C109.282 162.019 101.403 162.69 95.2412 159.083L94.7866 159.86ZM135.983 148.012C139.071 149.82 142.811 150.274 146.52 150.039C150.233 149.803 153.958 148.876 157.054 147.878L156.778 147.021C153.72 148.007 150.074 148.912 146.463 149.14C142.848 149.369 139.312 148.918 136.438 147.236L135.983 148.012Z" fill="#D7D3D1" />
+    <path d="M34.1208 1.67272L34.1208 1.67271C39.9029 0.930545 45.3366 1.92561 49.4422 4.11327C53.5488 6.30152 56.2929 9.65956 56.8045 13.6458C57.3161 17.632 55.5083 21.5751 52.0884 24.7305C48.6694 27.8851 43.6661 30.2212 37.8913 30.9639L37.8912 30.9639C36.1449 31.1889 34.3819 31.2561 32.6236 31.1648L32.0474 31.1349L32.1587 31.7011C32.6982 34.4435 33.7686 37.0476 35.3035 39.3693C29.2428 36.2215 26.3184 32.6297 24.9143 29.7128L24.8379 29.5541L24.6742 29.4894C19.3949 27.4043 15.8095 23.6168 15.215 18.9913L15.2149 18.991C14.6999 15.0042 16.5008 11.0607 19.9169 7.90532C23.3321 4.7507 28.3352 2.4146 34.1208 1.67272Z" stroke="#D3CECB" strokeWidth="0.9" />
+    <path d="M61.0231 135.858L48.305 133.863L49.2502 146.414L57.0239 149.239L65.7092 152.397L63.3431 144.054L61.0231 135.858Z" fill="#EEEAE9" />
+    <path d="M66.0579 152.457C66.0648 152.408 66.0613 152.357 66.0477 152.309L61.3616 135.77C61.3421 135.706 61.305 135.649 61.2544 135.604C61.2038 135.56 61.1417 135.529 61.075 135.517L48.3569 133.522C48.3039 133.516 48.2503 133.521 48.1995 133.537C48.1487 133.552 48.1018 133.578 48.0616 133.612C48.0239 133.647 47.9944 133.69 47.9751 133.737C47.9558 133.784 47.9471 133.835 47.9496 133.887L48.9053 146.418C48.9097 146.484 48.9336 146.547 48.9742 146.6C49.0148 146.653 49.0702 146.693 49.1337 146.716L65.5927 152.7C65.6534 152.724 65.7197 152.73 65.7838 152.719C65.848 152.708 65.9075 152.679 65.9554 152.636C66.0052 152.587 66.0406 152.525 66.0579 152.457ZM60.7765 136.167L65.2501 151.856L49.6494 146.181L48.7496 134.284L60.7765 136.167Z" fill="#454545" />
+    <path d="M55.3166 137.493L51.3945 141.013L15.4608 102.75L19.3828 99.2312L55.3166 137.493Z" fill="#EEEAE9" />
+    <path d="M55.6719 137.552L55.6801 137.504C55.6838 137.459 55.6774 137.413 55.6612 137.37C55.645 137.327 55.6195 137.289 55.5863 137.256L19.6493 98.9922C19.6177 98.9586 19.5797 98.9313 19.5375 98.912C19.4953 98.8927 19.4496 98.8817 19.4032 98.8797C19.3104 98.8779 19.2205 98.9099 19.1509 98.9694L15.2269 102.5C15.1925 102.529 15.1645 102.565 15.1448 102.606C15.1251 102.646 15.1141 102.69 15.1124 102.735C15.1107 102.78 15.1183 102.825 15.1349 102.867C15.1515 102.909 15.1766 102.948 15.2087 102.98L51.1388 141.243C51.2014 141.311 51.2888 141.353 51.382 141.358C51.4752 141.364 51.5665 141.333 51.6361 141.273L55.56 137.743C55.6186 137.693 55.6581 137.626 55.6719 137.552ZM19.3681 99.7079L54.811 137.466L51.4142 140.519L15.9632 102.767L19.3681 99.7079Z" fill="#5C524D" />
+    <path d="M15.465 102.744L13.3205 108.151L49.2506 146.414L51.4021 141.008L15.465 102.744Z" fill="#5C524D" />
+    <path d="M51.7505 141.068C51.7591 141.015 51.7552 140.961 51.7392 140.91C51.7231 140.858 51.6954 140.811 51.658 140.772L15.728 102.509C15.6862 102.466 15.6344 102.434 15.5772 102.416C15.52 102.398 15.4592 102.395 15.4004 102.405C15.3415 102.416 15.2864 102.441 15.2401 102.478C15.1938 102.515 15.1578 102.563 15.1352 102.617L12.9907 108.024C12.966 108.084 12.9591 108.15 12.9709 108.214C12.9827 108.278 13.0127 108.337 13.0575 108.386L48.9945 146.65C49.0356 146.693 49.0869 146.724 49.1438 146.742C49.2006 146.761 49.261 146.764 49.3195 146.753C49.3779 146.742 49.4325 146.717 49.4781 146.68C49.5237 146.643 49.5589 146.595 49.5803 146.541L51.7318 141.135L51.7505 141.068ZM15.5906 103.389L50.994 141.085L49.1238 145.775L13.7226 108.108L15.5906 103.389Z" fill="#5C524D" />
+    <path d="M25.0873 97.5939L19.3945 99.228L55.3245 137.491L61.0174 135.857L25.0873 97.5939Z" fill="#5C524D" />
+    <path d="M61.367 135.946C61.3741 135.893 61.3695 135.839 61.3535 135.788C61.3376 135.737 61.3107 135.69 61.2745 135.65L25.3492 97.3593C25.3025 97.3132 25.2443 97.2799 25.1805 97.2627C25.1166 97.2455 25.0494 97.2452 24.9856 97.2616L19.2858 98.8944C19.2279 98.9097 19.1755 98.9401 19.1341 98.9824C19.0927 99.0246 19.0639 99.0771 19.0507 99.1344C19.0349 99.1901 19.034 99.2491 19.0482 99.3055C19.0623 99.362 19.091 99.414 19.1315 99.4567L55.0616 137.72C55.1107 137.764 55.1717 137.793 55.2371 137.805C55.3026 137.816 55.3699 137.809 55.431 137.783L61.1296 136.157C61.1865 136.14 61.2379 136.109 61.279 136.067C61.3201 136.025 61.3496 135.974 61.3647 135.918L61.367 135.946ZM25.01 97.9949L60.4135 135.691L55.4693 137.103L20.0345 99.381L25.01 97.9949Z" fill="#454545" />
+    <path d="M63.3443 144.054L60.8645 144.117L57.3153 147.305L57.0251 149.239L65.7104 152.397L63.3443 144.054Z" fill="#B5AFAB" />
+    <path d="M66.0577 152.457C66.0646 152.408 66.0611 152.357 66.0475 152.308L63.6825 143.958C63.6602 143.885 63.6136 143.82 63.5499 143.775C63.4863 143.73 63.4092 143.706 63.3308 143.708L60.8499 143.779C60.7667 143.779 60.687 143.811 60.6267 143.866L57.0786 147.048C57.0218 147.104 56.9823 147.175 56.9644 147.252L56.6801 149.194C56.6674 149.271 56.6828 149.35 56.7237 149.418C56.7646 149.485 56.8284 149.536 56.9037 149.562L65.589 152.72C65.6497 152.744 65.716 152.751 65.7801 152.74C65.8443 152.728 65.9038 152.7 65.9517 152.657C66.0061 152.602 66.043 152.533 66.0577 152.457ZM63.0822 144.402L65.1872 151.845L57.4136 149.019L57.6438 147.475L61.0336 144.462L63.0822 144.402Z" fill="#454545" />
+    <path d="M73.8776 59.2742L68.5595 58.375L64.808 62.2459L64.0142 56.9138L59.1738 54.5463L64.0001 52.1437L64.7589 46.8115L68.5384 50.6543L73.8425 49.727L71.3485 54.5112L73.8776 59.2742Z" fill="#D3CECB" />
+    <path d="M31.6856 197.783L25.1642 196.68L24.9049 196.636L24.7218 196.825L20.1199 201.574L19.146 195.033L19.1073 194.773L18.8712 194.657L12.9346 191.753L18.8544 188.806L19.0896 188.689L19.1266 188.429L20.0574 181.888L24.6946 186.603L24.8786 186.79L25.1372 186.745L31.6422 185.607L28.5826 191.477L28.461 191.71L28.5844 191.942L31.6856 197.783Z" stroke="#D3CECB" />
+    <path d="M245.799 173.629L238.276 172.357L232.97 177.832L231.847 170.29L225 166.941L231.827 163.542L232.9 156L238.246 161.436L245.749 160.124L242.221 166.891L245.799 173.629Z" fill="#BAB5B1" />
+    <path d="M220.924 155.81L219.388 153.342L219.249 153.119L218.986 153.107L216.081 152.974L217.952 150.748L218.121 150.547L218.051 150.293L217.279 147.493L219.973 148.584L220.217 148.683L220.436 148.538L222.862 146.939L222.66 149.84L222.642 150.102L222.847 150.266L225.116 152.077L222.291 152.779L222.036 152.842L221.943 153.089L220.924 155.81Z" stroke="#D3CECB" />
+    <path d="M46.3063 94.4625L41.8463 90.7153L41.665 90.5631L41.4369 90.6262L35.8235 92.1786L38.0027 86.777L38.0912 86.5576L37.9606 86.3603L34.7482 81.5065L40.5584 81.9101L40.7943 81.9264L40.9416 81.7415L44.5671 77.1896L45.9847 82.8389L46.0422 83.068L46.2635 83.1509L51.7106 85.1897L46.7684 88.2814L46.5677 88.407L46.5575 88.6435L46.3063 94.4625Z" stroke="#D3CECB" strokeWidth="0.9" />
+  </svg>
+);
+
+export default Empty;

src/assets/empty.svg

@@ -1,44 +0,0 @@
-<svg width="246" height="204" viewBox="0 0 246 204" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.966 80.706C1.93 101.534-5.315 125.86 4.558 148.18c17.989 40.665 116.015 29.236 158.702 13.267 120.227-44.976 62.415-162.99-67.596-133.809-36.401 8.17-65.661 32.239-79.698 53.068Z" fill="#D7D3D1" fill-opacity="0.3"></path>
-<path d="M95.6307 23.4976C101.102 13.3476 109.932 6.31365 123.036 10.536C124.191 11.0005 125.403 11.311 126.639 11.4597C127.895 11.386 129.146 11.2369 130.384 11.0131C136.292 10.5259 140.656 16.2505 143.529 21.427C148.867 31.0796 158.622 44.1833 156.724 55.7847C155.252 64.7776 146.797 71.0097 138.261 74.1562C128.636 77.7063 118.244 78.655 108.136 76.9069C103.061 76.034 97.813 74.3288 94.159 70.6443C89.084 65.5084 88.069 57.6016 88.4547 50.3443C88.9926 42.2345 91.1749 31.8104 95.6307 23.4976Z" fill="#EEEAE9"/>
-<path d="M117.991 78.2569C114.66 78.2567 111.336 77.9715 108.054 77.4043C101.649 76.3081 97.0006 74.2172 93.8439 71.0098C89.4084 66.554 87.4393 59.652 87.9772 50.3952C88.5558 40.7933 91.2557 30.6534 95.2142 23.2845C99.8528 14.657 108.46 5.35964 123.137 10.0895L123.837 10.3331C124.73 10.6795 125.665 10.9015 126.618 10.9929C127.348 10.9968 128.077 10.9219 128.79 10.7696C129.278 10.6884 129.805 10.597 130.303 10.5564C135.165 10.1403 139.752 13.7334 143.894 21.2038C144.848 22.9293 145.924 24.7563 147.091 26.6949C152.278 35.3732 158.733 46.1728 157.139 55.866C155.871 63.712 148.877 70.7155 138.392 74.5928C131.864 77.0187 124.955 78.2596 117.991 78.2569ZM96.0972 23.721C92.1996 30.9782 89.5302 40.976 88.9922 50.4459C88.4543 59.3982 90.332 66.0972 94.5544 70.3602C97.5994 73.4053 102.076 75.4352 108.277 76.4502C118.3 78.1754 128.602 77.223 138.139 73.6894C148.289 69.9238 155.079 63.1842 156.307 55.6732C157.84 46.325 151.486 35.6777 146.38 27.1212C145.223 25.1826 144.127 23.3556 143.163 21.6199C139.214 14.5149 134.941 11.0741 130.465 11.4699C129.988 11.4699 129.521 11.5917 129.034 11.6729C128.218 11.8545 127.384 11.9464 126.547 11.947C125.503 11.8549 124.477 11.6122 123.502 11.2263L122.812 10.9929C108.744 6.45585 100.482 15.4284 95.9957 23.7413L96.0972 23.721Z" fill="#454545"/>
-<path d="M182.845 167.75C182.845 167.75 178.596 94.152 167.857 84.3978C152.409 70.4314 97.5788 67.5184 86.4443 70.3909C66.7533 75.4659 53.0508 106.22 53.0508 106.22L85.7135 115.985C85.7845 141.248 88.3119 167.75 88.3119 167.75H182.845Z" fill="#B5AFAB"/>
-<path d="M84.2307 146.058C84.1627 146.053 84.0963 146.035 84.0354 146.004C83.9746 145.973 83.9204 145.93 83.8761 145.878C83.8317 145.827 83.7981 145.766 83.7771 145.702C83.7561 145.637 83.7481 145.568 83.7537 145.5L88.1689 87.6451C88.1741 87.5757 88.1928 87.5081 88.2242 87.446C88.2556 87.3839 88.299 87.3286 88.3518 87.2833C88.4046 87.238 88.4659 87.2037 88.532 87.1821C88.5982 87.1606 88.668 87.1524 88.7373 87.1579C88.8063 87.163 88.8736 87.1819 88.9352 87.2134C88.9967 87.2449 89.0514 87.2884 89.0959 87.3414C89.1403 87.3944 89.1737 87.4557 89.1941 87.5219C89.2144 87.588 89.2213 87.6575 89.2144 87.7263L84.7991 145.581C84.794 145.65 84.7752 145.718 84.7437 145.779C84.7122 145.841 84.6686 145.895 84.6156 145.94C84.5627 145.984 84.5013 146.018 84.4352 146.038C84.3691 146.058 84.2995 146.065 84.2307 146.058Z" fill="#5C524D"/>
-<path d="M114.163 90.7217C117.828 95.279 123.298 98.527 129.196 98.6184C129.959 98.6607 130.724 98.5574 131.449 98.3139C132.442 97.8894 133.288 97.1838 133.885 96.2839C136.544 92.6299 136.656 87.7071 135.986 83.2411C135.509 80.1048 134.595 76.8162 132.22 74.7151C129.429 72.2487 125.379 72.0152 121.654 71.9137C117.929 71.8122 109.291 70.7262 107.911 75.314C106.622 79.5059 111.707 87.6665 114.163 90.7217Z" fill="#5C524D"/>
-<path d="M129.42 99.0646H129.187C123.553 98.9732 117.809 95.9587 113.82 91.0055C111.17 87.7169 106.146 79.536 107.476 75.1816C108.805 70.8273 115.9 71.1216 120.123 71.3855L121.676 71.4566C125.786 71.5784 129.704 71.8829 132.516 74.3696C135.327 76.8564 136.028 80.5307 136.424 83.1697C137.286 88.874 136.556 93.3197 134.252 96.5372C133.611 97.5159 132.692 98.2797 131.613 98.7296C130.908 98.9745 130.165 99.0881 129.42 99.0646ZM116.662 72.1671C113.089 72.1671 109.181 72.6847 108.339 75.4455C107.11 79.4142 112.064 87.4022 114.51 90.4472C118.336 95.1974 123.827 98.08 129.197 98.1714C129.908 98.2085 130.62 98.1157 131.298 97.8973C132.211 97.5007 132.988 96.8442 133.531 96.0094C135.683 93.0456 136.363 88.7623 135.561 83.3016C135.185 80.7946 134.404 77.2116 131.947 75.0395C129.491 72.8674 125.604 72.4614 121.666 72.3498C121.209 72.3498 120.65 72.3498 120.102 72.2787C119.067 72.228 117.88 72.1671 116.662 72.1671Z" fill="#454545"/>
-<path d="M137.874 43.808C138.249 42.5429 138.885 41.3706 139.742 40.3671C140.181 39.8733 140.761 39.5266 141.404 39.374C142.047 39.2215 142.721 39.2706 143.335 39.5145C143.762 39.7688 144.12 40.1237 144.379 40.5484C144.637 40.973 144.787 41.4544 144.817 41.9505C144.867 42.9487 144.701 43.9458 144.33 44.8737C143.765 46.6382 142.787 48.2423 141.477 49.5529C140.827 50.204 140.05 50.7154 139.195 51.0558C138.34 51.3961 137.424 51.5582 136.504 51.5321" fill="#EEEAE9"/>
-<path d="M136.89 51.9282H136.474C136.367 51.9179 136.268 51.8667 136.198 51.7854C136.128 51.7041 136.093 51.5989 136.098 51.4917C136.101 51.4379 136.114 51.3851 136.138 51.3366C136.161 51.2881 136.195 51.245 136.235 51.2098C136.276 51.1747 136.324 51.1482 136.375 51.1321C136.427 51.116 136.481 51.1106 136.535 51.1162C137.403 51.1458 138.268 50.9971 139.076 50.6794C139.884 50.3617 140.619 49.8816 141.234 49.2689C142.496 48.0042 143.436 46.4553 143.975 44.7521C144.329 43.8802 144.488 42.9414 144.442 42.0015C144.417 41.5693 144.287 41.1497 144.062 40.7798C143.837 40.4098 143.525 40.1009 143.152 39.8801C142.615 39.6774 142.028 39.6427 141.47 39.7804C140.911 39.9181 140.408 40.2218 140.026 40.6515C139.218 41.6241 138.614 42.7494 138.25 43.9604C138.232 44.0102 138.204 44.0559 138.168 44.0947C138.132 44.1336 138.089 44.1648 138.041 44.1866C137.992 44.2083 137.94 44.2202 137.887 44.2214C137.834 44.2227 137.782 44.2133 137.732 44.1939C137.632 44.1572 137.55 44.0822 137.504 43.9852C137.458 43.8883 137.453 43.7772 137.489 43.6762C137.886 42.3539 138.557 41.1298 139.458 40.0831C139.958 39.5304 140.615 39.1452 141.342 38.9799C142.069 38.8146 142.828 38.8773 143.518 39.1595C144.012 39.44 144.429 39.8394 144.73 40.3214C145.031 40.8034 145.208 41.353 145.243 41.9203C145.299 42.9602 145.126 43.9997 144.736 44.9653C144.16 46.8097 143.143 48.4856 141.772 49.8474C140.468 51.1359 138.723 51.8799 136.89 51.9282Z" fill="#454545"/>
-<path d="M130.902 61.4082L132.475 77.0595C132.475 77.0595 131.714 85.961 121.929 84.1645C119.055 83.6096 116.34 82.4241 113.979 80.6936C111.619 78.963 109.671 76.7304 108.277 74.1566L108.643 46.0715C108.582 44.9246 110.967 40.9965 109.84 31.0698C113.195 30.7268 116.441 29.6886 119.371 28.0214C122.302 26.3542 124.853 24.0946 126.862 21.3867C126.862 21.3867 131.399 26.9895 133.307 28.7252C134.839 30.0073 136.203 31.477 137.367 33.0998C140.412 37.6673 140.28 45.1174 139.549 50.3548C138.839 54.6584 136.342 61.5198 130.902 61.4082Z" fill="#EEEAE9"/>
-<path d="M124.375 84.8953C123.527 84.8897 122.681 84.8082 121.847 84.6517C118.893 84.0752 116.102 82.8527 113.676 81.0717C111.249 79.2906 109.246 76.9951 107.81 74.3495C107.795 74.2826 107.795 74.2133 107.81 74.1465C107.81 74.1465 108.175 46.2441 108.175 46.0716C108.218 45.5697 108.323 45.0751 108.49 44.5998C109.058 42.651 110.226 38.591 109.383 31.1206C109.377 31.0608 109.382 31.0004 109.4 30.9428C109.417 30.8852 109.446 30.8318 109.485 30.7857C109.519 30.736 109.565 30.6948 109.617 30.6649C109.67 30.6351 109.729 30.6174 109.789 30.6131C113.072 30.2679 116.248 29.2475 119.118 27.6161C121.988 25.9847 124.49 23.7774 126.466 21.133C126.507 21.0737 126.562 21.0246 126.625 20.9894C126.688 20.9542 126.759 20.9339 126.831 20.93C126.904 20.9272 126.977 20.9414 127.044 20.9713C127.111 21.0012 127.17 21.0461 127.217 21.1026C127.217 21.1026 131.754 26.6952 133.621 28.3801C135.158 29.6918 136.522 31.1924 137.681 32.8461C141.193 38.1647 140.422 46.8836 139.935 50.3853C139.346 54.5773 136.89 61.5503 131.439 61.865L132.952 77.0189C132.709 79.4527 131.521 81.6941 129.643 83.2612C128.121 84.3844 126.265 84.9603 124.375 84.8953ZM108.693 74.045C110.072 76.5357 111.98 78.6941 114.282 80.3687C116.585 82.0433 119.226 83.1935 122.02 83.7382C124.943 84.266 127.308 83.86 129.054 82.5304C130.698 81.131 131.753 79.1626 132.008 77.0189L130.444 61.459C130.439 61.393 130.447 61.3266 130.468 61.2637C130.489 61.2009 130.522 61.143 130.566 61.0936C130.611 61.0479 130.665 61.0118 130.724 60.9874C130.784 60.963 130.847 60.9508 130.911 60.9515H131.033C136.108 60.9515 138.433 54.2423 138.991 50.2534C139.478 46.8531 140.229 38.4185 136.89 33.3638C135.757 31.7708 134.431 30.3252 132.941 29.0602C130.797 26.8597 128.764 24.5527 126.851 22.148C122.766 27.2984 116.828 30.6462 110.307 31.4759C111.068 38.8346 109.901 42.8845 109.292 44.8536C109.159 45.2422 109.067 45.6436 109.018 46.0513C109.018 46.0513 109.058 46.0817 108.693 74.045Z" fill="#454545"/>
-<path d="M131.438 66.5538C128.868 67.0035 126.223 66.7221 123.805 65.7418C118.233 63.7828 117.908 59.9766 117.908 59.9766C117.908 59.9766 122.597 62.9201 130.9 61.3773L131.438 66.5538Z" fill="#5C524D"/>
-<path d="M129.176 67.2139C127.292 67.1821 125.427 66.8391 123.655 66.1989C117.879 64.1689 117.483 60.2206 117.463 60.1089C117.455 60.025 117.471 59.9405 117.508 59.8652C117.546 59.7899 117.605 59.7268 117.677 59.6833C117.749 59.6397 117.832 59.6175 117.916 59.6192C118.001 59.6209 118.083 59.6464 118.153 59.6928C118.153 59.6928 122.812 62.5246 130.82 61.0326C130.945 61.0116 131.073 61.0408 131.176 61.1138C131.226 61.15 131.268 61.1971 131.298 61.2516C131.327 61.306 131.345 61.3664 131.348 61.4284L131.876 66.5034C131.898 66.5877 131.895 66.6764 131.868 66.7591C131.841 66.8418 131.791 66.9151 131.724 66.9703C131.68 67.0105 131.629 67.0411 131.573 67.0603C131.517 67.0795 131.458 67.0869 131.399 67.082C130.664 67.1971 129.92 67.2413 129.176 67.2139ZM118.59 60.86C119.036 62.0273 120.315 64.0674 123.959 65.3463C126.186 66.196 128.589 66.4786 130.952 66.1685L130.516 61.9359C124.406 62.9611 120.315 61.6822 118.59 60.86Z" fill="#454545"/>
-<path d="M124.061 36.0742C124.061 36.0742 129.846 43.0879 128.78 44.519C127.715 45.9502 124.284 45.4122 124.284 45.4122" fill="#EEEAE9"/>
-<path d="M125.714 45.9592C125.211 45.9586 124.71 45.9247 124.212 45.8577C124.106 45.8253 124.017 45.7561 123.958 45.6627C123.9 45.5693 123.878 45.4581 123.895 45.3494C123.912 45.2408 123.968 45.142 124.052 45.0713C124.137 45.0006 124.244 44.9627 124.354 44.9645C125.237 45.1066 127.683 45.2385 128.414 44.2438C128.87 43.6348 126.668 39.9504 123.694 36.3573C123.657 36.312 123.628 36.2598 123.611 36.2036C123.594 36.1475 123.588 36.0885 123.594 36.03C123.6 35.9716 123.617 35.9148 123.644 35.863C123.672 35.8112 123.709 35.7653 123.755 35.728C123.849 35.6544 123.968 35.6197 124.087 35.631C124.206 35.6423 124.316 35.6988 124.394 35.7889C126.201 37.9813 130.281 43.239 129.134 44.7818C128.414 45.7562 126.881 45.9592 125.714 45.9592Z" fill="#454545"/>
-<path d="M131.302 37.6836C131.774 37.6204 132.06 36.8441 131.941 35.9495C131.821 35.055 131.341 34.381 130.869 34.4442C130.397 34.5074 130.111 35.2838 130.23 36.1783C130.35 37.0729 130.83 37.7468 131.302 37.6836Z" fill="#454545"/>
-<path d="M117.067 37.7043C117.543 37.6987 117.921 36.9626 117.911 36.0602C117.9 35.1577 117.505 34.4306 117.029 34.4362C116.552 34.4418 116.175 35.1779 116.185 36.0803C116.196 36.9828 116.59 37.7099 117.067 37.7043Z" fill="#454545"/>
-<path d="M111.798 41.8686C111.449 40.5288 110.853 39.2657 110.042 38.1436C109.575 37.5067 108.964 36.9903 108.258 36.6373C107.551 36.2842 106.771 36.1047 105.982 36.1136C105.494 36.1326 105.016 36.2622 104.586 36.4925C104.155 36.7228 103.782 37.0479 103.495 37.4432C103.153 38.0128 102.938 38.6501 102.866 39.3108C102.348 42.7923 103.515 47.3293 106.794 49.1259C107.347 49.4737 107.988 49.6582 108.641 49.6582C109.295 49.6582 109.935 49.4737 110.488 49.1259" fill="#"/>
-<path d="M108.865 50.0604C108.072 50.0422 107.296 49.8333 106.601 49.4514C103.171 47.5635 101.932 42.8844 102.47 39.2202C102.547 38.5008 102.783 37.8074 103.161 37.1902C103.481 36.7428 103.898 36.3741 104.382 36.1121C104.865 35.8501 105.402 35.7016 105.952 35.6779C106.81 35.6717 107.657 35.8702 108.423 36.2567C109.189 36.6433 109.852 37.2069 110.357 37.9007C111.203 39.0603 111.823 40.3687 112.184 41.7577C112.212 41.86 112.2 41.9693 112.148 42.0623C112.097 42.1552 112.012 42.2244 111.91 42.2551C111.86 42.2722 111.807 42.2789 111.754 42.2747C111.702 42.2706 111.651 42.2557 111.604 42.2309C111.557 42.2062 111.516 42.1721 111.483 42.1309C111.45 42.0897 111.426 42.0421 111.413 41.9912C111.077 40.6998 110.506 39.4817 109.728 38.3981C109.306 37.8037 108.747 37.3198 108.099 36.9876C107.45 36.6554 106.731 36.4847 106.003 36.4899C105.578 36.5057 105.162 36.617 104.786 36.8156C104.41 37.0141 104.083 37.2948 103.83 37.6368C103.52 38.1565 103.329 38.7391 103.272 39.342C102.765 42.722 103.881 47.0357 106.987 48.7409C107.466 49.0597 108.025 49.2365 108.599 49.2509C109.174 49.2653 109.741 49.1166 110.235 48.8221C110.321 48.7589 110.428 48.7311 110.534 48.7443C110.639 48.7575 110.736 48.8108 110.804 48.8932C110.869 48.9781 110.899 49.0855 110.885 49.192C110.872 49.2986 110.817 49.3955 110.732 49.4616C110.193 49.8617 109.536 50.0722 108.865 50.0604Z" fill="#454545"/>
-<path d="M166.029 161.964C165.906 161.964 165.786 161.92 165.691 161.84C165.597 161.76 165.533 161.65 165.512 161.528C162.03 139.797 155.362 98.3744 155.057 97.1158C155.023 96.9813 155.043 96.8387 155.114 96.719C155.184 96.5994 155.299 96.5122 155.433 96.4764C155.568 96.4454 155.711 96.4683 155.83 96.5402C155.95 96.6121 156.036 96.7275 156.072 96.8621C156.468 98.4759 166.131 158.777 166.547 161.355C166.567 161.492 166.533 161.632 166.451 161.744C166.37 161.856 166.247 161.932 166.11 161.954L166.029 161.964Z" fill="#454545"/>
-<path d="M103.112 184.842L102.977 184.655H102.747H55.0401C50.0527 184.655 45.9305 180.138 45.9305 174.453V116.416C45.9305 110.737 50.0532 106.208 55.0401 106.208H181.016C186.003 106.208 190.134 110.738 190.165 116.419V174.453C190.165 180.138 186.037 184.655 181.049 184.655H131.929H131.726L131.592 184.807L115.869 202.609L103.112 184.842Z" fill="#EEEAE9" stroke="#454545" stroke-width="0.9"/>
-<path d="M126.486 55.034C118.985 55.034 116.59 45.1377 116.488 44.7114C116.464 44.5944 116.486 44.4726 116.551 44.372C116.615 44.2715 116.717 44.2002 116.833 44.1735C116.89 44.1599 116.95 44.1579 117.008 44.1674C117.066 44.1769 117.122 44.1979 117.172 44.229C117.222 44.2601 117.265 44.3009 117.299 44.3488C117.334 44.3968 117.358 44.451 117.371 44.5084C117.371 44.5998 119.695 54.1408 126.506 54.1408C127.212 54.168 127.916 54.0394 128.567 53.764C129.217 53.4885 129.8 53.0731 130.272 52.5472C132.616 49.8778 131.987 44.7013 131.977 44.6505C131.968 44.5918 131.972 44.532 131.986 44.4745C132.001 44.417 132.027 44.3631 132.063 44.3158C132.099 44.2686 132.144 44.229 132.196 44.1993C132.247 44.1696 132.304 44.1505 132.363 44.143C132.48 44.131 132.598 44.1642 132.692 44.2358C132.787 44.3074 132.85 44.4121 132.87 44.5287C132.87 44.7622 133.57 50.162 130.952 53.1359C130.395 53.7634 129.705 54.2592 128.932 54.5875C128.16 54.9157 127.324 55.0682 126.486 55.034Z" fill="#454545"/>
-<path d="M70.1771 103.176C73.7637 101.377 78.12 99.9134 81.6644 101.817C83.3455 102.866 84.7632 104.287 85.8078 105.971C88.0669 109.136 90.1082 112.451 91.9175 115.893C92.3914 116.848 92.7954 118.019 92.0581 118.706C91.16 119.551 89.7377 118.638 88.9482 117.701C87.5236 116.028 86.3296 114.173 85.3981 112.183C87.2805 114.936 88.7735 117.936 89.8348 121.097C90.0177 121.471 90.0817 121.891 90.0181 122.302C89.8722 122.667 89.588 122.96 89.2274 123.116C88.8667 123.273 88.4587 123.281 88.0922 123.139C87.3497 122.858 86.7046 122.367 86.2347 121.728C84.1638 119.239 82.3741 116.53 80.8983 113.649C82.3828 116.657 83.8796 119.745 84.2431 123.078C84.3088 123.353 84.3162 123.639 84.2649 123.917C84.2135 124.196 84.1045 124.46 83.9449 124.694C83.7065 124.904 83.4062 125.031 83.0894 125.055C82.7726 125.079 82.4565 124.999 82.1891 124.828C81.6793 124.464 81.2568 123.992 80.952 123.445L75.6783 115.778C77.0141 118.725 77.9793 121.827 78.5518 125.012C78.6234 125.274 78.623 125.551 78.5505 125.813C78.2358 126.713 76.8342 126.341 76.1662 125.662C75.1107 124.468 74.2905 123.084 73.7489 121.585C72.0643 117.734 70.4974 113.712 68.6538 109.896C67.1293 106.761 66.4761 105.033 70.1771 103.176Z" fill="#EEEAE9"/>
-<path d="M77.958 126.765L78.0684 126.749C78.2758 126.704 78.4681 126.606 78.6266 126.465C78.785 126.324 78.9042 126.144 78.9726 125.944C79.0614 125.607 79.0675 125.254 78.9905 124.914C78.6521 123.052 78.1839 121.216 77.5894 119.419L80.5096 123.697C80.8645 124.309 81.3549 124.832 81.9432 125.225C82.3005 125.453 82.7244 125.554 83.1464 125.512C83.5684 125.471 83.964 125.288 84.2695 124.994C84.4767 124.712 84.621 124.389 84.6929 124.047C84.7648 123.705 84.7626 123.352 84.6863 123.01C84.5274 121.793 84.252 120.594 83.864 119.429C84.4984 120.359 85.1577 121.183 85.8586 122.011C86.357 122.728 87.0556 123.282 87.867 123.604C88.1454 123.691 88.4383 123.721 88.7284 123.693C89.0186 123.665 89.3002 123.578 89.5565 123.44C89.7497 123.337 89.9205 123.198 90.0587 123.029C90.197 122.859 90.2999 122.664 90.3614 122.455C90.4574 121.958 90.4043 121.445 90.2087 120.979C89.9753 120.255 89.7117 119.535 89.4297 118.828C89.9032 119.214 90.4782 119.455 91.0854 119.521C91.3167 119.539 91.5492 119.507 91.7672 119.428C91.9853 119.348 92.184 119.224 92.3501 119.062C92.871 118.572 93.2855 117.585 92.2992 115.692C90.4856 112.233 88.4385 108.901 86.1719 105.721C85.0837 103.975 83.6092 102.503 81.8619 101.418C78.8572 99.8217 74.971 100.259 69.9541 102.778C65.9002 104.812 66.657 106.884 68.2137 110.097C69.4397 112.62 70.5521 115.275 71.623 117.791C72.1819 119.102 72.7308 120.415 73.2481 121.722C73.8155 123.272 74.6668 124.702 75.7585 125.94C76.0393 126.234 76.3829 126.461 76.7638 126.604C77.1447 126.747 77.5529 126.802 77.958 126.765ZM75.6082 115.306C75.5536 115.304 75.4993 115.313 75.4476 115.33C75.3469 115.387 75.271 115.48 75.2346 115.59C75.1982 115.7 75.2039 115.819 75.2507 115.925C76.5744 118.833 77.527 121.896 78.0858 125.042C78.1393 125.224 78.1475 125.416 78.1096 125.603C78.0928 125.657 78.061 125.706 78.0176 125.744C77.9743 125.781 77.9213 125.806 77.8647 125.814C77.6113 125.827 77.3581 125.786 77.1214 125.695C76.8847 125.604 76.6697 125.464 76.4903 125.284C75.481 124.129 74.6936 122.798 74.1677 121.357C73.6003 120.057 73.0514 118.744 72.5442 117.435C71.4641 114.858 70.3387 112.186 69.0996 109.643C67.6013 106.545 67.1227 105.222 70.4321 103.558C75.1432 101.188 78.7608 100.74 81.5158 102.179C83.1359 103.197 84.5009 104.573 85.5059 106.202C87.7534 109.348 89.7816 112.644 91.5763 116.068C91.8963 116.687 92.3545 117.808 91.808 118.333C91.7304 118.406 91.6381 118.462 91.5372 118.497C91.4363 118.532 91.3291 118.545 91.2228 118.535C90.4804 118.382 89.8188 117.964 89.3603 117.361C88.9613 116.898 88.5854 116.452 88.2259 115.911C87.5179 114.519 86.7231 113.172 85.8463 111.879C85.7786 111.784 85.6785 111.717 85.5648 111.691C85.451 111.665 85.3317 111.681 85.2292 111.737C85.1284 111.796 85.0535 111.891 85.0192 112.002C84.9848 112.114 84.9936 112.234 85.0438 112.34C85.7112 113.761 86.5088 115.118 87.4264 116.392C88.209 117.951 88.8768 119.565 89.4243 121.221C89.5572 121.517 89.6069 121.843 89.5678 122.165C89.5075 122.344 89.3789 122.493 89.2099 122.579C89.0614 122.67 88.8961 122.731 88.7237 122.757C88.5513 122.783 88.3754 122.774 88.2064 122.731C87.5704 122.454 87.0251 122.003 86.6327 121.431C84.5887 118.966 82.8207 116.284 81.3603 113.434C81.2978 113.338 81.2021 113.269 81.0916 113.239C80.981 113.209 80.8633 113.22 80.7607 113.271C80.6582 113.322 80.578 113.41 80.5355 113.516C80.493 113.622 80.491 113.741 80.53 113.848C81.9552 116.804 83.4258 119.855 83.8218 123.132C83.8773 123.341 83.89 123.56 83.8592 123.774C83.8284 123.989 83.7546 124.195 83.6423 124.381C83.4755 124.509 83.2729 124.582 83.0626 124.59C82.8523 124.598 82.6447 124.541 82.4685 124.426C82.0062 124.101 81.6199 123.68 81.3361 123.192L76.0639 115.534C76.0203 115.454 75.9533 115.389 75.8718 115.349C75.7904 115.308 75.6984 115.293 75.6082 115.306Z" fill="#454545"/>
-<path d="M207.372 99.7322C207.43 99.7275 207.486 99.7122 207.538 99.6872C215.214 94.2396 220.02 88.2106 221.846 81.7353C229.021 77.1588 232.984 70.6532 232.606 63.8795C231.975 51.8119 217.685 42.7708 200.833 43.6732C183.98 44.6076 170.809 55.1665 171.449 67.2315C172.089 79.2964 186.367 88.3304 203.184 87.4163C205.507 87.2898 207.816 86.9722 210.087 86.4668C209.922 90.8412 208.779 95.1232 206.742 98.998C206.69 99.085 206.665 99.1856 206.671 99.2869C206.677 99.3882 206.712 99.4854 206.774 99.5662C206.835 99.6469 206.919 99.7074 207.016 99.7398C207.112 99.7722 207.215 99.7751 207.313 99.7481L207.372 99.7322ZM200.922 44.7007C217.2 43.8164 230.955 52.4343 231.59 63.933C231.952 70.3746 228.141 76.5868 221.138 80.9804C221.033 81.051 220.954 81.1535 220.912 81.2727C219.332 87.1032 215.203 92.6024 208.622 97.6282C210.263 93.9118 211.129 89.9003 211.169 85.8383C211.169 85.7615 211.151 85.6857 211.117 85.6166C211.084 85.5475 211.035 85.4869 210.975 85.4395C210.914 85.392 210.844 85.3589 210.769 85.3426C210.694 85.3263 210.616 85.3272 210.541 85.3453C208.13 85.9195 205.672 86.2772 203.197 86.4139C186.902 87.3133 173.124 78.6909 172.49 67.1922C171.855 55.6935 184.6 45.6178 200.892 44.7086L200.922 44.7007Z" fill="#D3CECB"/>
-<path d="M75.9248 170.151C75.6912 170.236 75.5706 170.494 75.6553 170.728C75.7401 170.961 75.9982 171.082 76.2319 170.997L75.9248 170.151ZM105.694 146.36L105.325 146.103L105.694 146.36ZM108.515 125.736L108.549 126.184L108.515 125.736ZM96.4601 134.933L96.8292 135.19L96.4601 134.933ZM151.042 128.024L151.44 128.233L151.042 128.024ZM149.712 113.888L149.745 114.337L149.712 113.888ZM133.632 131.3L133.202 131.17L133.202 131.17L133.632 131.3ZM133.617 131.352L134.047 131.482L134.047 131.482L133.617 131.352ZM157.054 147.878C157.291 147.802 157.421 147.548 157.345 147.312C157.268 147.075 157.015 146.945 156.778 147.021L157.054 147.878ZM133.202 131.17L133.186 131.221L134.047 131.482L134.063 131.431L133.202 131.17ZM136.528 147.943C142.241 142.272 147.672 135.394 151.44 128.233L150.643 127.814C146.927 134.878 141.557 141.683 135.893 147.305L136.528 147.943ZM151.44 128.233C152.08 127.017 153.347 123.307 153.658 119.949C153.814 118.276 153.74 116.614 153.172 115.382C152.884 114.756 152.461 114.228 151.866 113.877C151.271 113.526 150.542 113.375 149.678 113.44L149.745 114.337C150.465 114.283 151.003 114.413 151.409 114.652C151.815 114.892 152.126 115.263 152.355 115.759C152.821 116.77 152.913 118.236 152.762 119.866C152.461 123.114 151.225 126.708 150.643 127.814L151.44 128.233ZM149.678 113.44C145.534 113.75 141.938 116.475 139.139 119.927C136.333 123.388 134.271 127.646 133.202 131.17L134.063 131.431C135.102 128.005 137.114 123.854 139.838 120.494C142.568 117.126 145.959 114.62 149.745 114.337L149.678 113.44ZM133.186 131.221C132.448 133.654 131.751 137 131.92 140.149C132.09 143.295 133.133 146.344 135.983 148.012L136.438 147.236C133.964 145.788 132.981 143.108 132.819 140.101C132.657 137.097 133.325 133.865 134.047 131.482L133.186 131.221ZM96.091 134.675C93.9783 137.703 91.552 142.707 90.6804 147.575C89.8122 152.425 90.4654 157.33 94.7866 159.86L95.2412 159.083C91.4248 156.849 90.7184 152.47 91.5663 147.734C92.411 143.016 94.7766 138.132 96.8292 135.19L96.091 134.675ZM108.481 125.287C105.71 125.494 103.304 126.859 101.256 128.647C99.2081 130.434 97.4895 132.671 96.091 134.675L96.8292 135.19C98.2148 133.204 99.8836 131.039 101.848 129.325C103.811 127.611 106.04 126.372 108.549 126.184L108.481 125.287ZM106.063 146.617C107.294 144.848 110.281 139.483 111.829 134.629C112.599 132.216 113.042 129.845 112.667 128.091C112.477 127.198 112.067 126.431 111.349 125.919C110.635 125.41 109.678 125.197 108.481 125.287L108.549 126.184C109.611 126.105 110.337 126.302 110.827 126.652C111.313 126.999 111.63 127.541 111.787 128.279C112.109 129.786 111.735 131.961 110.972 134.355C109.454 139.114 106.511 144.399 105.325 146.103L106.063 146.617ZM95.3309 159.791C99.3824 155.769 102.824 151.27 106.063 146.617L105.325 146.103C102.099 150.737 98.6929 155.185 94.6969 159.152L95.3309 159.791ZM76.2319 170.997C83.5488 168.342 89.6767 165.404 95.3309 159.791L94.6969 159.152C89.1766 164.632 83.1888 167.515 75.9248 170.151L76.2319 170.997ZM94.7866 159.86C101.288 163.666 109.486 162.902 117.124 160.117C124.773 157.327 131.961 152.476 136.528 147.943L135.893 147.305C131.416 151.749 124.338 156.528 116.816 159.271C109.282 162.019 101.403 162.69 95.2412 159.083L94.7866 159.86ZM135.983 148.012C139.071 149.82 142.811 150.274 146.52 150.039C150.233 149.803 153.958 148.876 157.054 147.878L156.778 147.021C153.72 148.007 150.074 148.912 146.463 149.14C142.848 149.369 139.312 148.918 136.438 147.236L135.983 148.012Z" fill="#D7D3D1"/>
-<path d="M34.1208 1.67272L34.1208 1.67271C39.9029 0.930545 45.3366 1.92561 49.4422 4.11327C53.5488 6.30152 56.2929 9.65956 56.8045 13.6458C57.3161 17.632 55.5083 21.5751 52.0884 24.7305C48.6694 27.8851 43.6661 30.2212 37.8913 30.9639L37.8912 30.9639C36.1449 31.1889 34.3819 31.2561 32.6236 31.1648L32.0474 31.1349L32.1587 31.7011C32.6982 34.4435 33.7686 37.0476 35.3035 39.3693C29.2428 36.2215 26.3184 32.6297 24.9143 29.7128L24.8379 29.5541L24.6742 29.4894C19.3949 27.4043 15.8095 23.6168 15.215 18.9913L15.2149 18.991C14.6999 15.0042 16.5008 11.0607 19.9169 7.90532C23.3321 4.7507 28.3352 2.4146 34.1208 1.67272Z" stroke="#D3CECB" stroke-width="0.9"/>
-<path d="M61.0231 135.858L48.305 133.863L49.2502 146.414L57.0239 149.239L65.7092 152.397L63.3431 144.054L61.0231 135.858Z" fill="#EEEAE9"/>
-<path d="M66.0579 152.457C66.0648 152.408 66.0613 152.357 66.0477 152.309L61.3616 135.77C61.3421 135.706 61.305 135.649 61.2544 135.604C61.2038 135.56 61.1417 135.529 61.075 135.517L48.3569 133.522C48.3039 133.516 48.2503 133.521 48.1995 133.537C48.1487 133.552 48.1018 133.578 48.0616 133.612C48.0239 133.647 47.9944 133.69 47.9751 133.737C47.9558 133.784 47.9471 133.835 47.9496 133.887L48.9053 146.418C48.9097 146.484 48.9336 146.547 48.9742 146.6C49.0148 146.653 49.0702 146.693 49.1337 146.716L65.5927 152.7C65.6534 152.724 65.7197 152.73 65.7838 152.719C65.848 152.708 65.9075 152.679 65.9554 152.636C66.0052 152.587 66.0406 152.525 66.0579 152.457ZM60.7765 136.167L65.2501 151.856L49.6494 146.181L48.7496 134.284L60.7765 136.167Z" fill="#454545"/>
-<path d="M55.3166 137.493L51.3945 141.013L15.4608 102.75L19.3828 99.2312L55.3166 137.493Z" fill="#EEEAE9"/>
-<path d="M55.6719 137.552L55.6801 137.504C55.6838 137.459 55.6774 137.413 55.6612 137.37C55.645 137.327 55.6195 137.289 55.5863 137.256L19.6493 98.9922C19.6177 98.9586 19.5797 98.9313 19.5375 98.912C19.4953 98.8927 19.4496 98.8817 19.4032 98.8797C19.3104 98.8779 19.2205 98.9099 19.1509 98.9694L15.2269 102.5C15.1925 102.529 15.1645 102.565 15.1448 102.606C15.1251 102.646 15.1141 102.69 15.1124 102.735C15.1107 102.78 15.1183 102.825 15.1349 102.867C15.1515 102.909 15.1766 102.948 15.2087 102.98L51.1388 141.243C51.2014 141.311 51.2888 141.353 51.382 141.358C51.4752 141.364 51.5665 141.333 51.6361 141.273L55.56 137.743C55.6186 137.693 55.6581 137.626 55.6719 137.552ZM19.3681 99.7079L54.811 137.466L51.4142 140.519L15.9632 102.767L19.3681 99.7079Z" fill="#5C524D"/>
-<path d="M15.465 102.744L13.3205 108.151L49.2506 146.414L51.4021 141.008L15.465 102.744Z" fill="#5C524D"/>
-<path d="M51.7505 141.068C51.7591 141.015 51.7552 140.961 51.7392 140.91C51.7231 140.858 51.6954 140.811 51.658 140.772L15.728 102.509C15.6862 102.466 15.6344 102.434 15.5772 102.416C15.52 102.398 15.4592 102.395 15.4004 102.405C15.3415 102.416 15.2864 102.441 15.2401 102.478C15.1938 102.515 15.1578 102.563 15.1352 102.617L12.9907 108.024C12.966 108.084 12.9591 108.15 12.9709 108.214C12.9827 108.278 13.0127 108.337 13.0575 108.386L48.9945 146.65C49.0356 146.693 49.0869 146.724 49.1438 146.742C49.2006 146.761 49.261 146.764 49.3195 146.753C49.3779 146.742 49.4325 146.717 49.4781 146.68C49.5237 146.643 49.5589 146.595 49.5803 146.541L51.7318 141.135L51.7505 141.068ZM15.5906 103.389L50.994 141.085L49.1238 145.775L13.7226 108.108L15.5906 103.389Z" fill="#5C524D"/>
-<path d="M25.0873 97.5939L19.3945 99.228L55.3245 137.491L61.0174 135.857L25.0873 97.5939Z" fill="#5C524D"/>
-<path d="M61.367 135.946C61.3741 135.893 61.3695 135.839 61.3535 135.788C61.3376 135.737 61.3107 135.69 61.2745 135.65L25.3492 97.3593C25.3025 97.3132 25.2443 97.2799 25.1805 97.2627C25.1166 97.2455 25.0494 97.2452 24.9856 97.2616L19.2858 98.8944C19.2279 98.9097 19.1755 98.9401 19.1341 98.9824C19.0927 99.0246 19.0639 99.0771 19.0507 99.1344C19.0349 99.1901 19.034 99.2491 19.0482 99.3055C19.0623 99.362 19.091 99.414 19.1315 99.4567L55.0616 137.72C55.1107 137.764 55.1717 137.793 55.2371 137.805C55.3026 137.816 55.3699 137.809 55.431 137.783L61.1296 136.157C61.1865 136.14 61.2379 136.109 61.279 136.067C61.3201 136.025 61.3496 135.974 61.3647 135.918L61.367 135.946ZM25.01 97.9949L60.4135 135.691L55.4693 137.103L20.0345 99.381L25.01 97.9949Z" fill="#454545"/>
-<path d="M63.3443 144.054L60.8645 144.117L57.3153 147.305L57.0251 149.239L65.7104 152.397L63.3443 144.054Z" fill="#B5AFAB"/>
-<path d="M66.0577 152.457C66.0646 152.408 66.0611 152.357 66.0475 152.308L63.6825 143.958C63.6602 143.885 63.6136 143.82 63.5499 143.775C63.4863 143.73 63.4092 143.706 63.3308 143.708L60.8499 143.779C60.7667 143.779 60.687 143.811 60.6267 143.866L57.0786 147.048C57.0218 147.104 56.9823 147.175 56.9644 147.252L56.6801 149.194C56.6674 149.271 56.6828 149.35 56.7237 149.418C56.7646 149.485 56.8284 149.536 56.9037 149.562L65.589 152.72C65.6497 152.744 65.716 152.751 65.7801 152.74C65.8443 152.728 65.9038 152.7 65.9517 152.657C66.0061 152.602 66.043 152.533 66.0577 152.457ZM63.0822 144.402L65.1872 151.845L57.4136 149.019L57.6438 147.475L61.0336 144.462L63.0822 144.402Z" fill="#454545"/>
-<path d="M73.8776 59.2742L68.5595 58.375L64.808 62.2459L64.0142 56.9138L59.1738 54.5463L64.0001 52.1437L64.7589 46.8115L68.5384 50.6543L73.8425 49.727L71.3485 54.5112L73.8776 59.2742Z" fill="#D3CECB"/>
-<path d="M31.6856 197.783L25.1642 196.68L24.9049 196.636L24.7218 196.825L20.1199 201.574L19.146 195.033L19.1073 194.773L18.8712 194.657L12.9346 191.753L18.8544 188.806L19.0896 188.689L19.1266 188.429L20.0574 181.888L24.6946 186.603L24.8786 186.79L25.1372 186.745L31.6422 185.607L28.5826 191.477L28.461 191.71L28.5844 191.942L31.6856 197.783Z" stroke="#D3CECB"/>
-<path d="M245.799 173.629L238.276 172.357L232.97 177.832L231.847 170.29L225 166.941L231.827 163.542L232.9 156L238.246 161.436L245.749 160.124L242.221 166.891L245.799 173.629Z" fill="#BAB5B1"/>
-<path d="M220.924 155.81L219.388 153.342L219.249 153.119L218.986 153.107L216.081 152.974L217.952 150.748L218.121 150.547L218.051 150.293L217.279 147.493L219.973 148.584L220.217 148.683L220.436 148.538L222.862 146.939L222.66 149.84L222.642 150.102L222.847 150.266L225.116 152.077L222.291 152.779L222.036 152.842L221.943 153.089L220.924 155.81Z" stroke="#D3CECB"/>
-<path d="M46.3063 94.4625L41.8463 90.7153L41.665 90.5631L41.4369 90.6262L35.8235 92.1786L38.0027 86.777L38.0912 86.5576L37.9606 86.3603L34.7482 81.5065L40.5584 81.9101L40.7943 81.9264L40.9416 81.7415L44.5671 77.1896L45.9847 82.8389L46.0422 83.068L46.2635 83.1509L51.7106 85.1897L46.7684 88.2814L46.5677 88.407L46.5575 88.6435L46.3063 94.4625Z" stroke="#D3CECB" stroke-width="0.9"/>
-</svg>

src/components/FilterBar.jsx

@@ -19,19 +19,21 @@ import { selectCourseCohorts } from '../discussions/cohorts/data/selectors';
 import messages from '../discussions/posts/post-filter-bar/messages';
 import { ActionItem } from '../discussions/posts/post-filter-bar/PostFilterBar';
 
-function FilterBar({
+const FilterBar = ({
   intl,
   filters,
   selectedFilters,
   onFilterChange,
   showCohortsFilter,
-}) {
+}) => {
   const [isOpen, setOpen] = useState(false);
   const cohorts = useSelector(selectCourseCohorts);
   const { status } = useSelector(state => state.cohorts);
-  const selectedCohort = useMemo(() => cohorts.find(cohort => (
-    toString(cohort.id) === selectedFilters.cohort)),
-  [selectedFilters.cohort]);
+  const selectedCohort = useMemo(
+    () => cohorts.find(cohort => (
+      toString(cohort.id) === selectedFilters.cohort)),
+    [selectedFilters.cohort],
+  );
 
   const allFilters = [
     {
@@ -183,7 +185,7 @@ function FilterBar({
       </Collapsible.Body>
     </Collapsible.Advanced>
   );
-}
+};
 
 FilterBar.propTypes = {
   intl: intlShape.isRequired,

src/components/FormikErrorFeedback.jsx

@@ -5,31 +5,26 @@ import { getIn, useFormikContext } from 'formik';
 
 import { Form, TransitionReplace } from '@edx/paragon';
 
-function FormikErrorFeedback({ name }) {
-  const {
-    touched,
-    errors,
-  } = useFormikContext();
+const FormikErrorFeedback = ({ name }) => {
+  const { touched, errors } = useFormikContext();
   const fieldTouched = getIn(touched, name);
   const fieldError = getIn(errors, name);
 
   return (
     <TransitionReplace>
-      {fieldTouched && fieldError
-        ? (
-          <Form.Control.Feedback type="invalid" hasIcon={false} key={`${name}-error-feedback`}>
-            {fieldError}
-          </Form.Control.Feedback>
-        )
-        : (
-          <React.Fragment key={`${name}-no-error-feedback`} />
-        )}
+      {fieldTouched && fieldError ? (
+        <Form.Control.Feedback type="invalid" hasIcon={false} key={`${name}-error-feedback`}>
+          {fieldError}
+        </Form.Control.Feedback>
+      ) : (
+        <React.Fragment key={`${name}-no-error-feedback`} />
+      )}
     </TransitionReplace>
   );
-}
+};
 
 FormikErrorFeedback.propTypes = {
   name: PropTypes.string.isRequired,
 };
 
-export default FormikErrorFeedback;
+export default React.memo(FormikErrorFeedback);

src/components/HTMLLoader.jsx

@@ -12,9 +12,9 @@ const defaultSanitizeOptions = {
   ADD_ATTR: ['columnalign'],
 };
 
-function HTMLLoader({
+const HTMLLoader = ({
   htmlNode, componentId, cssClassName, testId, delay,
-}) {
+}) => {
   const sanitizedMath = DOMPurify.sanitize(htmlNode, { ...defaultSanitizeOptions });
   const previewRef = useRef(null);
   const debouncedPostContent = useDebounce(htmlNode, delay);
@@ -45,7 +45,7 @@ function HTMLLoader({
   return (
     <div ref={previewRef} className={cssClassName} id={componentId} data-testid={testId} />
   );
-}
+};
 
 HTMLLoader.propTypes = {
   htmlNode: PropTypes.node,
@@ -63,4 +63,4 @@ HTMLLoader.defaultProps = {
   delay: 0,
 };
 
-export default HTMLLoader;
+export default React.memo(HTMLLoader);

src/components/NavigationBar/CourseTabsNavigation.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { fetchTab } from './data/thunks';
 import Tabs from './tabs/Tabs';
@@ -12,47 +12,44 @@ import messages from './messages';
 
 import './navBar.scss';
 
-function CourseTabsNavigation({
-  activeTab, className, intl, courseId, rootSlug,
-}) {
+const CourseTabsNavigation = ({
+  activeTab, className, courseId, rootSlug,
+}) => {
   const dispatch = useDispatch();
-
+  const intl = useIntl();
   const tabs = useSelector(state => state.courseTabs.tabs);
+
   useEffect(() => {
     dispatch(fetchTab(courseId, rootSlug));
   }, [courseId]);
 
   return (
-    <div id="courseTabsNavigation" className={classNames('course-tabs-navigation', className)}>
-      <div className="container-xl">
-        {!!tabs.length
-          && (
-          <Tabs
-            className="nav-underline-tabs"
-            aria-label={intl.formatMessage(messages.courseMaterial)}
-          >
-            {tabs.map(({ url, title, slug }) => (
-              <a
-                key={slug}
-                className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === activeTab })}
-                href={url}
-              >
-                {title}
-              </a>
-            ))}
-          </Tabs>
-          )}
-      </div>
+    <div id="courseTabsNavigation" className={classNames('course-tabs-navigation px-4', className)}>
+      {!!tabs.length && (
+        <Tabs
+          className="nav-underline-tabs"
+          aria-label={intl.formatMessage(messages.courseMaterial)}
+        >
+          {tabs.map(({ url, title, slug }) => (
+            <a
+              key={slug}
+              className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === activeTab })}
+              href={url}
+            >
+              {title}
+            </a>
+          ))}
+        </Tabs>
+      )}
     </div>
   );
-}
+};
 
 CourseTabsNavigation.propTypes = {
   activeTab: PropTypes.string,
   className: PropTypes.string,
   rootSlug: PropTypes.string,
   courseId: PropTypes.string.isRequired,
-  intl: intlShape.isRequired,
 };
 
 CourseTabsNavigation.defaultProps = {
@@ -61,4 +58,4 @@ CourseTabsNavigation.defaultProps = {
   rootSlug: 'outline',
 };
 
-export default injectIntl(CourseTabsNavigation);
+export default React.memo(CourseTabsNavigation);

src/components/NavigationBar/data/api.test.js

@@ -56,8 +56,10 @@ describe('Navigation bar api tests', () => {
   });
 
   it('Denied to get navigation bar when user has no access on course', async () => {
-    axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(200,
-      (Factory.build('navigationBar', 1, { hasCourseAccess: false })));
+    axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(
+      200,
+      (Factory.build('navigationBar', 1, { hasCourseAccess: false })),
+    );
     await executeThunk(fetchTab(courseId, 'outline'), store.dispatch, store.getState);
 
     expect(store.getState().courseTabs.courseStatus).toEqual('denied');

src/components/NavigationBar/navBar.scss

@@ -1,10 +1,11 @@
-@import "@edx/brand/paragon/fonts.scss";
-@import "@edx/brand/paragon/variables.scss";
-@import "@edx/paragon/scss/core/core.scss";
-@import "@edx/brand/paragon/overrides.scss";
+@import "~@edx/brand/paragon/fonts.scss";
+@import "~@edx/brand/paragon/variables.scss";
+@import "~@edx/paragon/scss/core/core.scss";
+@import "~@edx/brand/paragon/overrides.scss";
 
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
+
 .course-tabs-navigation {
   border-bottom: solid 1px #eaeaea;
 

src/components/NavigationBar/tabs/Tabs.jsx

@@ -8,7 +8,7 @@ import { Dropdown } from '@edx/paragon';
 
 import useIndexOfLastVisibleChild from './useIndexOfLastVisibleChild';
 
-export default function Tabs({ children, className, ...attrs }) {
+const Tabs = ({ children, className, ...attrs }) => {
   const [
     indexOfLastVisibleChild,
     containerElementRef,
@@ -31,25 +31,28 @@ export default function Tabs({ children, className, ...attrs }) {
 
     // Insert the overflow menu at the cut off index (even if it will be hidden
     // it so it can be part of measurements)
-    wrappedChildren.splice(indexOfOverflowStart, 0, (
-      <div
-        className="nav-item flex-shrink-0"
-        style={indexOfOverflowStart >= React.Children.count(children) ? invisibleStyle : null}
-        ref={overflowElementRef}
-        key="overflow"
-      >
-        <Dropdown className="h-100">
-          <Dropdown.Toggle variant="link" className="nav-link h-100" id="learn.course.tabs.navigation.overflow.menu">
-            <FormattedMessage
-              id="learn.course.tabs.navigation.overflow.menu"
-              description="The title of the overflow menu for course tabs"
-              defaultMessage="More..."
-            />
-          </Dropdown.Toggle>
-          <Dropdown.Menu className="dropdown-menu-right">{overflowChildren}</Dropdown.Menu>
-        </Dropdown>
-      </div>
-    ));
+    wrappedChildren.splice(
+      indexOfOverflowStart,
+      0, (
+        <div
+          className="nav-item flex-shrink-0"
+          style={indexOfOverflowStart >= React.Children.count(children) ? invisibleStyle : null}
+          ref={overflowElementRef}
+          key="overflow"
+        >
+          <Dropdown className="h-100">
+            <Dropdown.Toggle variant="link" className="nav-link h-100" id="learn.course.tabs.navigation.overflow.menu">
+              <FormattedMessage
+                id="learn.course.tabs.navigation.overflow.menu"
+                description="The title of the overflow menu for course tabs"
+                defaultMessage="More..."
+              />
+            </Dropdown.Toggle>
+            <Dropdown.Menu className="dropdown-menu-right">{overflowChildren}</Dropdown.Menu>
+          </Dropdown>
+        </div>
+      ),
+    );
     return wrappedChildren;
   }, [children, indexOfLastVisibleChild]);
 
@@ -62,7 +65,7 @@ export default function Tabs({ children, className, ...attrs }) {
       {tabChildren}
     </nav>
   );
-}
+};
 
 Tabs.propTypes = {
   children: PropTypes.node,
@@ -73,3 +76,5 @@ Tabs.defaultProps = {
   children: null,
   className: undefined,
 };
+
+export default Tabs;

src/components/PostPreviewPanel.jsx

@@ -1,16 +1,17 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, Icon, IconButton } from '@edx/paragon';
 import { Close } from '@edx/paragon/icons';
 
 import messages from '../discussions/posts/post-editor/messages';
 import HTMLLoader from './HTMLLoader';
 
-function PostPreviewPanel({
-  htmlNode, intl, isPost, editExisting,
-}) {
+const PostPreviewPanel = ({
+  htmlNode, isPost, editExisting,
+}) => {
+  const intl = useIntl();
   const [showPreviewPane, setShowPreviewPane] = useState(false);
 
   return (
@@ -30,13 +31,15 @@ function PostPreviewPanel({
             iconClassNames="icon-size"
             data-testid="hide-preview-button"
           />
-          <HTMLLoader
-            htmlNode={htmlNode}
-            cssClassName="text-primary"
-            componentId="post-preview"
-            testId="post-preview"
-            delay={500}
-          />
+          {htmlNode && (
+            <HTMLLoader
+              htmlNode={htmlNode}
+              cssClassName="text-primary"
+              componentId="post-preview"
+              testId="post-preview"
+              delay={500}
+            />
+          )}
         </div>
       )}
       <div className="d-flex justify-content-end">
@@ -55,18 +58,18 @@ function PostPreviewPanel({
       </div>
     </>
   );
-}
+};
 
 PostPreviewPanel.propTypes = {
-  intl: intlShape.isRequired,
-  htmlNode: PropTypes.node.isRequired,
+  htmlNode: PropTypes.node,
   isPost: PropTypes.bool,
   editExisting: PropTypes.bool,
 };
 
 PostPreviewPanel.defaultProps = {
+  htmlNode: '',
   isPost: false,
   editExisting: false,
 };
 
-export default injectIntl(PostPreviewPanel);
+export default React.memo(PostPreviewPanel);

src/components/Search.jsx

@@ -1,9 +1,11 @@
-import React, { useContext, useEffect } from 'react';
+import React, {
+  useCallback, useContext, useEffect, useRef, useState,
+} from 'react';
 
 import camelCase from 'lodash/camelCase';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Icon, SearchField } from '@edx/paragon';
 import { Search as SearchIcon } from '@edx/paragon/icons';
 
@@ -13,7 +15,8 @@ import { setSearchQuery } from '../discussions/posts/data';
 import postsMessages from '../discussions/posts/post-actions-bar/messages';
 import { setFilter as setTopicFilter } from '../discussions/topics/data/slices';
 
-function Search({ intl }) {
+const Search = () => {
+  const intl = useIntl();
   const dispatch = useDispatch();
   const { page } = useContext(DiscussionContext);
   const postSearch = useSelector(({ threads }) => threads.filters.search);
@@ -21,8 +24,10 @@ function Search({ intl }) {
   const learnerSearch = useSelector(({ learners }) => learners.usernameSearch);
   const isPostSearch = ['posts', 'my-posts'].includes(page);
   const isTopicSearch = 'topics'.includes(page);
-  let searchValue = '';
+  const [searchValue, setSearchValue] = useState('');
+  const previousSearchValueRef = useRef('');
   let currentValue = '';
+
   if (isPostSearch) {
     currentValue = postSearch;
   } else if (isTopicSearch) {
@@ -31,20 +36,22 @@ function Search({ intl }) {
     currentValue = learnerSearch;
   }
 
-  const onClear = () => {
+  const onClear = useCallback(() => {
     dispatch(setSearchQuery(''));
     dispatch(setTopicFilter(''));
     dispatch(setUsernameSearch(''));
-  };
+    previousSearchValueRef.current = '';
+  }, [previousSearchValueRef]);
 
-  const onChange = (query) => {
-    searchValue = query;
-  };
+  const onChange = useCallback((query) => {
+    setSearchValue(query);
+  }, []);
 
-  const onSubmit = (query) => {
-    if (query === '') {
+  const onSubmit = useCallback((query) => {
+    if (query === '' || query === previousSearchValueRef.current) {
       return;
     }
+
     if (isPostSearch) {
       dispatch(setSearchQuery(query));
     } else if (page === 'topics') {
@@ -52,36 +59,37 @@ function Search({ intl }) {
     } else if (page === 'learners') {
       dispatch(setUsernameSearch(query));
     }
-  };
+    previousSearchValueRef.current = query;
+  }, [page, searchValue, previousSearchValueRef]);
+
+  const handleIconClick = useCallback((e) => {
+    e.preventDefault();
+    onSubmit(searchValue);
+  }, [searchValue]);
 
   useEffect(() => onClear(), [page]);
-  return (
-    <>
-      <SearchField.Advanced
-        onClear={onClear}
-        onChange={onChange}
-        onSubmit={onSubmit}
-        value={currentValue}
-      >
-        <SearchField.Label />
-        <SearchField.Input
-          style={{ paddingRight: '1rem' }}
-          placeholder={intl.formatMessage(postsMessages.search, { page: camelCase(page) })}
-        />
-        <span className="mt-auto mb-auto mr-2.5 pointer-cursor-hover">
-          <Icon
-            src={SearchIcon}
-            onClick={() => onSubmit(searchValue)}
-            data-testid="search-icon"
-          />
-        </span>
-      </SearchField.Advanced>
-    </>
-  );
-}
 
-Search.propTypes = {
-  intl: intlShape.isRequired,
+  return (
+    <SearchField.Advanced
+      onClear={onClear}
+      onChange={onChange}
+      onSubmit={onSubmit}
+      value={currentValue}
+    >
+      <SearchField.Label />
+      <SearchField.Input
+        style={{ paddingRight: '1rem' }}
+        placeholder={intl.formatMessage(postsMessages.search, { page: camelCase(page) })}
+      />
+      <span className="py-auto px-2.5 pointer-cursor-hover">
+        <Icon
+          src={SearchIcon}
+          onClick={handleIconClick}
+          data-testid="search-icon"
+        />
+      </span>
+    </SearchField.Advanced>
+  );
 };
 
-export default injectIntl(Search);
+export default React.memo(Search);

src/components/SearchInfo.jsx

@@ -1,32 +1,36 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, Icon } from '@edx/paragon';
 import { Search } from '@edx/paragon/icons';
 
 import { RequestStatus } from '../data/constants';
 import messages from '../discussions/posts/post-actions-bar/messages';
 
-function SearchInfo({
-  intl,
+const SearchInfo = ({
   count,
   text,
   loadingStatus,
   onClear,
   textSearchRewrite,
-}) {
+}) => {
+  const intl = useIntl();
+
   return (
     <div className="d-flex flex-row border-bottom border-light-400">
       <Icon src={Search} className="justify-content-start ml-3.5 mr-2 mb-2 mt-2.5" />
       <Button variant="" size="inline" className="text-justify p-2">
         {loadingStatus === RequestStatus.SUCCESSFUL && (
-          textSearchRewrite ? intl.formatMessage(messages.searchRewriteInfo, {
-            searchString: text,
-            count,
-            textSearchRewrite,
-          })
-            : intl.formatMessage(messages.searchInfo, { count, text })
+          textSearchRewrite ? (
+            intl.formatMessage(messages.searchRewriteInfo, {
+              searchString: text,
+              count,
+              textSearchRewrite,
+            })
+          ) : (
+            intl.formatMessage(messages.searchInfo, { count, text })
+          )
         )}
         {loadingStatus !== RequestStatus.SUCCESSFUL && intl.formatMessage(messages.searchInfoSearching)}
       </Button>
@@ -35,10 +39,9 @@ function SearchInfo({
       </Button>
     </div>
   );
-}
+};
 
 SearchInfo.propTypes = {
-  intl: intlShape.isRequired,
   count: PropTypes.number.isRequired,
   text: PropTypes.string.isRequired,
   loadingStatus: PropTypes.string.isRequired,
@@ -51,4 +54,4 @@ SearchInfo.defaultProps = {
   textSearchRewrite: null,
 };
 
-export default injectIntl(SearchInfo);
+export default React.memo(SearchInfo);

src/components/Spinner.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { Spinner as ParagonSpinner } from '@edx/paragon';
+
+const Spinner = () => (
+  <div className="spinner-container" data-testid="spinner">
+    <ParagonSpinner animation="border" variant="primary" size="lg" />
+  </div>
+);
+
+export default React.memo(Spinner);

src/components/TinyMCEEditor.jsx

@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { Editor } from '@tinymce/tinymce-react';
-import { useParams } from 'react-router';
+import { useLocation, useParams } from 'react-router';
 // TinyMCE so the global var exists
 // eslint-disable-next-line no-unused-vars,import/no-extraneous-dependencies
 import tinymce from 'tinymce/tinymce';
@@ -42,30 +42,32 @@ import contentCss from '!!raw-loader!tinymce/skins/content/default/content.min.c
 import contentUiCss from '!!raw-loader!tinymce/skins/ui/oxide/content.min.css';
 
 /* istanbul ignore next */
-const setup = (editor) => {
-  editor.ui.registry.addButton('openedx_code', {
-    icon: 'sourcecode',
-    onAction: () => {
-      editor.execCommand('CodeSample');
-    },
-  });
-  editor.ui.registry.addButton('openedx_html', {
-    text: 'HTML',
-    onAction: () => {
-      editor.execCommand('mceCodeEditor');
-    },
-  });
-};
-
-/* istanbul ignore next */
-export default function TinyMCEEditor(props) {
+const TinyMCEEditor = (props) => {
   // note that skin and content_css is disabled to avoid the normal
   // loading process and is instead loaded as a string via content_style
-
+  const locationObj = useLocation();
   const { courseId, postId } = useParams();
   const [showImageWarning, setShowImageWarning] = useState(false);
   const intl = useIntl();
-  const uploadHandler = async (blobInfo, success, failure) => {
+  const enableInContextSidebar = Boolean(new URLSearchParams(locationObj.search).get('inContextSidebar') !== null);
+
+  /* istanbul ignore next */
+  const setup = useCallback((editor) => {
+    editor.ui.registry.addButton('openedx_code', {
+      icon: 'sourcecode',
+      onAction: () => {
+        editor.execCommand('CodeSample');
+      },
+    });
+    editor.ui.registry.addButton('openedx_html', {
+      text: 'HTML',
+      onAction: () => {
+        editor.execCommand('mceCodeEditor');
+      },
+    });
+  }, []);
+
+  const uploadHandler = useCallback(async (blobInfo, success, failure) => {
     try {
       const blob = blobInfo.blob();
       const imageSize = blobInfo.blob().size / 1024;
@@ -76,7 +78,7 @@ export default function TinyMCEEditor(props) {
       const filename = blobInfo.filename();
       const { location } = await uploadFile(blob, filename, courseId, postId || 'root');
       const img = new Image();
-      img.onload = function () {
+      img.onload = () => {
         if (img.height > 999 || img.width > 999) { setShowImageWarning(true); }
       };
       img.src = location;
@@ -84,7 +86,11 @@ export default function TinyMCEEditor(props) {
     } catch (e) {
       failure(e.toString(), { remove: true });
     }
-  };
+  }, [courseId, postId]);
+
+  const handleClose = useCallback(() => {
+    setShowImageWarning(false);
+  }, []);
 
   let contentStyle;
   // In the test environment this causes an error so set styles to empty since they aren't needed for testing.
@@ -94,6 +100,29 @@ export default function TinyMCEEditor(props) {
     contentStyle = '';
   }
 
+  // eslint-disable-next-line consistent-return
+  useEffect(() => {
+    if (enableInContextSidebar) {
+      const checkToxDialogVisibility = () => {
+        const toxDialog = document.querySelector('.tox-dialog');
+        if (toxDialog) {
+          toxDialog.style.alignSelf = 'start';
+          toxDialog.style.marginTop = '50px';
+        }
+      };
+
+      const observer = new MutationObserver(checkToxDialogVisibility);
+
+      // Observe changes to the entire document
+      observer.observe(document, { childList: true, subtree: true });
+
+      // Clean up the observer when the component unmounts
+      return () => {
+        observer.disconnect();
+      };
+    }
+  }, [enableInContextSidebar]);
+
   return (
     <>
       <Editor
@@ -131,21 +160,22 @@ export default function TinyMCEEditor(props) {
       <AlertModal
         title={intl.formatMessage(messages.imageWarningModalTitle)}
         isOpen={showImageWarning}
-        onClose={() => setShowImageWarning(false)}
+        onClose={handleClose}
         isBlocking
         footerNode={(
           <ActionRow>
-            <Button variant="danger" onClick={() => setShowImageWarning(false)}>
+            <Button variant="danger" onClick={handleClose}>
               {intl.formatMessage(messages.imageWarningDismissButton)}
             </Button>
           </ActionRow>
-                )}
+        )}
       >
         <p>
           {intl.formatMessage(messages.imageWarningMessage)}
         </p>
       </AlertModal>
     </>
-
   );
-}
+};
+
+export default React.memo(TinyMCEEditor);

src/components/TopicStats.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 import { useSelector } from 'react-redux';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Icon, OverlayTrigger, Tooltip } from '@edx/paragon';
 import { HelpOutline, PostOutline, Report } from '@edx/paragon/icons';
 
@@ -14,21 +14,23 @@ import {
 } from '../discussions/data/selectors';
 import messages from '../discussions/in-context-topics/messages';
 
-function TopicStats({
+const TopicStats = ({
   threadCounts,
   activeFlags,
   inactiveFlags,
-  intl,
-}) {
+}) => {
+  const intl = useIntl();
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
   const userIsGroupTa = useSelector(selectUserIsGroupTa);
   const canSeeReportedStats = (activeFlags || inactiveFlags) && (userHasModerationPrivileges || userIsGroupTa);
+
   return (
     <div className="d-flex align-items-center mt-2.5" style={{ marginBottom: '2px' }}>
       <OverlayTrigger
+        id="discussion-topic-stats"
         placement="right"
         overlay={(
-          <Tooltip>
+          <Tooltip id="discussion-topic-stats">
             <div className="d-flex flex-column align-items-start">
               {intl.formatMessage(messages.discussions, {
                 count: threadCounts?.discussion || 0,
@@ -43,9 +45,10 @@ function TopicStats({
         </div>
       </OverlayTrigger>
       <OverlayTrigger
+        id="question-topic-stats"
         placement="right"
         overlay={(
-          <Tooltip>
+          <Tooltip id="question-topic-stats">
             <div className="d-flex flex-column align-items-start">
               {intl.formatMessage(messages.questions, {
                 count: threadCounts?.question || 0,
@@ -61,9 +64,10 @@ function TopicStats({
       </OverlayTrigger>
       {Boolean(canSeeReportedStats) && (
         <OverlayTrigger
+          id="reported-topic-stats"
           placement="right"
           overlay={(
-            <Tooltip>
+            <Tooltip id="reported-topic-stats">
               <div className="d-flex flex-column align-items-start">
                 {Boolean(activeFlags) && (
                   <span>
@@ -87,7 +91,7 @@ function TopicStats({
       )}
     </div>
   );
-}
+};
 
 TopicStats.propTypes = {
   threadCounts: PropTypes.shape({
@@ -96,7 +100,6 @@ TopicStats.propTypes = {
   }),
   activeFlags: PropTypes.number,
   inactiveFlags: PropTypes.number,
-  intl: intlShape.isRequired,
 };
 
 TopicStats.defaultProps = {
@@ -108,4 +111,4 @@ TopicStats.defaultProps = {
   inactiveFlags: null,
 };
 
-export default injectIntl(TopicStats);
+export default React.memo(TopicStats);

src/components/icons/InsertLink.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line react/function-component-definition
 export default function InsertLink() {
   return (
     <svg

src/components/icons/Issue.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line react/function-component-definition
 export default function Issue() {
   return (
     <svg

src/components/icons/People.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line react/function-component-definition
 export default function People() {
   return (
     <svg

src/components/icons/PushPin.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line react/function-component-definition
 export default function PushPin() {
   return (
     <svg

src/components/icons/Question.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line react/function-component-definition
 export default function Question() {
   return (
     <svg

src/components/icons/QuestionAnswer.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line react/function-component-definition
 export default function QuestionAnswer() {
   return (
     <svg

src/components/icons/QuestionAnswerOutline.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line react/function-component-definition
 export default function QuestionAnswerOutline() {
   return (
     <svg

src/components/icons/StarFilled.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line react/function-component-definition
 export default function StarFilled() {
   return (
     <svg

src/components/icons/StarOutline.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line react/function-component-definition
 export default function StarOutline() {
   return (
     <svg

src/components/icons/ThumbUpFilled.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line react/function-component-definition
 export default function ThumbUpFilled() {
   return (
     <svg

src/components/icons/ThumbUpOutline.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line react/function-component-definition
 export default function ThumbUpOutline() {
   return (
     <svg

src/components/index.js

@@ -1,4 +1,5 @@
 export { default as PostActionsBar } from '../discussions/posts/post-actions-bar/PostActionsBar';
 export { default as Search } from './Search';
+export { default as Spinner } from './Spinner';
 export { default as TinyMCEEditor } from './TinyMCEEditor';
 export { default as TopicStats } from './TopicStats';

src/data/constants.js

@@ -1,6 +1,9 @@
 import { getConfig } from '@edx/frontend-platform';
 
 export const getApiBaseUrl = () => getConfig().LMS_BASE_URL;
+export const getFullUrl = (path) => (
+  new URL(`${getConfig().PUBLIC_PATH.replace(/\/$/, '')}/${path}`, window.location.origin).href
+);
 
 /**
  * Enum for thread types.

src/data/hooks.js

@@ -18,11 +18,13 @@ import { useDispatch } from 'react-redux';
 export function useDispatchWithState() {
   const dispatch = useDispatch();
   const [isDispatching, setDispatching] = useState(false);
+
   const dispatchWithState = async (thunk) => {
     setDispatching(true);
     await dispatch(thunk);
     setDispatching(false);
   };
+
   return [
     isDispatching,
     dispatchWithState,

src/discussions/common/ActionsDropdown.jsx

@@ -1,9 +1,11 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, {
+  useCallback, useMemo, useRef, useState,
+} from 'react';
 import PropTypes from 'prop-types';
 
 import { useSelector } from 'react-redux';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { logError } from '@edx/frontend-platform/logging';
 import {
   Button, Dropdown, Icon, IconButton, ModalPopup, useToggle,
@@ -11,24 +13,24 @@ import {
 import { MoreHoriz } from '@edx/paragon/icons';
 
 import { ContentActions } from '../../data/constants';
-import { selectBlackoutDate } from '../data/selectors';
+import { selectIsPostingEnabled } from '../data/selectors';
 import messages from '../messages';
-import { commentShape } from '../post-comments/comments/comment/proptypes';
-import { postShape } from '../posts/post/proptypes';
-import { inBlackoutDateRange, useActions } from '../utils';
+import { useActions } from '../utils';
 
-function ActionsDropdown({
-  intl,
-  commentOrPost,
-  disabled,
+const ActionsDropdown = ({
   actionHandlers,
-  iconSize,
+  contentType,
+  disabled,
   dropDownIconSize,
-}) {
+  iconSize,
+  id,
+}) => {
   const buttonRef = useRef();
+  const intl = useIntl();
   const [isOpen, open, close] = useToggle(false);
   const [target, setTarget] = useState(null);
-  const actions = useActions(commentOrPost);
+  const isPostingEnabled = useSelector(selectIsPostingEnabled);
+  const actions = useActions(contentType, id);
 
   const handleActions = useCallback((action) => {
     const actionFunction = actionHandlers[action];
@@ -39,11 +41,12 @@ function ActionsDropdown({
     }
   }, [actionHandlers]);
 
-  const blackoutDateRange = useSelector(selectBlackoutDate);
-  // Find and remove edit action if in blackout date range.
-  if (inBlackoutDateRange(blackoutDateRange)) {
-    actions.splice(actions.findIndex(action => action.id === 'edit'), 1);
-  }
+  // Find and remove edit action if in Posting is disabled.
+  useMemo(() => {
+    if (!isPostingEnabled) {
+      actions.splice(actions.findIndex(action => action.id === 'edit'), 1);
+    }
+  }, [actions, isPostingEnabled]);
 
   const onClickButton = useCallback(() => {
     setTarget(buttonRef.current);
@@ -80,9 +83,7 @@ function ActionsDropdown({
           >
             {actions.map(action => (
               <React.Fragment key={action.id}>
-                {(action.action === ContentActions.DELETE)
-                  && <Dropdown.Divider />}
-
+                {(action.action === ContentActions.DELETE) && <Dropdown.Divider />}
                 <Dropdown.Item
                   as={Button}
                   variant="tertiary"
@@ -108,15 +109,15 @@ function ActionsDropdown({
       </div>
     </>
   );
-}
+};
 
 ActionsDropdown.propTypes = {
-  intl: intlShape.isRequired,
-  commentOrPost: PropTypes.oneOfType([commentShape, postShape]).isRequired,
+  id: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
   actionHandlers: PropTypes.objectOf(PropTypes.func).isRequired,
   iconSize: PropTypes.string,
   dropDownIconSize: PropTypes.bool,
+  contentType: PropTypes.oneOf(['POST', 'COMMENT']).isRequired,
 };
 
 ActionsDropdown.defaultProps = {
@@ -125,4 +126,4 @@ ActionsDropdown.defaultProps = {
   dropDownIconSize: false,
 };
 
-export default injectIntl(ActionsDropdown);
+export default ActionsDropdown;

src/discussions/common/ActionsDropdown.test.jsx

@@ -1,16 +1,26 @@
 import {
   fireEvent, render, screen, waitFor,
 } from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
 import { act } from 'react-dom/test-utils';
 import { IntlProvider } from 'react-intl';
 import { Factory } from 'rosie';
 
 import { camelCaseObject, initializeMockApp, snakeCaseObject } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';
 
 import { ContentActions } from '../../data/constants';
 import { initializeStore } from '../../store';
+import { executeThunk } from '../../test-utils';
+import { getCourseConfigApiUrl } from '../data/api';
+import { fetchCourseConfig } from '../data/thunks';
 import messages from '../messages';
+import { getCommentsApiUrl } from '../post-comments/data/api';
+import { addComment, fetchThreadComments } from '../post-comments/data/thunks';
+import { PostCommentsContext } from '../post-comments/postCommentsContext';
+import { getThreadsApiUrl } from '../posts/data/api';
+import { fetchThread } from '../posts/data/thunks';
 import { ACTIONS_LIST } from '../utils';
 import ActionsDropdown from './ActionsDropdown';
 
@@ -18,100 +28,145 @@ import '../post-comments/data/__factories__';
 import '../posts/data/__factories__';
 
 let store;
+let axiosMock;
+const commentsApiUrl = getCommentsApiUrl();
+const threadsApiUrl = getThreadsApiUrl();
+const courseId = 'course-v1:edX+TestX+Test_Course';
+const discussionThreadId = 'thread-1';
+const questionThreadId = 'thread-2';
+const commentContent = 'This is a comment for thread-1';
+let discussionThread;
+let questionThread;
+let comment;
 
-function buildTestContent(buildParams, testMeta) {
+const buildTestContent = (buildParams, testMeta) => {
   const buildParamsSnakeCase = snakeCaseObject(buildParams);
-  return [
-    {
-      testFor: 'comments',
-      ...camelCaseObject(Factory.build('comment', { ...buildParamsSnakeCase }, null)),
-      ...testMeta,
-    },
-    {
-      testFor: 'question threads',
-      ...camelCaseObject(Factory.build('thread', { ...buildParamsSnakeCase, type: 'question' }, null)),
-      ...testMeta,
-    },
-    {
+  discussionThread = Factory.build('thread', { ...buildParamsSnakeCase, id: discussionThreadId }, null);
+  questionThread = Factory.build('thread', { ...buildParamsSnakeCase, id: questionThreadId }, null);
+  comment = Factory.build('comment', { ...buildParamsSnakeCase, thread_id: discussionThreadId }, null);
+
+  return {
+    discussion: {
       testFor: 'discussion threads',
-      ...camelCaseObject(Factory.build('thread', { ...buildParamsSnakeCase, type: 'discussion' }, null)),
+      contentType: 'POST',
+      ...camelCaseObject(discussionThread),
       ...testMeta,
     },
-  ];
-}
+    question: {
+      testFor: 'question threads',
+      contentType: 'POST',
+      ...camelCaseObject(questionThread),
+      ...testMeta,
+    },
+    comment: {
+      testFor: 'comments',
+      contentType: 'COMMENT',
+      type: 'discussion',
+      ...camelCaseObject(comment),
+      ...testMeta,
+    },
+  };
+};
 
-const canPerformActionTestData = ACTIONS_LIST
-  .map(({ action, conditions, label: { defaultMessage } }) => {
-    const buildParams = {
+const mockThreadAndComment = async (response) => {
+  axiosMock.onGet(`${threadsApiUrl}${discussionThreadId}/`).reply(200, response);
+  axiosMock.onGet(`${threadsApiUrl}${questionThreadId}/`).reply(200, response);
+  axiosMock.onGet(commentsApiUrl).reply(200, Factory.build('commentsResult'));
+  axiosMock.onPost(commentsApiUrl).reply(200, response);
+
+  await executeThunk(fetchThread(discussionThreadId), store.dispatch, store.getState);
+  await executeThunk(fetchThread(questionThreadId), store.dispatch, store.getState);
+  await executeThunk(fetchThreadComments(discussionThreadId), store.dispatch, store.getState);
+  await executeThunk(addComment(commentContent, discussionThreadId, null), store.dispatch, store.getState);
+};
+
+const canPerformActionTestData = ACTIONS_LIST.flatMap(({
+  id, action, conditions, label: { defaultMessage },
+}) => {
+  const buildParams = { editable_fields: [action] };
+
+  if (conditions) {
+    Object.entries(conditions).forEach(([conditionKey, conditionValue]) => {
+      buildParams[conditionKey] = conditionValue;
+    });
+  }
+
+  const testContent = buildTestContent(buildParams, { label: defaultMessage, action });
+
+  switch (id) {
+    case 'answer':
+    case 'unanswer':
+      return [testContent.question];
+    case 'endorse':
+    case 'unendorse':
+      return [testContent.comment, testContent.discussion];
+    default:
+      return [testContent.discussion, testContent.question, testContent.comment];
+  }
+});
+
+const canNotPerformActionTestData = ACTIONS_LIST.flatMap(({ action, conditions, label: { defaultMessage } }) => {
+  const label = defaultMessage;
+
+  if (!conditions) {
+    const content = buildTestContent({ editable_fields: [] }, { reason: 'field is not editable', label: defaultMessage });
+    return [content.discussion, content.question, content.comment];
+  }
+
+  const reversedConditions = Object.fromEntries(Object.entries(conditions).map(([key, value]) => [key, !value]));
+
+  const content = {
+    // can edit field, but doesn't pass conditions
+    ...buildTestContent({
       editable_fields: [action],
-    };
-    if (conditions) {
-      Object.entries(conditions)
-        .forEach(([conditionKey, conditionValue]) => {
-          buildParams[conditionKey] = conditionValue;
-        });
-    }
-    return buildTestContent(buildParams, { label: defaultMessage, action });
-  })
-  .flat();
+      ...reversedConditions,
+    }, { reason: 'field is editable but does not pass condition', label, action }),
 
-const canNotPerformActionTestData = ACTIONS_LIST
-  .map(({ action, conditions, label: { defaultMessage } }) => {
-    const label = defaultMessage;
-    let content;
-    if (!conditions) {
-      content = buildTestContent({ editable_fields: [] }, { reason: 'field is not editable', label: defaultMessage });
-    } else {
-      const reversedConditions = Object.keys(conditions)
-        .reduce(
-          (results, key) => ({
-            ...results,
-            [key]: !conditions[key],
-          }),
-          {},
-        );
+    // passes conditions, but can't edit field
+    ...(action === ContentActions.DELETE ? {} : buildTestContent({
+      editable_fields: [],
+      ...conditions,
+    }, { reason: 'passes conditions but field is not editable', label, action })),
 
-      content = [
-        // can edit field, but doesn't pass conditions
-        ...buildTestContent({
-          editable_fields: [action],
-          ...reversedConditions,
-        }, { reason: 'field is editable but does not pass condition', label, action }),
-        // passes conditions, but can't edit field
-        ...(action === ContentActions.DELETE
-          ? []
-          : buildTestContent({
-            editable_fields: [],
-            ...conditions,
-          }, { reason: 'passes conditions but field is not editable', label, action })
-        ),
-        // can't edit field, and doesn't pass conditions
-        ...buildTestContent({
-          editable_fields: [],
-          ...reversedConditions,
-        }, { reason: 'can not edit field and does not match conditions', label, action }),
-      ];
-    }
-    return content;
-  })
-  .flat();
+    // can't edit field, and doesn't pass conditions
+    ...buildTestContent({
+      editable_fields: [],
+      ...reversedConditions,
+    }, { reason: 'can not edit field and does not match conditions', label, action }),
+  };
 
-function renderComponent(
-  commentOrPost,
-  { disabled = false, actionHandlers = {} } = {},
-) {
+  return [content.discussion, content.question, content.comment];
+});
+
+const renderComponent = ({
+  id = '',
+  contentType = 'POST',
+  closed = false,
+  type = 'discussion',
+  postId = '',
+  disabled = false,
+  actionHandlers = {},
+} = {}) => {
   render(
     <IntlProvider locale="en">
       <AppProvider store={store}>
-        <ActionsDropdown
-          commentOrPost={commentOrPost}
-          disabled={disabled}
-          actionHandlers={actionHandlers}
-        />
+        <PostCommentsContext.Provider value={{
+          isClosed: closed,
+          postType: type,
+          postId,
+        }}
+        >
+          <ActionsDropdown
+            id={id}
+            disabled={disabled}
+            actionHandlers={actionHandlers}
+            contentType={contentType}
+          />
+        </PostCommentsContext.Provider>
       </AppProvider>
     </IntlProvider>,
   );
-}
+};
 
 const findOpenActionsDropdownButton = async () => (
   screen.findByRole('button', { name: messages.actionsAlt.defaultMessage })
@@ -128,10 +183,18 @@ describe('ActionsDropdown', () => {
       },
     });
     store = initializeStore();
+    Factory.resetAll();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+
+    axiosMock.onGet(`${getCourseConfigApiUrl()}${courseId}/`)
+      .reply(200, { isPostingEnabled: true });
+
+    await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
   });
 
-  it.each(buildTestContent())('can open drop down if enabled', async (commentOrPost) => {
-    renderComponent(commentOrPost, { disabled: false });
+  it.each(Object.values(buildTestContent()))('can open drop down if enabled', async (commentOrPost) => {
+    await mockThreadAndComment(commentOrPost);
+    renderComponent({ ...commentOrPost });
 
     const openButton = await findOpenActionsDropdownButton();
     await act(async () => {
@@ -141,8 +204,9 @@ describe('ActionsDropdown', () => {
     await waitFor(() => expect(screen.queryByTestId('actions-dropdown-modal-popup')).toBeInTheDocument());
   });
 
-  it.each(buildTestContent())('can not open drop down if disabled', async (commentOrPost) => {
-    renderComponent(commentOrPost, { disabled: true });
+  it.each(Object.values(buildTestContent()))('can not open drop down if disabled', async (commentOrPost) => {
+    await mockThreadAndComment(commentOrPost);
+    renderComponent({ ...commentOrPost, disabled: true });
 
     const openButton = await findOpenActionsDropdownButton();
     await act(async () => {
@@ -153,11 +217,9 @@ describe('ActionsDropdown', () => {
   });
 
   it('copy link action should be visible on posts', async () => {
-    const commentOrPost = {
-      testFor: 'thread',
-      ...camelCaseObject(Factory.build('thread', { editable_fields: ['copy_link'] }, null)),
-    };
-    renderComponent(commentOrPost, { disabled: false });
+    const discussionObject = buildTestContent({ editable_fields: ['copy_link'] }).discussion;
+    await mockThreadAndComment(discussionObject);
+    renderComponent({ ...camelCaseObject(discussionObject) });
 
     const openButton = await findOpenActionsDropdownButton();
     await act(async () => {
@@ -168,11 +230,9 @@ describe('ActionsDropdown', () => {
   });
 
   it('copy link action should not be visible on a comment', async () => {
-    const commentOrPost = {
-      testFor: 'comments',
-      ...camelCaseObject(Factory.build('comment', {}, null)),
-    };
-    renderComponent(commentOrPost, { disabled: false });
+    const commentObject = buildTestContent().comment;
+    await mockThreadAndComment(commentObject);
+    renderComponent({ ...camelCaseObject(commentObject) });
 
     const openButton = await findOpenActionsDropdownButton();
     await act(async () => {
@@ -183,15 +243,13 @@ describe('ActionsDropdown', () => {
   });
 
   describe.each(canPerformActionTestData)('Actions', ({
-    testFor, action, label, reason, ...commentOrPost
+    testFor, action, label, ...commentOrPost
   }) => {
     describe(`for ${testFor}`, () => {
       it(`can "${label}" when allowed`, async () => {
+        await mockThreadAndComment(commentOrPost);
         const mockHandler = jest.fn();
-        renderComponent(
-          commentOrPost,
-          { actionHandlers: { [action]: mockHandler } },
-        );
+        renderComponent({ ...commentOrPost, actionHandlers: { [action]: mockHandler } });
 
         const openButton = await findOpenActionsDropdownButton();
         await act(async () => {
@@ -214,7 +272,8 @@ describe('ActionsDropdown', () => {
   }) => {
     describe(`for ${testFor}`, () => {
       it(`can't "${label}" when ${reason}`, async () => {
-        renderComponent(commentOrPost);
+        await mockThreadAndComment(commentOrPost);
+        renderComponent({ ...commentOrPost });
 
         const openButton = await findOpenActionsDropdownButton();
         await act(async () => {

src/discussions/common/AlertBanner.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Alert } from '@edx/paragon';
 import { Report } from '@edx/paragon/icons';
 
@@ -12,26 +12,31 @@ import { AvatarOutlineAndLabelColors } from '../../data/constants';
 import {
   selectModerationSettings, selectUserHasModerationPrivileges, selectUserIsGroupTa, selectUserIsStaff,
 } from '../data/selectors';
-import { commentShape } from '../post-comments/comments/comment/proptypes';
 import messages from '../post-comments/messages';
-import { postShape } from '../posts/post/proptypes';
 import AlertBar from './AlertBar';
 
-function AlertBanner({
-  intl,
-  content,
-}) {
+const AlertBanner = ({
+  author,
+  abuseFlagged,
+  lastEdit,
+  closed,
+  closedBy,
+  closeReason,
+  editByLabel,
+  closedByLabel,
+}) => {
+  const intl = useIntl();
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
   const userIsGroupTa = useSelector(selectUserIsGroupTa);
   const userIsGlobalStaff = useSelector(selectUserIsStaff);
   const { reasonCodesEnabled } = useSelector(selectModerationSettings);
-  const userIsContentAuthor = getAuthenticatedUser().username === content.author;
-  const canSeeReportedBanner = content?.abuseFlagged;
+  const userIsContentAuthor = getAuthenticatedUser().username === author;
+  const canSeeReportedBanner = abuseFlagged;
   const canSeeLastEditOrClosedAlert = (userHasModerationPrivileges || userIsGroupTa
     || userIsGlobalStaff || userIsContentAuthor
   );
-  const editByLabelColor = AvatarOutlineAndLabelColors[content.editByLabel];
-  const closedByLabelColor = AvatarOutlineAndLabelColors[content.closedByLabel];
+  const editByLabelColor = AvatarOutlineAndLabelColors[editByLabel];
+  const closedByLabelColor = AvatarOutlineAndLabelColors[closedByLabel];
 
   return (
     <>
@@ -42,33 +47,52 @@ function AlertBanner({
       )}
       {reasonCodesEnabled && canSeeLastEditOrClosedAlert && (
         <>
-          {content.lastEdit?.reason && (
+          {lastEdit?.reason && (
             <AlertBar
-              message={messages.editedBy}
-              author={content.lastEdit.editorUsername}
-              authorLabel={content.editByLabel}
+              message={intl.formatMessage(messages.editedBy)}
+              author={lastEdit.editorUsername}
+              authorLabel={editByLabel}
               labelColor={editByLabelColor && `text-${editByLabelColor}`}
-              reason={content.lastEdit.reason}
+              reason={lastEdit.reason}
             />
           )}
-          {content.closed && (
-          <AlertBar
-            message={messages.closedBy}
-            author={content.closedBy}
-            authorLabel={content.closedByLabel}
-            labelColor={closedByLabelColor && `text-${closedByLabelColor}`}
-            reason={content.closeReason}
-          />
+          {closed && (
+            <AlertBar
+              message={intl.formatMessage(messages.closedBy)}
+              author={closedBy}
+              authorLabel={closedByLabel}
+              labelColor={closedByLabelColor && `text-${closedByLabelColor}`}
+              reason={closeReason}
+            />
           )}
         </>
       )}
     </>
   );
-}
-
-AlertBanner.propTypes = {
-  intl: intlShape.isRequired,
-  content: PropTypes.oneOfType([commentShape.isRequired, postShape.isRequired]).isRequired,
 };
 
-export default injectIntl(AlertBanner);
+AlertBanner.propTypes = {
+  author: PropTypes.string.isRequired,
+  abuseFlagged: PropTypes.bool,
+  closed: PropTypes.bool,
+  closedBy: PropTypes.string,
+  closedByLabel: PropTypes.string,
+  closeReason: PropTypes.string,
+  editByLabel: PropTypes.string,
+  lastEdit: PropTypes.shape({
+    editorUsername: PropTypes.string,
+    reason: PropTypes.string,
+  }),
+};
+
+AlertBanner.defaultProps = {
+  abuseFlagged: false,
+  closed: undefined,
+  closedBy: undefined,
+  closedByLabel: undefined,
+  closeReason: undefined,
+  editByLabel: undefined,
+  lastEdit: {},
+};
+
+export default React.memo(AlertBanner);

src/discussions/common/AlertBanner.test.jsx

@@ -31,7 +31,14 @@ function renderComponent(
           value={{ courseId: 'course-v1:edX+TestX+Test_Course' }}
         >
           <AlertBanner
-            content={content}
+            author={content.author}
+            abuseFlagged={content.abuseFlagged}
+            lastEdit={content.lastEdit}
+            closed={content.closed}
+            closedBy={content.closedBy}
+            closeReason={content.closeReason}
+            editByLabel={content.editByLabel}
+            closedByLabel={content.closedByLabel}
           />
         </DiscussionContext.Provider>
       </AppProvider>

src/discussions/common/AlertBar.jsx

@@ -1,24 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Alert } from '@edx/paragon';
 
 import messages from '../post-comments/messages';
 import AuthorLabel from './AuthorLabel';
 
-function AlertBar({
-  intl,
+const AlertBar = ({
   message,
   author,
   authorLabel,
   labelColor,
   reason,
-}) {
+}) => {
+  const intl = useIntl();
+
   return (
     <Alert variant="info" className="px-3 shadow-none mb-1 py-10px bg-light-200">
       <div className="d-flex align-items-center flex-wrap text-gray-700 font-style">
-        {intl.formatMessage(message)}
+        {message}
         <span className="ml-1">
           <AuthorLabel
             author={author}
@@ -38,10 +39,9 @@ function AlertBar({
       </div>
     </Alert>
   );
-}
+};
 
 AlertBar.propTypes = {
-  intl: intlShape.isRequired,
   message: PropTypes.string,
   author: PropTypes.string,
   authorLabel: PropTypes.string,
@@ -57,4 +57,4 @@ AlertBar.defaultProps = {
   reason: '',
 };
 
-export default injectIntl(AlertBar);
+export default React.memo(AlertBar);

src/discussions/common/AuthorLabel.jsx

@@ -1,23 +1,22 @@
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
-import { Link, useLocation } from 'react-router-dom';
+import { generatePath } from 'react-router';
+import { Link } from 'react-router-dom';
 import * as timeago from 'timeago.js';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Icon, OverlayTrigger, Tooltip } from '@edx/paragon';
 import { Institution, School } from '@edx/paragon/icons';
 
 import { Routes } from '../../data/constants';
 import { useShowLearnersTab } from '../data/hooks';
 import messages from '../messages';
-import { discussionsPath } from '../utils';
 import { DiscussionContext } from './context';
 import timeLocale from './time-locale';
 
-function AuthorLabel({
-  intl,
+const AuthorLabel = ({
   author,
   authorLabel,
   linkToProfile,
@@ -26,17 +25,18 @@ function AuthorLabel({
   postCreatedAt,
   authorToolTip,
   postOrComment,
-}) {
-  const location = useLocation();
+}) => {
+  timeago.register('time-locale', timeLocale);
+  const intl = useIntl();
   const { courseId } = useContext(DiscussionContext);
   let icon = null;
   let authorLabelMessage = null;
-  timeago.register('time-locale', timeLocale);
 
   if (authorLabel === 'Staff') {
     icon = Institution;
     authorLabelMessage = intl.formatMessage(messages.authorLabelStaff);
   }
+
   if (authorLabel === 'Community TA') {
     icon = School;
     authorLabelMessage = intl.formatMessage(messages.authorLabelTA);
@@ -49,9 +49,9 @@ function AuthorLabel({
   const showUserNameAsLink = useShowLearnersTab()
     && linkToProfile && author && author !== intl.formatMessage(messages.anonymous);
 
-  const authorName = (
+  const authorName = useMemo(() => (
     <span
-      className={classNames('mr-1.5 font-size-14 font-style font-weight-500', {
+      className={classNames('mr-1.5 font-size-14 font-style font-weight-500 author-name', {
         'text-gray-700': isRetiredUser,
         'text-primary-500': !authorLabelMessage && !isRetiredUser,
       })}
@@ -60,8 +60,9 @@ function AuthorLabel({
     >
       {isRetiredUser ? '[Deactivated]' : author}
     </span>
-  );
-  const labelContents = (
+  ), [author, authorLabelMessage, isRetiredUser]);
+
+  const labelContents = useMemo(() => (
     <>
       <OverlayTrigger
         overlay={(
@@ -99,7 +100,7 @@ function AuthorLabel({
       {postCreatedAt && (
         <span
           title={postCreatedAt}
-          className={classNames('font-family-inter align-content-center', {
+          className={classNames('align-content-center', {
             'text-white': alert,
             'text-gray-500': !alert,
           })}
@@ -109,7 +110,7 @@ function AuthorLabel({
         </span>
       )}
     </>
-  );
+  ), [author, authorLabelMessage, authorToolTip, icon, isRetiredUser, postCreatedAt, showTextPrimary, alert]);
 
   return showUserNameAsLink
     ? (
@@ -117,7 +118,7 @@ function AuthorLabel({
         <Link
           data-testid="learner-posts-link"
           id="learner-posts-link"
-          to={discussionsPath(Routes.LEARNERS.POSTS, { learnerUsername: author, courseId })(location)}
+          to={generatePath(Routes.LEARNERS.POSTS, { learnerUsername: author, courseId })}
           className="text-decoration-none"
           style={{ width: 'fit-content' }}
         >
@@ -127,10 +128,9 @@ function AuthorLabel({
       </div>
     )
     : <div className={className}>{authorName}{labelContents}</div>;
-}
+};
 
 AuthorLabel.propTypes = {
-  intl: intlShape.isRequired,
   author: PropTypes.string.isRequired,
   authorLabel: PropTypes.string,
   linkToProfile: PropTypes.bool,
@@ -151,4 +151,4 @@ AuthorLabel.defaultProps = {
   postOrComment: false,
 };
 
-export default injectIntl(AuthorLabel);
+export default React.memo(AuthorLabel);

src/discussions/common/AuthorLabel.test.jsx

@@ -66,19 +66,20 @@ describe('Author label', () => {
     ['retired__user', null, false, ''],
     ['staff_user', 'Staff', true, 'text-staff-color'],
     ['learner_user', null, false, ''],
-  ])('for %s', (
-    author, authorLabel, linkToProfile, labelColor,
-  ) => {
-    it('it has author name text',
+  ])('for %s', (author, authorLabel, linkToProfile, labelColor) => {
+    it(
+      'it has author name text',
       async () => {
         renderComponent(author, authorLabel, linkToProfile, labelColor);
         const authorElement = container.querySelector('[role=heading]');
         const authorName = author.startsWith('retired__user') ? '[Deactivated]' : author;
 
         expect(authorElement).toHaveTextContent(authorName);
-      });
+      },
+    );
 
-    it(`it is "${!linkToProfile && 'not'}" clickable when linkToProfile is ${!!linkToProfile}`,
+    it(
+      `it is "${!linkToProfile && 'not'}" clickable when linkToProfile is ${!!linkToProfile}`,
       async () => {
         renderComponent(author, authorLabel, linkToProfile, labelColor);
 
@@ -87,9 +88,11 @@ describe('Author label', () => {
         } else {
           expect(screen.queryByTestId('learner-posts-link')).not.toBeInTheDocument();
         }
-      });
+      },
+    );
 
-    it(`it has "${!linkToProfile && 'not'}" label text and label color when linkToProfile is ${!!linkToProfile}`,
+    it(
+      `it has "${!linkToProfile && 'not'}" label text and label color when linkToProfile is ${!!linkToProfile}`,
       async () => {
         renderComponent(author, authorLabel, linkToProfile, labelColor);
         const authorElement = container.querySelector('[role=heading]');
@@ -104,6 +107,7 @@ describe('Author label', () => {
           expect(authorElement.parentNode.lastChild).not.toHaveTextContent(label, { exact: true });
           expect(authorElement.parentNode).not.toHaveClass(labelColor, { exact: true });
         }
-      });
+      },
+    );
   });
 });

src/discussions/common/Confirmation.jsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { ActionRow, Button, ModalDialog } from '@edx/paragon';
 
 import messages from '../messages';
 
-function Confirmation({
-  intl,
+const Confirmation = ({
   isOpen,
   title,
   description,
@@ -16,7 +15,9 @@ function Confirmation({
   closeButtonVaraint,
   confirmButtonVariant,
   confirmButtonText,
-}) {
+}) => {
+  const intl = useIntl();
+
   return (
     <ModalDialog title={title} isOpen={isOpen} hasCloseButton={false} onClose={onClose} zIndex={5000}>
       <ModalDialog.Header>
@@ -39,10 +40,9 @@ function Confirmation({
       </ModalDialog.Footer>
     </ModalDialog>
   );
-}
+};
 
 Confirmation.propTypes = {
-  intl: intlShape.isRequired,
   isOpen: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
   comfirmAction: PropTypes.func.isRequired,
@@ -59,4 +59,4 @@ Confirmation.defaultProps = {
   confirmButtonText: '',
 };
 
-export default injectIntl(Confirmation);
+export default React.memo(Confirmation);

src/discussions/common/EndorsedAlertBanner.jsx

@@ -1,30 +1,34 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
 import * as timeago from 'timeago.js';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Alert, Icon } from '@edx/paragon';
 import { CheckCircle, Verified } from '@edx/paragon/icons';
 
 import { ThreadType } from '../../data/constants';
-import { commentShape } from '../post-comments/comments/comment/proptypes';
 import messages from '../post-comments/messages';
+import { PostCommentsContext } from '../post-comments/postCommentsContext';
 import AuthorLabel from './AuthorLabel';
 import timeLocale from './time-locale';
 
-function EndorsedAlertBanner({
-  intl,
-  content,
-  postType,
-}) {
+const EndorsedAlertBanner = ({
+  endorsed,
+  endorsedAt,
+  endorsedBy,
+  endorsedByLabel,
+}) => {
   timeago.register('time-locale', timeLocale);
+
+  const intl = useIntl();
+  const { postType } = useContext(PostCommentsContext);
   const isQuestion = postType === ThreadType.QUESTION;
   const classes = isQuestion ? 'bg-success-500 text-white' : 'bg-dark-500 text-white';
   const iconClass = isQuestion ? CheckCircle : Verified;
 
   return (
-    content.endorsed && (
+    endorsed && (
       <Alert
         variant="plain"
         className={`px-2.5 mb-0 py-8px align-items-center shadow-none ${classes}`}
@@ -39,17 +43,17 @@ function EndorsedAlertBanner({
                 height: '20px',
               }}
             />
-            <strong className="ml-2 font-family-inter">
+            <strong className="ml-2">
               {intl.formatMessage(isQuestion ? messages.answer : messages.endorsed)}
             </strong>
           </div>
           <span className="d-flex align-items-center align-items-center flex-wrap" style={{ marginRight: '-1px' }}>
             <AuthorLabel
-              author={content.endorsedBy}
-              authorLabel={content.endorsedByLabel}
+              author={endorsedBy}
+              authorLabel={endorsedByLabel}
               linkToProfile
-              alert={content.endorsed}
-              postCreatedAt={content.endorsedAt}
+              alert={endorsed}
+              postCreatedAt={endorsedAt}
               authorToolTip
               postOrComment
             />
@@ -58,16 +62,19 @@ function EndorsedAlertBanner({
       </Alert>
     )
   );
-}
+};
 
 EndorsedAlertBanner.propTypes = {
-  intl: intlShape.isRequired,
-  content: PropTypes.oneOfType([commentShape.isRequired]).isRequired,
-  postType: PropTypes.string,
+  endorsed: PropTypes.bool.isRequired,
+  endorsedAt: PropTypes.string,
+  endorsedBy: PropTypes.string,
+  endorsedByLabel: PropTypes.string,
 };
 
 EndorsedAlertBanner.defaultProps = {
-  postType: null,
+  endorsedAt: null,
+  endorsedBy: null,
+  endorsedByLabel: null,
 };
 
-export default injectIntl(EndorsedAlertBanner);
+export default React.memo(EndorsedAlertBanner);

src/discussions/common/EndorsedAlertBanner.test.jsx

@@ -8,6 +8,7 @@ import { AppProvider } from '@edx/frontend-platform/react';
 import { ThreadType } from '../../data/constants';
 import { initializeStore } from '../../store';
 import messages from '../post-comments/messages';
+import { PostCommentsContext } from '../post-comments/postCommentsContext';
 import { DiscussionContext } from './context';
 import EndorsedAlertBanner from './EndorsedAlertBanner';
 
@@ -21,24 +22,30 @@ function buildTestContent(type, buildParams) {
   return camelCaseObject(Factory.build(type, { ...buildParamsSnakeCase }, null));
 }
 
-function renderComponent(
-  content, postType,
-) {
+const renderComponent = (content, postType) => {
   render(
     <IntlProvider locale="en">
       <AppProvider store={store}>
         <DiscussionContext.Provider
           value={{ courseId: 'course-v1:edX+DemoX+Demo_Course' }}
         >
-          <EndorsedAlertBanner
-            content={content}
-            postType={postType}
-          />
+          <PostCommentsContext.Provider value={{
+            postType,
+          }}
+          >
+            <EndorsedAlertBanner
+              endorsed={content.endorsed}
+              endorsedAt={content.endorsedAt}
+              endorsedBy={content.endorsedBy}
+              endorsedByLabel={content.endorsedByLabel}
+            />
+          </PostCommentsContext.Provider>
+
         </DiscussionContext.Provider>
       </AppProvider>
     </IntlProvider>,
   );
-}
+};
 
 describe.each([
   {

src/discussions/common/HoverCard.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Button, Icon, IconButton, OverlayTrigger, Tooltip,
 } from '@edx/paragon';
@@ -11,39 +11,44 @@ import {
 import {
   StarFilled, StarOutline, ThumbUpFilled, ThumbUpOutline,
 } from '../../components/icons';
-import { useUserCanAddThreadInBlackoutDate } from '../data/hooks';
-import { commentShape } from '../post-comments/comments/comment/proptypes';
-import { postShape } from '../posts/post/proptypes';
+import { useUserPostingEnabled } from '../data/hooks';
+import { PostCommentsContext } from '../post-comments/postCommentsContext';
 import ActionsDropdown from './ActionsDropdown';
 import { DiscussionContext } from './context';
 
-function HoverCard({
-  intl,
-  commentOrPost,
+const HoverCard = ({
+  id,
+  contentType,
   actionHandlers,
   handleResponseCommentButton,
   addResponseCommentButtonMessage,
   onLike,
   onFollow,
-  isClosedPost,
+  voted,
+  following,
   endorseIcons,
-}) {
+}) => {
+  const intl = useIntl();
   const { enableInContextSidebar } = useContext(DiscussionContext);
-  const userCanAddThreadInBlackoutDate = useUserCanAddThreadInBlackoutDate();
+  const { isClosed } = useContext(PostCommentsContext);
+  const isUserPrivilagedInPostingRestriction = useUserPostingEnabled();
+
   return (
     <div
       className="flex-fill justify-content-end align-items-center hover-card mr-n4 position-absolute"
-      data-testid={`hover-card-${commentOrPost.id}`}
-      id={`hover-card-${commentOrPost.id}`}
+      data-testid={`hover-card-${id}`}
+      id={`hover-card-${id}`}
     >
-      {userCanAddThreadInBlackoutDate && (
+      {isUserPrivilagedInPostingRestriction && (
         <div className="d-flex">
           <Button
             variant="tertiary"
-            className={classNames('px-2.5 py-2 border-0 font-style text-gray-700 font-size-12',
-              { 'w-100': enableInContextSidebar })}
+            className={classNames(
+              'px-2.5 py-2 border-0 font-style text-gray-700 font-size-12',
+              { 'w-100': enableInContextSidebar },
+            )}
             onClick={() => handleResponseCommentButton()}
-            disabled={isClosedPost}
+            disabled={isClosed}
             style={{ lineHeight: '20px' }}
           >
             {addResponseCommentButtonMessage}
@@ -76,7 +81,7 @@ function HoverCard({
       )}
       <div className="hover-button">
         <IconButton
-          src={commentOrPost.voted ? ThumbUpFilled : ThumbUpOutline}
+          src={voted ? ThumbUpFilled : ThumbUpOutline}
           iconAs={Icon}
           size="sm"
           alt="Like"
@@ -87,10 +92,10 @@ function HoverCard({
           }}
         />
       </div>
-      {commentOrPost.following !== undefined && (
+      {following !== undefined && (
         <div className="hover-button">
           <IconButton
-            src={commentOrPost.following ? StarFilled : StarOutline}
+            src={following ? StarFilled : StarOutline}
             iconAs={Icon}
             size="sm"
             alt="Follow"
@@ -103,27 +108,35 @@ function HoverCard({
         </div>
       )}
       <div className="hover-button ml-auto">
-        <ActionsDropdown commentOrPost={commentOrPost} actionHandlers={actionHandlers} dropDownIconSize />
+        <ActionsDropdown
+          id={id}
+          contentType={contentType}
+          actionHandlers={actionHandlers}
+          dropDownIconSize
+        />
       </div>
     </div>
   );
-}
+};
 
 HoverCard.propTypes = {
-  intl: intlShape.isRequired,
-  commentOrPost: PropTypes.oneOfType([commentShape, postShape]).isRequired,
+  id: PropTypes.string.isRequired,
+  contentType: PropTypes.string.isRequired,
   actionHandlers: PropTypes.objectOf(PropTypes.func).isRequired,
   handleResponseCommentButton: PropTypes.func.isRequired,
-  onLike: PropTypes.func.isRequired,
-  onFollow: PropTypes.func,
   addResponseCommentButtonMessage: PropTypes.string.isRequired,
-  isClosedPost: PropTypes.bool.isRequired,
+  onLike: PropTypes.func.isRequired,
+  voted: PropTypes.bool.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
   endorseIcons: PropTypes.objectOf(PropTypes.any),
+  onFollow: PropTypes.func,
+  following: PropTypes.bool,
 };
 
 HoverCard.defaultProps = {
   onFollow: () => null,
   endorseIcons: null,
+  following: undefined,
 };
 
-export default injectIntl(HoverCard);
+export default React.memo(HoverCard);

src/discussions/common/HoverCard.test.jsx

@@ -1,20 +1,22 @@
 import {
-  render, screen, waitFor,
-  within,
+  render, screen, waitFor, within,
 } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
 import { IntlProvider } from 'react-intl';
 import { MemoryRouter, Route } from 'react-router';
 import { Factory } from 'rosie';
 
-import { camelCaseObject, initializeMockApp } from '@edx/frontend-platform';
+import { initializeMockApp } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';
 
 import { initializeStore } from '../../store';
 import { executeThunk } from '../../test-utils';
+import { getCourseConfigApiUrl } from '../data/api';
+import { fetchCourseConfig } from '../data/thunks';
 import DiscussionContent from '../discussions-home/DiscussionContent';
 import { getCommentsApiUrl } from '../post-comments/data/api';
+import { fetchCommentResponses } from '../post-comments/data/thunks';
 import { getThreadsApiUrl } from '../posts/data/api';
 import { fetchThreads } from '../posts/data/thunks';
 import { DiscussionContext } from './context';
@@ -25,61 +27,34 @@ import '../post-comments/data/__factories__';
 const commentsApiUrl = getCommentsApiUrl();
 const threadsApiUrl = getThreadsApiUrl();
 const discussionPostId = 'thread-1';
-const questionPostId = 'thread-2';
 const courseId = 'course-v1:edX+TestX+Test_Course';
-const reverseOrder = true;
-const enableInContextSidebar = false;
 let store;
 let axiosMock;
 let container;
 
-function mockAxiosReturnPagedComments() {
-  [null, false, true].forEach(endorsed => {
-    const postId = endorsed === null ? discussionPostId : questionPostId;
-    [1, 2].forEach(page => {
-      axiosMock
-        .onGet(commentsApiUrl, {
-          params: {
-            thread_id: postId,
-            page,
-            page_size: undefined,
-            requested_fields: 'profile_image',
-            endorsed,
-            reverse_order: reverseOrder,
-            enable_in_context_sidebar: enableInContextSidebar,
-          },
-        })
-        .reply(200, Factory.build('commentsResult', { can_delete: true }, {
-          threadId: postId,
-          page,
-          pageSize: 1,
-          count: 2,
-          endorsed,
-          childCount: page === 1 ? 2 : 0,
-        }));
-    });
-  });
-}
-
-function mockAxiosReturnPagedCommentsResponses() {
+async function mockAxiosReturnPagedCommentsResponses() {
   const parentId = 'comment-1';
   const commentsResponsesApiUrl = `${commentsApiUrl}${parentId}/`;
   const paramsTemplate = {
     page: undefined,
     page_size: undefined,
     requested_fields: 'profile_image',
+    reverse_order: true,
   };
 
-  for (let page = 1; page <= 2; page++) {
-    axiosMock
-      .onGet(commentsResponsesApiUrl, { params: { ...paramsTemplate, page } })
-      .reply(200, Factory.build('commentsResult', null, {
+  [1, 2].forEach(async (page) => {
+    axiosMock.onGet(commentsResponsesApiUrl, { params: { ...paramsTemplate, page } }).reply(
+      200,
+      Factory.build('commentsResult', null, {
         parentId,
         page,
         pageSize: 1,
         count: 2,
-      }));
-  }
+      }),
+    );
+
+    await executeThunk(fetchCommentResponses(parentId), store.dispatch, store.getState);
+  });
 }
 
 function renderComponent(postId) {
@@ -87,7 +62,7 @@ function renderComponent(postId) {
     <IntlProvider locale="en">
       <AppProvider store={store}>
         <DiscussionContext.Provider
-          value={{ courseId }}
+          value={{ courseId, postId }}
         >
           <MemoryRouter initialEntries={[`/${courseId}/posts/${postId}`]}>
             <DiscussionContent />
@@ -104,85 +79,66 @@ function renderComponent(postId) {
 }
 
 describe('HoverCard', () => {
-  beforeEach(() => {
+  beforeEach(async () => {
     initializeMockApp({
       authenticatedUser: {
         userId: 3,
         username: 'abc123',
         administrator: true,
         roles: [],
+        isPostingEnabled: true,
       },
     });
 
     store = initializeStore();
     Factory.resetAll();
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-    axiosMock.onGet(threadsApiUrl)
-      .reply(200, Factory.build('threadsResult'));
-    axiosMock.onPatch(new RegExp(`${commentsApiUrl}*`)).reply(({
-      url,
-      data,
-    }) => {
-      const commentId = url.match(/comments\/(?<id>[a-z1-9-]+)\//).groups.id;
-      const {
-        rawBody,
-      } = camelCaseObject(JSON.parse(data));
-      return [200, Factory.build('comment', {
-        id: commentId,
-        rendered_body: rawBody,
-        raw_body: rawBody,
-      })];
-    });
-    axiosMock.onPost(commentsApiUrl)
-      .reply(({ data }) => {
-        const {
-          rawBody,
-          threadId,
-        } = camelCaseObject(JSON.parse(data));
-        return [200, Factory.build(
-          'comment',
-          {
-            rendered_body: rawBody,
-            raw_body: rawBody,
-            thread_id: threadId,
-          },
-        )];
-      });
+    axiosMock.onGet(threadsApiUrl).reply(200, Factory.build('threadsResult'));
+    axiosMock.onGet(`${getCourseConfigApiUrl()}${courseId}/`).reply(200, { isPostingEnabled: true });
+    axiosMock.onGet(commentsApiUrl).reply(200, Factory.build('commentsResult', { can_delete: true }, {
+      threadId: discussionPostId,
+      endorsed: false,
+      pageSize: 1,
+      count: 2,
+      childCount: 2,
+    }));
 
-    executeThunk(fetchThreads(courseId), store.dispatch, store.getState);
-    mockAxiosReturnPagedComments();
-    mockAxiosReturnPagedCommentsResponses();
+    await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
+    await executeThunk(fetchThreads(courseId), store.dispatch, store.getState);
+    await mockAxiosReturnPagedCommentsResponses();
   });
 
   test('it should have hover card on post', async () => {
-    renderComponent(discussionPostId);
+    await waitFor(() => renderComponent(discussionPostId));
     const post = screen.getByTestId('post-thread-1');
     expect(within(post).getByTestId('hover-card-thread-1')).toBeInTheDocument();
   });
 
   test('it should have hover card on comment', async () => {
-    renderComponent(discussionPostId);
+    await waitFor(() => renderComponent(discussionPostId));
     const comment = await waitFor(() => screen.findByTestId('comment-comment-1'));
     expect(within(comment).getByTestId('hover-card-comment-1')).toBeInTheDocument();
   });
 
   test('it should show add response, like, follow and actions menu for hovered post', async () => {
-    renderComponent(discussionPostId);
+    await waitFor(() => renderComponent(discussionPostId));
     const post = screen.getByTestId('post-thread-1');
-    const view = within(post).getByTestId('hover-card-thread-1');
-    expect(within(view).queryByRole('button', { name: /Add response/i })).toBeInTheDocument();
-    expect(within(view).getByRole('button', { name: /like/i })).toBeInTheDocument();
-    expect(within(view).queryByRole('button', { name: /follow/i })).toBeInTheDocument();
-    expect(within(view).queryByRole('button', { name: /actions menu/i })).toBeInTheDocument();
+    const hoverCard = within(post).getByTestId('hover-card-thread-1');
+
+    expect(within(hoverCard).queryByRole('button', { name: /Add response/i })).toBeInTheDocument();
+    expect(within(hoverCard).getByRole('button', { name: /like/i })).toBeInTheDocument();
+    expect(within(hoverCard).queryByRole('button', { name: /follow/i })).toBeInTheDocument();
+    expect(within(hoverCard).queryByRole('button', { name: /actions menu/i })).toBeInTheDocument();
   });
 
   test('it should show add comment, Endorse, like and actions menu Buttons for hovered comment', async () => {
-    renderComponent(questionPostId);
-    const comment = await waitFor(() => screen.findByTestId('comment-comment-3'));
-    const view = within(comment).getByTestId('hover-card-comment-3');
-    expect(within(view).queryByRole('button', { name: /Add comment/i })).toBeInTheDocument();
-    expect(within(view).getByRole('button', { name: /Endorse/i })).toBeInTheDocument();
-    expect(within(view).queryByRole('button', { name: /like/i })).toBeInTheDocument();
-    expect(within(view).queryByRole('button', { name: /actions menu/i })).toBeInTheDocument();
+    await waitFor(() => renderComponent(discussionPostId));
+    const comment = await waitFor(() => screen.findByTestId('comment-comment-1'));
+    const hoverCard = within(comment).getByTestId('hover-card-comment-1');
+
+    expect(within(hoverCard).queryByRole('button', { name: /Add comment/i })).toBeInTheDocument();
+    expect(within(hoverCard).getByRole('button', { name: /Endorse/i })).toBeInTheDocument();
+    expect(within(hoverCard).queryByRole('button', { name: /like/i })).toBeInTheDocument();
+    expect(within(hoverCard).queryByRole('button', { name: /actions menu/i })).toBeInTheDocument();
   });
 });

src/discussions/data/constants.js

@@ -0,0 +1,12 @@
+import { selectCommentOrResponseById } from '../post-comments/data/selectors';
+import { selectThread } from '../posts/data/selectors';
+
+export const ContentSelectors = {
+  POST: selectThread,
+  COMMENT: selectCommentOrResponseById,
+};
+
+export const ContentTypes = {
+  POST: 'POST',
+  COMMENT: 'COMMENT',
+};

src/discussions/data/hooks.js

@@ -1,15 +1,13 @@
-/* eslint-disable import/prefer-default-export */
 import {
-  useContext,
-  useEffect,
-  useRef,
-  useState,
+  useCallback,
+  useContext, useEffect, useMemo, useRef, useState,
 } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation, useRouteMatch } from 'react-router';
 
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
 import { breakpoints, useWindowSize } from '@edx/paragon';
 
@@ -24,13 +22,13 @@ import tourCheckpoints from '../tours/constants';
 import { selectTours } from '../tours/data/selectors';
 import { updateTourShowStatus } from '../tours/data/thunks';
 import messages from '../tours/messages';
-import { discussionsPath, inBlackoutDateRange } from '../utils';
+import { discussionsPath } from '../utils';
 import {
   selectAreThreadsFiltered,
-  selectBlackoutDate,
   selectEnableInContext,
   selectIsCourseAdmin,
   selectIsCourseStaff,
+  selectIsPostingEnabled,
   selectLearnersTabEnabled,
   selectModerationSettings,
   selectPostThreadCount,
@@ -42,16 +40,16 @@ import { fetchCourseConfig } from './thunks';
 
 export function useTotalTopicThreadCount() {
   const topics = useSelector(selectTopics);
+  const count = useMemo(
+    () => (
+      Object.keys(topics)?.reduce((total, topicId) => {
+        const topic = topics[topicId];
+        return total + topic.threadCounts.discussion + topic.threadCounts.question;
+      }, 0)),
+    [],
+  );
 
-  if (!topics) {
-    return 0;
-  }
-
-  return Object.keys(topics)
-    .reduce((total, topicId) => {
-      const topic = topics[topicId];
-      return total + topic.threadCounts.discussion + topic.threadCounts.question;
-    }, 0);
+  return count;
 }
 
 export const useSidebarVisible = () => {
@@ -87,13 +85,14 @@ export function useCourseDiscussionData(courseId) {
 
 export function useRedirectToThread(courseId, enableInContextSidebar) {
   const dispatch = useDispatch();
-  const redirectToThread = useSelector(
-    (state) => state.threads.redirectToThread,
-  );
   const history = useHistory();
   const location = useLocation();
 
-  return useEffect(() => {
+  const redirectToThread = useSelector(
+    (state) => state.threads.redirectToThread,
+  );
+
+  useEffect(() => {
     // After posting a new thread we'd like to redirect users to it, the topic and post id are temporarily
     // stored in redirectToThread
     if (redirectToThread) {
@@ -153,17 +152,20 @@ export function useContainerSize(refContainer) {
   return height;
 }
 
-export const useAlertBannerVisible = (content) => {
+export const useAlertBannerVisible = (
+  {
+    author, abuseFlagged, lastEdit, closed,
+  } = {},
+) => {
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
   const userIsGroupTa = useSelector(selectUserIsGroupTa);
   const { reasonCodesEnabled } = useSelector(selectModerationSettings);
-  const userIsContentAuthor = getAuthenticatedUser().username === content.author;
+  const userIsContentAuthor = getAuthenticatedUser().username === author;
   const canSeeLastEditOrClosedAlert = (userHasModerationPrivileges || userIsContentAuthor || userIsGroupTa);
-  const canSeeReportedBanner = content.abuseFlagged;
+  const canSeeReportedBanner = abuseFlagged;
 
   return (
-    (reasonCodesEnabled && canSeeLastEditOrClosedAlert && (content.lastEdit?.reason || content.closed))
-    || (content.abuseFlagged && canSeeReportedBanner)
+    (reasonCodesEnabled && canSeeLastEditOrClosedAlert && (lastEdit?.reason || closed)) || (canSeeReportedBanner)
   );
 };
 
@@ -190,41 +192,52 @@ export const useCurrentDiscussionTopic = () => {
   return null;
 };
 
-export const useUserCanAddThreadInBlackoutDate = () => {
-  const blackoutDateRange = useSelector(selectBlackoutDate);
+export const useUserPostingEnabled = () => {
+  const isPostingEnabled = useSelector(selectIsPostingEnabled);
   const isUserAdmin = useSelector(selectUserIsStaff);
-  const userHasModerationPrivilages = useSelector(selectUserHasModerationPrivileges);
+  const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
   const isUserGroupTA = useSelector(selectUserIsGroupTa);
   const isCourseAdmin = useSelector(selectIsCourseAdmin);
   const isCourseStaff = useSelector(selectIsCourseStaff);
-  const isInBlackoutDateRange = inBlackoutDateRange(blackoutDateRange);
+  const isPrivileged = isUserAdmin || userHasModerationPrivileges || isUserGroupTA || isCourseAdmin || isCourseStaff;
 
-  return (!(isInBlackoutDateRange)
-    || (isUserAdmin || userHasModerationPrivilages || isUserGroupTA || isCourseAdmin || isCourseStaff));
+  return (isPostingEnabled || isPrivileged);
 };
 
 function camelToConstant(string) {
   return string.replace(/[A-Z]/g, (match) => `_${match}`).toUpperCase();
 }
 
-export const useTourConfiguration = (intl) => {
+export const useTourConfiguration = () => {
+  const intl = useIntl();
   const dispatch = useDispatch();
-
   const { enableInContextSidebar } = useContext(DiscussionContext);
   const tours = useSelector(selectTours);
 
-  return tours.map((tour) => (
-    {
-      tourId: tour.tourName,
-      advanceButtonText: intl.formatMessage(messages.advanceButtonText),
-      dismissButtonText: intl.formatMessage(messages.dismissButtonText),
-      endButtonText: intl.formatMessage(messages.endButtonText),
-      enabled: tour && Boolean(tour.enabled && tour.showTour && !enableInContextSidebar),
-      onDismiss: () => dispatch(updateTourShowStatus(tour.id)),
-      onEnd: () => dispatch(updateTourShowStatus(tour.id)),
-      checkpoints: tourCheckpoints(intl)[camelToConstant(tour.tourName)],
-    }
-  ));
+  const handleOnDismiss = useCallback((id) => (
+    dispatch(updateTourShowStatus(id))
+  ), []);
+
+  const handleOnEnd = useCallback((id) => (
+    dispatch(updateTourShowStatus(id))
+  ), []);
+
+  const toursConfig = useMemo(() => (
+    tours?.map((tour) => Object.keys(tourCheckpoints(intl)).includes(tour.tourName) && (
+      {
+        tourId: tour.tourName,
+        advanceButtonText: intl.formatMessage(messages.advanceButtonText),
+        dismissButtonText: intl.formatMessage(messages.dismissButtonText),
+        endButtonText: intl.formatMessage(messages.endButtonText),
+        enabled: tour && Boolean(tour.enabled && tour.showTour && !enableInContextSidebar),
+        onDismiss: () => handleOnDismiss(tour.id),
+        onEnd: () => handleOnEnd(tour.id),
+        checkpoints: tourCheckpoints(intl)[camelToConstant(tour.tourName)],
+      }
+    ))
+  ), [tours, enableInContextSidebar]);
+
+  return toursConfig;
 };
 
 export const useDebounce = (value, delay) => {

src/discussions/data/hooks.test.jsx

@@ -11,7 +11,7 @@ import { initializeStore } from '../../store';
 import { executeThunk } from '../../test-utils';
 import { DiscussionContext } from '../common/context';
 import { getCourseConfigApiUrl } from './api';
-import { useCurrentDiscussionTopic, useUserCanAddThreadInBlackoutDate } from './hooks';
+import { useCurrentDiscussionTopic, useUserPostingEnabled } from './hooks';
 import { fetchCourseConfig } from './thunks';
 
 const courseId = 'course-v1:edX+TestX+Test_Course';
@@ -19,8 +19,8 @@ const courseConfigApiUrl = getCourseConfigApiUrl();
 let store;
 let axiosMock;
 
-const generateApiResponse = (blackouts = [], isCourseAdmin = false) => ({
-  blackouts,
+const generateApiResponse = (isPostingEnabled, isCourseAdmin = false) => ({
+  isPostingEnabled,
   hasModerationPrivileges: false,
   isGroupTa: false,
   isCourseAdmin,
@@ -30,14 +30,14 @@ const generateApiResponse = (blackouts = [], isCourseAdmin = false) => ({
 
 describe('Hooks', () => {
   describe('useCurrentDiscussionTopic', () => {
-    function ComponentWithHook() {
+    const ComponentWithHook = () => {
       const topic = useCurrentDiscussionTopic();
       return (
         <div>
           {String(topic)}
         </div>
       );
-    }
+    };
 
     function renderComponent({ topicId, category }) {
       return render(
@@ -102,15 +102,15 @@ describe('Hooks', () => {
     });
   });
 
-  describe('useUserCanAddThreadInBlackoutDate', () => {
-    function ComponentWithHook() {
-      const userCanAddThreadInBlackoutDate = useUserCanAddThreadInBlackoutDate();
+  describe('useUserPostingEnabled', () => {
+    const ComponentWithHook = () => {
+      const isUserPrivilagedInPostingRestriction = useUserPostingEnabled();
       return (
         <div>
-          {String(userCanAddThreadInBlackoutDate)}
+          {String(isUserPrivilagedInPostingRestriction)}
         </div>
       );
-    }
+    };
 
     function renderComponent() {
       return render(
@@ -121,7 +121,7 @@ describe('Hooks', () => {
         </IntlProvider>,
       );
     }
-    describe('User can add Thread in blackoutdates ', () => {
+    describe('User can add Thread in Posting Restrictions ', () => {
       beforeEach(() => {
         initializeMockApp({
           authenticatedUser: {
@@ -136,37 +136,34 @@ describe('Hooks', () => {
         store = initializeStore();
       });
 
-      test('when blackoutdates are not active and Role is Learner return true', async () => {
+      test('when posting is not disabled and Role is Learner return true', async () => {
         axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
-          .reply(200, generateApiResponse([], false));
+          .reply(200, generateApiResponse(true, false));
         await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
         const { queryByText } = renderComponent();
         expect(queryByText('true')).toBeInTheDocument();
       });
 
-      test('when blackoutdates are not active and Role is not Learner return true', async () => {
+      test('when posting is not disabled and Role is not Learner return true', async () => {
         axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
-          .reply(200, generateApiResponse([], true));
+          .reply(200, generateApiResponse(true, true));
         await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
         const { queryByText } = renderComponent();
         expect(queryByText('true')).toBeInTheDocument();
       });
 
-      test('when blackoutdates are active and Role is Learner return false', async () => {
+      test('when posting is disabled and Role is Learner return false', async () => {
         axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
-          .reply(200, generateApiResponse([{
-            start: '2022-11-25T00:00:00Z',
-            end: '2050-11-25T23:59:00Z',
-          }], false));
+          .reply(200, generateApiResponse(false, false));
         await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
         const { queryByText } = renderComponent();
         expect(queryByText('false')).toBeInTheDocument();
       });
 
-      test('when blackoutdates are active and Role is not Learner return true', async () => {
+      test('when posting is not disabled and Role is not Learner return true', async () => {
         axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
-          .reply(200, generateApiResponse([
-            { start: '2022-11-25T00:00:00Z', end: '2050-11-25T23:59:00Z' }], true));
+          .reply(200, generateApiResponse(false, true));
+        await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
         const { queryByText } = renderComponent();
         expect(queryByText('true')).toBeInTheDocument();
       });

src/discussions/data/selectors.js

@@ -20,8 +20,6 @@ export const selectUserRoles = state => state.config.userRoles;
 
 export const selectDivisionSettings = state => state.config.settings;
 
-export const selectBlackoutDate = state => state.config.blackouts;
-
 export const selectGroupAtSubsection = state => state.config.groupAtSubsection;
 
 export const selectIsCourseAdmin = state => state.config.isCourseAdmin;
@@ -30,6 +28,8 @@ export const selectIsCourseStaff = state => state.config.isCourseStaff;
 
 export const selectEnableInContext = state => state.config.enableInContext;
 
+export const selectIsPostingEnabled = state => state.config.isPostingEnabled;
+
 export const selectModerationSettings = state => ({
   postCloseReasons: state.config.postCloseReasons,
   editReasons: state.config.editReasons,

src/discussions/data/slices.js

@@ -7,7 +7,6 @@ const configSlice = createSlice({
   name: 'config',
   initialState: {
     status: RequestStatus.IN_PROGRESS,
-    blackouts: [],
     allowAnonymous: false,
     allowAnonymousToPeers: false,
     userRoles: [],
@@ -18,6 +17,7 @@ const configSlice = createSlice({
     isCourseStaff: false,
     isUserAdmin: false,
     learnersTabEnabled: false,
+    isPostingEnabled: false,
     settings: {
       divisionScheme: 'none',
       alwaysDivideInlineDiscussions: false,

src/discussions/discussions-home/BlackoutInformationBanner.jsx

@@ -1,36 +0,0 @@
-import React, { useState } from 'react';
-
-import { useSelector } from 'react-redux';
-
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { PageBanner } from '@edx/paragon';
-
-import { selectBlackoutDate } from '../data/selectors';
-import messages from '../messages';
-import { inBlackoutDateRange } from '../utils';
-
-function BlackoutInformationBanner({
-  intl,
-}) {
-  const isDiscussionsBlackout = inBlackoutDateRange(useSelector(selectBlackoutDate));
-  const [showBanner, setShowBanner] = useState(true);
-
-  return (
-    <PageBanner
-      variant="accentB"
-      show={isDiscussionsBlackout && showBanner}
-      dismissible
-      onDismiss={() => setShowBanner(false)}
-    >
-      <div className="font-weight-500">
-        {intl.formatMessage(messages.blackoutDiscussionInformation)}
-      </div>
-    </PageBanner>
-  );
-}
-
-BlackoutInformationBanner.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(BlackoutInformationBanner);

src/discussions/discussions-home/DiscussionContent.jsx

@@ -1,37 +1,39 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 
 import { useSelector } from 'react-redux';
 import { Route, Switch } from 'react-router';
 
-import { injectIntl } from '@edx/frontend-platform/i18n';
-
+import Spinner from '../../components/Spinner';
 import { Routes } from '../../data/constants';
-import { PostCommentsView } from '../post-comments';
-import { PostEditor } from '../posts';
 
-function DiscussionContent() {
+const PostEditor = lazy(() => import('../posts/post-editor/PostEditor'));
+const PostCommentsView = lazy(() => import('../post-comments/PostCommentsView'));
+
+const DiscussionContent = () => {
   const postEditorVisible = useSelector((state) => state.threads.postEditorVisible);
 
   return (
     <div className="d-flex bg-light-400 flex-column w-75 w-xs-100 w-xl-75 align-items-center">
       <div className="d-flex flex-column w-100">
-        {postEditorVisible ? (
-          <Route path={Routes.POSTS.NEW_POST}>
-            <PostEditor />
-          </Route>
-        ) : (
-          <Switch>
-            <Route path={Routes.POSTS.EDIT_POST}>
-              <PostEditor editExisting />
+        <Suspense fallback={(<Spinner />)}>
+          {postEditorVisible ? (
+            <Route path={Routes.POSTS.NEW_POST}>
+              <PostEditor />
             </Route>
-            <Route path={Routes.COMMENTS.PATH}>
-              <PostCommentsView />
-            </Route>
-          </Switch>
-        )}
+          ) : (
+            <Switch>
+              <Route path={Routes.POSTS.EDIT_POST}>
+                <PostEditor editExisting />
+              </Route>
+              <Route path={Routes.COMMENTS.PATH}>
+                <PostCommentsView />
+              </Route>
+            </Switch>
+          )}
+        </Suspense>
       </div>
     </div>
   );
-}
+};
 
-export default injectIntl(DiscussionContent);
+export default DiscussionContent;

src/discussions/discussions-home/DiscussionSidebar.jsx

@@ -1,4 +1,6 @@
-import React, { useContext, useEffect, useRef } from 'react';
+import React, {
+  lazy, Suspense, useContext, useEffect, useRef,
+} from 'react';
 import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
@@ -9,18 +11,22 @@ import {
 
 import { useWindowSize } from '@edx/paragon';
 
+import Spinner from '../../components/Spinner';
 import { RequestStatus, Routes } from '../../data/constants';
 import { DiscussionContext } from '../common/context';
 import {
   useContainerSize, useIsOnDesktop, useIsOnXLDesktop, useShowLearnersTab,
 } from '../data/hooks';
 import { selectconfigLoadingStatus, selectEnableInContext } from '../data/selectors';
-import { TopicPostsView, TopicsView as InContextTopicsView } from '../in-context-topics';
-import { LearnerPostsView, LearnersView } from '../learners';
-import { PostsView } from '../posts';
-import { TopicsView as LegacyTopicsView } from '../topics';
 
-export default function DiscussionSidebar({ displaySidebar, postActionBarRef }) {
+const TopicPostsView = lazy(() => import('../in-context-topics/TopicPostsView'));
+const InContextTopicsView = lazy(() => import('../in-context-topics/TopicsView'));
+const LearnerPostsView = lazy(() => import('../learners/LearnerPostsView'));
+const LearnersView = lazy(() => import('../learners/LearnersView'));
+const PostsView = lazy(() => import('../posts/PostsView'));
+const LegacyTopicsView = lazy(() => import('../topics/TopicsView'));
+
+const DiscussionSidebar = ({ displaySidebar, postActionBarRef }) => {
   const location = useLocation();
   const isOnDesktop = useIsOnDesktop();
   const isOnXLDesktop = useIsOnXLDesktop();
@@ -55,15 +61,16 @@ export default function DiscussionSidebar({ displaySidebar, postActionBarRef })
       })}
       data-testid="sidebar"
     >
-      <Switch>
-        {enableInContext && !enableInContextSidebar && (
+      <Suspense fallback={(<Spinner />)}>
+        <Switch>
+          {enableInContext && !enableInContextSidebar && (
           <Route
             path={Routes.TOPICS.ALL}
             component={InContextTopicsView}
             exact
           />
-        )}
-        {enableInContext && !enableInContextSidebar && (
+          )}
+          {enableInContext && !enableInContextSidebar && (
           <Route
             path={[
               Routes.TOPICS.TOPIC,
@@ -74,19 +81,19 @@ export default function DiscussionSidebar({ displaySidebar, postActionBarRef })
             component={TopicPostsView}
             exact
           />
-        )}
-        <Route
-          path={[Routes.POSTS.ALL_POSTS, Routes.POSTS.MY_POSTS, Routes.POSTS.PATH, Routes.TOPICS.CATEGORY]}
-          component={PostsView}
-        />
-        <Route path={Routes.TOPICS.PATH} component={LegacyTopicsView} />
-        {redirectToLearnersTab && (
+          )}
+          <Route
+            path={[Routes.POSTS.ALL_POSTS, Routes.POSTS.MY_POSTS, Routes.POSTS.PATH, Routes.TOPICS.CATEGORY]}
+            component={PostsView}
+          />
+          <Route path={Routes.TOPICS.PATH} component={LegacyTopicsView} />
+          {redirectToLearnersTab && (
           <Route path={Routes.LEARNERS.POSTS} component={LearnerPostsView} />
-        )}
-        {redirectToLearnersTab && (
+          )}
+          {redirectToLearnersTab && (
           <Route path={Routes.LEARNERS.PATH} component={LearnersView} />
-        )}
-        {configStatus === RequestStatus.SUCCESSFUL && (
+          )}
+          {configStatus === RequestStatus.SUCCESSFUL && (
           <Redirect
             from={Routes.DISCUSSIONS.PATH}
             to={{
@@ -94,15 +101,11 @@ export default function DiscussionSidebar({ displaySidebar, postActionBarRef })
               pathname: Routes.POSTS.ALL_POSTS,
             }}
           />
-        )}
-      </Switch>
+          )}
+        </Switch>
+      </Suspense>
     </div>
   );
-}
-
-DiscussionSidebar.defaultProps = {
-  displaySidebar: false,
-  postActionBarRef: null,
 };
 
 DiscussionSidebar.propTypes = {
@@ -112,3 +115,10 @@ DiscussionSidebar.propTypes = {
     PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
   ]),
 };
+
+DiscussionSidebar.defaultProps = {
+  displaySidebar: false,
+  postActionBarRef: null,
+};
+
+export default React.memo(DiscussionSidebar);

src/discussions/discussions-home/DiscussionsHome.jsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef } from 'react';
+/* eslint-disable react/jsx-no-constructed-context-values */
+import React, { lazy, Suspense, useRef } from 'react';
 
 import classNames from 'classnames';
 import { useSelector } from 'react-redux';
@@ -6,12 +7,9 @@ import {
   Route, Switch, useLocation, useRouteMatch,
 } from 'react-router';
 
-import Footer from '@edx/frontend-component-footer';
 import { LearningHeader as Header } from '@edx/frontend-component-header';
-import { getConfig } from '@edx/frontend-platform';
 
-import { PostActionsBar } from '../../components';
-import { CourseTabsNavigation } from '../../components/NavigationBar';
+import { Spinner } from '../../components';
 import { selectCourseTabs } from '../../components/NavigationBar/data/selectors';
 import { ALL_ROUTES, DiscussionProvider, Routes } from '../../data/constants';
 import { DiscussionContext } from '../common/context';
@@ -22,17 +20,20 @@ import { selectDiscussionProvider, selectEnableInContext } from '../data/selecto
 import { EmptyLearners, EmptyPosts, EmptyTopics } from '../empty-posts';
 import { EmptyTopic as InContextEmptyTopics } from '../in-context-topics/components';
 import messages from '../messages';
-import { LegacyBreadcrumbMenu, NavigationBar } from '../navigation';
 import { selectPostEditorVisible } from '../posts/data/selectors';
-import DiscussionsProductTour from '../tours/DiscussionsProductTour';
-import { postMessageToParent } from '../utils';
-import BlackoutInformationBanner from './BlackoutInformationBanner';
-import DiscussionContent from './DiscussionContent';
-import DiscussionSidebar from './DiscussionSidebar';
 import useFeedbackWrapper from './FeedbackWrapper';
-import InformationBanner from './InformationBanner';
 
-export default function DiscussionsHome() {
+const Footer = lazy(() => import('@edx/frontend-component-footer'));
+const PostActionsBar = lazy(() => import('../posts/post-actions-bar/PostActionsBar'));
+const CourseTabsNavigation = lazy(() => import('../../components/NavigationBar/CourseTabsNavigation'));
+const LegacyBreadcrumbMenu = lazy(() => import('../navigation/breadcrumb-menu/LegacyBreadcrumbMenu'));
+const NavigationBar = lazy(() => import('../navigation/navigation-bar/NavigationBar'));
+const DiscussionsProductTour = lazy(() => import('../tours/DiscussionsProductTour'));
+const DiscussionsRestrictionBanner = lazy(() => import('./DiscussionsRestrictionBanner'));
+const DiscussionContent = lazy(() => import('./DiscussionContent'));
+const DiscussionSidebar = lazy(() => import('./DiscussionSidebar'));
+
+const DiscussionsHome = () => {
   const location = useLocation();
   const postActionBarRef = useRef(null);
   const postEditorVisible = useSelector(selectPostEditorVisible);
@@ -40,13 +41,11 @@ export default function DiscussionsHome() {
   const enableInContext = useSelector(selectEnableInContext);
   const { courseNumber, courseTitle, org } = useSelector(selectCourseTabs);
   const { params: { page } } = useRouteMatch(`${Routes.COMMENTS.PAGE}?`);
-  const { params: { path } } = useRouteMatch(`${Routes.DISCUSSIONS.PATH}/:path*`);
   const { params } = useRouteMatch(ALL_ROUTES);
   const isRedirectToLearners = useShowLearnersTab();
   const isOnDesktop = useIsOnDesktop();
   let displaySidebar = useSidebarVisible();
   const enableInContextSidebar = Boolean(new URLSearchParams(location.search).get('inContextSidebar') !== null);
-  const isFeedbackBannerVisible = getConfig().DISPLAY_FEEDBACK_BANNER === 'true';
   const {
     courseId, postId, topicId, category, learnerUsername,
   } = params;
@@ -60,54 +59,59 @@ export default function DiscussionsHome() {
   const displayContentArea = (postId || postEditorVisible || (learnerUsername && postId));
   if (displayContentArea) { displaySidebar = isOnDesktop; }
 
-  useEffect(() => {
-    if (path && path !== 'undefined') {
-      postMessageToParent('discussions.navigate', { path });
-    }
-  }, [path]);
-
   return (
-    <DiscussionContext.Provider value={{
-      page,
-      courseId,
-      postId,
-      topicId,
-      enableInContextSidebar,
-      category,
-      learnerUsername,
-    }}
-    >
-      {!enableInContextSidebar && <Header courseOrg={org} courseNumber={courseNumber} courseTitle={courseTitle} />}
-      <main className="container-fluid d-flex flex-column p-0 w-100" id="main" tabIndex="-1">
-        {!enableInContextSidebar && <CourseTabsNavigation activeTab="discussion" courseId={courseId} />}
-        <div
-          className={classNames('header-action-bar', {
-            'shadow-none border-light-300 border-bottom': enableInContextSidebar,
-          })}
-          ref={postActionBarRef}
-        >
-          <div
-            className={classNames('d-flex flex-row justify-content-between navbar fixed-top', {
-              'pl-4 pr-3 py-0': enableInContextSidebar,
-            })}
-          >
-            {!enableInContextSidebar && <Route path={Routes.DISCUSSIONS.PATH} component={NavigationBar} />}
-            <PostActionsBar />
-          </div>
-          {isFeedbackBannerVisible && <InformationBanner />}
-          <BlackoutInformationBanner />
-        </div>
-        {provider === DiscussionProvider.LEGACY && (
-          <Route
-            path={[Routes.POSTS.PATH, Routes.TOPICS.CATEGORY]}
-            component={LegacyBreadcrumbMenu}
-          />
+    <Suspense fallback={(<Spinner />)}>
+      <DiscussionContext.Provider value={{
+        page,
+        courseId,
+        postId,
+        topicId,
+        enableInContextSidebar,
+        category,
+        learnerUsername,
+      }}
+      >
+        {!enableInContextSidebar && (
+          <Header courseOrg={org} courseNumber={courseNumber} courseTitle={courseTitle} />
         )}
-
-        <div className="d-flex flex-row">
-          <DiscussionSidebar displaySidebar={displaySidebar} postActionBarRef={postActionBarRef} />
-          {displayContentArea && <DiscussionContent />}
-          {!displayContentArea && (
+        <main className="container-fluid d-flex flex-column p-0 w-100" id="main" tabIndex="-1">
+          {!enableInContextSidebar && <CourseTabsNavigation activeTab="discussion" courseId={courseId} />}
+          <div
+            className={classNames('header-action-bar', {
+              'shadow-none border-light-300 border-bottom': enableInContextSidebar,
+            })}
+            ref={postActionBarRef}
+          >
+            <div
+              className={classNames('d-flex flex-row justify-content-between navbar fixed-top', {
+                'pl-4 pr-3 py-0': enableInContextSidebar,
+              })}
+            >
+              {!enableInContextSidebar && (
+                <NavigationBar />
+              )}
+              <PostActionsBar />
+            </div>
+            <DiscussionsRestrictionBanner />
+          </div>
+          {provider === DiscussionProvider.LEGACY && (
+          <Suspense fallback={(<Spinner />)}>
+            <Route
+              path={[Routes.POSTS.PATH, Routes.TOPICS.CATEGORY]}
+              component={LegacyBreadcrumbMenu}
+            />
+          </Suspense>
+          )}
+          <div className="d-flex flex-row position-relative">
+            <Suspense fallback={(<Spinner />)}>
+              <DiscussionSidebar displaySidebar={displaySidebar} postActionBarRef={postActionBarRef} />
+            </Suspense>
+            {displayContentArea && (
+              <Suspense fallback={(<Spinner />)}>
+                <DiscussionContent />
+              </Suspense>
+            )}
+            {!displayContentArea && (
             <Switch>
               <Route
                 path={Routes.TOPICS.PATH}
@@ -123,11 +127,16 @@ export default function DiscussionsHome() {
               />
               {isRedirectToLearners && <Route path={Routes.LEARNERS.PATH} component={EmptyLearners} />}
             </Switch>
+            )}
+          </div>
+          {!enableInContextSidebar && (
+            <DiscussionsProductTour />
           )}
-        </div>
-        {!enableInContextSidebar && <DiscussionsProductTour />}
-      </main>
-      {!enableInContextSidebar && <Footer />}
-    </DiscussionContext.Provider>
+        </main>
+        {!enableInContextSidebar && <Footer />}
+      </DiscussionContext.Provider>
+    </Suspense>
   );
-}
+};
+
+export default React.memo(DiscussionsHome);

src/discussions/discussions-home/DiscussionsHome.test.jsx

@@ -127,7 +127,7 @@ describe('DiscussionsHome', () => {
 
   test('header, course navigation bar and footer are only visible in Discussions MFE', async () => {
     renderComponent();
-    expect(screen.queryByRole('banner')).toBeInTheDocument();
+    waitFor(() => expect(screen.queryByRole('banner')).toBeInTheDocument());
     expect(document.getElementById('courseTabsNavigation')).toBeInTheDocument();
     expect(screen.queryByRole('contentinfo')).toBeInTheDocument();
   });
@@ -172,7 +172,8 @@ describe('DiscussionsHome', () => {
   it.each([
     { searchByEndPoint: 'category/section-topic-1' },
     { searchByEndPoint: 'topics' },
-  ])('should display No Topic selected message on inContext topic pages when user has yet to select a topic %s',
+  ])(
+    'should display No Topic selected message on inContext topic pages when user has yet to select a topic %s',
     async ({ searchByEndPoint }) => {
       axiosMock.onGet(getDiscussionsConfigUrl(courseId)).reply(200, {
         enableInContext: true, provider: 'openedx', hasModerationPrivileges: true,
@@ -193,7 +194,8 @@ describe('DiscussionsHome', () => {
       await renderComponent(`/${courseId}/${searchByEndPoint}`);
 
       expect(screen.queryByText('No topic selected')).toBeInTheDocument();
-    });
+    },
+  );
 
   it('should display empty page message for empty learners list', async () => {
     axiosMock.onGet(getDiscussionsConfigUrl(courseId)).reply(200, {

src/discussions/discussions-home/DiscussionsRestrictionBanner.jsx

@@ -0,0 +1,36 @@
+import React, { useCallback, useState } from 'react';
+
+import { useSelector } from 'react-redux';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { PageBanner } from '@edx/paragon';
+
+import { RequestStatus } from '../../data/constants';
+import { selectconfigLoadingStatus, selectIsPostingEnabled } from '../data/selectors';
+import messages from '../messages';
+
+const DiscussionsRestrictionBanner = () => {
+  const intl = useIntl();
+  const isPostingEnabled = useSelector(selectIsPostingEnabled);
+  const configLoadingStatus = useSelector(selectconfigLoadingStatus);
+  const [showBanner, setShowBanner] = useState(true);
+
+  const handleDismiss = useCallback(() => {
+    setShowBanner(false);
+  }, []);
+
+  return (
+    <PageBanner
+      variant="accentB"
+      show={!isPostingEnabled && showBanner && configLoadingStatus === RequestStatus.SUCCESSFUL}
+      dismissible
+      onDismiss={handleDismiss}
+    >
+      <div className="font-weight-500">
+        {intl.formatMessage(messages.blackoutDiscussionInformation)}
+      </div>
+    </PageBanner>
+  );
+};
+
+export default DiscussionsRestrictionBanner;

src/discussions/discussions-home/DiscussionsRestrictionBanner.test.jsx

@@ -8,7 +8,7 @@ import { initializeStore } from '../../store';
 import { DiscussionContext } from '../common/context';
 import { fetchConfigSuccess } from '../data/slices';
 import messages from '../messages';
-import BlackoutInformationBanner from './BlackoutInformationBanner';
+import DiscussionsRestrictionBanner from './DiscussionsRestrictionBanner';
 
 let store;
 let container;
@@ -20,13 +20,13 @@ activeEndDate.setDate(activeEndDate.getDate() + 2);
 activeStartDate = activeStartDate.toISOString();
 activeEndDate = activeEndDate.toISOString();
 
-const getConfigData = (blackouts = []) => ({
+const getConfigData = (isPostingEnabled) => ({
   id: 'course-v1:edX+DemoX+Demo_Course',
   userRoles: ['Admin', 'Student'],
   hasModerationPrivileges: false,
   isGroupTa: false,
   isUserAdmin: false,
-  blackouts,
+  isPostingEnabled,
 });
 
 function renderComponent() {
@@ -34,7 +34,7 @@ function renderComponent() {
     <IntlProvider locale="en">
       <AppProvider store={store}>
         <DiscussionContext.Provider value={{ courseId }}>
-          <BlackoutInformationBanner />
+          <DiscussionsRestrictionBanner />
         </DiscussionContext.Provider>
       </AppProvider>
     </IntlProvider>,
@@ -43,7 +43,7 @@ function renderComponent() {
   return container;
 }
 
-describe('Blackout Information Banner', () => {
+describe('Discussions Restriction Banner', () => {
   beforeEach(async () => {
     initializeMockApp({
       authenticatedUser: {
@@ -56,13 +56,11 @@ describe('Blackout Information Banner', () => {
   });
 
   test.each([
-    { blackouts: [], visibility: false },
-    { blackouts: ['2021-12-31T10:15', '2021-12-31T10:20'], visibility: false },
-    { blackouts: [{ start: activeStartDate, end: activeEndDate }], visibility: true },
-    { blackouts: [{ start: activeEndDate, end: activeEndDate }], visibility: false },
-  ])('Test Blackout Banner is visible on app load if blackout date is active', async ({ blackouts, visibility }) => {
+    { isPostingEnabled: false, visibility: true },
+    { isPostingEnabled: true, visibility: false },
+  ])('Test Discussions Restriction is visible on app load if posting is disabled', async ({ isPostingEnabled, visibility }) => {
     store = initializeStore();
-    await store.dispatch(fetchConfigSuccess(getConfigData(blackouts)));
+    await store.dispatch(fetchConfigSuccess(getConfigData(isPostingEnabled)));
     renderComponent();
     if (visibility) {
       const element = await screen.findByRole('alert');

src/discussions/discussions-home/FeedbackWrapper.jsx

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 
 import { useSelector } from 'react-redux';
 
+import { getConfig } from '@edx/frontend-platform';
 import { logError } from '@edx/frontend-platform/logging';
 
 import { RequestStatus } from '../../data/constants';
@@ -22,9 +23,9 @@ export default function useFeedbackWrapper() {
 
   useEffect(() => {
     if (configStatus === RequestStatus.SUCCESSFUL) {
-      let url = '//w.usabilla.com/9e6036348fa1.js';
+      let url = getConfig().LEARNER_FEEDBACK_URL;
       if (isStaff || isUserGroupTA || isCourseAdmin || isCourseStaff) {
-        url = '//w.usabilla.com/767740a06856.js';
+        url = getConfig().STAFF_FEEDBACK_URL;
       }
       try {
         // eslint-disable-next-line no-undef

src/discussions/discussions-home/InformationBanner.jsx

@@ -1,64 +0,0 @@
-import React, { useState } from 'react';
-
-import { useSelector } from 'react-redux';
-
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Hyperlink, PageBanner } from '@edx/paragon';
-
-import { selectUserIsStaff, selectUserRoles } from '../data/selectors';
-import messages from '../messages';
-
-function InformationBanner({
-  intl,
-}) {
-  const [showBanner, setShowBanner] = useState(true);
-  const userRoles = useSelector(selectUserRoles);
-  const isAdmin = useSelector(selectUserIsStaff);
-  const learnMoreLink = 'https://openedx.atlassian.net/wiki/spaces/COMM/pages/3509551260/Overview+New+discussions+experience';
-  const TAFeedbackLink = process.env.TA_FEEDBACK_FORM;
-  const staffFeedbackLink = process.env.STAFF_FEEDBACK_FORM;
-  const hideLearnMoreButton = ((userRoles.includes('Student') && userRoles.length === 1) || !userRoles.length) && !isAdmin;
-  const showStaffLink = isAdmin || userRoles.includes('Moderator') || userRoles.includes('Administrator');
-
-  return (
-    <PageBanner
-      variant="light"
-      show={showBanner}
-      dismissible
-      onDismiss={() => setShowBanner(false)}
-    >
-      <div className="font-weight-500">
-        {intl.formatMessage(messages.bannerMessage)}
-        {!hideLearnMoreButton
-          && (
-            <Hyperlink
-              destination={learnMoreLink}
-              target="_blank"
-              showLaunchIcon={false}
-              className="pl-2.5"
-              variant="muted"
-              isInline
-            >
-              {intl.formatMessage(messages.learnMoreBannerLink)}
-            </Hyperlink>
-          )}
-        <Hyperlink
-          destination={showStaffLink ? staffFeedbackLink : TAFeedbackLink}
-          target="_blank"
-          showLaunchIcon={false}
-          variant="muted"
-          className="pl-2.5"
-          isInline
-        >
-          {intl.formatMessage(messages.shareFeedback)}
-        </Hyperlink>
-      </div>
-    </PageBanner>
-  );
-}
-
-InformationBanner.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(InformationBanner);

src/discussions/discussions-home/InformationBanner.test.jsx

@@ -1,136 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from 'react-intl';
-
-import { initializeMockApp } from '@edx/frontend-platform';
-import { AppProvider } from '@edx/frontend-platform/react';
-
-import { initializeStore } from '../../store';
-import { DiscussionContext } from '../common/context';
-import { fetchConfigSuccess } from '../data/slices';
-import messages from '../messages';
-import InformationBanner from './InformationBanner';
-
-import '../posts/data/__factories__';
-
-let store;
-let container;
-const courseId = 'course-v1:edX+DemoX+Demo_Course';
-
-const getConfigData = (isAdmin = true, roles = []) => ({
-  id: 'course-v1:edX+DemoX+Demo_Course',
-  userRoles: roles,
-  hasModerationPrivileges: false,
-  isGroupTa: false,
-  isUserAdmin: isAdmin,
-});
-
-function renderComponent() {
-  const wrapper = render(
-    <IntlProvider locale="en">
-      <AppProvider store={store}>
-        <DiscussionContext.Provider value={{ courseId }}>
-          <InformationBanner />
-        </DiscussionContext.Provider>
-      </AppProvider>
-    </IntlProvider>,
-  );
-  container = wrapper.container;
-  return container;
-}
-
-describe('Information Banner learner view', () => {
-  let element;
-  beforeEach(async () => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: false,
-        roles: ['Student'],
-      },
-    });
-    store = initializeStore();
-    store.dispatch(fetchConfigSuccess(getConfigData(false, ['Student'])));
-    renderComponent(true);
-    element = await screen.findByRole('alert');
-  });
-
-  test('Test Banner is visible on app load', async () => {
-    expect(element).toHaveTextContent(messages.bannerMessage.defaultMessage);
-  });
-
-  test('Test Banner do not have learn more button', async () => {
-    expect(element).not.toHaveTextContent(messages.learnMoreBannerLink.defaultMessage);
-  });
-  test('Test Banner has share feedback button', async () => {
-    expect(element).toHaveTextContent(messages.shareFeedback.defaultMessage);
-  });
-});
-
-describe('Information Banner moderators/staff/admin view', () => {
-  let element;
-  beforeEach(async () => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-
-    store = initializeStore();
-    store.dispatch(fetchConfigSuccess(getConfigData(true, ['Student', 'Moderator'])));
-    renderComponent(true);
-    element = await screen.findByRole('alert');
-  });
-
-  test('Test Banner is visible on app load', async () => {
-    expect(element).toHaveTextContent(messages.bannerMessage.defaultMessage);
-  });
-
-  test('Test Banner has learn more button', async () => {
-    expect(element).toHaveTextContent(messages.learnMoreBannerLink.defaultMessage);
-  });
-  test('Test Banner has share feedback button', async () => {
-    expect(element).toHaveTextContent(messages.shareFeedback.defaultMessage);
-  });
-});
-
-describe('User is redirected according to url according to role', () => {
-  beforeEach(async () => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-    store = initializeStore();
-  });
-
-  test('TAs are redirected to learners feedback form', async () => {
-    store.dispatch(fetchConfigSuccess(getConfigData(false, ['Student', 'Community TA'])));
-    renderComponent(true);
-    expect(screen.getByText(messages.shareFeedback.defaultMessage)
-      .closest('a'))
-      .toHaveAttribute('href', process.env.TA_FEEDBACK_FORM);
-  });
-
-  test('moderators/administrators are redirected to moderators feedback form', async () => {
-    store.dispatch(fetchConfigSuccess(getConfigData(false, ['Student', 'Moderator', 'Administrator'])));
-    renderComponent(true);
-    expect(screen.getByText(messages.shareFeedback.defaultMessage)
-      .closest('a'))
-      .toHaveAttribute('href', process.env.STAFF_FEEDBACK_FORM);
-  });
-
-  test('user with only isAdmin true are redirected to moderators feedback form', async () => {
-    store.dispatch(fetchConfigSuccess(getConfigData(true, ['Student'])));
-    renderComponent(true);
-    expect(screen.getByText(messages.shareFeedback.defaultMessage)
-      .closest('a'))
-      .toHaveAttribute('href', process.env.STAFF_FEEDBACK_FORM);
-  });
-});

src/discussions/empty-posts/EmptyLearners.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { useIsOnDesktop } from '../data/hooks';
 import messages from '../messages';
 import EmptyPage from './EmptyPage';
 
-function EmptyLearners({ intl }) {
+const EmptyLearners = () => {
+  const intl = useIntl();
   const isOnDesktop = useIsOnDesktop();
 
   if (!isOnDesktop) {
@@ -16,10 +17,6 @@ function EmptyLearners({ intl }) {
   return (
     <EmptyPage title={intl.formatMessage(messages.emptyTitle)} />
   );
-}
-
-EmptyLearners.propTypes = {
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(EmptyLearners);
+export default EmptyLearners;

src/discussions/empty-posts/EmptyPage.jsx

@@ -5,15 +5,15 @@ import classNames from 'classnames';
 
 import { Button } from '@edx/paragon';
 
-import { ReactComponent as EmptyIcon } from '../../assets/empty.svg';
+import EmptyIcon from '../../assets/Empty';
 
-function EmptyPage({
+const EmptyPage = ({
   title,
   subTitle = null,
   action = null,
   actionText = null,
   fullWidth = false,
-}) {
+}) => {
   const containerClasses = classNames(
     'min-content-height justify-content-center align-items-center d-flex w-100 flex-column',
     { 'bg-light-400': !fullWidth },
@@ -33,7 +33,7 @@ function EmptyPage({
       </div>
     </div>
   );
-}
+};
 
 EmptyPage.propTypes = {
   title: propTypes.string.isRequired,
@@ -50,4 +50,4 @@ EmptyPage.defaultProps = {
   actionText: null,
 };
 
-export default EmptyPage;
+export default React.memo(EmptyPage);

src/discussions/empty-posts/EmptyPosts.jsx

@@ -1,26 +1,27 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import propTypes from 'prop-types';
 
 import { useDispatch, useSelector } from 'react-redux';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { useIsOnDesktop } from '../data/hooks';
 import { selectAreThreadsFiltered, selectPostThreadCount } from '../data/selectors';
 import messages from '../messages';
+// eslint-disable-next-line import/no-cycle
 import { messages as postMessages, showPostEditor } from '../posts';
 import EmptyPage from './EmptyPage';
 
-function EmptyPosts({ intl, subTitleMessage }) {
+const EmptyPosts = ({ subTitleMessage }) => {
+  const intl = useIntl();
   const dispatch = useDispatch();
-
+  const isOnDesktop = useIsOnDesktop();
   const isFiltered = useSelector(selectAreThreadsFiltered);
   const totalThreads = useSelector(selectPostThreadCount);
-  const isOnDesktop = useIsOnDesktop();
 
-  function addPost() {
-    return dispatch(showPostEditor());
-  }
+  const addPost = useCallback(() => (
+    dispatch(showPostEditor())
+  ), []);
 
   let title = messages.noPostSelected;
   let subTitle = null;
@@ -49,7 +50,7 @@ function EmptyPosts({ intl, subTitleMessage }) {
       fullWidth={fullWidth}
     />
   );
-}
+};
 
 EmptyPosts.propTypes = {
   subTitleMessage: propTypes.shape({
@@ -57,7 +58,6 @@ EmptyPosts.propTypes = {
     defaultMessage: propTypes.string,
     description: propTypes.string,
   }).isRequired,
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(EmptyPosts);
+export default React.memo(EmptyPosts);

src/discussions/empty-posts/EmptyTopics.jsx

@@ -1,29 +1,29 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 import { useRouteMatch } from 'react-router';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { ALL_ROUTES } from '../../data/constants';
 import { useIsOnDesktop, useTotalTopicThreadCount } from '../data/hooks';
 import { selectTopicThreadCount } from '../data/selectors';
 import messages from '../messages';
+// eslint-disable-next-line import/no-cycle
 import { messages as postMessages, showPostEditor } from '../posts';
 import EmptyPage from './EmptyPage';
 
-function EmptyTopics({ intl }) {
+const EmptyTopics = () => {
+  const intl = useIntl();
   const match = useRouteMatch(ALL_ROUTES);
   const dispatch = useDispatch();
-
+  const isOnDesktop = useIsOnDesktop();
   const hasGlobalThreads = useTotalTopicThreadCount() > 0;
   const topicThreadCount = useSelector(selectTopicThreadCount(match.params.topicId));
 
-  function addPost() {
-    return dispatch(showPostEditor());
-  }
-
-  const isOnDesktop = useIsOnDesktop();
+  const addPost = useCallback(() => (
+    dispatch(showPostEditor())
+  ), []);
 
   let title = messages.emptyTitle;
   let fullWidth = false;
@@ -62,10 +62,6 @@ function EmptyTopics({ intl }) {
       fullWidth={fullWidth}
     />
   );
-}
-
-EmptyTopics.propTypes = {
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(EmptyTopics);
+export default EmptyTopics;

src/discussions/empty-posts/index.js

@@ -1,4 +1,5 @@
 export { default as EmptyLearners } from './EmptyLearners';
 export { default as EmptyPage } from './EmptyPage';
+// eslint-disable-next-line import/no-cycle
 export { default as EmptyPosts } from './EmptyPosts';
 export { default as EmptyTopics } from './EmptyTopics';

src/discussions/in-context-topics/TopicPostsView.jsx

@@ -1,15 +1,17 @@
-import React, { useContext, useEffect } from 'react';
+import React, {
+  useCallback, useContext, useEffect, useMemo,
+} from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Spinner } from '@edx/paragon';
 
 import { RequestStatus, Routes } from '../../data/constants';
 import { DiscussionContext } from '../common/context';
 import { selectDiscussionProvider } from '../data/selectors';
-import { selectTopicThreads } from '../posts/data/selectors';
+import { selectTopicThreadsIds } from '../posts/data/selectors';
 import PostsList from '../posts/PostsList';
 import { discussionsPath, handleKeyDown } from '../utils';
 import {
@@ -21,19 +23,34 @@ import { BackButton, NoResults } from './components';
 import messages from './messages';
 import { Topic } from './topic';
 
-function TopicPostsView({ intl }) {
+const TopicPostsView = () => {
+  const intl = useIntl();
   const location = useLocation();
   const dispatch = useDispatch();
   const { courseId, topicId, category } = useContext(DiscussionContext);
   const provider = useSelector(selectDiscussionProvider);
   const topicsStatus = useSelector(selectLoadingStatus);
-  const topicsInProgress = topicsStatus === RequestStatus.IN_PROGRESS;
-  const posts = useSelector(selectTopicThreads([topicId]));
+  const postsIds = useSelector(selectTopicThreadsIds([topicId]));
   const selectedSubsectionUnits = useSelector(selectSubsectionUnits(category));
   const selectedSubsection = useSelector(selectSubsection(category));
-  const selectedUnit = useSelector(selectUnits)?.find(unit => unit.id === topicId);
-  const selectedNonCoursewareTopic = useSelector(selectNonCoursewareTopics)?.find(topic => topic.id === topicId);
+  const units = useSelector(selectUnits);
+  const nonCoursewareTopics = useSelector(selectNonCoursewareTopics);
   const selectedArchivedTopic = useSelector(selectArchivedTopic(topicId));
+  const topicsInProgress = topicsStatus === RequestStatus.IN_PROGRESS;
+
+  const selectedUnit = useMemo(() => (
+    units?.find(unit => unit.id === topicId)
+  ), [units, topicId]);
+
+  const selectedNonCoursewareTopic = useMemo(() => (
+    nonCoursewareTopics?.find(topic => topic.id === topicId)
+  ), [nonCoursewareTopics, topicId]);
+
+  const backButtonPath = useCallback(() => {
+    const path = selectedUnit ? Routes.TOPICS.CATEGORY : Routes.TOPICS.ALL;
+    const params = selectedUnit ? { courseId, category: selectedUnit?.parentId } : { courseId };
+    return discussionsPath(path, params)(location);
+  }, [selectedUnit]);
 
   useEffect(() => {
     if (provider && topicsStatus === RequestStatus.IDLE) {
@@ -41,12 +58,6 @@ function TopicPostsView({ intl }) {
     }
   }, [provider]);
 
-  const backButtonPath = () => {
-    const path = selectedUnit ? Routes.TOPICS.CATEGORY : Routes.TOPICS.ALL;
-    const params = selectedUnit ? { courseId, category: selectedUnit?.parentId } : { courseId };
-    return discussionsPath(path, params)(location);
-  };
-
   return (
     <div className="discussion-posts d-flex flex-column h-100">
       {topicId ? (
@@ -67,8 +78,8 @@ function TopicPostsView({ intl }) {
       <div className="list-group list-group-flush flex-fill" role="list" onKeyDown={e => handleKeyDown(e)}>
         {topicId ? (
           <PostsList
-            posts={posts}
-            topics={[topicId]}
+            postsIds={postsIds}
+            topicsIds={[topicId]}
             parentIsLoading={topicsInProgress}
           />
         ) : (
@@ -90,10 +101,6 @@ function TopicPostsView({ intl }) {
       </div>
     </div>
   );
-}
-
-TopicPostsView.propTypes = {
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(TopicPostsView);
+export default React.memo(TopicPostsView);

src/discussions/in-context-topics/TopicPostsView.test.jsx

@@ -92,7 +92,6 @@ describe('InContext Topic Posts View', () => {
         enableInContext: true,
         provider: 'openedx',
         hasModerationPrivileges: true,
-        blackouts: [],
       },
     });
     Factory.resetAll();
@@ -206,7 +205,8 @@ describe('InContext Topic Posts View', () => {
   test.each([
     { searchText: 'hello world', output: 'Showing 0 results for', resultCount: 0 },
     { searchText: 'introduction', output: 'Showing 8 results for', resultCount: 8 },
-  ])('It should have a search bar with a clear button and \'$output\' results found text.',
+  ])(
+    'It should have a search bar with a clear button and \'$output\' results found text.',
     async ({ searchText, output, resultCount }) => {
       await setupTopicsMockResponse();
       await renderComponent();
@@ -226,7 +226,8 @@ describe('InContext Topic Posts View', () => {
         expect(clearButton).toBeInTheDocument();
         expect(units).toHaveLength(resultCount);
       });
-    });
+    },
+  );
 
   it('When click on the clear button it should move to main topics pages.', async () => {
     await setupTopicsMockResponse();
@@ -253,7 +254,8 @@ describe('InContext Topic Posts View', () => {
     });
   });
 
-  it('should display Nothing here yet and No topic exists message when topics and selectedSubsectionUnits are empty',
+  it(
+    'should display Nothing here yet and No topic exists message when topics and selectedSubsectionUnits are empty',
     async () => {
       await setupTopicsMockResponse(0, 0, 0);
       await renderComponent({ topicId: 'test-topic', category: 'test-category' });
@@ -261,7 +263,8 @@ describe('InContext Topic Posts View', () => {
       await waitFor(() => expect(within(container).queryByText('Nothing here yet')).toBeInTheDocument());
       expect(within(container).queryByText('No topic exists')).toBeInTheDocument();
       expect(within(container).queryByText('Unnamed Topic')).toBeInTheDocument();
-    });
+    },
+  );
 
   it('should display all topics when search by an empty search string', async () => {
     await setupTopicsMockResponse();

src/discussions/in-context-topics/TopicsView.jsx

@@ -1,4 +1,6 @@
-import React, { useContext, useEffect } from 'react';
+import React, {
+  useCallback, useContext, useEffect, useMemo,
+} from 'react';
 
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
@@ -21,30 +23,38 @@ import { setFilter } from './data/slices';
 import { fetchCourseTopicsV3 } from './data/thunks';
 import { ArchivedBaseGroup, SectionBaseGroup, Topic } from './topic';
 
-function TopicsList() {
+const TopicsList = () => {
   const loadingStatus = useSelector(selectLoadingStatus);
   const coursewareTopics = useSelector(selectCoursewareTopics);
   const nonCoursewareTopics = useSelector(selectNonCoursewareTopics);
   const archivedTopics = useSelector(selectArchivedTopics);
 
+  const renderNonCoursewareTopics = useMemo(() => (
+    nonCoursewareTopics?.map((topic, index) => (
+      <Topic
+        key={topic.id}
+        topic={topic}
+        showDivider={(nonCoursewareTopics.length - 1) !== index}
+      />
+    ))
+  ), [nonCoursewareTopics]);
+
+  const renderCoursewareTopics = useMemo(() => (
+    coursewareTopics?.map((topic, index) => (
+      <SectionBaseGroup
+        key={topic.id}
+        section={topic?.children}
+        sectionId={topic.id}
+        sectionTitle={topic.displayName}
+        showDivider={(coursewareTopics.length - 1) !== index}
+      />
+    ))
+  ), [coursewareTopics]);
+
   return (
     <>
-      {nonCoursewareTopics?.map((topic, index) => (
-        <Topic
-          key={topic.id}
-          topic={topic}
-          showDivider={(nonCoursewareTopics.length - 1) !== index}
-        />
-      ))}
-      {coursewareTopics?.map((topic, index) => (
-        <SectionBaseGroup
-          key={topic.id}
-          section={topic?.children}
-          sectionId={topic.id}
-          sectionTitle={topic.displayName}
-          showDivider={(coursewareTopics.length - 1) !== index}
-        />
-      ))}
+      {renderNonCoursewareTopics}
+      {renderCoursewareTopics}
       {!isEmpty(archivedTopics) && (
         <ArchivedBaseGroup
           archivedTopics={archivedTopics}
@@ -58,9 +68,9 @@ function TopicsList() {
       )}
     </>
   );
-}
+};
 
-function TopicsView() {
+const TopicsView = () => {
   const dispatch = useDispatch();
   const { courseId } = useContext(DiscussionContext);
   const provider = useSelector(selectDiscussionProvider);
@@ -83,6 +93,10 @@ function TopicsView() {
     }
   }, [isPostsFiltered]);
 
+  const handleOnClear = useCallback(() => {
+    dispatch(setFilter(''));
+  }, []);
+
   return (
     <div className="d-flex flex-column h-100" data-testid="inContext-topics-view">
       {topicFilter && (
@@ -91,7 +105,7 @@ function TopicsView() {
             text={topicFilter}
             count={filteredTopics.length}
             loadingStatus={loadingStatus}
-            onClear={() => dispatch(setFilter(''))}
+            onClear={handleOnClear}
           />
           {filteredTopics.length === 0 && loadingStatus === RequestStatus.SUCCESSFUL && <NoResults />}
         </>
@@ -116,6 +130,6 @@ function TopicsView() {
       </div>
     </div>
   );
-}
+};
 
 export default TopicsView;

src/discussions/in-context-topics/TopicsView.test.jsx

@@ -123,15 +123,15 @@ describe('InContext Topics View', () => {
     expect(topic.nextSibling).toBe(container.querySelector('.divider'));
   });
 
-  it('A non-Courseware topic should have 3 stats and should be hoverable', async () => {
+  it('A non-Courseware topic should have 2 stats and should be hoverable', async () => {
     await setupMockResponse();
     renderComponent();
 
     const topic = await container.querySelector('.discussion-topic');
     const statsList = await topic.querySelectorAll('.icon-size');
 
-    expect(statsList.length).toBe(3);
-    fireEvent.mouseOver(statsList[0]);
+    expect(statsList.length).toBe(2);
+    await act(async () => { fireEvent.mouseOver(statsList[0]); });
     expect(screen.queryByText('1 Discussion')).toBeInTheDocument();
   });
 
@@ -180,7 +180,7 @@ describe('InContext Topics View', () => {
     const subsectionObject = coursewareTopics[0].children[0];
     const subSection = await container.querySelector(`[data-subsection-id=${subsectionObject.id}]`);
 
-    await act(async () => fireEvent.click(subSection));
+    await act(async () => { fireEvent.click(subSection); });
     await waitFor(async () => {
       const backButton = await screen.getByLabelText('Back to topics list');
       const topicsList = await screen.getByRole('list');
@@ -199,7 +199,7 @@ describe('InContext Topics View', () => {
     renderComponent();
     const subSection = await container.querySelector(`[data-subsection-id=${coursewareTopics[0].children[0].id}]`);
 
-    await act(async () => fireEvent.click(subSection));
+    await act(async () => { fireEvent.click(subSection); });
     await waitFor(async () => {
       const units = await container.querySelectorAll('.discussion-topic');
 
@@ -207,7 +207,7 @@ describe('InContext Topics View', () => {
     });
   });
 
-  it('A unit should have a title and stats and should be clickable', async () => {
+  it('A unit should have a title and should be clickable', async () => {
     await setupMockResponse();
     renderComponent();
     const subSectionObject = coursewareTopics[0].children[0];
@@ -215,16 +215,16 @@ describe('InContext Topics View', () => {
 
     const subSection = await container.querySelector(`[data-subsection-id=${subSectionObject.id}]`);
 
-    await act(async () => fireEvent.click(subSection));
+    await act(async () => { fireEvent.click(subSection); });
     await waitFor(async () => {
       const unitElement = await screen.findByText(unitObject.name);
       const unitContainer = await container.querySelector(`[data-topic-id=${unitObject.id}]`);
       const statsList = await unitContainer.querySelectorAll('.icon-size');
 
       expect(unitElement).toBeInTheDocument();
-      expect(statsList).toHaveLength(3);
+      expect(statsList).toHaveLength(2);
 
-      await act(async () => fireEvent.click(unitContainer));
+      await act(async () => { fireEvent.click(unitContainer); });
       await waitFor(async () => {
         expect(lastLocation.pathname.endsWith(`/topics/${unitObject.id}`)).toBeTruthy();
       });

src/discussions/in-context-topics/components/BackButton.jsx

@@ -9,9 +9,9 @@ import { ArrowBack } from '@edx/paragon/icons';
 
 import messages from '../messages';
 
-function BackButton({
+const BackButton = ({
   intl, path, title, loading,
-}) {
+}) => {
   const history = useHistory();
 
   return (
@@ -32,7 +32,7 @@ function BackButton({
       <div className="border-bottom border-light-400" />
     </>
   );
-}
+};
 
 BackButton.propTypes = {
   intl: intlShape.isRequired,

src/discussions/in-context-topics/components/EmptyTopics.jsx

@@ -1,9 +1,9 @@
-import React, { useContext } from 'react';
+import React, { useCallback, useContext } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 import { useRouteMatch } from 'react-router';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { ALL_ROUTES } from '../../../data/constants';
 import { DiscussionContext } from '../../common/context';
@@ -14,20 +14,20 @@ import messages from '../../messages';
 import { messages as postMessages, showPostEditor } from '../../posts';
 import { selectCourseWareThreadsCount, selectTotalTopicsThreadsCount } from '../data/selectors';
 
-function EmptyTopics({ intl }) {
+const EmptyTopics = () => {
+  const intl = useIntl();
   const match = useRouteMatch(ALL_ROUTES);
   const dispatch = useDispatch();
+  const isOnDesktop = useIsOnDesktop();
   const { enableInContextSidebar } = useContext(DiscussionContext);
   const courseWareThreadsCount = useSelector(selectCourseWareThreadsCount(match.params.category));
   const topicThreadsCount = useSelector(selectPostThreadCount);
   // hasGlobalThreads is used to determine if there are any post available in courseware and non-courseware topics
   const hasGlobalThreads = useSelector(selectTotalTopicsThreadsCount) > 0;
 
-  function addPost() {
-    return dispatch(showPostEditor());
-  }
-
-  const isOnDesktop = useIsOnDesktop();
+  const addPost = useCallback(() => (
+    dispatch(showPostEditor())
+  ), []);
 
   let title = messages.emptyTitle;
   let fullWidth = false;
@@ -74,10 +74,6 @@ function EmptyTopics({ intl }) {
       fullWidth={fullWidth}
     />
   );
-}
-
-EmptyTopics.propTypes = {
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(EmptyTopics);
+export default EmptyTopics;

src/discussions/in-context-topics/components/NoResults.jsx

@@ -1,11 +1,14 @@
+import React from 'react';
+
 import { useSelector } from 'react-redux';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { selectTopics } from '../data/selectors';
 import messages from '../messages';
 
-function NoResults({ intl }) {
+const NoResults = () => {
+  const intl = useIntl();
   const topics = useSelector(selectTopics);
 
   const title = messages.nothingHere;
@@ -20,10 +23,6 @@ function NoResults({ intl }) {
       { helpMessage && <small className="font-weight-normal text-gray-700">{intl.formatMessage(helpMessage)}</small>}
     </div>
   );
-}
-
-NoResults.propTypes = {
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(NoResults);
+export default NoResults;

src/discussions/in-context-topics/data/__factories__/inContextTopics.factory.js

@@ -20,12 +20,21 @@ Factory.define('sub-section')
   .sequence('id', ['topicPrefix'], (idx, topicPrefix) => `${topicPrefix}-topic-${idx}`)
   .sequence('display-name', ['sectionPrefix'], (idx, sectionPrefix) => `Introduction ${sectionPrefix + idx}`)
   .option('courseId', null, 'course-v1:edX+DemoX+Demo_Course')
-  .sequence('legacy_web_url', ['id', 'courseId'],
-    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/block-v1:${id}?experience=legacy`)
-  .sequence('lms_web_url', ['id', 'courseId'],
-    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/block-v1:${id}`)
-  .sequence('student_view_url', ['id', 'courseId'],
-    (idx, id) => `${getApiBaseUrl}/xblock/block-v1:${id}`)
+  .sequence(
+    'legacy_web_url',
+    ['id', 'courseId'],
+    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/block-v1:${id}?experience=legacy`,
+  )
+  .sequence(
+    'lms_web_url',
+    ['id', 'courseId'],
+    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/block-v1:${id}`,
+  )
+  .sequence(
+    'student_view_url',
+    ['id', 'courseId'],
+    (idx, id) => `${getApiBaseUrl}/xblock/block-v1:${id}`,
+  )
   .attr('type', null, 'sequential')
   .attr('activeFlags', null, true)
   .attr('thread_counts', ['discussionCount', 'questionCount'], (discCount, questCount) => {
@@ -51,12 +60,21 @@ Factory.define('section')
   .attr('courseware', null, true)
   .sequence('display-name', (idx) => `Introduction ${idx}`)
   .option('courseId', null, 'course-v1:edX+DemoX+Demo_Course')
-  .sequence('legacy_web_url', ['id', 'courseId'],
-    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/${courseId.replace('course-v1:', 'block-v1:')}+type@chapter+block@${id}?experience=legacy`)
-  .sequence('lms_web_url', ['id', 'courseId'],
-    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/${courseId.replace('course-v1:', 'block-v1:')}+type@chapter+block@${id}`)
-  .sequence('student_view_url', ['id', 'courseId'],
-    (idx, id, courseId) => `${getApiBaseUrl}/xblock/${courseId.replace('course-v1:', 'block-v1:')}+type@chapter+block@${id}`)
+  .sequence(
+    'legacy_web_url',
+    ['id', 'courseId'],
+    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/${courseId.replace('course-v1:', 'block-v1:')}+type@chapter+block@${id}?experience=legacy`,
+  )
+  .sequence(
+    'lms_web_url',
+    ['id', 'courseId'],
+    (idx, id, courseId) => `${getApiBaseUrl}/courses/${courseId}/jump_to/${courseId.replace('course-v1:', 'block-v1:')}+type@chapter+block@${id}`,
+  )
+  .sequence(
+    'student_view_url',
+    ['id', 'courseId'],
+    (idx, id, courseId) => `${getApiBaseUrl}/xblock/${courseId.replace('course-v1:', 'block-v1:')}+type@chapter+block@${id}`,
+  )
   .attr('type', null, 'chapter')
   .attr('children', ['id', 'display-name'], (id, name) => {
     Factory.reset('sub-section');

src/discussions/in-context-topics/topic-search/TopicSearchBar.jsx

@@ -1,8 +1,8 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useCallback, useContext, useEffect } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Icon, SearchField } from '@edx/paragon';
 import { Search as SearchIcon } from '@edx/paragon/icons';
 
@@ -10,56 +10,51 @@ import { DiscussionContext } from '../../common/context';
 import postsMessages from '../../posts/post-actions-bar/messages';
 import { setFilter as setTopicFilter } from '../data/slices';
 
-function TopicSearchBar({ intl }) {
+const TopicSearchBar = () => {
+  const intl = useIntl();
   const dispatch = useDispatch();
   const { page } = useContext(DiscussionContext);
   const topicSearch = useSelector(({ inContextTopics }) => inContextTopics.filter);
   let searchValue = '';
 
-  const onClear = () => {
+  const onClear = useCallback(() => {
     dispatch(setTopicFilter(''));
-  };
+  }, []);
 
-  const onChange = (query) => {
+  const onChange = useCallback((query) => {
     searchValue = query;
-  };
+  }, []);
 
-  const onSubmit = (query) => {
+  const onSubmit = useCallback((query) => {
     if (query === '') {
       return;
     }
     dispatch(setTopicFilter(query));
-  };
+  }, []);
 
   useEffect(() => onClear(), [page]);
 
   return (
-    <>
-      <SearchField.Advanced
-        onClear={onClear}
-        onChange={onChange}
-        onSubmit={onSubmit}
-        value={topicSearch}
-      >
-        <SearchField.Label />
-        <SearchField.Input
-          style={{ paddingRight: '1rem' }}
-          placeholder={intl.formatMessage(postsMessages.search, { page: 'topics' })}
+    <SearchField.Advanced
+      onClear={onClear}
+      onChange={onChange}
+      onSubmit={onSubmit}
+      value={topicSearch}
+    >
+      <SearchField.Label />
+      <SearchField.Input
+        style={{ paddingRight: '1rem' }}
+        placeholder={intl.formatMessage(postsMessages.search, { page: 'topics' })}
+      />
+      <span className="mt-auto mb-auto mr-2.5 pointer-cursor-hover">
+        <Icon
+          src={SearchIcon}
+          onClick={() => onSubmit(searchValue)}
+          data-testid="search-icon"
         />
-        <span className="mt-auto mb-auto mr-2.5 pointer-cursor-hover">
-          <Icon
-            src={SearchIcon}
-            onClick={() => onSubmit(searchValue)}
-            data-testid="search-icon"
-          />
-        </span>
-      </SearchField.Advanced>
-    </>
+      </span>
+    </SearchField.Advanced>
   );
-}
-
-TopicSearchBar.propTypes = {
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(TopicSearchBar);
+export default TopicSearchBar;

src/discussions/in-context-topics/topic-search/TopicSearchResultBar.jsx

@@ -8,7 +8,7 @@ import { SearchField } from '@edx/paragon';
 import { setFilter } from '../data';
 import messages from '../messages';
 
-function TopicSearchResultBar({ intl }) {
+const TopicSearchResultBar = ({ intl }) => {
   const dispatch = useDispatch();
 
   return (
@@ -21,7 +21,7 @@ function TopicSearchResultBar({ intl }) {
       />
     </div>
   );
-}
+};
 
 TopicSearchResultBar.propTypes = {
   intl: intlShape.isRequired,

src/discussions/in-context-topics/topic/ArchivedBaseGroup.jsx

@@ -1,16 +1,27 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from '../messages';
 import Topic, { topicShape } from './Topic';
 
-function ArchivedBaseGroup({
+const ArchivedBaseGroup = ({
   archivedTopics,
   showDivider,
-  intl,
-}) {
+}) => {
+  const intl = useIntl();
+
+  const renderArchivedTopics = useMemo(() => (
+    archivedTopics?.map((topic, index) => (
+      <Topic
+        key={topic.id}
+        topic={topic}
+        showDivider={(archivedTopics.length - 1) !== index}
+      />
+    ))
+  ), [archivedTopics]);
+
   return (
     <>
       {showDivider && (
@@ -24,25 +35,18 @@ function ArchivedBaseGroup({
         data-testid="archived-group"
       >
         <div className="pt-3 px-4 font-weight-bold">{intl.formatMessage(messages.archivedTopics)}</div>
-        {archivedTopics?.map((topic, index) => (
-          <Topic
-            key={topic.id}
-            topic={topic}
-            showDivider={(archivedTopics.length - 1) !== index}
-          />
-        ))}
+        {renderArchivedTopics}
       </div>
     </>
   );
-}
+};
 
 ArchivedBaseGroup.propTypes = {
   archivedTopics: PropTypes.arrayOf(topicShape).isRequired,
   showDivider: PropTypes.bool,
-  intl: intlShape.isRequired,
 };
 
 ArchivedBaseGroup.defaultProps = {
   showDivider: false,
 };
-export default injectIntl(ArchivedBaseGroup);
+export default React.memo(ArchivedBaseGroup);

src/discussions/in-context-topics/topic/SectionBaseGroup.jsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
 import { useParams } from 'react-router';
 import { Link } from 'react-router-dom';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import TopicStats from '../../../components/TopicStats';
 import { Routes } from '../../../data/constants';
@@ -13,19 +13,52 @@ import { discussionsPath } from '../../utils';
 import messages from '../messages';
 import { topicShape } from './Topic';
 
-function SectionBaseGroup({
+const SectionBaseGroup = ({
   section,
   sectionTitle,
   sectionId,
   showDivider,
-  intl,
-}) {
+}) => {
+  const intl = useIntl();
   const { courseId } = useParams();
-  const isSelected = (id) => window.location.pathname.includes(id);
-  const sectionUrl = (id) => discussionsPath(Routes.TOPICS.CATEGORY, {
+
+  const isSelected = useCallback((id) => (
+    window.location.pathname.includes(id)
+  ), []);
+
+  const sectionUrl = useCallback((id) => discussionsPath(Routes.TOPICS.CATEGORY, {
     courseId,
     category: id,
-  });
+  }), [courseId]);
+
+  const renderSection = useMemo(() => (
+    section?.map((subsection, index) => (
+      <Link
+        className={classNames('subsection p-0 text-decoration-none text-primary-500', {
+          'border-bottom border-light-400': (section.length - 1 !== index),
+        })}
+        key={subsection.id}
+        role="option"
+        data-subsection-id={subsection.id}
+        data-testid="subsection-group"
+        to={sectionUrl(subsection.id)}
+        onClick={() => isSelected(subsection.id)}
+        aria-current={isSelected(section.id) ? 'page' : undefined}
+        tabIndex={(isSelected(subsection.id) || index === 0) ? 0 : -1}
+      >
+        <div className="d-flex flex-row pt-2.5 pb-2 px-4">
+          <div className="d-flex flex-column flex-fill" style={{ minWidth: 0 }}>
+            <div className="d-flex flex-column justify-content-start mw-100 flex-fill">
+              <div className="topic-name text-truncate">
+                {subsection?.displayName || intl.formatMessage(messages.unnamedSubsection)}
+              </div>
+              <TopicStats threadCounts={subsection?.threadCounts} />
+            </div>
+          </div>
+        </div>
+      </Link>
+    ))
+  ), [section, sectionUrl, isSelected]);
 
   return (
     <div
@@ -36,32 +69,7 @@ function SectionBaseGroup({
       <div className="pt-3 px-4 font-weight-bold">
         {sectionTitle || intl.formatMessage(messages.unnamedSection)}
       </div>
-      {section.map((subsection, index) => (
-        <Link
-          className={classNames('subsection p-0 text-decoration-none text-primary-500', {
-            'border-bottom border-light-400': (section.length - 1 !== index),
-          })}
-          key={subsection.id}
-          role="option"
-          data-subsection-id={subsection.id}
-          data-testid="subsection-group"
-          to={sectionUrl(subsection.id)}
-          onClick={() => isSelected(subsection.id)}
-          aria-current={isSelected(section.id) ? 'page' : undefined}
-          tabIndex={(isSelected(subsection.id) || index === 0) ? 0 : -1}
-        >
-          <div className="d-flex flex-row pt-2.5 pb-2 px-4">
-            <div className="d-flex flex-column flex-fill" style={{ minWidth: 0 }}>
-              <div className="d-flex flex-column justify-content-start mw-100 flex-fill">
-                <div className="topic-name text-truncate">
-                  {subsection?.displayName || intl.formatMessage(messages.unnamedSubsection)}
-                </div>
-                <TopicStats threadCounts={subsection?.threadCounts} />
-              </div>
-            </div>
-          </div>
-        </Link>
-      ))}
+      {renderSection}
       {showDivider && (
         <>
           <div className="divider border-top border-light-500" />
@@ -70,7 +78,7 @@ function SectionBaseGroup({
       )}
     </div>
   );
-}
+};
 
 SectionBaseGroup.propTypes = {
   section: PropTypes.arrayOf(PropTypes.shape({
@@ -86,7 +94,6 @@ SectionBaseGroup.propTypes = {
   sectionTitle: PropTypes.string.isRequired,
   sectionId: PropTypes.string.isRequired,
   showDivider: PropTypes.bool.isRequired,
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(SectionBaseGroup);
+export default React.memo(SectionBaseGroup);

src/discussions/in-context-topics/topic/Topic.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable no-unused-vars, react/forbid-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -7,7 +8,7 @@ import { useSelector } from 'react-redux';
 import { useParams } from 'react-router';
 import { Link } from 'react-router-dom';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Icon, OverlayTrigger, Tooltip } from '@edx/paragon';
 import { HelpOutline, PostOutline, Report } from '@edx/paragon/icons';
 
@@ -17,12 +18,12 @@ import { selectUserHasModerationPrivileges, selectUserIsGroupTa } from '../../da
 import { discussionsPath } from '../../utils';
 import messages from '../messages';
 
-function Topic({
+const Topic = ({
   topic,
   showDivider,
   index,
-  intl,
-}) {
+}) => {
+  const intl = useIntl();
   const { courseId } = useParams();
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
   const userIsGroupTa = useSelector(selectUserIsGroupTa);
@@ -54,11 +55,7 @@ function Topic({
                 {topic?.name || topic?.displayName || intl.formatMessage(messages.unnamedTopicSubCategories)}
               </div>
             </div>
-            <TopicStats
-              threadCounts={topic?.threadCounts}
-              activeFlags={topic?.activeFlags}
-              inactiveFlags={topic?.inactiveFlags}
-            />
+            <TopicStats threadCounts={topic?.threadCounts} />
           </div>
         </div>
       </Link>
@@ -70,7 +67,7 @@ function Topic({
       )}
     </>
   );
-}
+};
 
 export const topicShape = PropTypes.shape({
   id: PropTypes.string,
@@ -85,7 +82,6 @@ export const topicShape = PropTypes.shape({
 });
 
 Topic.propTypes = {
-  intl: intlShape.isRequired,
   topic: topicShape,
   showDivider: PropTypes.bool,
   index: PropTypes.number,
@@ -99,4 +95,4 @@ Topic.defaultProps = {
   },
 };
 
-export default injectIntl(Topic);
+export default React.memo(Topic);

src/discussions/learners/LearnerPostsView.jsx

@@ -6,7 +6,7 @@ import capitalize from 'lodash/capitalize';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Button, Icon, IconButton, Spinner,
 } from '@edx/paragon';
@@ -18,33 +18,36 @@ import {
 } from '../../data/constants';
 import { DiscussionContext } from '../common/context';
 import { selectUserHasModerationPrivileges, selectUserIsStaff } from '../data/selectors';
+import { usePostList } from '../posts/data/hooks';
 import {
-  selectAllThreads,
+  selectAllThreadsIds,
   selectThreadNextPage,
   threadsLoadingStatus,
 } from '../posts/data/selectors';
 import { clearPostsPages } from '../posts/data/slices';
 import NoResults from '../posts/NoResults';
 import { PostLink } from '../posts/post';
-import { discussionsPath, filterPosts } from '../utils';
+import { discussionsPath } from '../utils';
 import { fetchUserPosts } from './data/thunks';
 import LearnerPostFilterBar from './learner-post-filter-bar/LearnerPostFilterBar';
 import messages from './messages';
 
-function LearnerPostsView({ intl }) {
+const LearnerPostsView = () => {
+  const intl = useIntl();
   const location = useLocation();
   const history = useHistory();
   const dispatch = useDispatch();
 
-  const posts = useSelector(selectAllThreads);
+  const postsIds = useSelector(selectAllThreadsIds);
   const loadingStatus = useSelector(threadsLoadingStatus());
   const postFilter = useSelector(state => state.learners.postFilter);
   const { courseId, learnerUsername: username } = useContext(DiscussionContext);
   const nextPage = useSelector(selectThreadNextPage());
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
   const userIsStaff = useSelector(selectUserIsStaff);
+  const sortedPostsIds = usePostList(postsIds);
 
-  const loadMorePosts = (pageNum = undefined) => {
+  const loadMorePosts = useCallback((pageNum = undefined) => {
     const params = {
       author: username,
       page: pageNum,
@@ -54,29 +57,24 @@ function LearnerPostsView({ intl }) {
     };
 
     dispatch(fetchUserPosts(courseId, params));
-  };
+  }, [courseId, postFilter, username, userHasModerationPrivileges, userIsStaff]);
+
+  const postInstances = useMemo(() => (
+    sortedPostsIds?.map((postId, idx) => (
+      <PostLink
+        postId={postId}
+        idx={idx}
+        key={postId}
+        showDivider={(sortedPostsIds.length - 1) !== idx}
+      />
+    ))
+  ), [sortedPostsIds]);
 
   useEffect(() => {
     dispatch(clearPostsPages());
     loadMorePosts();
   }, [courseId, postFilter, username]);
 
-  const checkIsSelected = (id) => window.location.pathname.includes(id);
-  const pinnedPosts = useMemo(() => filterPosts(posts, 'pinned'), [posts]);
-  const unpinnedPosts = useMemo(() => filterPosts(posts, 'unpinned'), [posts]);
-
-  const postInstances = useCallback((sortedPosts) => (
-    sortedPosts.map((post, idx) => (
-      <PostLink
-        post={post}
-        key={post.id}
-        isSelected={checkIsSelected}
-        idx={idx}
-        showDivider={(sortedPosts.length - 1) !== idx}
-      />
-    ))
-  ), []);
-
   return (
     <div className="discussion-posts d-flex flex-column">
       <div className="d-flex align-items-center justify-content-between px-2.5">
@@ -97,9 +95,8 @@ function LearnerPostsView({ intl }) {
       <LearnerPostFilterBar />
       <div className="border-bottom border-light-400" />
       <div className="list-group list-group-flush">
-        {postInstances(pinnedPosts)}
-        {postInstances(unpinnedPosts)}
-        {loadingStatus !== RequestStatus.IN_PROGRESS && posts?.length === 0 && <NoResults />}
+        {postInstances}
+        {loadingStatus !== RequestStatus.IN_PROGRESS && sortedPostsIds?.length === 0 && <NoResults />}
         {loadingStatus === RequestStatus.IN_PROGRESS ? (
           <div className="d-flex justify-content-center p-4">
             <Spinner animation="border" variant="primary" size="lg" />
@@ -114,10 +111,6 @@ function LearnerPostsView({ intl }) {
       </div>
     </div>
   );
-}
-
-LearnerPostsView.propTypes = {
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(LearnerPostsView);
+export default LearnerPostsView;

src/discussions/learners/LearnerPostsView.test.jsx

@@ -82,6 +82,10 @@ describe('Learner Posts View', () => {
     await executeThunk(fetchUserPosts(courseId), store.dispatch, store.getState);
   });
 
+  afterEach(() => {
+    axiosMock.reset();
+  });
+
   test('Reported icon is visible to moderator for post with reported comment', async () => {
     await setUpPrivilages(axiosMock, store, true);
     await waitFor(() => { renderComponent(); });
@@ -106,17 +110,21 @@ describe('Learner Posts View', () => {
     expect(backButton).toBeInTheDocument();
   });
 
-  test('Learner title bar should redirect to the learners list when clicking on the back button',
+  test(
+    'Learner title bar should redirect to the learners list when clicking on the back button',
     async () => {
       await renderComponent();
 
       const backButton = screen.getByLabelText('Back');
 
-      await act(() => fireEvent.click(backButton));
+      await act(async () => {
+        fireEvent.click(backButton);
+      });
       await waitFor(() => {
         expect(lastLocation.pathname.endsWith('/learners')).toBeTruthy();
       });
-    });
+    },
+  );
 
   it('should display a post-filter bar and All posts sorted by recent activity text.', async () => {
     await renderComponent();
@@ -128,15 +136,13 @@ describe('Learner Posts View', () => {
     expect(recentActivity).toBeInTheDocument();
   });
 
-  it(`should display a list of the interactive posts of a selected learner and the posts count
-     should be equal to the API response count.`, async () => {
+  it('should display a list of the interactive posts of a selected learner', async () => {
     await waitFor(() => {
       renderComponent();
     });
     const posts = await container.querySelectorAll('.discussion-post');
 
     expect(posts).toHaveLength(2);
-    expect(posts).toHaveLength(Object.values(store.getState().threads.threadsById).length);
   });
 
   it.each([
@@ -162,9 +168,9 @@ describe('Learner Posts View', () => {
       await act(async () => {
         fireEvent.click(activity);
       });
+
       await waitFor(() => {
         const learners = container.querySelectorAll('.discussion-post');
-
         expect(learners).toHaveLength(result);
       });
     });
@@ -175,8 +181,7 @@ describe('Learner Posts View', () => {
     { searchBy: 'cohort-1', result: 2 },
   ])('successfully display learners by %s.', async ({ searchBy, result }) => {
     await setUpPrivilages(axiosMock, store, true);
-    axiosMock.onGet(getCohortsApiUrl(courseId))
-      .reply(200, Factory.buildList('cohort', 3));
+    axiosMock.onGet(getCohortsApiUrl(courseId)).reply(200, Factory.buildList('cohort', 3));
 
     await executeThunk(fetchCourseCohorts(courseId), store.dispatch, store.getState);
     await renderComponent();
@@ -191,9 +196,9 @@ describe('Learner Posts View', () => {
     await act(async () => {
       fireEvent.click(cohort);
     });
+
     await waitFor(() => {
       const learners = container.querySelectorAll('.discussion-post');
-
       expect(learners).toHaveLength(result);
     });
   });
@@ -211,6 +216,6 @@ describe('Learner Posts View', () => {
     });
 
     expect(loadMoreButton).not.toBeInTheDocument();
-    expect(container.querySelectorAll('.discussion-post')).toHaveLength(2);
+    expect(container.querySelectorAll('.discussion-post')).toHaveLength(4);
   });
 });

src/discussions/learners/LearnersView.jsx

@@ -1,11 +1,11 @@
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 import {
   Redirect, useLocation, useParams,
 } from 'react-router';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, Spinner } from '@edx/paragon';
 
 import SearchInfo from '../../components/SearchInfo';
@@ -24,7 +24,8 @@ import { fetchLearners } from './data/thunks';
 import { LearnerCard, LearnerFilterBar } from './learner';
 import messages from './messages';
 
-function LearnersView({ intl }) {
+const LearnersView = () => {
+  const intl = useIntl();
   const { courseId } = useParams();
   const location = useLocation();
   const dispatch = useDispatch();
@@ -46,7 +47,7 @@ function LearnersView({ intl }) {
     }
   }, [courseId, orderBy, learnersTabEnabled, usernameSearch]);
 
-  const loadPage = async () => {
+  const loadPage = useCallback(async () => {
     if (nextPage) {
       dispatch(fetchLearners(courseId, {
         orderBy,
@@ -54,7 +55,20 @@ function LearnersView({ intl }) {
         usernameSearch,
       }));
     }
-  };
+  }, [courseId, orderBy, nextPage, usernameSearch]);
+
+  const handleOnClear = useCallback(() => {
+    dispatch(setUsernameSearch(''));
+  }, []);
+
+  const renderLearnersList = useMemo(() => (
+    (
+      courseConfigLoadingStatus === RequestStatus.SUCCESSFUL && learnersTabEnabled && learners.map((learner) => (
+        <LearnerCard learner={learner} key={learner.username} />
+      ))
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    ) || <></>
+  ), [courseConfigLoadingStatus, learnersTabEnabled, learners]);
 
   return (
     <div className="d-flex flex-column border-right border-light-400">
@@ -65,7 +79,7 @@ function LearnersView({ intl }) {
           text={usernameSearch}
           count={learners.length}
           loadingStatus={loadingStatus}
-          onClear={() => dispatch(setUsernameSearch(''))}
+          onClear={handleOnClear}
         />
       )}
       <div className="list-group list-group-flush learner" role="list">
@@ -77,12 +91,7 @@ function LearnersView({ intl }) {
           }}
         />
         )}
-        {courseConfigLoadingStatus === RequestStatus.SUCCESSFUL
-          && learnersTabEnabled
-          && learners.map((learner, index) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <LearnerCard learner={learner} key={index} courseId={courseId} />
-          ))}
+        {renderLearnersList}
         {loadingStatus === RequestStatus.IN_PROGRESS ? (
           <div className="d-flex justify-content-center p-4">
             <Spinner animation="border" variant="primary" size="lg" />
@@ -98,10 +107,6 @@ function LearnersView({ intl }) {
       </div>
     </div>
   );
-}
-
-LearnersView.propTypes = {
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(LearnersView);
+export default LearnersView;

src/discussions/learners/LearnersView.test.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable default-param-last */
 import React from 'react';
 
 import {
@@ -37,6 +38,7 @@ function renderComponent() {
         <DiscussionContext.Provider value={{
           page: 'learners',
           learnerUsername: 'learner-1',
+          courseId,
         }}
         >
           <MemoryRouter initialEntries={[`/${courseId}/`]}>
@@ -200,7 +202,8 @@ describe('LearnersView', () => {
       username:
         ['learner-1', 'learner-2'],
     },
-  ])('should have a search bar with a clear button and \'$output\' results found text.',
+  ])(
+    'should have a search bar with a clear button and \'$output\' results found text.',
     async ({
       searchText, output, learnersCount, username,
     }) => {
@@ -226,7 +229,8 @@ describe('LearnersView', () => {
         expect(clearButton).toBeInTheDocument();
         expect(leaners).toHaveLength(learnersCount);
       });
-    });
+    },
+  );
 
   test('When click on the clear button it should move to a list of all learners.', async () => {
     await setUpLearnerMockResponse();
@@ -256,7 +260,8 @@ describe('LearnersView', () => {
     expect(learners).toHaveLength(3);
   });
 
-  it('should display reported and previously reported message by passing activeFlags or inactiveFlags',
+  it(
+    'should display reported and previously reported message by passing activeFlags or inactiveFlags',
     async () => {
       await setUpLearnerMockResponse(2, 2, 1, ['learner-1', 'learner-2'], '', 1, 1);
       await assignPrivilages(true);
@@ -273,7 +278,8 @@ describe('LearnersView', () => {
       expect(reportedIcon).toBeInTheDocument();
       expect(reported).toBeInTheDocument();
       expect(previouslyReported).toBeInTheDocument();
-    });
+    },
+  );
 
   it('should display load more button and display more learners by clicking on button.', async () => {
     await setUpLearnerMockResponse();

src/discussions/learners/data/__factories__/learners.factory.js

@@ -1,5 +1,7 @@
 import { Factory } from 'rosie';
 
+import '../../../posts/data/__factories__';
+
 Factory.define('learner')
   .sequence('id')
   .attr('username', ['id'], (id) => `learner-${id}`)
@@ -91,50 +93,8 @@ Factory.define('learnerPosts')
     'results',
     ['abuseFlaggedCount', 'courseId'],
     (abuseFlaggedCount, courseId) => {
-      const threads = [];
-      for (let i = 0; i < 2; i++) {
-        threads.push({
-          created_at: new Date().toISOString(),
-          updated_at: new Date().toISOString(),
-          editable_fields: [
-            'abuse_flagged',
-            'following',
-            'group_id',
-            'raw_body',
-            'closed',
-            'read',
-            'title',
-            'topic_id',
-            'type',
-            'voted',
-            'pinned',
-          ],
-          id: `post_id${i}`,
-          author: 'test_user',
-          author_label: 'Staff',
-          abuse_flagged: false,
-          can_delete: true,
-          voted: false,
-          vote_count: 1,
-          title: `Title ${i}`,
-          raw_body: `<p>body ${i}</p>`,
-          preview_body: `<p>body ${i}</p>`,
-          course_id: courseId,
-          group_id: null,
-          group_name: null,
-          abuse_flagged_count: abuseFlaggedCount,
-          following: false,
-          comment_count: 8,
-          unread_comment_count: 0,
-          endorsed_comment_list_url: null,
-          non_endorsed_comment_list_url: null,
-          read: false,
-          has_endorsed: false,
-          pinned: false,
-          topic_id: 'topic',
-        });
-      }
-      return threads;
+      const attrs = { course_id: courseId, abuse_flagged_count: abuseFlaggedCount };
+      return Factory.buildList('thread', 2, attrs);
     },
   )
   .attr('pagination', [], () => ({

src/discussions/learners/data/api.test.jsx

@@ -29,7 +29,8 @@ describe('Learner api test cases', () => {
     axiosMock.reset();
   });
 
-  it('Successfully get and store API response for the learner\'s list and learners posts in redux',
+  it(
+    'Successfully get and store API response for the learner\'s list and learners posts in redux',
     async () => {
       const learners = await setupLearnerMockResponse();
       const threads = await setupPostsMockResponse();
@@ -38,20 +39,23 @@ describe('Learner api test cases', () => {
       expect(Object.values(learners.learnerProfiles)).toHaveLength(3);
       expect(threads.status).toEqual('successful');
       expect(Object.values(threads.threadsById)).toHaveLength(2);
-    });
+    },
+  );
 
   it.each([
     { status: 'statusUnread', search: 'Title', cohort: 'post' },
     { status: 'statusUnanswered', search: 'Title', cohort: 'post' },
     { status: 'statusReported', search: 'Title', cohort: 'post' },
     { status: 'statusUnresponded', search: 'Title', cohort: 'post' },
-  ])('Successfully fetch user posts based on %s filters',
+  ])(
+    'Successfully fetch user posts based on %s filters',
     async ({ status, search, cohort }) => {
       const threads = await setupPostsMockResponse({ filters: { status, search, cohort } });
 
       expect(threads.status).toEqual('successful');
       expect(Object.values(threads.threadsById)).toHaveLength(2);
-    });
+    },
+  );
 
   it('Failed to fetch learners', async () => {
     const learners = await setupLearnerMockResponse({ learnerCourseId: courseId2 });

src/discussions/learners/data/redux.test.jsx

@@ -37,7 +37,8 @@ describe('Learner redux test cases', () => {
   test('Successfully load initial states in redux', async () => {
     executeThunk(
       fetchLearners('course-v1:edX+DemoX+Demo_Course', { usernameSearch: 'learner-1' }),
-      store.dispatch, store.getState,
+      store.dispatch,
+      store.getState,
     );
     const { learners } = store.getState();
 
@@ -55,7 +56,8 @@ describe('Learner redux test cases', () => {
     expect(learners.postFilter.cohort).toEqual('');
   });
 
-  test('Successfully store a learner posts stats data as pages object in redux',
+  test(
+    'Successfully store a learner posts stats data as pages object in redux',
     async () => {
       const learners = await setupLearnerMockResponse();
       const page = learners.pages[0];
@@ -65,9 +67,11 @@ describe('Learner redux test cases', () => {
       expect(statsObject.responses).toEqual(3);
       expect(statsObject.threads).toEqual(1);
       expect(statsObject.replies).toEqual(0);
-    });
+    },
+  );
 
-  test('Successfully store the nextPage, totalPages, totalLearners, and sortedBy data in redux',
+  test(
+    'Successfully store the nextPage, totalPages, totalLearners, and sortedBy data in redux',
     async () => {
       const learners = await setupLearnerMockResponse();
 
@@ -75,7 +79,8 @@ describe('Learner redux test cases', () => {
       expect(learners.totalPages).toEqual(2);
       expect(learners.totalLearners).toEqual(3);
       expect(learners.sortedBy).toEqual('activity');
-    });
+    },
+  );
 
   test('Successfully updated the learner\'s sort data in redux', async () => {
     const learners = await setupLearnerMockResponse();
@@ -106,7 +111,8 @@ describe('Learner redux test cases', () => {
     expect(updatedLearners.pages).toHaveLength(0);
   });
 
-  test('Successfully update the learner\'s search query in redux when searching for a learner',
+  test(
+    'Successfully update the learner\'s search query in redux when searching for a learner',
     async () => {
       const learners = await setupLearnerMockResponse();
 
@@ -116,5 +122,6 @@ describe('Learner redux test cases', () => {
       const updatedLearners = store.getState().learners;
 
       expect(updatedLearners.usernameSearch).toEqual('learner-2');
-    });
+    },
+  );
 });

src/discussions/learners/learner-post-filter-bar/LearnerPostFilterBar.jsx

@@ -12,7 +12,7 @@ import { fetchCourseCohorts } from '../../cohorts/data/thunks';
 import { selectUserHasModerationPrivileges, selectUserIsGroupTa } from '../../data/selectors';
 import { setPostFilter } from '../data/slices';
 
-function LearnerPostFilterBar() {
+const LearnerPostFilterBar = () => {
   const dispatch = useDispatch();
   const { courseId } = useParams();
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
@@ -98,6 +98,6 @@ function LearnerPostFilterBar() {
       showCohortsFilter={userHasModerationPrivileges || userIsGroupTa}
     />
   );
-}
+};
 
 export default LearnerPostFilterBar;

src/discussions/learners/learner/LearnerAvatar.jsx

@@ -1,26 +1,23 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import { Avatar } from '@edx/paragon';
 
-import { learnerShape } from './proptypes';
-
-function LearnerAvatar({ learner }) {
-  return (
-    <div className="mr-3 mt-1">
-      <Avatar
-        size="sm"
-        alt={learner.username}
-        style={{
-          height: '2rem',
-          width: '2rem',
-        }}
-      />
-    </div>
-  );
-}
+const LearnerAvatar = ({ username }) => (
+  <div className="mr-3 mt-1">
+    <Avatar
+      size="sm"
+      alt={username}
+      style={{
+        height: '2rem',
+        width: '2rem',
+      }}
+    />
+  </div>
+);
 
 LearnerAvatar.propTypes = {
-  learner: learnerShape.isRequired,
+  username: PropTypes.string.isRequired,
 };
 
-export default LearnerAvatar;
+export default React.memo(LearnerAvatar);

src/discussions/learners/learner/LearnerCard.jsx

@@ -1,10 +1,7 @@
 import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
 
 import { Link } from 'react-router-dom';
 
-import { injectIntl } from '@edx/frontend-platform/i18n';
-
 import { Routes } from '../../../data/constants';
 import { DiscussionContext } from '../../common/context';
 import { discussionsPath } from '../../utils';
@@ -12,11 +9,11 @@ import LearnerAvatar from './LearnerAvatar';
 import LearnerFooter from './LearnerFooter';
 import { learnerShape } from './proptypes';
 
-function LearnerCard({
-  learner,
-  courseId,
-}) {
-  const { enableInContextSidebar, learnerUsername } = useContext(DiscussionContext);
+const LearnerCard = ({ learner }) => {
+  const {
+    username, threads, inactiveFlags, activeFlags, responses, replies,
+  } = learner;
+  const { enableInContextSidebar, learnerUsername, courseId } = useContext(DiscussionContext);
   const linkUrl = discussionsPath(Routes.LEARNERS.POSTS, {
     0: enableInContextSidebar ? 'in-context' : undefined,
     learnerUsername: learner.username,
@@ -30,32 +27,40 @@ function LearnerCard({
     >
       <div
         className="d-flex flex-row flex-fill mw-100 py-3 px-4 border-primary-500"
-        style={learner.username === learnerUsername ? {
+        style={username === learnerUsername ? {
           borderRightWidth: '4px',
           borderRightStyle: 'solid',
         } : null}
       >
-        <LearnerAvatar learner={learner} />
+        <LearnerAvatar username={username} />
         <div className="d-flex flex-column flex-fill" style={{ minWidth: 0 }}>
           <div className="d-flex flex-column justify-content-start mw-100 flex-fill">
             <div className="d-flex align-items-center flex-fill">
               <div
                 className="text-truncate font-weight-500 font-size-14 text-primary-500 font-style"
               >
-                {learner.username}
+                {username}
               </div>
             </div>
-            {learner.threads === null ? null : <LearnerFooter learner={learner} /> }
+            {threads !== null && (
+              <LearnerFooter
+                inactiveFlags={inactiveFlags}
+                activeFlags={activeFlags}
+                threads={threads}
+                responses={responses}
+                replies={replies}
+                username={username}
+              />
+            )}
           </div>
         </div>
       </div>
     </Link>
   );
-}
+};
 
 LearnerCard.propTypes = {
   learner: learnerShape.isRequired,
-  courseId: PropTypes.string.isRequired,
 };
 
-export default injectIntl(LearnerCard);
+export default React.memo(LearnerCard);

src/discussions/learners/learner/LearnerFilterBar.jsx

@@ -1,11 +1,11 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Collapsible, Form, Icon } from '@edx/paragon';
 import { Check, Tune } from '@edx/paragon/icons';
 
@@ -15,7 +15,7 @@ import { setSortedBy } from '../data';
 import { selectLearnerSorting } from '../data/selectors';
 import messages from '../messages';
 
-const ActionItem = ({
+const ActionItem = React.memo(({
   id,
   label,
   value,
@@ -38,7 +38,7 @@ const ActionItem = ({
       {label}
     </span>
   </label>
-);
+));
 
 ActionItem.propTypes = {
   id: PropTypes.string.isRequired,
@@ -47,16 +47,15 @@ ActionItem.propTypes = {
   selected: PropTypes.string.isRequired,
 };
 
-function LearnerFilterBar({
-  intl,
-}) {
+const LearnerFilterBar = () => {
+  const intl = useIntl();
   const dispatch = useDispatch();
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
   const userIsGroupTa = useSelector(selectUserIsGroupTa);
   const currentSorting = useSelector(selectLearnerSorting());
   const [isOpen, setOpen] = useState(false);
 
-  const handleSortFilterChange = (event) => {
+  const handleSortFilterChange = useCallback((event) => {
     const { name, value } = event.currentTarget;
 
     if (name === 'sort') {
@@ -68,12 +67,16 @@ function LearnerFilterBar({
         },
       );
     }
-  };
+  }, []);
+
+  const handleOnToggle = useCallback(() => {
+    setOpen(!isOpen);
+  }, [isOpen]);
 
   return (
     <Collapsible.Advanced
       open={isOpen}
-      onToggle={() => setOpen(!isOpen)}
+      onToggle={handleOnToggle}
       className="filter-bar collapsible-card-lg border-0"
     >
       <Collapsible.Trigger className="collapsible-trigger border-0">
@@ -124,10 +127,6 @@ function LearnerFilterBar({
       </Collapsible.Body>
     </Collapsible.Advanced>
   );
-}
-
-LearnerFilterBar.propTypes = {
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(LearnerFilterBar);
+export default LearnerFilterBar;