From 49bf6fa251a8575784581450f14b3542251e1e48 Mon Sep 17 00:00:00 2001 From: Dollar Bull Date: Tue, 4 Oct 2022 22:09:32 +0700 Subject: [PATCH] update posts and floating function --- src/@context/Orbis.tsx | 37 ++++++++- src/@types/Orbis.d.ts | 28 +++---- .../@shared/Orbis/Comment/Posts.tsx | 45 +++-------- .../@shared/Orbis/Comment/index.tsx | 72 +++++++++++++++++- .../Orbis/FloatingChat/ChatToolbar.tsx | 29 ++++++- .../@shared/Orbis/FloatingChat/index.tsx | 76 +++++++++---------- src/components/@shared/Orbis/Postbox.tsx | 36 ++++++++- src/components/Profile/Header/index.tsx | 66 +++++++++++++--- 8 files changed, 279 insertions(+), 110 deletions(-) diff --git a/src/@context/Orbis.tsx b/src/@context/Orbis.tsx index aee563e5d..0a1e3ab8d 100644 --- a/src/@context/Orbis.tsx +++ b/src/@context/Orbis.tsx @@ -16,6 +16,9 @@ function OrbisProvider({ children }: { children: ReactNode }): ReactElement { const { web3Provider } = useWeb3() const [orbis, setOrbis] = useState() const [account, setAccount] = useState() + const [convOpen, setConvOpen] = useState(false) + const [conversationId, setConversationId] = useState(null) + const [conversations, setConversations] = useState([]) // Connecting to Orbis const connectOrbis = async (provider: object): Promise => { @@ -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 ( - + {children} ) diff --git a/src/@types/Orbis.d.ts b/src/@types/Orbis.d.ts index 42c75a9ec..e76d873be 100644 --- a/src/@types/Orbis.d.ts +++ b/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 { diff --git a/src/components/@shared/Orbis/Comment/Posts.tsx b/src/components/@shared/Orbis/Comment/Posts.tsx index 7ac4f24fd..f334ac826 100644 --- a/src/components/@shared/Orbis/Comment/Posts.tsx +++ b/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([]) - 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 (
diff --git a/src/components/@shared/Orbis/Comment/index.tsx b/src/components/@shared/Orbis/Comment/index.tsx index 69657d03e..6332de7a8 100644 --- a/src/components/@shared/Orbis/Comment/index.tsx +++ b/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([]) + 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 (
@@ -12,10 +69,19 @@ export default function Comment({ asset }: { asset: AssetExtended }) { Public Comment
- +
- +
) diff --git a/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx b/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx index bbe932459..1cda9755c 100644 --- a/src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx +++ b/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 (
-
+
setContent(e.target.value)} /> - - +
) } diff --git a/src/components/@shared/Orbis/FloatingChat/index.tsx b/src/components/@shared/Orbis/FloatingChat/index.tsx index 56d802253..a3f62b0dc 100644 --- a/src/components/@shared/Orbis/FloatingChat/index.tsx +++ b/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 ( -
+
@@ -103,24 +100,27 @@ export default function FloatingChat() {
- {conversations.map((conversation, index) => ( - openConversation(conversation)} - /> - ))} + {conversations && + conversations.map( + (conversation: OrbisConversationInterface, index: number) => ( + openConversation(conversation)} + /> + ) + )}
{conversationId && (
@@ -141,12 +141,12 @@ export default function FloatingChat() {
diff --git a/src/components/@shared/Orbis/Postbox.tsx b/src/components/@shared/Orbis/Postbox.tsx index 7e302870f..ced9fc5b0 100644 --- a/src/components/@shared/Orbis/Postbox.tsx +++ b/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) } } diff --git a/src/components/Profile/Header/index.tsx b/src/components/Profile/Header/index.tsx index 61fb98961..74b9d06b8 100644 --- a/src/components/Profile/Header/index.tsx +++ b/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() @@ -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 (
@@ -84,7 +125,8 @@ export default function AccountHeader({ style="primary" size="small" className={styles.sendMessage} - onClick={clickHandler} + disabled={!userDid} + onClick={checkConversation} > Send Messages