Skip to content

Commit

Permalink
feat: made the messageaddress reusable, added account from context
Browse files Browse the repository at this point in the history
  • Loading branch information
@KlausMikhaelson
KlausMikhaelson committed Aug 7, 2023
1 parent d945ab5 commit 5cd1feb
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 190 deletions.
8 changes: 4 additions & 4 deletions ...eact/src/app/ChatUITest/MessageBubble.tsx → ...act/src/app/ChatUITest/MessageBubbles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@ import { IMessagePayload } from "@pushprotocol/uiweb";

export const MessageBubbles = () => {

const { library } = useContext<any>(Web3Context)
const { library, account } = useContext<any>(Web3Context)
const [message, setMessage] = useState<IMessagePayload[]>([])

const librarySigner = library.getSigner()

const fetchMessage = async () => {
const user = await PUSHAPI.user.get({
account: 'eip155:0xEDF59F183584107B20e2c95189A4423224bba8F2'
account: account
})
const pgpDecryptedPvtKey = await PUSHAPI.chat.decryptPGPKey({
encryptedPGPPrivateKey: user.encryptedPrivateKey,
Expand All @@ -24,13 +24,13 @@ export const MessageBubbles = () => {
})

const ConversationHash = await PUSHAPI.chat.conversationHash({
account: 'eip155:0xEDF59F183584107B20e2c95189A4423224bba8F2',
account: account,
conversationId: '24b029b8e07e60291bf9d8c0c48ff993fa1e0a99105459f7404c425c92e91bac',
env: ENV.STAGING
});
const chatHistory = await PUSHAPI.chat.history({
threadhash: ConversationHash.threadHash,
account: 'eip155:0xEDF59F183584107B20e2c95189A4423224bba8F2',
account: account,
limit: 10,
toDecrypt: true,
pgpPrivateKey: pgpDecryptedPvtKey ? pgpDecryptedPvtKey : undefined,
Expand Down
2 changes: 1 addition & 1 deletion packages/examples/sdk-frontend-react/src/app/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ import * as PushAPI from '@pushprotocol/restapi';
import { ChatWidgetTest } from './ChatWidgetTest';
import { ChatUIProvider, SpacesUI, SpacesUIProvider } from '@pushprotocol/uiweb';
import ChatUITest from './ChatUITest/ChatUITest';
import { MessageBubbles } from './ChatUITest/MessageBubble';
import { MessageBubbles } from './ChatUITest/MessageBubbles';

window.Buffer = window.Buffer || Buffer;

Expand Down
240 changes: 55 additions & 185 deletions packages/uiweb/src/lib/components/chat/MessageBubble/MessageBubble.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useContext, useState } from "react";
import { useContext, useEffect, useState } from "react";
import { Section, Span, Image } from "../../reusables";
import moment from "moment";
import styled from "styled-components";
Expand All @@ -11,6 +11,19 @@ import { IMessagePayload, TwitterFeedReturnType } from "../exportedTypes";
import { TwitterTweetEmbed } from "react-twitter-embed";
import { ChatDataContext } from "../../../context";

const MessageAddress = ({ chat }: { chat: IMessagePayload }) => {
const { account } = useContext(ChatDataContext)
return (
<>
{chat.fromCAIP10.split(":")[1] !== account && (
<Span alignSelf="start"
textAlign="left">{chat.fromDID.split(":")[1].slice(0, 6)}...
{chat.fromDID.split(":")[1].slice(-6)}</Span>
)}
</>
)
}

const MessageCard = ({
chat,
position,
Expand All @@ -25,55 +38,11 @@ const MessageCard = ({
const time = moment(chat.timestamp).format('hh:mm a');
return (
<Section justifyContent="start">
{isGroup ? (
<Section flexDirection="column"
>
{chat.fromCAIP10.split(":")[1] !== account && (
<Span alignSelf="start"
textAlign="left">{chat.fromDID.split(":")[1].slice(0, 6)}...
{chat.fromDID.split(":")[1].slice(-6)}</Span>
)}
<Section
gap="5px"
background={position ? '#0D67FE' : '#EDEDEE'}
padding="8px 12px"
borderRadius={position ? '12px 12px 0px 12px' : '12px 12px 12px 0px'}
margin="5px 0"
alignSelf='start'
justifyContent="start"
maxWidth="80%"
minWidth="71px"
position="relative"
width="fit-content"
>
{' '}
<Section flexDirection="column" padding="5px 0 15px 0">
{chat.messageContent.split('\n').map((str) => (
<Span
key={Math.random().toString()}
alignSelf="start"
textAlign="left"
fontSize="16px"
fontWeight="400"
color={position ? '#fff' : '#000'}
>
{str}
</Span>
))}
</Section>
<Span
position="absolute"
fontSize="12px"
fontWeight="400"
color={position ? '#A9C8FF' : '#62626A'}
bottom="6px"
right="10px"
>
{time}
</Span>
</Section>
</Section>
) : (
<Section flexDirection="column"
>
{isGroup &&
<MessageAddress chat={chat} />
}
<Section
gap="5px"
background={position ? '#0D67FE' : '#EDEDEE'}
Expand All @@ -87,7 +56,6 @@ const MessageCard = ({
position="relative"
width="fit-content"
>
{/* <Image src={chat.} */}
{' '}
<Section flexDirection="column" padding="5px 0 15px 0">
{chat.messageContent.split('\n').map((str) => (
Expand All @@ -114,7 +82,7 @@ const MessageCard = ({
{time}
</Span>
</Section>
)}
</Section>
</Section>
);
};
Expand All @@ -138,52 +106,13 @@ const FileCard = ({

return (
<Section justifyContent="start">
{isGroup ? (
<Section flexDirection="column">
{chat.fromCAIP10.split(":")[1] !== account && (
<Span alignSelf="start"
textAlign="left">{chat.fromDID.split(":")[1].slice(0, 6)}...
{chat.fromDID.split(":")[1].slice(-6)}</Span>
)}
<Section
alignSelf={position ? 'end' : 'start'}
maxWidth="80%"
margin="5px 0"
background="#343536"
borderRadius="8px"
justifyContent="space-around"
padding="10px 13px"
gap="15px"
width="fit-content"
>
<Image
src={FILE_ICON(name.split('.').slice(-1)[0])}
alt="extension icon"
width="20px"
height="20px"
/>
<Section flexDirection="column" gap="5px">
<Span color="#fff" fontSize="15px">
{shortenText(name, 11)}
</Span>
<Span color="#fff" fontSize="12px">
{formatFileSize(size)}
</Span>
</Section>
<FileDownloadIconAnchor
href={content}
target="_blank"
rel="noopener noreferrer"
download
>
<FileDownloadIcon className="fa fa-download" aria-hidden="true" />
</FileDownloadIconAnchor>
</Section>
</Section>
) : (
<Section flexDirection="column">
{isGroup &&
<MessageAddress chat={chat} />
}
<Section
alignSelf={position ? 'end' : 'start'}
maxWidth="80%"
maxWidth="100%"
margin="5px 0"
background="#343536"
borderRadius="8px"
Expand Down Expand Up @@ -215,7 +144,7 @@ const FileCard = ({
<FileDownloadIcon className="fa fa-download" aria-hidden="true" />
</FileDownloadIconAnchor>
</Section>
)}
</Section>
</Section>
);
};
Expand All @@ -234,34 +163,12 @@ const ImageCard = ({

return (
<Section justifyContent="start">
{isGroup ? (
<Section flexDirection="column">
{chat.fromCAIP10.split(":")[1] !== account && (
<Span
alignSelf="start"
textAlign="left"
>
{chat.fromDID.split(":")[1].slice(0, 6)}...
{chat.fromDID.split(":")[1].slice(-6)}
</Span>
)}
<Section
alignSelf={position ? 'end' : 'start'}
maxWidth="65%"
width="fit-content"
margin="5px 0"
>
<Image
src={JSON.parse(chat.messageContent).content}
alt=""
width="100%"
borderRadius={position ? '12px 12px 0px 12px' : '12px 12px 12px 0px'}
/>
</Section>
</Section>
) : (
<Section flexDirection="column">
{isGroup && (
<MessageAddress chat={chat} />
)}
<Section
alignSelf={position ? 'end' : 'start'}
alignSelf={'start'}
maxWidth="65%"
width="fit-content"
margin="5px 0"
Expand All @@ -273,7 +180,7 @@ const ImageCard = ({
borderRadius={position ? '12px 12px 0px 12px' : '12px 12px 12px 0px'}
/>
</Section>
)}
</Section>
</Section>
);
};
Expand All @@ -291,32 +198,10 @@ const GIFCard = ({
}) => {
return (
<Section justifyContent="start">
{isGroup ? (
<Section flexDirection="column">
{chat.fromCAIP10.split(":")[1] !== account && (
<Span
alignSelf="start"
textAlign="left"
>
{chat.fromDID.split(":")[1].slice(0, 6)}...
{chat.fromDID.split(":")[1].slice(-6)}
</Span>
)}
<Section
alignSelf='start'
maxWidth="65%"
margin="5px 0"
width="fit-content"
>
<Image
src={chat.messageContent}
alt=""
width="100%"
borderRadius={position ? '12px 12px 0px 12px' : '12px 12px 12px 0px'}
/>
</Section>
</Section>
) : (
<Section flexDirection="column">
{isGroup &&
<MessageAddress chat={chat} />
}
<Section
alignSelf='start'
maxWidth="65%"
Expand All @@ -330,44 +215,27 @@ const GIFCard = ({
borderRadius={position ? '12px 12px 0px 12px' : '12px 12px 12px 0px'}
/>
</Section>
)}
</Section>
</Section>
);
};

const TwitterCard = ({ chat, position, tweetId, isGroup, account }: { chat: IMessagePayload, position: number, tweetId: string, isGroup: boolean, account: string }) => {
return (
<Section justifyContent="start">
{isGroup ? (
<Section flexDirection="column">
{chat.fromCAIP10.split(":")[1] !== account && (
<Span
alignSelf="start"
textAlign="left"
>
{chat.fromDID.split(":")[1].slice(0, 6)}...
{chat.fromDID.split(":")[1].slice(-6)}
</Span>
)}
<Section
alignSelf={position ? 'end' : 'start'}
maxWidth="100%"
width="fit-content"
margin="5px 0"
>
<TwitterTweetEmbed tweetId={tweetId} />
</Section>
</Section>
) : (
<Section flexDirection="column">
{isGroup &&
<MessageAddress chat={chat} />
}
<Section
alignSelf={position ? 'end' : 'start'}
maxWidth="65%"
margin="5px 0"
alignSelf={'start'}
maxWidth="100%"
width="fit-content"
margin="5px 0"
>
<TwitterTweetEmbed tweetId={tweetId} />
</Section>
)}
</Section>
</Section>
)
}
Expand All @@ -377,15 +245,17 @@ export const MessageBubble = ({ chat }: { chat: IMessagePayload }) => {
const position = pCAIP10ToWallet(chat.fromDID).toLowerCase() !== account?.toLowerCase() ? 0 : 1;
const { tweetId, messageType }: TwitterFeedReturnType = checkTwitterUrl({ message: chat?.messageContent });
const [isGroup, setIsGroup] = useState<boolean>(false);
if (chat.toDID.split(':')[0] === 'eip155') {
if (isGroup) {
setIsGroup(false);
useEffect(() => {
if (chat.toDID.split(':')[0] === 'eip155') {
if (isGroup) {
setIsGroup(false);
}
} else {
if (!isGroup) {
setIsGroup(true);
}
}
} else {
if (!isGroup) {
setIsGroup(true);
}
}
}, [chat.toDID, isGroup])

if (messageType === 'TwitterFeedLink') {
chat.messageType = 'TwitterFeedLink';
Expand Down

0 comments on commit 5cd1feb

Please sign in to comment.