From b7d436fe2fbc3580884fe7f323e97ddf086d9dbb Mon Sep 17 00:00:00 2001
From: Mehak Nasir <67791278+mehaknasir@users.noreply.github.com>
Date: Sun, 7 Aug 2022 01:09:57 +0500
Subject: [PATCH] fix: add a response button added at the end of thread (#238)

---
 src/discussions/comments/CommentsView.jsx     |  3 ++-
 .../comments/CommentsView.test.jsx            | 10 +++++---
 .../comments/comment/ResponseEditor.jsx       | 23 ++++++++++++++-----
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/discussions/comments/CommentsView.jsx b/src/discussions/comments/CommentsView.jsx
index b1418362..1a6c5c43 100644
--- a/src/discussions/comments/CommentsView.jsx
+++ b/src/discussions/comments/CommentsView.jsx
@@ -76,7 +76,8 @@ function DiscussionCommentsView({
         {comments.map(comment => (
           <Comment comment={comment} key={comment.id} postType={postType} />
         ))}
-
+        {!!comments.length
+          && <ResponseEditor postId={postId} addWrappingDiv />}
         {hasMorePages && !isLoading && (
           <Button
             onClick={handleLoadMoreResponses}
diff --git a/src/discussions/comments/CommentsView.test.jsx b/src/discussions/comments/CommentsView.test.jsx
index d9909353..63ccdb49 100644
--- a/src/discussions/comments/CommentsView.test.jsx
+++ b/src/discussions/comments/CommentsView.test.jsx
@@ -160,9 +160,10 @@ describe('CommentsView', () => {
     it('should show and hide the editor', async () => {
       renderComponent(discussionPostId);
       await waitFor(() => screen.findByText('comment number 1', { exact: false }));
+      const addResponseButtons = screen.getAllByRole('button', { name: /add a response/i });
       await act(async () => {
         fireEvent.click(
-          screen.getByRole('button', { name: /add a response/i }),
+          addResponseButtons[0],
         );
       });
       expect(screen.queryByTestId('tinymce-editor')).toBeInTheDocument();
@@ -171,15 +172,17 @@ describe('CommentsView', () => {
       });
       expect(screen.queryByTestId('tinymce-editor')).not.toBeInTheDocument();
     });
+
     it('should allow posting a response', async () => {
       renderComponent(discussionPostId);
       await waitFor(() => screen.findByText('comment number 1', { exact: false }));
+      const responseButtons = screen.getAllByRole('button', { name: /add a response/i });
       await act(async () => {
         fireEvent.click(
-          screen.getByRole('button', { name: /add a response/i }),
+          responseButtons[0],
         );
       });
-      act(() => {
+      await act(() => {
         fireEvent.change(screen.getByTestId('tinymce-editor'), { target: { value: 'testing123' } });
       });
 
@@ -191,6 +194,7 @@ describe('CommentsView', () => {
       expect(screen.queryByTestId('tinymce-editor')).not.toBeInTheDocument();
       await waitFor(async () => expect(await screen.findByText('testing123', { exact: false })).toBeInTheDocument());
     });
+
     it('should allow posting a comment', async () => {
       renderComponent(discussionPostId);
       await waitFor(() => screen.findByText('comment number 1', { exact: false }));
diff --git a/src/discussions/comments/comment/ResponseEditor.jsx b/src/discussions/comments/comment/ResponseEditor.jsx
index 2e5c2353..21d861c9 100644
--- a/src/discussions/comments/comment/ResponseEditor.jsx
+++ b/src/discussions/comments/comment/ResponseEditor.jsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
+import classNames from 'classnames';
+
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button } from '@edx/paragon';
 
@@ -10,17 +12,21 @@ import CommentEditor from './CommentEditor';
 function ResponseEditor({
   postId,
   intl,
+  addWrappingDiv,
 }) {
   const [addingResponse, setAddingResponse] = useState(false);
+
   return addingResponse
     ? (
-      <CommentEditor
-        comment={{ threadId: postId }}
-        edit={false}
-        onCloseEditor={() => setAddingResponse(false)}
-      />
+      <div className={classNames({ 'bg-white p-4': addWrappingDiv })}>
+        <CommentEditor
+          comment={{ threadId: postId }}
+          edit={false}
+          onCloseEditor={() => setAddingResponse(false)}
+        />
+      </div>
     ) : (
-      <div className="actions d-flex">
+      <div className={classNames({ 'mb-4': addWrappingDiv }, 'actions d-flex')}>
         <Button variant="primary" className="px-2.5 py-2" onClick={() => setAddingResponse(true)}>
           {intl.formatMessage(messages.addResponse)}
         </Button>
@@ -31,6 +37,11 @@ function ResponseEditor({
 ResponseEditor.propTypes = {
   postId: PropTypes.string.isRequired,
   intl: intlShape.isRequired,
+  addWrappingDiv: PropTypes.bool,
+};
+
+ResponseEditor.defaultProps = {
+  addWrappingDiv: false,
 };
 
 export default injectIntl(ResponseEditor);