From 0b82a5e37925b64e83cc40f1342b29d043e9441e Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Mon, 12 Dec 2022 12:58:54 +0300
Subject: [PATCH] [WiP] Quote in msg body

---
 src/components/Inbox/Message.tsx           | 6 ++++++
 src/components/Inbox/QuotedMessage.tsx     | 3 ++-
 src/components/Views/Inbox.tsx             | 7 ++++++-
 src/graphql/query/chat-messages-load-by.ts | 1 +
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/Inbox/Message.tsx b/src/components/Inbox/Message.tsx
index 54209002..17bc79f5 100644
--- a/src/components/Inbox/Message.tsx
+++ b/src/components/Inbox/Message.tsx
@@ -7,12 +7,15 @@ import type { Message, ChatMember } from '../../graphql/types.gen'
 import formattedTime from '../../utils/formatDateTime'
 import { Icon } from '../_shared/Icon'
 import { MessageActionsPopup } from './MessageActionsPopup'
+import QuotedMessage from './QuotedMessage'
 
 type Props = {
   content: Message
   ownId: number
   members: ChatMember[]
   replyClick?: () => void
+  replyBody?: string
+  replyAuthor?: string
 }
 
 const md = new MarkdownIt({
@@ -38,6 +41,9 @@ const Message = (props: Props) => {
             </div>
             <MessageActionsPopup trigger={<Icon name="menu" />} />
           </div>
+          <Show when={props.replyBody}>
+            <QuotedMessage body={props.replyBody} variant="inline" />
+          </Show>
           <div innerHTML={md.render(props.content.body)} />
         </div>
       </div>
diff --git a/src/components/Inbox/QuotedMessage.tsx b/src/components/Inbox/QuotedMessage.tsx
index 315a4bf0..64042b0f 100644
--- a/src/components/Inbox/QuotedMessage.tsx
+++ b/src/components/Inbox/QuotedMessage.tsx
@@ -7,6 +7,7 @@ type QuotedMessage = {
   body: string
   cancel?: () => void
   author?: string
+  variant: 'inline' | 'reply'
 }
 
 const QuotedMessage = (props: QuotedMessage) => {
@@ -21,7 +22,7 @@ const QuotedMessage = (props: QuotedMessage) => {
         </Show>
         <div class={styles.quote}>{props.body}</div>
       </div>
-      <Show when={props.cancel}>
+      <Show when={props.cancel && props.variant !== 'inline'}>
         <div class={clsx(styles.cancel, styles.icon)} onClick={props.cancel}>
           <Icon name="close-gray" />
         </div>
diff --git a/src/components/Views/Inbox.tsx b/src/components/Views/Inbox.tsx
index 3180c705..cedf4125 100644
--- a/src/components/Views/Inbox.tsx
+++ b/src/components/Views/Inbox.tsx
@@ -134,6 +134,10 @@ export const InboxView = () => {
     }
   }
 
+  const findToReply = (messageId) => {
+    return messages().find((message) => message.id === messageId)
+  }
+
   return (
     <div class={clsx('container', styles.Inbox)}>
       <Modal variant="narrow" name="inviteToChat">
@@ -221,11 +225,11 @@ export const InboxView = () => {
                       content={message}
                       ownId={currentUserId()}
                       members={currentDialog().members}
+                      replyBody={message.replyTo && findToReply(message.replyTo).body}
                       replyClick={() => setMessageToReply(message)}
                     />
                   )}
                 </For>
-
                 {/*<div class={styles.conversationDate}>*/}
                 {/*  <time>12 сентября</time>*/}
                 {/*</div>*/}
@@ -235,6 +239,7 @@ export const InboxView = () => {
             <div class={styles.messageForm}>
               <Show when={messageToReply()}>
                 <QuotedMessage
+                  variant="reply"
                   author={
                     currentDialog().members.find((member) => member.id === Number(messageToReply().author))
                       .name
diff --git a/src/graphql/query/chat-messages-load-by.ts b/src/graphql/query/chat-messages-load-by.ts
index cfba1e55..39a5865f 100644
--- a/src/graphql/query/chat-messages-load-by.ts
+++ b/src/graphql/query/chat-messages-load-by.ts
@@ -10,6 +10,7 @@ export default gql`
         createdAt
         id
         updatedAt
+        replyTo
       }
     }
   }