From a890beea4efe5a8be87218de83308c3d78dcb0eb Mon Sep 17 00:00:00 2001
From: Dollar Bull <ramadhanakhri@gmail.com>
Date: Thu, 6 Oct 2022 23:55:54 +0700
Subject: [PATCH] update callbackMessage.

---
 src/@context/Orbis.tsx                        |  2 +-
 src/@types/Orbis.d.ts                         |  1 +
 .../Orbis/FloatingChat/ChatToolbar.tsx        | 41 +++++++++++--------
 .../Orbis/FloatingChat/Conversation.tsx       |  5 +++
 .../@shared/Orbis/FloatingChat/index.tsx      | 21 +++++++++-
 5 files changed, 51 insertions(+), 19 deletions(-)

diff --git a/src/@context/Orbis.tsx b/src/@context/Orbis.tsx
index 3c8420b24..226b66604 100644
--- a/src/@context/Orbis.tsx
+++ b/src/@context/Orbis.tsx
@@ -8,9 +8,9 @@ import React, {
 } from 'react'
 import { sleep } from '@utils/index'
 import { Orbis } from '@orbisclub/orbis-sdk'
+import { useWeb3 } from './Web3'
 import { accountTruncate } from '@utils/web3'
 import { didToAddress } from '@utils/orbis'
-import { useWeb3 } from './Web3'
 
 const OrbisContext = createContext(null)
 
diff --git a/src/@types/Orbis.d.ts b/src/@types/Orbis.d.ts
index e76d873be..47990e00d 100644
--- a/src/@types/Orbis.d.ts
+++ b/src/@types/Orbis.d.ts
@@ -83,6 +83,7 @@ interface OrbisPostContentInterface {
   mentions?: OrbisPostMentionsInterface[]
   reply_to?: string
   type?: string
+  encryptedMessage?: object
 }
 
 interface OrbisCreatorMetadataInterface {
diff --git a/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx b/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx
index adb6a4d5e..778cd19cd 100644
--- a/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx
+++ b/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx
@@ -6,18 +6,13 @@ import Input from '@shared/FormInput'
 import { useOrbis } from '@context/Orbis'
 // import dynamic from 'next/dynamic'
 import Picker, { EmojiClickData, EmojiStyle, Theme } from 'emoji-picker-react'
-import useDarkMode from '@oceanprotocol/use-dark-mode'
-import { useMarketMetadata } from '@context/MarketMetadata'
 
-// interface ChatToolbarProps {
-//   mode: boolean
-// }
-
-const ChatToolbar = () => {
-  const { appConfig } = useMarketMetadata()
-  const darkMode = useDarkMode(false, appConfig?.darkModeConfig)
-
-  const { orbis, conversationId, convOpen } = useOrbis()
+export default function ChatToolbar({
+  callbackMessage
+}: {
+  callbackMessage: (post: OrbisPostInterface) => void
+}) {
+  const { orbis, conversationId, account, convOpen } = useOrbis()
   const [content, setContent] = useState<string>('')
   const [showPicker, setShowPicker] = useState(false)
 
@@ -41,6 +36,21 @@ const ChatToolbar = () => {
   }, [convOpen])
 
   const sendMessage = async () => {
+    const _callbackMessage: OrbisPostInterface = {
+      creator: account.did,
+      creator_details: {
+        did: account.did,
+        profile: account.profile
+      },
+      stream_id: null,
+      content: {
+        body: content
+      },
+      timestamp: Date.now()
+    }
+    callbackMessage(_callbackMessage)
+    setContent('')
+
     const res = await orbis.sendMessage({
       conversation_id: conversationId,
       body: content
@@ -48,6 +58,7 @@ const ChatToolbar = () => {
 
     if (res.status === 200) {
       console.log('succes send message with,', res)
+      setContent('')
     }
   }
 
@@ -61,7 +72,7 @@ const ChatToolbar = () => {
             size="small"
             placeholder="Type Message"
             value={content}
-            onChange={(e: any) => setContent(e.target.value)}
+            onInput={(e) => setContent(e.target.value)}
           />
           <button
             className={styles.button}
@@ -79,10 +90,10 @@ const ChatToolbar = () => {
         {showPicker && (
           <Picker
             onEmojiClick={onEmojiClick}
-            theme={darkMode.value ? Theme.DARK : Theme.LIGHT}
+            theme={Theme.DARK}
             emojiStyle={EmojiStyle.APPLE}
             autoFocusSearch={false}
-            lazyLoadEmojis={false}
+            lazyLoadEmojis={true}
             width={324}
             height={400}
           />
@@ -91,5 +102,3 @@ const ChatToolbar = () => {
     </div>
   )
 }
-
-export default ChatToolbar
diff --git a/src/components/@shared/Orbis/FloatingChat/Conversation.tsx b/src/components/@shared/Orbis/FloatingChat/Conversation.tsx
index bf65292ae..aaed43f23 100644
--- a/src/components/@shared/Orbis/FloatingChat/Conversation.tsx
+++ b/src/components/@shared/Orbis/FloatingChat/Conversation.tsx
@@ -17,6 +17,11 @@ function RenderDecryptedMessage({
 
   useEffect(() => {
     const decryptMessage = async (content: OrbisPostContentInterface) => {
+      if (!content?.encryptedMessage) {
+        setLoading(false)
+        setDecrypted(content.body)
+        return
+      }
       setLoading(true)
       const res = await orbis.decryptMessage(content)
 
diff --git a/src/components/@shared/Orbis/FloatingChat/index.tsx b/src/components/@shared/Orbis/FloatingChat/index.tsx
index 11d732708..2102d94d7 100644
--- a/src/components/@shared/Orbis/FloatingChat/index.tsx
+++ b/src/components/@shared/Orbis/FloatingChat/index.tsx
@@ -20,7 +20,7 @@ export default function FloatingChat() {
     conversationTitle
   } = useOrbis()
 
-  const [messages, setMessages] = useState([])
+  const [messages, setMessages] = useState<OrbisPostInterface[]>([])
   // const [conversationTitle, setConversationTitle] = useState(null)
   const [unreads, setUnreads] = useState([])
 
@@ -76,6 +76,23 @@ export default function FloatingChat() {
     }
   }
 
+  const callbackMessage = (nMessage: OrbisPostInterface) => {
+    if (nMessage.stream_id) {
+      const _nMessage = messages.findIndex((o) => {
+        return !o.stream_id
+      })
+      console.log(_nMessage)
+      if (_nMessage > -1) {
+        const _messages = [...messages]
+        _messages[_nMessage] = nMessage
+        setMessages(_messages)
+      }
+    } else {
+      const _messages = [...messages, nMessage]
+      setMessages(_messages)
+    }
+  }
+
   useEffect(() => {
     if (conversationId) {
       getMessages(conversationId)
@@ -152,7 +169,7 @@ export default function FloatingChat() {
               </button>
             </div>
             <Conversation messages={messages} />
-            <ChatToolbar />
+            <ChatToolbar callbackMessage={callbackMessage} />
           </div>
         )}
       </div>