rename FloatingChat to DirectMessages

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

@@ -124,7 +124,7 @@ export default function Post({
       <Blockies
         accountId={address}
         className={styles.blockies}
-        image={profile?.image || post?.creator_details?.profile?.pfp}
+        image={profile?.image}
       />
       <div className={styles.content}>
         {showProfile && (

src/components/@shared/Orbis/Comment/Postbox.module.css

@@ -0,0 +1,20 @@
+.postbox {
+  width: 100%;
+}
+
+.postbox .editable {
+  padding: calc(var(--spacer) / 4);
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border-color);
+  min-height: 80px;
+  margin-bottom: calc(var(--spacer) / 4);
+}
+
+.postbox .editable:empty:before {
+  content: attr(data-placeholder);
+  color: var(--font-color-text);
+}
+
+.postbox .sendButtonWrap {
+  text-align: right;
+}

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

@@ -0,0 +1,89 @@
+import React, { useRef, useState } from 'react'
+import Button from '@shared/atoms/Button'
+import styles from './Postbox.module.css'
+import { useOrbis } from '@context/Orbis'
+
+export default function Postbox({
+  assetId,
+  placeholder = 'Share your post here...',
+  callbackPost
+}: {
+  placeholder: string
+  assetId: string
+  callbackPost: (post: OrbisPostInterface) => void
+}) {
+  const [post, setPost] = useState('')
+
+  const postBoxArea = useRef(null)
+  const { orbis, account } = useOrbis()
+
+  const createPost = async () => {
+    // console.log(post)
+    const _callbackContent: OrbisPostInterface = {
+      creator: account.did,
+      creator_details: {
+        did: account.did,
+        profile: account.profile
+      },
+      stream_id: null,
+      content: {
+        body: post
+      },
+      timestamp: Math.floor(Date.now() / 1000),
+      count_replies: 0,
+      count_likes: 0,
+      count_downvotes: 0,
+      count_haha: 0
+    }
+    console.log(_callbackContent)
+    callbackPost(_callbackContent)
+
+    const res = await orbis.createPost({ body: post, context: assetId })
+
+    if (res.status === 200) {
+      console.log('success with,', res)
+      setPost(null)
+      if (postBoxArea.current) {
+        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)
+    }
+  }
+
+  return (
+    <>
+      <div className={styles.postbox}>
+        <div
+          id="postbox-area"
+          ref={postBoxArea}
+          className={styles.editable}
+          contentEditable={true}
+          data-placeholder={placeholder}
+          onInput={(e) => setPost(e.currentTarget.innerText)}
+        ></div>
+        <div className={styles.sendButtonWrap}>
+          <Button
+            style="primary"
+            type="submit"
+            size="small"
+            disabled={false}
+            onClick={createPost}
+          >
+            Send
+          </Button>
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -1,8 +1,7 @@
-import React, { useState, useEffect } from 'react'
-import { useOrbis } from '@context/Orbis'
+import React from 'react'
 import Loader from '@shared/atoms/Loader'
 import Button from '@shared/atoms/Button'
-import Post from '../Post'
+import Post from './Post'
 import styles from './Posts.module.css'
 
 export default function Posts({
@@ -12,7 +11,7 @@ export default function Posts({
   loading
 }: {
   posts: OrbisPostInterface[]
-  loadPosts: any
+  loadPosts: () => void
   hasMore: boolean
   loading: boolean
 }) {

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import styles from './index.module.css'
 import Posts from './Posts'
-import Postbox from '../Postbox'
+import Postbox from './Postbox'
 import CommentIcon from '@images/comment.svg'
 import { useOrbis } from '@context/Orbis'
 
@@ -14,9 +14,10 @@ export default function Comment({ asset }: { asset: AssetExtended }) {
 
   const loadPosts = async () => {
     setLoading(true)
-    const context = process.env.NODE_ENV
-      ? 'kjzl6cwe1jw149vvm1f8p9qlohhtkjuc302f22mipq95q7mevdljgx3tv9swujy'
-      : asset?.id
+    // const context =
+    //   process.env.NODE_ENV === 'development'
+    //     ? 'kjzl6cwe1jw149vvm1f8p9qlohhtkjuc302f22mipq95q7mevdljgx3tv9swujy'
+    //     : asset?.id
     const { data, error } = await orbis.getPosts({ context: asset?.id }, page)
     if (error) {
       console.log(error)
@@ -34,10 +35,10 @@ export default function Comment({ asset }: { asset: AssetExtended }) {
   }
 
   useEffect(() => {
-    if (asset?.id) {
+    if (asset?.id && !posts.length && orbis) {
       loadPosts()
     }
-  }, [asset])
+  }, [asset, posts, orbis])
 
   const callbackPost = (nPost: OrbisPostInterface) => {
     // console.log(nPost)
@@ -71,7 +72,7 @@ export default function Comment({ asset }: { asset: AssetExtended }) {
       <div className={styles.postBox}>
         <Postbox
           callbackPost={callbackPost}
-          id={asset?.id}
+          assetId={asset?.id}
           placeholder="Share your comment here..."
         />
       </div>

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

@@ -8,7 +8,7 @@ import ChatToolbar from './ChatToolbar'
 import { useOrbis } from '@context/Orbis'
 import ConversationItem from './ConversationItem'
 
-export default function FloatingChat() {
+export default function DirectMessages() {
   const {
     orbis,
     account,

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

@@ -1,5 +0,0 @@
-import React from 'react'
-
-export default function Message() {
-  return <div>Message</div>
-}

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

@@ -2,7 +2,7 @@ import React, { useRef, useState, useEffect } from 'react'
 import Button from '@shared/atoms/Button'
 import styles from './Postbox.module.css'
 import { useOrbis } from '@context/Orbis'
-import EmojiPicker from './FloatingChat/EmojiPicker'
+import EmojiPicker from './DirectMessages/EmojiPicker'
 import { EmojiClickData, EmojiStyle } from 'emoji-picker-react'
 
 export default function Postbox({

src/components/App/index.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'
 import Alert from '@shared/atoms/Alert'
 import Footer from '../Footer/Footer'
 import Header from '../Header'
-import FloatingChat from '@shared/Orbis/FloatingChat'
+import DirectMessages from '@shared/Orbis/DirectMessages'
 import { useWeb3 } from '@context/Web3'
 import { useAccountPurgatory } from '@hooks/useAccountPurgatory'
 import AnnouncementBanner from '@shared/AnnouncementBanner'
@@ -39,7 +39,7 @@ export default function App({
       <main className={styles.main}>{children}</main>
       <Footer />
 
-      <FloatingChat />
+      <DirectMessages />
 
       {appConfig?.privacyPreferenceCenter === 'true' && (
         <PrivacyPreferenceCenter style="small" />