From e24153527c2e3f2c6e9f02d500e9fe0044de3444 Mon Sep 17 00:00:00 2001 From: Justin Ferrari <‘justinwesleyferrari@gmail.com’> Date: Mon, 30 Sep 2024 14:56:06 +0300 Subject: [PATCH] Fixed websockets chat message limit bug --- package-lock.json | 10 +++++++++ package.json | 1 + src/components/Chat/ChatGroup.tsx | 37 +++++++++++++++++++++---------- src/components/Chat/ChatList.tsx | 1 + vite.config.ts | 8 ++++++- 5 files changed, 44 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index fe43916..1de9879 100644 --- a/package-lock.json +++ b/package-lock.json @@ -70,6 +70,7 @@ "@typescript-eslint/eslint-plugin": "^7.1.1", "@typescript-eslint/parser": "^7.1.1", "@vitejs/plugin-react": "^4.2.1", + "esbuild-plugin-react-virtualized": "^1.0.4", "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", @@ -4235,6 +4236,15 @@ "@esbuild/win32-x64": "0.19.12" } }, + "node_modules/esbuild-plugin-react-virtualized": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/esbuild-plugin-react-virtualized/-/esbuild-plugin-react-virtualized-1.0.4.tgz", + "integrity": "sha512-/Y+82TBduHox0/uhJlTgUqi3ZWN+qZPF0xy9crkHQE2AOOdm76l6VY2F0Mdfvue9hqXz2FOlKHlHUVXNalHLzA==", + "dev": true, + "peerDependencies": { + "esbuild": "*" + } + }, "node_modules/escalade": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz", diff --git a/package.json b/package.json index 4d0fa0c..f978862 100644 --- a/package.json +++ b/package.json @@ -74,6 +74,7 @@ "@typescript-eslint/eslint-plugin": "^7.1.1", "@typescript-eslint/parser": "^7.1.1", "@vitejs/plugin-react": "^4.2.1", + "esbuild-plugin-react-virtualized": "^1.0.4", "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", diff --git a/src/components/Chat/ChatGroup.tsx b/src/components/Chat/ChatGroup.tsx index 1f611c8..9c9d736 100644 --- a/src/components/Chat/ChatGroup.tsx +++ b/src/components/Chat/ChatGroup.tsx @@ -10,7 +10,7 @@ import Tiptap from './TipTap' import { CustomButton } from '../../App-styles' import CircularProgress from '@mui/material/CircularProgress'; import { LoadingSnackbar } from '../Snackbar/LoadingSnackbar' -import { getBaseApiReactSocket, isMobile, pauseAllQueues, resumeAllQueues } from '../../App' +import { getBaseApiReact, getBaseApiReactSocket, isMobile, pauseAllQueues, resumeAllQueues } from '../../App' import { CustomizedSnackbars } from '../Snackbar/Snackbar' import { PUBLIC_NOTIFICATION_CODE_FIRST_SECRET_KEY } from '../../constants/codes' import { useMessageQueue } from '../../MessageQueueContext' @@ -22,13 +22,8 @@ import { ExitIcon } from '../../assets/Icons/ExitIcon' import { RESOURCE_TYPE_NUMBER_GROUP_CHAT_REACTIONS } from '../../constants/resourceTypes' import { isExtMsg } from '../../background' - const uid = new ShortUniqueId({ length: 5 }); - - - - export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey, myAddress, handleNewEncryptionNotification, hide, handleSecretKeyCreationInProgress, triedToFetchSecretKey, myName, balance}) => { const [messages, setMessages] = useState([]) const [chatReferences, setChatReferences] = useState({}) @@ -101,8 +96,28 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey, }) } - - const decryptMessages = (encryptedMessages: any[])=> { + const middletierFunc = async (data: any, groupId: string) => { + try { + if (hasInitialized.current) { + decryptMessages(data, true); + return; + } + hasInitialized.current = true; + const url = `${getBaseApiReact()}/chat/messages?txGroupId=${groupId}&encoding=BASE64&limit=0&reverse=false`; + const response = await fetch(url, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + const responseData = await response.json(); + decryptMessages(responseData, false); + } catch (error) { + console.error(error); + } + } + + const decryptMessages = ( encryptedMessages: any[], isInitiated: boolean )=> { try { if(!secretKeyRef.current){ checkForFirstSecretKeyNotification(encryptedMessages) @@ -125,7 +140,7 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey, } }), selectedGroup) res(combineUIAndExtensionMsgs) - if(hasInitialized.current){ + if(isInitiated){ const formatted = combineUIAndExtensionMsgs.filter((rawItem)=> !rawItem?.chatReference).map((item: any)=> { return { @@ -216,7 +231,6 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey, } } ) setMessages(formatted) - hasInitialized.current = true setChatReferences((prev) => { let organizedChatReferences = { ...prev }; @@ -336,7 +350,7 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey, clearTimeout(timeoutIdRef.current); groupSocketTimeoutRef.current = setTimeout(pingGroupSocket, 45000); // Ping every 45 seconds } else { - decryptMessages(JSON.parse(e.data)) + middletierFunc(JSON.parse(e.data), selectedGroup) setIsLoading(false) } } catch (error) { @@ -601,7 +615,6 @@ const clearEditorContent = () => { } }, []) - return (
{ + const virtuosoRef = useRef(); const [messages, setMessages] = useState(initialMessages); const [showScrollButton, setShowScrollButton] = useState(false); diff --git a/vite.config.ts b/vite.config.ts index 12c737c..afd40ab 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -3,6 +3,7 @@ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; // Import path module for resolving file paths import { resolve } from 'path'; +import fixReactVirtualized from 'esbuild-plugin-react-virtualized' export default defineConfig({ test: { @@ -25,5 +26,10 @@ export default defineConfig({ assetFileNames: `[name].[ext]` } } - } + }, + optimizeDeps: { + esbuildOptions: { + plugins: [fixReactVirtualized], + }, + }, });