From 99642e71ab8e46f32c69657779232dc9cab19542 Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Mon, 16 Oct 2023 10:40:34 +0300
Subject: [PATCH] Feature/comments fixies (#261)

Comments fix pack
---
 src/components/Article/Comment.tsx         | 16 +++++++++++-----
 src/components/Article/CommentsTree.tsx    | 14 +++++++++++---
 src/components/Editor/SimplifiedEditor.tsx | 10 ++++------
 src/components/Nav/Modal/Modal.tsx         |  1 -
 src/components/Views/Inbox.tsx             |  2 +-
 5 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/components/Article/Comment.tsx b/src/components/Article/Comment.tsx
index bd4406d8..35788445 100644
--- a/src/components/Article/Comment.tsx
+++ b/src/components/Article/Comment.tsx
@@ -31,6 +31,8 @@ type Props = {
   lastSeen?: Date
   class?: string
   showArticleLink?: boolean
+  clickedReply?: (id: number) => void
+  clickedReplyId?: number
 }
 
 export const Comment = (props: Props) => {
@@ -178,12 +180,11 @@ export const Comment = (props: Props) => {
                 <SimplifiedEditor
                   initialContent={comment().body}
                   submitButtonText={t('Save')}
-                  submitByEnter={true}
                   quoteEnabled={true}
                   imageEnabled={true}
                   placeholder={t('Write a comment...')}
                   onSubmit={(value) => handleUpdate(value)}
-                  submitByShiftEnter={true}
+                  submitByCtrlEnter={true}
                   setClear={clearEditor()}
                 />
               </Suspense>
@@ -195,7 +196,10 @@ export const Comment = (props: Props) => {
               <ShowIfAuthenticated>
                 <button
                   disabled={loading()}
-                  onClick={() => setIsReplyVisible(!isReplyVisible())}
+                  onClick={() => {
+                    setIsReplyVisible(!isReplyVisible())
+                    props.clickedReply(props.comment.id)
+                  }}
                   class={clsx(styles.commentControl, styles.commentControlReply)}
                 >
                   <Icon name="reply" class={styles.icon} />
@@ -239,14 +243,14 @@ export const Comment = (props: Props) => {
               {/*</button>*/}
             </div>
 
-            <Show when={isReplyVisible()}>
+            <Show when={isReplyVisible() && props.clickedReplyId === props.comment.id}>
               <Suspense fallback={<p>{t('Loading')}</p>}>
                 <SimplifiedEditor
                   quoteEnabled={true}
                   imageEnabled={true}
                   placeholder={t('Write a comment...')}
                   onSubmit={(value) => handleCreate(value)}
-                  submitByShiftEnter={true}
+                  submitByCtrlEnter={true}
                 />
               </Suspense>
             </Show>
@@ -262,6 +266,8 @@ export const Comment = (props: Props) => {
                 isArticleAuthor={props.isArticleAuthor}
                 comment={c}
                 lastSeen={props.lastSeen}
+                clickedReply={props.clickedReply}
+                clickedReplyId={props.clickedReplyId}
               />
             )}
           </For>
diff --git a/src/components/Article/CommentsTree.tsx b/src/components/Article/CommentsTree.tsx
index 7a7b616e..0122f626 100644
--- a/src/components/Article/CommentsTree.tsx
+++ b/src/components/Article/CommentsTree.tsx
@@ -1,4 +1,4 @@
-import { Show, createMemo, createSignal, onMount, For } from 'solid-js'
+import { Show, createMemo, createSignal, onMount, For, createEffect } from 'solid-js'
 import { Comment } from './Comment'
 import styles from './Article.module.scss'
 import { clsx } from 'clsx'
@@ -43,6 +43,9 @@ export const CommentsTree = (props: Props) => {
   const { t } = useLocalize()
   const [commentsOrder, setCommentsOrder] = createSignal<CommentsOrder>('createdAt')
   const [newReactions, setNewReactions] = createSignal<Reaction[]>([])
+  const [clearEditor, setClearEditor] = createSignal(false)
+  const [clickedReplyId, setClickedReplyId] = createSignal<number>()
+
   const {
     reactionEntities,
     actions: { createReaction }
@@ -88,7 +91,6 @@ export const CommentsTree = (props: Props) => {
       setCookie()
     }
   })
-
   const handleSubmitComment = async (value) => {
     try {
       await createReaction({
@@ -96,9 +98,11 @@ export const CommentsTree = (props: Props) => {
         body: value,
         shout: props.shoutId
       })
+      setClearEditor(true)
     } catch (error) {
       console.error('[handleCreate reaction]:', error)
     }
+    setClearEditor(false)
   }
 
   return (
@@ -153,6 +157,8 @@ export const CommentsTree = (props: Props) => {
                 props.articleAuthors.some((a) => a.slug === reaction.createdBy.slug)
               )}
               comment={reaction}
+              clickedReply={(id) => setClickedReplyId(id)}
+              clickedReplyId={clickedReplyId()}
               lastSeen={dateFromLocalStorage}
             />
           )}
@@ -175,9 +181,11 @@ export const CommentsTree = (props: Props) => {
         <SimplifiedEditor
           quoteEnabled={true}
           imageEnabled={true}
+          autoFocus={true}
+          submitByCtrlEnter={true}
           placeholder={t('Write a comment...')}
           onSubmit={(value) => handleSubmitComment(value)}
-          submitByShiftEnter={true}
+          setClear={clearEditor()}
         />
       </ShowIfAuthenticated>
     </>
diff --git a/src/components/Editor/SimplifiedEditor.tsx b/src/components/Editor/SimplifiedEditor.tsx
index 191125d9..2b42b295 100644
--- a/src/components/Editor/SimplifiedEditor.tsx
+++ b/src/components/Editor/SimplifiedEditor.tsx
@@ -50,10 +50,10 @@ type Props = {
   imageEnabled?: boolean
   setClear?: boolean
   smallHeight?: boolean
-  submitByEnter?: boolean
-  submitByShiftEnter?: boolean
+  submitByCtrlEnter?: boolean
   onlyBubbleControls?: boolean
   controlsAlwaysVisible?: boolean
+  autoFocus?: boolean
 }
 
 export const MAX_DESCRIPTION_LIMIT = 400
@@ -133,6 +133,7 @@ const SimplifiedEditor = (props: Props) => {
         placeholder: props.placeholder
       })
     ],
+    autofocus: props.autoFocus,
     content: content ?? null
   }))
 
@@ -200,10 +201,7 @@ const SimplifiedEditor = (props: Props) => {
       return
     }
 
-    if (
-      event.code === 'Enter' &&
-      ((props.submitByEnter && !event.shiftKey) || (props.submitByShiftEnter && event.shiftKey))
-    ) {
+    if (event.code === 'Enter' && props.submitByCtrlEnter && (event.metaKey || event.ctrlKey)) {
       event.preventDefault()
       props.onSubmit(html())
       handleClear()
diff --git a/src/components/Nav/Modal/Modal.tsx b/src/components/Nav/Modal/Modal.tsx
index 5807ef58..929c7ab1 100644
--- a/src/components/Nav/Modal/Modal.tsx
+++ b/src/components/Nav/Modal/Modal.tsx
@@ -39,7 +39,6 @@ export const Modal = (props: Props) => {
   useEscKeyDownHandler(handleHide)
 
   createEffect(() => {
-    console.log('!!! modal:', modal())
     setVisible(modal() === props.name)
   })
 
diff --git a/src/components/Views/Inbox.tsx b/src/components/Views/Inbox.tsx
index eebe3edf..0ab9c89e 100644
--- a/src/components/Views/Inbox.tsx
+++ b/src/components/Views/Inbox.tsx
@@ -269,7 +269,7 @@ export const InboxView = () => {
                   placeholder={t('Write message')}
                   setClear={isClear()}
                   onSubmit={(message) => handleSubmit(message)}
-                  submitByEnter={true}
+                  submitByCtrlEnter={true}
                 />
               </div>
             </div>