adding orbis function

src/components/@shared/Orbis/FloatingChat/Conversation.tsx

@@ -1,7 +1,13 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import styles from './Conversation.module.css'
 
-export default function DmConversation() {
+export default function DmConversation({
+  messages,
+  orbis
+}: {
+  messages: OrbisPostInterface[]
+  orbis: OrbisInterface
+}) {
   const dummyData = [
     {
       name: 'realdatawhale.eth',
@@ -17,23 +23,39 @@ export default function DmConversation() {
     }
   ]
 
+  const decryptMessage = async (content: OrbisPostContentInterface) => {
+    const res = await orbis.decryptMessage(content)
+
+    if (res) {
+      console.log(res)
+    }
+    return <>{res.result}</>
+  }
+
+  useEffect(() => {
+    console.log(messages)
+    messages.forEach((message) => {
+      decryptMessage(message?.content)
+    })
+  }, [messages])
+
   return (
     <>
-      {dummyData.map((dm, index) => (
+      {messages.map((dm, index) => (
         <div className={styles.conversationBox} key={index}>
           <div className={styles.conversationRecipient}>
             <div className={styles.colAvatar}>
-              <img src={dm.image} alt="Avatar" className={styles.avatar}></img>
+              {/* <img src={} alt="Avatar" className={styles.avatar}></img> */}
             </div>
             <div className={styles.colBubble}>
               <div className={styles.chatBubbleItem}>
                 <div className={`${styles.chatBubble} ${styles.chatPrimary}`}>
-                  {dm.chat1}
+                  (<>{decryptMessage(dm.content)}</>)
                 </div>
               </div>
               <div className={styles.chatBubbleItem}>
                 <div className={`${styles.chatBubble} ${styles.chatPrimary}`}>
-                  {dm.chat2}
+                  {/* {dm.chat2} */}
                 </div>
                 <div className={styles.chatStamp}>{dm.timestamp}</div>
               </div>
@@ -43,17 +65,17 @@ export default function DmConversation() {
             <div className={styles.colBubble}>
               <div className={styles.chatBubbleItem}>
                 <div className={`${styles.chatBubble} ${styles.chatDefault}`}>
-                  {dm.chat3}
+                  {/* {dm.chat3} */}
                 </div>
               </div>
               <div className={styles.chatBubbleItem}>
                 <div className={`${styles.chatBubble} ${styles.chatDefault}`}>
-                  {dm.chat4}
+                  {/* {dm.chat4} */}
                 </div>
               </div>
               <div className={styles.chatBubbleItem}>
                 <div className={`${styles.chatBubble} ${styles.chatDefault}`}>
-                  {dm.chat5}
+                  {/* {dm.chat5} */}
                 </div>
                 <div className={styles.chatStamp}>{dm.timestamp}</div>
               </div>
@@ -61,22 +83,22 @@ export default function DmConversation() {
           </div>
           <div className={styles.conversationRecipient}>
             <div className={styles.colAvatar}>
-              <img src={dm.image} alt="Avatar" className={styles.avatar}></img>
+              {/* <img src={} alt="Avatar" className={styles.avatar}></img> */}
             </div>
             <div className={styles.colBubble}>
               <div className={styles.chatBubbleItem}>
                 <div className={`${styles.chatBubble} ${styles.chatPrimary}`}>
-                  {dm.chat1}
+                  {/* {dm.chat1} */}
                 </div>
               </div>
               <div className={styles.chatBubbleItem}>
                 <div className={`${styles.chatBubble} ${styles.chatPrimary}`}>
-                  {dm.chat4}
+                  {/* {dm.chat4} */}
                 </div>
               </div>
               <div className={styles.chatBubbleItem}>
                 <div className={`${styles.chatBubble} ${styles.chatPrimary}`}>
-                  {dm.chat2}
+                  {/* {dm.chat2} */}
                 </div>
                 <div className={styles.chatStamp}>{dm.timestamp}</div>
               </div>

src/components/@shared/Orbis/FloatingChat/index.module.css

@@ -174,7 +174,7 @@
   white-space: nowrap;
 }
 
-.dmDetails {
+.conversationId {
   position: absolute;
   top: 0;
   left: 0;

src/components/@shared/Orbis/FloatingChat/index.tsx

@@ -1,14 +1,49 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import ChatBubble from '@images/chatbubble.svg'
 import ArrowBack from '@images/arrow.svg'
 import ChevronDoubleUp from '@images/chevrondoubleup.svg'
 import styles from './index.module.css'
 import Conversation from './Conversation'
 import ChatToolbar from './ChatToolbar'
+import { useOrbis } from '@context/Orbis'
 
 export default function FloatingChat() {
   const [opened, setOpened] = useState(false)
-  const [dmDetails, setDmDetails] = useState(null)
+  const [conversationId, setConversationId] = useState(null)
+  const [conversations, setConversations] = useState([])
+  const [messages, setMessages] = useState([])
+
+  const { orbis, account } = useOrbis()
+
+  const getConversations = async () => {
+    const { data, error } = await orbis.getConversations({ did: account?.did })
+
+    if (data) {
+      console.log(data)
+      setConversations(data)
+    }
+    if (error) {
+      console.log(error)
+    }
+  }
+
+  useEffect(() => {
+    if (orbis && account) {
+      getConversations()
+    }
+  }, [orbis, account])
+
+  const getMessages = async (id: string) => {
+    const { data, error } = await orbis.getMessages(id)
+
+    if (data) {
+      console.log(data)
+      setMessages(data)
+    }
+    if (error) {
+      console.log(error)
+    }
+  }
 
   const dummyData = [
     {
@@ -45,8 +80,9 @@ export default function FloatingChat() {
     return prev + +current.count
   }, 0)
 
-  function openDetails(id: string) {
-    setDmDetails(id)
+  function openConversation(id: string) {
+    setConversationId(id)
+    getMessages(id)
   }
 
   return (
@@ -69,11 +105,11 @@ export default function FloatingChat() {
           </button>
         </div>
         <div className={styles.dmList}>
-          {dummyData.map((dm, index) => (
+          {conversations.map((dm, index) => (
             <div
               key={index}
               className={styles.dmItem}
-              onClick={() => openDetails(dm.name)}
+              onClick={() => openConversation(dm.stream_id)}
             >
               <div className={styles.accountAvatarSet}>
                 <img
@@ -95,14 +131,14 @@ export default function FloatingChat() {
             </div>
           ))}
         </div>
-        {dmDetails && (
-          <div className={styles.dmDetails}>
+        {conversationId && (
+          <div className={styles.conversationId}>
             <div className={styles.header}>
               <button
                 type="button"
                 aria-label="button"
                 className={styles.btnBack}
-                onClick={() => openDetails(null)}
+                onClick={() => openConversation(null)}
               >
                 <ArrowBack
                   role="img"
@@ -110,7 +146,7 @@ export default function FloatingChat() {
                   className={styles.back}
                 />
               </button>
-              <span>{dmDetails}</span>
+              <span>{conversationId}</span>
               <button
                 type="button"
                 className={styles.toggle}
@@ -123,7 +159,7 @@ export default function FloatingChat() {
                 />
               </button>
             </div>
-            <Conversation />
+            <Conversation messages={messages} orbis={orbis} />
             <ChatToolbar />
           </div>
         )}