fix: fixed the json parse bug

push-protocol · May 17, 2024 · 66df721 · 66df721
1 parent e0f7bae
commit 66df721
Showing 5 changed files with 104 additions and 102 deletions.
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
@@ -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
@@ -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"
     >
       <Image
-        src={JSON.parse(chat?.messageContent)?.content}
+        src={parseJson(chat?.messageContent)?.content}
         alt=""
         width="100%"
         borderRadius={position ? '12px 0px 12px 12px' : '0px 12px 12px 12px'}

diff --git a/packages/uiweb/src/lib/components/chatAndNotification/modal/messageBox/MessageBox.tsx b/packages/uiweb/src/lib/components/chatAndNotification/modal/messageBox/MessageBox.tsx
@@ -10,11 +10,7 @@ import useFetchHistoryMessages from '../../../../hooks/chatAndNotification/chat/
 import type { IMessageIPFS } from '@pushprotocol/restapi';
 import { Spinner } from '../../../reusables/Spinner';
 import moment from 'moment';
-import {
-  dateToFromNowDaily,
-  formatFileSize,
-  shortenText,
-} from '../../../../helpers';
+import { dateToFromNowDaily, formatFileSize, parseJson, shortenText } from '../../../../helpers';
 import { pCAIP10ToWallet } from '../../../../helpers';
 import useApproveChatRequest from '../../../../hooks/chatAndNotification/chat/useApproveChatRequest';
 import type { FileMessageContent } from '../../../../types';
@@ -63,14 +59,8 @@ const EncryptionMessage = ({ id }: { id: 'ENCRYPTED' | 'NO_ENCRYPTED' }) => {
   );
 };
 
-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"
       />
-      <Section flexDirection="column" gap="5px">
-        <Span color="#fff" fontSize="15px">
+      <Section
+        flexDirection="column"
+        gap="5px"
+      >
+        <Span
+          color="#fff"
+          fontSize="15px"
+        >
           {shortenText(name, 11)}
         </Span>
-        <Span color="#fff" fontSize="12px">
+        <Span
+          color="#fff"
+          fontSize="12px"
+        >
           {formatFileSize(size)}
         </Span>
       </Section>
@@ -107,27 +106,24 @@ const FileCard = ({
         rel="noopener noreferrer"
         download
       >
-        <FileDownloadIcon className="fa fa-download" aria-hidden="true" />
+        <FileDownloadIcon
+          className="fa fa-download"
+          aria-hidden="true"
+        />
       </FileDownloadIconAnchor>
     </Section>
   );
 };
 
-const ImageCard = ({
-  chat,
-  position,
-}: {
-  chat: IMessageIPFS;
-  position: number;
-}) => {
+const ImageCard = ({ chat, position }: { chat: IMessageIPFS; position: number }) => {
   return (
     <Section
       alignSelf={position ? 'end' : 'start'}
       maxWidth="65%"
       margin="5px 0"
     >
       <Image
-        src={JSON.parse(chat.messageContent).content}
+        src={parseJson(chat.messageContent).content}
         alt=""
         width="100%"
         borderRadius={position ? '12px 12px 0px 12px' : '12px 12px 12px 0px'}
@@ -136,13 +132,7 @@ const ImageCard = ({
   );
 };
 
-const GIFCard = ({
-  chat,
-  position,
-}: {
-  chat: IMessageIPFS;
-  position: number;
-}) => {
+const GIFCard = ({ chat, position }: { chat: IMessageIPFS; position: number }) => {
   return (
     <Section
       alignSelf={position ? 'end' : 'start'}
@@ -158,13 +148,7 @@ const GIFCard = ({
     </Section>
   );
 };
-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 (
     <Section
@@ -180,7 +164,10 @@ const MessageCard = ({
       position="relative"
     >
       {' '}
-      <Section flexDirection="column" padding="5px 0 15px 0">
+      <Section
+        flexDirection="column"
+        padding="5px 0 15px 0"
+      >
         {chat.messageContent.split('\n').map((str) => (
           <Span
             key={Math.random().toString()}
@@ -210,26 +197,41 @@ const MessageCard = ({
 
 const Messages = ({ chat }: { chat: IMessageIPFS }) => {
   const { account } = useContext<any>(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 <GIFCard chat={chat} position={position} />;
+    return (
+      <GIFCard
+        chat={chat}
+        position={position}
+      />
+    );
   }
   if (chat.messageType === 'Image') {
-    return <ImageCard chat={chat} position={position} />;
+    return (
+      <ImageCard
+        chat={chat}
+        position={position}
+      />
+    );
   }
   if (chat.messageType === 'File') {
-    return <FileCard chat={chat} position={position} />;
+    return (
+      <FileCard
+        chat={chat}
+        position={position}
+      />
+    );
   }
-  return <MessageCard chat={chat} position={position} />;
+  return (
+    <MessageCard
+      chat={chat}
+      position={position}
+    />
+  );
 };
 
 export const MessageBox = () => {
-  const { activeTab, setActiveTab } = useContext<any>(
-    ChatAndNotificationMainContext
-  );
+  const { activeTab, setActiveTab } = useContext<any>(ChatAndNotificationMainContext);
   const {
     selectedChatId,
     chatsFeed,
@@ -241,18 +243,16 @@ export const MessageBox = () => {
     searchedChats,
     setSelectedChatId,
   } = useContext<ChatMainStateContextType>(ChatMainStateContext);
-  const { account, env, decryptedPgpPvtKey } = useContext<any>(
-    ChatAndNotificationPropsContext
-  );
+  const { account, env, decryptedPgpPvtKey } = useContext<any>(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<HTMLDivElement>(null);
   const bottomRef = useRef<HTMLDivElement>(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 = () => {
     >
       <Container
         width="100%"
-        height={!requestFeedids.includes(selectedChatId as string)?'85%':'97%'}
+        height={!requestFeedids.includes(selectedChatId as string) ? '85%' : '97%'}
         justifyContent="start"
         flexDirection="column"
         alignItems="start"
         borderWidth="0 0 1px 0"
-        borderStyle={"none none none none"}
+        borderStyle={'none none none none'}
         overflow="hidden scroll"
         ref={listInnerRef}
         onScroll={onScroll}
@@ -408,19 +405,18 @@ 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 })}
-                      <Messages chat={chat} key={index} />
-                    </>
-                  );
-                }
-              )}
+              {selectedMessages?.messages.map((chat: IMessageIPFS, index: number) => {
+                const dateNum = moment(chat.timestamp).format('L');
+                return (
+                  <>
+                    {dates.has(dateNum) ? null : renderDate({ chat, dateNum })}
+                    <Messages
+                      chat={chat}
+                      key={index}
+                    />
+                  </>
+                );
+              })}
               {requestFeedids.includes(selectedChatId as string) && (
                 <Section
                   gap="5px"
@@ -443,16 +439,14 @@ export const MessageBox = () => {
                     color="#000"
                     lineHeight="24px"
                   >
-                    Please accept the Push Chat request to continue the
-                    conversation
+                    Please accept the Push Chat request to continue the conversation
                   </Span>
-                  <Button
-                    onClick={() =>
-                      !approveLoading ? handleApproveChatRequest() : null
-                    }
-                  >
+                  <Button onClick={() => (!approveLoading ? handleApproveChatRequest() : null)}>
                     {approveLoading ? (
-                      <Spinner color="#fff" size="24" />
+                      <Spinner
+                        color="#fff"
+                        size="24"
+                      />
                     ) : (
                       'Accept'
                     )}
@@ -465,28 +459,24 @@ export const MessageBox = () => {
         </>
       </Container>
 
-      {!requestFeedids.includes(selectedChatId as string) && (
-        <Typebar scrollToBottom={scrollToBottom} />
-      )}
+      {!requestFeedids.includes(selectedChatId as string) && <Typebar scrollToBottom={scrollToBottom} />}
     </Section>
   );
 };
 
 //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
@@ -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;
 };