From 52b9a006d8ac0c11b582015e90d5f1aab7c0dfaf Mon Sep 17 00:00:00 2001
From: Dollar Bull <ramadhanakhri@gmail.com>
Date: Tue, 4 Oct 2022 17:01:42 +0700
Subject: [PATCH] updating post comment function

---
 .../@shared/Orbis/Comment/Posts.tsx           |  2 +-
 .../@shared/Orbis/Comment/index.tsx           |  2 +-
 src/components/@shared/Orbis/Postbox.tsx      | 44 ++++++++++++++++---
 src/components/Profile/Header/index.tsx       | 13 +++---
 4 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/src/components/@shared/Orbis/Comment/Posts.tsx b/src/components/@shared/Orbis/Comment/Posts.tsx
index 90fb6f969..7ac4f24fd 100644
--- a/src/components/@shared/Orbis/Comment/Posts.tsx
+++ b/src/components/@shared/Orbis/Comment/Posts.tsx
@@ -17,7 +17,7 @@ export default function Posts({ id }: { id: string }) {
     const context = process.env.NODE_ENV
       ? 'kjzl6cwe1jw149vvm1f8p9qlohhtkjuc302f22mipq95q7mevdljgx3tv9swujy'
       : id
-    const { data, error } = await orbis.getPosts({ context }, page)
+    const { data, error } = await orbis.getPosts({ context: id }, page)
     if (error) {
       console.log(error)
     }
diff --git a/src/components/@shared/Orbis/Comment/index.tsx b/src/components/@shared/Orbis/Comment/index.tsx
index 27e2a3c39..69657d03e 100644
--- a/src/components/@shared/Orbis/Comment/index.tsx
+++ b/src/components/@shared/Orbis/Comment/index.tsx
@@ -12,7 +12,7 @@ export default function Comment({ asset }: { asset: AssetExtended }) {
         <span>Public Comment</span>
       </div>
       <div className={styles.postBox}>
-        <Postbox placeholder="Share your comment here..." />
+        <Postbox id={asset?.id} placeholder="Share your comment here..." />
       </div>
       <div className={styles.content}>
         <Posts id={asset?.id} />
diff --git a/src/components/@shared/Orbis/Postbox.tsx b/src/components/@shared/Orbis/Postbox.tsx
index 6749524bd..7e302870f 100644
--- a/src/components/@shared/Orbis/Postbox.tsx
+++ b/src/components/@shared/Orbis/Postbox.tsx
@@ -1,18 +1,41 @@
-import React, { useRef } from 'react'
+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({
+  id,
   placeholder = 'Share your post here...'
 }: {
   placeholder: string
+  id: string
 }) {
-  const postBoxArea = useRef(null)
+  const [post, setPost] = useState()
+
+  const postBoxArea = useRef(null)
+  const { orbis } = useOrbis()
+
+  function handleInput(e) {
+    setPost(e.currentTarget.innerText)
+    const _keyCode = e.nativeEvent.data
+
+    /** Manage custom actions for some keycodes */
+  }
+
+  const createPost = async () => {
+    console.log('clicked')
+    const res = await orbis.createPost({ body: post, context: id })
+
+    if (res.status === 200) {
+      console.log('success with,', res)
+      setPost(null)
+      if (postBoxArea.current) {
+        postBoxArea.current.textContent = ''
+        postBoxArea.current.focus()
+      }
+    }
+  }
 
-  // const handleInput = (e: Event): FormEvent<HTMLDivElement> => {
-  //   e.preventDefault()
-  //   console.log(e)
-  // }
   return (
     <>
       <div className={styles.postbox}>
@@ -22,9 +45,16 @@ export default function Postbox({
           className={styles.editable}
           contentEditable={true}
           data-placeholder={placeholder}
+          onInput={(e) => handleInput(e)}
         ></div>
         <div className={styles.sendButtonWrap}>
-          <Button style="primary" type="submit" size="small" disabled={false}>
+          <Button
+            style="primary"
+            type="submit"
+            size="small"
+            disabled={false}
+            onClick={createPost}
+          >
             Send
           </Button>
         </div>
diff --git a/src/components/Profile/Header/index.tsx b/src/components/Profile/Header/index.tsx
index b9c7546a4..9146f77d9 100644
--- a/src/components/Profile/Header/index.tsx
+++ b/src/components/Profile/Header/index.tsx
@@ -50,12 +50,13 @@ 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]
+    // })
+    // if (res.status === 200) {
+    //   console.log(res)
+    // }
+    console.log('clicked')
   }
 
   useEffect(() => {