From b92251b852237c53b51eecc684ab4cf995bb597b Mon Sep 17 00:00:00 2001
From: Wille Marcel <wille.yyz@gmail.com>
Date: Mon, 21 Nov 2022 19:24:48 -0300
Subject: [PATCH] Use SwitchToggle to enable/disable comment preview

---
 .../src/components/projectDetail/messages.js  |  8 +++---
 .../projectDetail/questionsAndComments.js     | 25 +++++++------------
 .../tests/questionsAndComments.test.js        | 10 ++++----
 3 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/projectDetail/messages.js b/frontend/src/components/projectDetail/messages.js
index c516838909..e4423207cc 100644
--- a/frontend/src/components/projectDetail/messages.js
+++ b/frontend/src/components/projectDetail/messages.js
@@ -133,14 +133,14 @@ export default defineMessages({
     id: 'project.detail.questionsAndComments.login',
     defaultMessage: 'Log in to be able to post comments.',
   },
-  write: {
-    id: 'project.detail.questionsAndComments.write',
-    defaultMessage: 'Write',
-  },
   preview: {
     id: 'project.detail.questionsAndComments.preview',
     defaultMessage: 'Preview',
   },
+  previewComment: {
+    id: 'project.detail.questionsAndComments.previewComment',
+    defaultMessage: 'Preview comment',
+  },
   post: {
     id: 'project.detail.questionsAndComments.button',
     defaultMessage: 'Post',
diff --git a/frontend/src/components/projectDetail/questionsAndComments.js b/frontend/src/components/projectDetail/questionsAndComments.js
index 82de2b9791..aca3bc0b72 100644
--- a/frontend/src/components/projectDetail/questionsAndComments.js
+++ b/frontend/src/components/projectDetail/questionsAndComments.js
@@ -13,6 +13,7 @@ import { MessageStatus } from '../comments/status';
 import { CurrentUserAvatar, UserAvatar } from '../user/avatar';
 import { htmlFromMarkdown, formatUserNamesToLink } from '../../utils/htmlFromMarkdown';
 import { pushToLocalJSONAPI, fetchLocalJSONAPI } from '../../network/genericJSONRequest';
+import { SwitchToggle } from '../formInputs';
 
 export const PostProjectComment = ({ projectId, updateComments, contributors }) => {
   const token = useSelector((state) => state.auth.token);
@@ -35,22 +36,6 @@ export const PostProjectComment = ({ projectId, updateComments, contributors })
     <div className="w-90-ns w-100 cf pv4 bg-white center ph3">
       <div className="cf w-100 flex mb3">
         <CurrentUserAvatar className="w3 h3 fr ph2 br-100" />
-        <div className="cf pt3-ns ph3 ph3-m ml3 bg-grey-light dib">
-          <span
-            role="button"
-            className={`pointer db dib-ns ${!isShowPreview && 'bb b--blue-dark bw1 pb1'}`}
-            onClick={() => setIsShowPreview(false)}
-          >
-            <FormattedMessage {...messages.write} />
-          </span>
-          <span
-            role="button"
-            className={`pointer ml3 db dib-ns ${isShowPreview && 'bb b--blue-dark bw1 pb1'}`}
-            onClick={() => setIsShowPreview(true)}
-          >
-            <FormattedMessage {...messages.preview} />
-          </span>
-        </div>
       </div>
       <div className={`w-100 h-100`} style={{ position: 'relative', display: 'block' }}>
         <CommentInputField
@@ -64,6 +49,14 @@ export const PostProjectComment = ({ projectId, updateComments, contributors })
       </div>
 
       <div className="fl w-100 tr pt1 pr0-ns pr1 ml-auto">
+        <div className="fl pv2 dib-ns dn blue-dark">
+          <SwitchToggle
+            onChange={() => setIsShowPreview(!isShowPreview)}
+            isChecked={isShowPreview}
+            label={<FormattedMessage {...messages.previewComment} />}
+            labelPosition='right'
+          />
+        </div>
         <Button
           onClick={() => saveCommentAsync.execute()}
           className="bg-red white f5"
diff --git a/frontend/src/components/projectDetail/tests/questionsAndComments.test.js b/frontend/src/components/projectDetail/tests/questionsAndComments.test.js
index 0cf66d56ff..539ed32411 100644
--- a/frontend/src/components/projectDetail/tests/questionsAndComments.test.js
+++ b/frontend/src/components/projectDetail/tests/questionsAndComments.test.js
@@ -22,12 +22,12 @@ describe('test if QuestionsAndComments component', () => {
         <PostProjectComment projectId={1} />
       </ReduxIntlProviders>,
     );
-    const previewBtn = screen.getByRole('button', { name: /preview/i });
-    expect(screen.getAllByRole('button').length).toBe(11);
-    expect(screen.getByRole('button', { name: /write/i })).toBeInTheDocument();
-    expect(previewBtn).toBeInTheDocument();
+    expect(screen.getAllByRole('button').length).toBe(9);
+    expect(screen.getByRole('checkbox').checked).toBe(false);
     expect(screen.getByRole('textbox')).toBeInTheDocument();
-    fireEvent.click(previewBtn);
+    expect(screen.getByText('Preview comment')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('checkbox'));
+    expect(screen.getByRole('checkbox').checked).toBe(true);
     expect(screen.queryByRole('textbox', { hidden: true })).toBeInTheDocument();
     expect(screen.getByText(/nothing to preview/i)).toBeInTheDocument();
   });