From e11d4bc6ae167c0582350950d1aaf73789e76718 Mon Sep 17 00:00:00 2001 From: marcoelissa Date: Thu, 13 Oct 2022 17:19:41 +0700 Subject: [PATCH] rename FloatingChat to DirectMessages --- .../Orbis/{ => Comment}/Post.module.css | 0 .../@shared/Orbis/{ => Comment}/Post.tsx | 2 +- .../@shared/Orbis/Comment/Postbox.module.css | 20 +++++ .../@shared/Orbis/Comment/Postbox.tsx | 89 +++++++++++++++++++ .../@shared/Orbis/Comment/Posts.tsx | 7 +- .../@shared/Orbis/Comment/index.tsx | 15 ++-- .../ChatToolbar.module.css | 0 .../ChatToolbar.tsx | 0 .../Conversation.module.css | 0 .../Conversation.tsx | 0 .../ConversationItem.module.css | 0 .../ConversationItem.tsx | 0 .../EmojiPicker.module.css | 0 .../EmojiPicker.tsx | 0 .../Messages.tsx | 0 .../index.module.css | 0 .../index.tsx | 2 +- src/components/@shared/Orbis/Message.tsx | 5 -- src/components/@shared/Orbis/Postbox.tsx | 2 +- src/components/App/index.tsx | 4 +- 20 files changed, 125 insertions(+), 21 deletions(-) rename src/components/@shared/Orbis/{ => Comment}/Post.module.css (100%) rename src/components/@shared/Orbis/{ => Comment}/Post.tsx (98%) create mode 100644 src/components/@shared/Orbis/Comment/Postbox.module.css create mode 100644 src/components/@shared/Orbis/Comment/Postbox.tsx rename src/components/@shared/Orbis/{FloatingChat => DirectMessages}/ChatToolbar.module.css (100%) rename src/components/@shared/Orbis/{FloatingChat => DirectMessages}/ChatToolbar.tsx (100%) rename src/components/@shared/Orbis/{FloatingChat => DirectMessages}/Conversation.module.css (100%) rename src/components/@shared/Orbis/{FloatingChat => DirectMessages}/Conversation.tsx (100%) rename src/components/@shared/Orbis/{FloatingChat => DirectMessages}/ConversationItem.module.css (100%) rename src/components/@shared/Orbis/{FloatingChat => DirectMessages}/ConversationItem.tsx (100%) rename src/components/@shared/Orbis/{FloatingChat => DirectMessages}/EmojiPicker.module.css (100%) rename src/components/@shared/Orbis/{FloatingChat => DirectMessages}/EmojiPicker.tsx (100%) rename src/components/@shared/Orbis/{FloatingChat => DirectMessages}/Messages.tsx (100%) rename src/components/@shared/Orbis/{FloatingChat => DirectMessages}/index.module.css (100%) rename src/components/@shared/Orbis/{FloatingChat => DirectMessages}/index.tsx (99%) delete mode 100644 src/components/@shared/Orbis/Message.tsx diff --git a/src/components/@shared/Orbis/Post.module.css b/src/components/@shared/Orbis/Comment/Post.module.css similarity index 100% rename from src/components/@shared/Orbis/Post.module.css rename to src/components/@shared/Orbis/Comment/Post.module.css diff --git a/src/components/@shared/Orbis/Post.tsx b/src/components/@shared/Orbis/Comment/Post.tsx similarity index 98% rename from src/components/@shared/Orbis/Post.tsx rename to src/components/@shared/Orbis/Comment/Post.tsx index afeb48061..ed33c7046 100644 --- a/src/components/@shared/Orbis/Post.tsx +++ b/src/components/@shared/Orbis/Comment/Post.tsx @@ -124,7 +124,7 @@ export default function Post({
{showProfile && ( diff --git a/src/components/@shared/Orbis/Comment/Postbox.module.css b/src/components/@shared/Orbis/Comment/Postbox.module.css new file mode 100644 index 000000000..5a25d9921 --- /dev/null +++ b/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; +} diff --git a/src/components/@shared/Orbis/Comment/Postbox.tsx b/src/components/@shared/Orbis/Comment/Postbox.tsx new file mode 100644 index 000000000..d43847c5a --- /dev/null +++ b/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 ( + <> +
+
setPost(e.currentTarget.innerText)} + >
+
+ +
+
+ + ) +} diff --git a/src/components/@shared/Orbis/Comment/Posts.tsx b/src/components/@shared/Orbis/Comment/Posts.tsx index f334ac826..77e8a715c 100644 --- a/src/components/@shared/Orbis/Comment/Posts.tsx +++ b/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 }) { diff --git a/src/components/@shared/Orbis/Comment/index.tsx b/src/components/@shared/Orbis/Comment/index.tsx index 6332de7a8..c899e4315 100644 --- a/src/components/@shared/Orbis/Comment/index.tsx +++ b/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 }) {
diff --git a/src/components/@shared/Orbis/FloatingChat/ChatToolbar.module.css b/src/components/@shared/Orbis/DirectMessages/ChatToolbar.module.css similarity index 100% rename from src/components/@shared/Orbis/FloatingChat/ChatToolbar.module.css rename to src/components/@shared/Orbis/DirectMessages/ChatToolbar.module.css diff --git a/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx b/src/components/@shared/Orbis/DirectMessages/ChatToolbar.tsx similarity index 100% rename from src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx rename to src/components/@shared/Orbis/DirectMessages/ChatToolbar.tsx diff --git a/src/components/@shared/Orbis/FloatingChat/Conversation.module.css b/src/components/@shared/Orbis/DirectMessages/Conversation.module.css similarity index 100% rename from src/components/@shared/Orbis/FloatingChat/Conversation.module.css rename to src/components/@shared/Orbis/DirectMessages/Conversation.module.css diff --git a/src/components/@shared/Orbis/FloatingChat/Conversation.tsx b/src/components/@shared/Orbis/DirectMessages/Conversation.tsx similarity index 100% rename from src/components/@shared/Orbis/FloatingChat/Conversation.tsx rename to src/components/@shared/Orbis/DirectMessages/Conversation.tsx diff --git a/src/components/@shared/Orbis/FloatingChat/ConversationItem.module.css b/src/components/@shared/Orbis/DirectMessages/ConversationItem.module.css similarity index 100% rename from src/components/@shared/Orbis/FloatingChat/ConversationItem.module.css rename to src/components/@shared/Orbis/DirectMessages/ConversationItem.module.css diff --git a/src/components/@shared/Orbis/FloatingChat/ConversationItem.tsx b/src/components/@shared/Orbis/DirectMessages/ConversationItem.tsx similarity index 100% rename from src/components/@shared/Orbis/FloatingChat/ConversationItem.tsx rename to src/components/@shared/Orbis/DirectMessages/ConversationItem.tsx diff --git a/src/components/@shared/Orbis/FloatingChat/EmojiPicker.module.css b/src/components/@shared/Orbis/DirectMessages/EmojiPicker.module.css similarity index 100% rename from src/components/@shared/Orbis/FloatingChat/EmojiPicker.module.css rename to src/components/@shared/Orbis/DirectMessages/EmojiPicker.module.css diff --git a/src/components/@shared/Orbis/FloatingChat/EmojiPicker.tsx b/src/components/@shared/Orbis/DirectMessages/EmojiPicker.tsx similarity index 100% rename from src/components/@shared/Orbis/FloatingChat/EmojiPicker.tsx rename to src/components/@shared/Orbis/DirectMessages/EmojiPicker.tsx diff --git a/src/components/@shared/Orbis/FloatingChat/Messages.tsx b/src/components/@shared/Orbis/DirectMessages/Messages.tsx similarity index 100% rename from src/components/@shared/Orbis/FloatingChat/Messages.tsx rename to src/components/@shared/Orbis/DirectMessages/Messages.tsx diff --git a/src/components/@shared/Orbis/FloatingChat/index.module.css b/src/components/@shared/Orbis/DirectMessages/index.module.css similarity index 100% rename from src/components/@shared/Orbis/FloatingChat/index.module.css rename to src/components/@shared/Orbis/DirectMessages/index.module.css diff --git a/src/components/@shared/Orbis/FloatingChat/index.tsx b/src/components/@shared/Orbis/DirectMessages/index.tsx similarity index 99% rename from src/components/@shared/Orbis/FloatingChat/index.tsx rename to src/components/@shared/Orbis/DirectMessages/index.tsx index 2102d94d7..b45f23d15 100644 --- a/src/components/@shared/Orbis/FloatingChat/index.tsx +++ b/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, diff --git a/src/components/@shared/Orbis/Message.tsx b/src/components/@shared/Orbis/Message.tsx deleted file mode 100644 index 0396a81e5..000000000 --- a/src/components/@shared/Orbis/Message.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react' - -export default function Message() { - return
Message
-} diff --git a/src/components/@shared/Orbis/Postbox.tsx b/src/components/@shared/Orbis/Postbox.tsx index 1d2998601..7d44334d1 100644 --- a/src/components/@shared/Orbis/Postbox.tsx +++ b/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({ diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index 778bdf09b..4978ee315 100644 --- a/src/components/App/index.tsx +++ b/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({
{children}