fix: incontext crashing

* fix: resolved data retention issue in adding a post form

* test: added unit test for post editor

public/index.html

@@ -45,7 +45,7 @@
       };
     </script>
     <script
-      async
+      defer
       src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
       id="MathJax-script"
     ></script>
@@ -54,7 +54,7 @@
     <div id="root" class="small"></div>
 
     <!-- begin usabilla live embed code -->
-    <script type="text/javascript">
+    <script defer type="text/javascript">
       window.lightningjs ||
         (function (n) {
           var e = "lightningjs";

src/components/HTMLLoader.jsx

@@ -13,12 +13,12 @@ const defaultSanitizeOptions = {
 };
 
 function HTMLLoader({
-  htmlNode, componentId, cssClassName, testId,
+  htmlNode, componentId, cssClassName, testId, delay,
 }) {
   const sanitizedMath = DOMPurify.sanitize(htmlNode, { ...defaultSanitizeOptions });
   const previewRef = useRef();
 
-  const debouncedPostContent = useDebounce(htmlNode, 500);
+  const debouncedPostContent = useDebounce(htmlNode, delay);
 
   useEffect(() => {
     let promise = Promise.resolve(); // Used to hold chain of typesetting calls
@@ -45,6 +45,7 @@ HTMLLoader.propTypes = {
   componentId: PropTypes.string,
   cssClassName: PropTypes.string,
   testId: PropTypes.string,
+  delay: PropTypes.number,
 };
 
 HTMLLoader.defaultProps = {
@@ -52,6 +53,7 @@ HTMLLoader.defaultProps = {
   componentId: null,
   cssClassName: '',
   testId: '',
+  delay: 0,
 };
 
 export default HTMLLoader;

src/components/PostPreviewPane.jsx

@@ -29,7 +29,13 @@ function PostPreviewPane({
             className="float-right p-3"
             iconClassNames="icon-size"
           />
-          <HTMLLoader htmlNode={htmlNode} cssClassName="text-primary" componentId="post-preview" testId="post-preview" />
+          <HTMLLoader
+            htmlNode={htmlNode}
+            cssClassName="text-primary"
+            componentId="post-preview"
+            testId="post-preview"
+            delay={500}
+          />
         </div>
       )}
       <div className="d-flex justify-content-end">

src/discussions/discussions-home/DiscussionsHome.jsx

@@ -124,7 +124,7 @@ export default function DiscussionsHome() {
             </Switch>
           )}
         </div>
-        <DiscussionsProductTour />
+        {!enableInContextSidebar && <DiscussionsProductTour />}
       </main>
       {!enableInContextSidebar && <Footer />}
     </DiscussionContext.Provider>

src/discussions/post-comments/data/hooks.js

@@ -2,6 +2,8 @@ import { useEffect } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+
 import { EndorsementStatus } from '../../../data/constants';
 import { useDispatchWithState } from '../../../data/hooks';
 import { selectThread } from '../../posts/data/selectors';
@@ -11,6 +13,16 @@ import {
 } from './selectors';
 import { fetchThreadComments } from './thunks';
 
+function trackLoadMoreEvent(postId, params) {
+  sendTrackEvent(
+    'edx.forum.responses.loadMore',
+    {
+      postId,
+      params,
+    },
+  );
+}
+
 export function usePost(postId) {
   const dispatch = useDispatch();
   const thread = useSelector(selectThread(postId));
@@ -31,11 +43,15 @@ export function usePostComments(postId, endorsed = null) {
   const hasMorePages = useSelector(selectThreadHasMorePages(postId, endorsed));
   const currentPage = useSelector(selectThreadCurrentPage(postId, endorsed));
 
-  const handleLoadMoreResponses = async () => dispatch(fetchThreadComments(postId, {
-    endorsed,
-    page: currentPage + 1,
-    reverseOrder,
-  }));
+  const handleLoadMoreResponses = async () => {
+    const params = {
+      endorsed,
+      page: currentPage + 1,
+      reverseOrder,
+    };
+    await dispatch(fetchThreadComments(postId, params));
+    trackLoadMoreEvent(postId, params);
+  };
 
   useEffect(() => {
     dispatch(fetchThreadComments(postId, {

src/discussions/posts/post-editor/PostEditor.jsx

@@ -106,7 +106,7 @@ function PostEditor({
   const nonCoursewareIds = useSelector(enableInContext ? inContextCoursewareIds : selectNonCoursewareIds);
   const coursewareTopics = useSelector(enableInContext ? inContextCourseware : selectCoursewareTopics);
   const cohorts = useSelector(selectCourseCohorts);
-  const post = useSelector(selectThread(postId));
+  const post = useSelector(editExisting ? selectThread(postId) : () => ({}));
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
   const userIsGroupTa = useSelector(selectUserIsGroupTa);
   const settings = useSelector(selectDivisionSettings);

src/discussions/posts/post-editor/PostEditor.test.jsx

@@ -141,6 +141,16 @@ describe('PostEditor', () => {
         }
       },
     );
+    test('selectThread is not called while creating a new post', async () => {
+      const mockSelectThread = jest.fn();
+      jest.mock('../data/selectors', () => ({
+        selectThread: mockSelectThread,
+      }));
+      await renderComponent();
+      expect(mockSelectThread)
+        .not
+        .toHaveBeenCalled();
+    });
   });
 
   describe('cohorting', () => {