fix: workaround for socket response (#924)

* fix: workaround for socket response * fix: fixed approve button
push-protocol · Dec 4, 2023 · f765f51 · f765f51
1 parent b2e84dc
commit f765f51
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 60 deletions.
diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatProfile.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatProfile.tsx
@@ -6,7 +6,7 @@ export const ChatProfileTest = () => {
         <div>
             <ChatProfile 
                 // chatId='0x455E5AA18469bC6ccEF49594645666C587A3a71B'
-            chatId='a72832107b8ae7624c1ec997cee8e8b2bc21db708465555c20c4d5e029210cd6'
+            chatId='81a077fbec5d64802a0feaeb26647250eb9a20894124c7bc1b2e044f360bf59f'
                 // chatId='36baf37e441fdd94e23406c6c716fc4e91a93a9ee68e070cd5b054534dbe09a6'
                 style="Info"
              />

diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx
@@ -15,11 +15,11 @@ const ChatViewComponentTest = () => {
       <h2>Chat UI Test page</h2>
       {/* <CreateGroupModal onClose={()=>{console.log('in close')}} /> */}
       <ChatViewComponentCard>
-      <CreateGroupModal onClose={()=>{console.log('in close')}}  modalBackground={MODAL_BACKGROUND_TYPE.OVERLAY} modalPositionType={MODAL_POSITION_TYPE.RELATIVE}/>
+      {/* <CreateGroupModal onClose={()=>{console.log('in close')}}  modalBackground={MODAL_BACKGROUND_TYPE.OVERLAY} modalPositionType={MODAL_POSITION_TYPE.RELATIVE}/> */}
 
         <ChatView 
         onVerificationFail={() => console.log("BOIIII RETURNNNSSSSS")} 
-        chatId='92ed5f3f3bcdf58976ce11395786398f6f9e3048d76dc7e6f53ea5d77092fdd6' 
+        chatId='0xf8250D363BD1F25f52F10C21188fe82c68C049c4' 
 
         limit={10}
          isConnected={true} 

diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewListTest.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewListTest.tsx
@@ -25,7 +25,7 @@ const ChatViewListTest = () => {
       {/* <Loader show={isLoading} /> */}
 
       <ChatViewListCard>
-        <ChatViewList chatId='b8e068e02fe12d7136bc2f24408835573f30c6fbf0b65ea26ab4c7055a2c85f1' limit={10} />
+        <ChatViewList chatId='0x5fca4523728576d6DD418137D5C8F38de5e6A1A8' limit={10} />
 
       </ChatViewListCard>
       {/* <MessageInput chatId='196f58cbe07c7eb5716d939e0a3be1f15b22b2334d5179c601566600016860ac' isConnected={true} /> */}

diff --git a/packages/uiweb/src/lib/components/chat/ChatViewList/ApproveRequestBubble.tsx b/packages/uiweb/src/lib/components/chat/ChatViewList/ApproveRequestBubble.tsx
@@ -66,7 +66,8 @@ export const ApproveRequestBubble = ({
       borderRadius=" 0px 12px 12px 12px"
       alignSelf="start"
       justifyContent="start"
-      maxWidth="68%"
+      maxWidth="600px"
+      width='40%'
       minWidth="15%"
       position="relative"
       flexDirection="column"

diff --git a/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx b/packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx
@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
 
 import {
+  GroupDTO,
   IFeeds,
   IMessageIPFS,
   IMessageIPFSWithCID,
@@ -24,7 +25,7 @@ import {
   walletToPCAIP10,
 } from '../../../helpers';
 import { useChatData, usePushChatSocket } from '../../../hooks';
-import { Messagetype } from '../../../types';
+import { IGroup, Messagetype } from '../../../types';
 import { ThemeContext } from '../theme/ThemeProvider';
 import { IChatTheme } from '../theme';
 
@@ -84,17 +85,19 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
       }
     })();
   }, [account]);
-
   useEffect(() => {
-    setMessages(undefined);
     setConversationHash(undefined);
+    setChatFeed({} as IFeeds);
+    setMessages(undefined);
+
+
   }, [chatId, account, pgpPrivateKey, env]);
 
   //need to make a common method for fetching chatFeed to ruse in messageInput
   useEffect(() => {
     (async () => {
       if (!account && !env) return;
-      const chat = await fetchChat({ chatId });
+      const chat = await fetchChat({ chatId:chatId });
       if (Object.keys(chat || {}).length) {
         setConversationHash(chat?.threadhash as string);
         setChatFeed(chat as IFeeds);
@@ -127,6 +130,7 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
       }
       setLoading(false);
     })();
+
   }, [chatId, pgpPrivateKey, account, env]);
 
   //moniters socket changes
@@ -135,17 +139,18 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
       const updatedChatFeed = chatFeed;
       updatedChatFeed.msg = messagesSinceLastConnection;
       if (!Object.keys(messages || {}).length) {
+
         setFilteredMessages([
           messagesSinceLastConnection,
         ] as IMessageIPFSWithCID[]);
-
         setConversationHash(messagesSinceLastConnection.cid);
       } else {
         const newChatViewList = appendUniqueMessages(
           messages as Messagetype,
           [messagesSinceLastConnection],
           false
         );
+
         setFilteredMessages(newChatViewList as IMessageIPFSWithCID[]);
       }
       setChatStatusText('');
@@ -154,15 +159,24 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
     }
   }, [messagesSinceLastConnection]);
 
+  // remove  fetching group once stream comes 
   useEffect(() => {
     if (Object.keys(groupInformationSinceLastConnection || {}).length) {
       if (
         chatFeed?.groupInformation?.chatId.toLowerCase() ===
         groupInformationSinceLastConnection.chatId.toLowerCase()
       ) {
-        const updateChatFeed = chatFeed;
-        updateChatFeed.groupInformation = groupInformationSinceLastConnection;
-        setChatFeed(updateChatFeed);
+        (async()=>{
+          const updateChatFeed = chatFeed;
+          const group:IGroup | undefined =  await getGroup({ searchText: chatId });
+          if (group || !!Object.keys(group || {}).length){
+            updateChatFeed.groupInformation = group! as GroupDTO ;
+
+            setChatFeed(updateChatFeed);
+          }
+
+        })();
+
       }
     }
   }, [groupInformationSinceLastConnection]);
@@ -239,7 +253,6 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
     } else {
       threadHash = messages?.lastThreadHash;
     }
-
     if (
       threadHash &&
       ((account && pgpPrivateKey&& chatFeed && !chatFeed?.groupInformation) ||
@@ -257,9 +270,9 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
             chatHistory,
             true
           );
-
           setFilteredMessages(newChatViewList as IMessageIPFSWithCID[]);
         } else {
+
           setFilteredMessages(chatHistory as IMessageIPFSWithCID[]);
         }
       }
@@ -280,6 +293,7 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
   };
 
   const ifBlurChat = () =>{
+
     return !!(
       chatFeed &&
       chatFeed?.groupInformation &&

diff --git a/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx b/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { MdCheckCircle, MdError } from 'react-icons/md';
 import EmojiPicker, { EmojiClickData } from 'emoji-picker-react';
 import GifPicker from 'gif-picker-react';
-import { IFeeds } from '@pushprotocol/restapi';
+import { GroupDTO, IFeeds } from '@pushprotocol/restapi';
 import { ToastContainer } from 'react-toastify';
 
 import { Section, Div, Span } from '../../reusables';
@@ -41,7 +41,7 @@ import {
 import type { FileMessageContent, IGroup } from '../../../types';
 import { GIFType, IChatTheme, MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE, MessageInputProps } from '../exportedTypes';
 import { PUBLIC_GOOGLE_TOKEN, device } from '../../../config';
-import { checkIfAccessVerifiedGroup, checkIfMember } from '../helpers';
+import { checkIfAccessVerifiedGroup, checkIfMember, isValidETHAddress } from '../helpers';
 import { InfoContainer } from '../reusables';
 
 /**
@@ -153,6 +153,7 @@ export const MessageInput: React.FC<MessageInputProps> = ({
   }, [account]);
 
   useEffect(() => {
+    if (!isValidETHAddress(chatId)) {
     const storedTimestampJSON = localStorage.getItem(chatId);
 
     if (storedTimestampJSON) {
@@ -170,6 +171,7 @@ export const MessageInput: React.FC<MessageInputProps> = ({
         setAccessControl(chatId, true);
       }
     }
+  }
   }, [chatId, verified, isMember, account, env]);
 
   useEffect(() => {
@@ -178,9 +180,16 @@ export const MessageInput: React.FC<MessageInputProps> = ({
         chatFeed?.groupInformation?.chatId.toLowerCase() ===
         groupInformationSinceLastConnection.chatId.toLowerCase()
       ) {
-        const updateChatFeed = chatFeed;
-        updateChatFeed.groupInformation = groupInformationSinceLastConnection;
-        setChatFeed(updateChatFeed);
+        (async()=>{
+          const updateChatFeed = chatFeed;
+          const group:IGroup | undefined =  await getGroup({ searchText: chatId });
+          if (group || !!Object.keys(group || {}).length){
+            updateChatFeed.groupInformation = group! as GroupDTO ;
+
+            setChatFeed(updateChatFeed);
+          }
+
+        })();
       }
     }
   }, [groupInformationSinceLastConnection]);

diff --git a/packages/uiweb/src/lib/hooks/chat/index.ts b/packages/uiweb/src/lib/hooks/chat/index.ts
@@ -4,7 +4,6 @@ export * from './useChatData';
 export * from './useChatProfile';
 export * from './usePushChatSocket';
 export * from './useFetchChat';
-export * from './useFetchConversationHash';
 export * from  './usePushSendMessage';
 export * from './useGetGroupByID';
 export * from './useAccount';

diff --git a/packages/uiweb/src/lib/hooks/chat/useFetchConversationHash.ts b/packages/uiweb/src/lib/hooks/chat/useFetchConversationHash.ts
diff --git a/packages/uiweb/src/lib/hooks/chatAndNotification/chat/index.ts b/packages/uiweb/src/lib/hooks/chatAndNotification/chat/index.ts
@@ -1,7 +1,6 @@
 export * from './useFetchChats';
 export * from './useFetchRequests';
 export * from './useFetchHistoryMessages';
-export * from './useFetchConversationHash';
 export * from './useApproveChatRequest';
 export * from './useFetchChat';
 export * from './usePushSendMessage';