diff --git a/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/file/FileCard.tsx b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/file/FileCard.tsx index 4a452cb80..7ab115699 100644 --- a/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/file/FileCard.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/file/FileCard.tsx @@ -8,6 +8,7 @@ import { formatFileSize, getPfp, pCAIP10ToWallet, + parseJson, shortenText, sign, toSerialisedHexString, @@ -30,7 +31,7 @@ import { IMessagePayload } from '../../../exportedTypes'; // Exported Functions export const FileCard = ({ chat, isGroup }: { chat: IMessagePayload; position: number; isGroup: boolean }) => { - const fileContent: FileMessageContent = JSON.parse(chat?.messageContent); + const fileContent: FileMessageContent = parseJson(chat?.messageContent); const name = fileContent.name; const content = fileContent.content as string; diff --git a/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/image/ImageCard.tsx b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/image/ImageCard.tsx index 12068eead..135a8d698 100644 --- a/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/image/ImageCard.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/image/ImageCard.tsx @@ -17,6 +17,7 @@ import { IMessagePayload } from '../../../exportedTypes'; // Exported Interfaces & Types // Exported Functions +import { parseJson } from '../../../../../helpers'; export const ImageCard = ({ chat, @@ -35,7 +36,7 @@ export const ImageCard = ({ margin="5px 0" > { ); }; -const FileCard = ({ - chat, - position, -}: { - chat: IMessageIPFS; - position: number; -}) => { - const fileContent: FileMessageContent = JSON.parse(chat.messageContent); +const FileCard = ({ chat, position }: { chat: IMessageIPFS; position: number }) => { + const fileContent: FileMessageContent = parseJson(chat.messageContent); const name = fileContent.name; const content = fileContent.content as string; @@ -93,11 +83,20 @@ const FileCard = ({ width="20px" height="20px" /> -
- +
+ {shortenText(name, 11)} - + {formatFileSize(size)}
@@ -107,19 +106,16 @@ const FileCard = ({ rel="noopener noreferrer" download > -
); }; -const ImageCard = ({ - chat, - position, -}: { - chat: IMessageIPFS; - position: number; -}) => { +const ImageCard = ({ chat, position }: { chat: IMessageIPFS; position: number }) => { return (
{ +const GIFCard = ({ chat, position }: { chat: IMessageIPFS; position: number }) => { return (
); }; -const MessageCard = ({ - chat, - position, -}: { - chat: IMessageIPFS; - position: number; -}) => { +const MessageCard = ({ chat, position }: { chat: IMessageIPFS; position: number }) => { const time = moment(chat.timestamp).format('hh:mm a'); return (
{' '} -
+
{chat.messageContent.split('\n').map((str) => ( { const { account } = useContext(ChatAndNotificationPropsContext); - const position = - pCAIP10ToWallet(chat.fromDID).toLowerCase() !== account.toLowerCase() - ? 0 - : 1; + const position = pCAIP10ToWallet(chat.fromDID).toLowerCase() !== account.toLowerCase() ? 0 : 1; if (chat.messageType === 'GIF') { - return ; + return ( + + ); } if (chat.messageType === 'Image') { - return ; + return ( + + ); } if (chat.messageType === 'File') { - return ; + return ( + + ); } - return ; + return ( + + ); }; export const MessageBox = () => { - const { activeTab, setActiveTab } = useContext( - ChatAndNotificationMainContext - ); + const { activeTab, setActiveTab } = useContext(ChatAndNotificationMainContext); const { selectedChatId, chatsFeed, @@ -241,18 +243,16 @@ export const MessageBox = () => { searchedChats, setSelectedChatId, } = useContext(ChatMainStateContext); - const { account, env, decryptedPgpPvtKey } = useContext( - ChatAndNotificationPropsContext - ); + const { account, env, decryptedPgpPvtKey } = useContext(ChatAndNotificationPropsContext); const selectedChat = chatsFeed[selectedChatId as string] || requestsFeed[selectedChatId as string] || (searchedChats ? searchedChats[selectedChatId as string] : null); - + const requestFeedids = Object.keys(requestsFeed); const selectedMessages = chats.get(selectedChatId as string); - + const dates = new Set(); const listInnerRef = useRef(null); const bottomRef = useRef(null); @@ -282,9 +282,7 @@ export const MessageBox = () => { }; const scrollToBottom = (behavior?: string | null) => { - bottomRef?.current?.scrollIntoView( - !behavior ? true : { behavior: 'smooth' } - ); + bottomRef?.current?.scrollIntoView(!behavior ? true : { behavior: 'smooth' }); }; const onScroll = async () => { @@ -341,7 +339,6 @@ export const MessageBox = () => { // } (async function () { - await getChatCall(); })(); }, [selectedChatId]); @@ -382,12 +379,12 @@ export const MessageBox = () => { > { // width="100%" padding="0 2px 15px 2px" > - {selectedMessages?.messages.map( - (chat: IMessageIPFS, index: number) => { - const dateNum = moment(chat.timestamp).format('L'); - return ( - <> - {dates.has(dateNum) - ? null - : renderDate({ chat, dateNum })} - - - ); - } - )} + {selectedMessages?.messages.map((chat: IMessageIPFS, index: number) => { + const dateNum = moment(chat.timestamp).format('L'); + return ( + <> + {dates.has(dateNum) ? null : renderDate({ chat, dateNum })} + + + ); + })} {requestFeedids.includes(selectedChatId as string) && (
{ color="#000" lineHeight="24px" > - Please accept the Push Chat request to continue the - conversation + Please accept the Push Chat request to continue the conversation -
); }; //styles -const MessageListCard = styled(Section)` - -`; +const MessageListCard = styled(Section)``; const Container = styled(Section)` -&::-webkit-scrollbar-thumb { - background: rgb(181 181 186); - border-radius: 10px; -} - -&::-webkit-scrollbar { - width: 5px; -} + &::-webkit-scrollbar-thumb { + background: rgb(181 181 186); + border-radius: 10px; + } + + &::-webkit-scrollbar { + width: 5px; + } `; const FileDownloadIcon = styled.i` color: #575757; @@ -500,8 +490,8 @@ const Button = styled.button` border: none; cursor: pointer; border-radius: 8px; - margin:15px 0px 8px 0px; - background: #0D67FE; + margin: 15px 0px 8px 0px; + background: #0d67fe; color: white; width: 100%; font-size: 16px; diff --git a/packages/uiweb/src/lib/helpers/chat/localStorage.ts b/packages/uiweb/src/lib/helpers/chat/localStorage.ts index 1423ad03a..74ae73bb0 100644 --- a/packages/uiweb/src/lib/helpers/chat/localStorage.ts +++ b/packages/uiweb/src/lib/helpers/chat/localStorage.ts @@ -3,6 +3,7 @@ import * as PUSHAPI from '@pushprotocol/restapi'; import { IMessageIPFS } from '@pushprotocol/restapi'; import { ENV } from '../../config'; import { ChatFeedsType, LocalStorageKeys } from '../../types'; +import { parseJson } from '../utils'; type SetDataType = { chatId: string; @@ -21,7 +22,7 @@ export const setData = ({ chatId, value }: SetDataType): void => { //add return type export const getData = (key: string): IFeeds | null => { const chatJson = localStorage.getItem(key); - const chat = chatJson ? JSON.parse(chatJson) : null; + const chat = chatJson ? parseJson(chatJson) : null; return chat; }; diff --git a/packages/uiweb/src/lib/helpers/utils.ts b/packages/uiweb/src/lib/helpers/utils.ts index 2adbb5e36..7fdc09e30 100644 --- a/packages/uiweb/src/lib/helpers/utils.ts +++ b/packages/uiweb/src/lib/helpers/utils.ts @@ -33,3 +33,12 @@ export const deriveChatId = async (chatId: string, user: PushAPI | undefined): P return chatId; }; + +export const parseJson = (json: string) => { + try { + const obj = JSON.parse(json); + return obj; + } catch (e) { + console.debug(`Errored: helpers::parseJson::Error in parsing JSON,${e}`); + } +};