update posts and floating function

src/@context/Orbis.tsx

@@ -16,6 +16,9 @@ function OrbisProvider({ children }: { children: ReactNode }): ReactElement {
   const { web3Provider } = useWeb3()
   const [orbis, setOrbis] = useState<OrbisInterface>()
   const [account, setAccount] = useState<OrbisAccountInterface>()
+  const [convOpen, setConvOpen] = useState(false)
+  const [conversationId, setConversationId] = useState(null)
+  const [conversations, setConversations] = useState([])
 
   // Connecting to Orbis
   const connectOrbis = async (provider: object): Promise<void> => {
@@ -65,14 +68,46 @@ function OrbisProvider({ children }: { children: ReactNode }): ReactElement {
   // }, [orbis])
 
   // Check if wallet connected
+
+  const getConversations = async () => {
+    const { data, error } = await orbis.getConversations({
+      did: account?.did
+      // context: 'ocean_market'
+    })
+
+    if (data) {
+      console.log(data)
+      setConversations(data)
+    }
+    if (error) {
+      console.log(error)
+    }
+  }
+
   useEffect(() => {
     if (!account && orbis && web3Provider) {
       checkConnection()
     }
+    if (account && orbis) {
+      getConversations()
+    }
   }, [account, orbis, web3Provider])
 
   return (
-    <OrbisContext.Provider value={{ orbis, account, connectOrbis }}>
+    <OrbisContext.Provider
+      value={{
+        orbis,
+        account,
+        connectOrbis,
+        setConvOpen,
+        convOpen,
+        conversationId,
+        setConversationId,
+        conversations,
+        setConversations,
+        getConversations
+      }}
+    >
       {children}
     </OrbisContext.Provider>
   )

src/@types/Orbis.d.ts

@@ -78,11 +78,11 @@ declare interface OrbisPostMentionsInterface {
 
 interface OrbisPostContentInterface {
   body: string
-  context: string
-  master: string
-  mentions: OrbisPostMentionsInterface[]
-  reply_to: string
-  type: string
+  context?: string
+  master?: string
+  mentions?: OrbisPostMentionsInterface[]
+  reply_to?: string
+  type?: string
 }
 
 interface OrbisCreatorMetadataInterface {
@@ -105,7 +105,7 @@ interface OrbisCreatorProfileInterface {
 
 declare interface OrbisPostInterface {
   content: OrbisPostContentInterface
-  context: string
+  context?: string
   context_details?: {
     channel_details?: {
       description: string
@@ -121,16 +121,16 @@ declare interface OrbisPostInterface {
     }
     group_id?: string
   }
-  count_commits: number
-  count_downvotes: number
-  count_haha: number
-  count_likes: number
-  count_replies: number
+  count_commits?: number
+  count_downvotes?: number
+  count_haha?: number
+  count_likes?: number
+  count_replies?: number
   creator: string
   creator_details?: {
-    a_r: number
+    a_r?: number
     did: string
-    metadata: OrbisCreatorMetadataInterface
+    metadata?: OrbisCreatorMetadataInterface
     nonces?: object
     profile?: OrbisCreatorProfileInterface
   }
@@ -145,7 +145,7 @@ declare interface OrbisPostInterface {
   reply_to_details?: OrbisPostContentInterface
   stream_id: string
   timestamp: number
-  type: string
+  type?: string
 }
 
 declare interface OrbisConversationInterface {

src/components/@shared/Orbis/Comment/Posts.tsx

@@ -5,40 +5,17 @@ import Button from '@shared/atoms/Button'
 import Post from '../Post'
 import styles from './Posts.module.css'
 
-export default function Posts({ id }: { id: string }) {
-  const { orbis } = useOrbis()
-  const [posts, setPosts] = useState<OrbisPostInterface[]>([])
-  const [page, setPage] = useState(0)
-  const [hasMore, setHasMore] = useState(false)
-  const [loading, setLoading] = useState(false)
-
-  const loadPosts = async () => {
-    setLoading(true)
-    const context = process.env.NODE_ENV
-      ? 'kjzl6cwe1jw149vvm1f8p9qlohhtkjuc302f22mipq95q7mevdljgx3tv9swujy'
-      : id
-    const { data, error } = await orbis.getPosts({ context: id }, page)
-    if (error) {
-      console.log(error)
-    }
-    if (data) {
-      const newPosts = posts.concat(data)
-      setPosts(newPosts)
-
-      const _hasMore = data.length >= 50
-      setHasMore(_hasMore)
-
-      if (_hasMore) setPage((prev) => prev + 1)
-    }
-    setLoading(false)
-  }
-
-  useEffect(() => {
-    if (id) {
-      loadPosts()
-    }
-  }, [id])
-
+export default function Posts({
+  posts,
+  loadPosts,
+  hasMore,
+  loading
+}: {
+  posts: OrbisPostInterface[]
+  loadPosts: any
+  hasMore: boolean
+  loading: boolean
+}) {
   return (
     <div className={styles.posts}>
       <div>

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

@@ -1,10 +1,67 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import styles from './index.module.css'
 import Posts from './Posts'
 import Postbox from '../Postbox'
 import CommentIcon from '@images/comment.svg'
+import { useOrbis } from '@context/Orbis'
 
 export default function Comment({ asset }: { asset: AssetExtended }) {
+  const { orbis } = useOrbis()
+  const [posts, setPosts] = useState<OrbisPostInterface[]>([])
+  const [page, setPage] = useState(0)
+  const [hasMore, setHasMore] = useState(false)
+  const [loading, setLoading] = useState(false)
+
+  const loadPosts = async () => {
+    setLoading(true)
+    const context = process.env.NODE_ENV
+      ? 'kjzl6cwe1jw149vvm1f8p9qlohhtkjuc302f22mipq95q7mevdljgx3tv9swujy'
+      : asset?.id
+    const { data, error } = await orbis.getPosts({ context: asset?.id }, page)
+    if (error) {
+      console.log(error)
+    }
+    if (data) {
+      const newPosts = posts.concat(data)
+      setPosts(newPosts)
+
+      const _hasMore = data.length >= 50
+      setHasMore(_hasMore)
+
+      if (_hasMore) setPage((prev) => prev + 1)
+    }
+    setLoading(false)
+  }
+
+  useEffect(() => {
+    if (asset?.id) {
+      loadPosts()
+    }
+  }, [asset])
+
+  const callbackPost = (nPost: OrbisPostInterface) => {
+    // console.log(nPost)
+    if (nPost.stream_id) {
+      // Search and replace
+      const _nPost = posts.findIndex((o) => {
+        return !o.stream_id
+      })
+      console.log(_nPost)
+      if (_nPost > -1) {
+        const _posts = [...posts]
+        _posts[_nPost] = nPost
+        setPosts(_posts)
+      }
+    } else {
+      const _posts = [nPost, ...posts]
+      setPosts(_posts)
+    }
+  }
+
+  useEffect(() => {
+    console.log(posts)
+  }, [posts])
+
   return (
     <div className={styles.comment}>
       <div className={styles.header}>
@@ -12,10 +69,19 @@ export default function Comment({ asset }: { asset: AssetExtended }) {
         <span>Public Comment</span>
       </div>
       <div className={styles.postBox}>
-        <Postbox id={asset?.id} placeholder="Share your comment here..." />
+        <Postbox
+          callbackPost={callbackPost}
+          id={asset?.id}
+          placeholder="Share your comment here..."
+        />
       </div>
       <div className={styles.content}>
-        <Posts id={asset?.id} />
+        <Posts
+          posts={posts}
+          loading={loading}
+          loadPosts={loadPosts}
+          hasMore={hasMore}
+        />
       </div>
     </div>
   )

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

@@ -1,22 +1,43 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import styles from './ChatToolbar.module.css'
 import SendIcon from '@images/send.svg'
 import Input from '@shared/FormInput'
+import { useOrbis } from '@context/Orbis'
 
 export default function ChatToolbar() {
+  const { orbis, conversationId } = useOrbis()
+  const [content, setContent] = useState()
+
+  useEffect(() => {
+    console.log(content)
+  }, [content])
+
+  const sendMessage = async () => {
+    const res = await orbis.sendMessage({
+      conversation_id: conversationId,
+      body: content
+    })
+
+    if (res.status === 200) {
+      console.log('succes send message with,', res)
+    }
+  }
+
   return (
     <div className={styles.chatToolbar}>
-      <form className={styles.chatMessage}>
+      <div className={styles.chatMessage}>
         <Input
           type="input"
           name="message"
           size="small"
           placeholder="Type Message"
+          value={content}
+          onInput={(e) => setContent(e.target.value)}
         />
-        <button className={styles.button}>
+        <button className={styles.button} onClick={sendMessage}>
           <SendIcon className={styles.sendIcon} />
         </button>
-      </form>
+      </div>
     </div>
   )
 }

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

@@ -9,27 +9,20 @@ import { useOrbis } from '@context/Orbis'
 import ConversationItem from './ConversationItem'
 
 export default function FloatingChat() {
-  const { orbis, account } = useOrbis()
+  const {
+    orbis,
+    account,
+    convOpen,
+    setConvOpen,
+    conversationId,
+    setConversationId,
+    conversations
+  } = useOrbis()
 
-  const [opened, setOpened] = useState(false)
-  const [conversationId, setConversationId] = useState(null)
-  const [conversations, setConversations] = useState([])
   const [messages, setMessages] = useState([])
   const [conversationTitle, setConversationTitle] = useState(null)
   const [unreads, setUnreads] = useState([])
 
-  const getConversations = async () => {
-    const { data, error } = await orbis.getConversations({ did: account?.did })
-
-    if (data) {
-      console.log(data)
-      setConversations(data)
-    }
-    if (error) {
-      console.log(error)
-    }
-  }
-
   const getNotifications = async () => {
     const { data, error } = await orbis.api.rpc('orbis_f_notifications', {
       user_did: account?.did || 'none',
@@ -58,7 +51,6 @@ export default function FloatingChat() {
   useEffect(() => {
     if (orbis && account) {
       getNotifications()
-      getConversations()
     }
   }, [orbis, account])
 
@@ -78,21 +70,26 @@ export default function FloatingChat() {
   function openConversation(conversation: OrbisConversationInterface | null) {
     if (!conversation) {
       setConversationId(null)
-      setConversationTitle(null)
-      setMessages([])
     } else {
       setConversationId(conversation.stream_id)
-      getMessages(conversation.stream_id)
-      // Get conversation title
-      const recipient = conversation.recipients_details.find(
-        (o) => o.did !== account.did
-      )
-      setConversationTitle(recipient?.metadata?.ensName)
     }
   }
 
+  useEffect(() => {
+    if (conversationId) {
+      getMessages(conversationId)
+      // Get conversation title
+      // const recipient = conversation.recipients_details.find(
+      //   (o) => o.did !== account.did
+      // )
+      // setConversationTitle(recipient?.metadata?.ensName)
+    } else {
+      setMessages([])
+    }
+  }, [conversationId])
+
   return (
-    <div className={`${styles.wrapper} ${!opened && styles.isClosed}`}>
+    <div className={`${styles.wrapper} ${!convOpen && styles.isClosed}`}>
       <div className={styles.floating}>
         <div className={styles.header}>
           <ChatBubble role="img" aria-label="Chat" className={styles.icon} />
@@ -103,24 +100,27 @@ export default function FloatingChat() {
           <button
             type="button"
             className={styles.toggle}
-            onClick={() => setOpened(!opened)}
+            onClick={() => setConvOpen(!convOpen)}
           >
             <ChevronDoubleUp
               role="img"
               aria-label="Toggle"
-              className={`${styles.icon} ${opened && styles.isFlipped}`}
+              className={`${styles.icon} ${convOpen && styles.isFlipped}`}
             />
           </button>
         </div>
         <div className={styles.conversations}>
-          {conversations.map((conversation, index) => (
-            <ConversationItem
-              key={index}
-              conversation={conversation}
-              unreads={getConversationUnreads(conversation.stream_id)}
-              onClick={() => openConversation(conversation)}
-            />
-          ))}
+          {conversations &&
+            conversations.map(
+              (conversation: OrbisConversationInterface, index: number) => (
+                <ConversationItem
+                  key={index}
+                  conversation={conversation}
+                  unreads={getConversationUnreads(conversation.stream_id)}
+                  onClick={() => openConversation(conversation)}
+                />
+              )
+            )}
         </div>
         {conversationId && (
           <div className={styles.conversation}>
@@ -141,12 +141,12 @@ export default function FloatingChat() {
               <button
                 type="button"
                 className={styles.toggle}
-                onClick={() => setOpened(!opened)}
+                onClick={() => setConvOpen(!convOpen)}
               >
                 <ChevronDoubleUp
                   role="img"
                   aria-label="Toggle"
-                  className={`${styles.icon} ${opened && styles.isFlipped}`}
+                  className={`${styles.icon} ${convOpen && styles.isFlipped}`}
                 />
               </button>
             </div>

src/components/@shared/Orbis/Postbox.tsx

@@ -5,17 +5,19 @@ import { useOrbis } from '@context/Orbis'
 
 export default function Postbox({
   id,
-  placeholder = 'Share your post here...'
+  placeholder = 'Share your post here...',
+  callbackPost
 }: {
   placeholder: string
   id: string
+  callbackPost: (post: OrbisPostInterface) => void
 }) {
   const [post, setPost] = useState()
 
   const postBoxArea = useRef(null)
-  const { orbis } = useOrbis()
+  const { orbis, account } = useOrbis()
 
-  function handleInput(e) {
+  function handleInput(e: any) {
     setPost(e.currentTarget.innerText)
     const _keyCode = e.nativeEvent.data
 
@@ -23,7 +25,22 @@ export default function Postbox({
   }
 
   const createPost = async () => {
-    console.log('clicked')
+    // console.log(post)
+    const _callbackContent: OrbisPostInterface = {
+      creator: account.did,
+      creator_details: {
+        did: account.did,
+        profile: account.profile
+      },
+      stream_id: null,
+      content: {
+        body: post
+      },
+      timestamp: Date.now()
+    }
+    // console.log(_callbackContent)
+    callbackPost(_callbackContent)
+    // console.log('clicked')
     const res = await orbis.createPost({ body: post, context: id })
 
     if (res.status === 200) {
@@ -33,6 +50,17 @@ export default function Postbox({
         postBoxArea.current.textContent = ''
         postBoxArea.current.focus()
       }
+
+      setTimeout(async () => {
+        const { data, error } = await orbis.getPost(res.doc)
+        console.log(data)
+        if (data) {
+          callbackPost(data)
+        }
+        if (error) {
+          console.log(error)
+        }
+      }, 2000)
     }
   }
 

src/components/Profile/Header/index.tsx

@@ -7,6 +7,9 @@ import Account from './Account'
 import styles from './index.module.css'
 import { useProfile } from '@context/Profile'
 import { useOrbis } from '@context/Orbis'
+import { Context } from 'urql'
+import { filter } from 'lodash'
+import { sleep } from '@utils/index'
 
 const isDescriptionTextClamped = () => {
   const el = document.getElementById('description')
@@ -27,7 +30,15 @@ export default function AccountHeader({
   accountId: string
 }): ReactElement {
   const { profile } = useProfile()
-  const { orbis, account } = useOrbis()
+  const {
+    orbis,
+    account,
+    convOpen,
+    setConvOpen,
+    conversationId,
+    setConversationId,
+    conversations
+  } = useOrbis()
   const [isShowMore, setIsShowMore] = useState(false)
   const [userDid, setUserDid] = useState<string>()
 
@@ -37,11 +48,18 @@ export default function AccountHeader({
 
   const getDid = async () => {
     const { data, error } = await orbis.getDids(accountId)
+    console.log(data)
     if (data) {
       if (data.length > 0) {
-        setUserDid(data[0])
+        console.log(data[0].did)
+        setUserDid(data[0].did)
+      } else if (accountId) {
+        console.log(accountId)
+        setUserDid('did:pkh:eip155:1:' + accountId?.toLocaleLowerCase())
       } else {
-        setUserDid('did:pkh:eip155:1:' + accountId.toLocaleLowerCase())
+        console.log('try again')
+        await sleep(1000)
+        getDid()
       }
     }
 
@@ -51,18 +69,26 @@ export default function AccountHeader({
   }
 
   const createConversation = async () => {
-    // const res = await orbis.createConversation({
-    //   recipients: [userDid]
-    // })
-    // if (res.status === 200) {
-    //   console.log(res)
-    // }
+    const res = await orbis.createConversation({
+      recipients: [userDid],
+      context: 'ocean_market'
+    })
+    if (res.status === 200) {
+      console.log(res)
+      const { data } = await orbis.getConversation(res.doc)
+      console.log(data)
+      setConversationId(res.doc)
+      setConvOpen(true)
+    }
     console.log('clicked')
   }
 
   useEffect(() => {
-    console.log(userDid)
-  }, [userDid])
+    if (orbis && accountId) {
+      getDid()
+      // console.log(userDid)
+    }
+  }, [accountId])
 
   const clickHandler = () => {
     console.log(accountId)
@@ -71,6 +97,21 @@ export default function AccountHeader({
     createConversation()
   }
 
+  const checkConversation = () => {
+    const filtered = conversations.filter(
+      (conversation: OrbisConversationInterface) => {
+        // console.log(conversation)
+        console.log(userDid)
+        return conversation.recipients.includes(userDid)
+      }
+    )
+    if (!filtered.length) {
+      if (userDid) {
+        createConversation()
+      }
+    }
+  }
+
   return (
     <div className={styles.grid}>
       <div>
@@ -84,7 +125,8 @@ export default function AccountHeader({
             style="primary"
             size="small"
             className={styles.sendMessage}
-            onClick={clickHandler}
+            disabled={!userDid}
+            onClick={checkConversation}
           >
             Send Messages
           </Button>