diff --git a/src/App.tsx b/src/App.tsx index b43d357..f7f17b7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -129,7 +129,7 @@ const defaultValues: MyContextInterface = { message: "", }, }; -export let isMobile = true +export let isMobile = false const isMobileDevice = () => { const userAgent = navigator.userAgent || navigator.vendor || window.opera; @@ -313,6 +313,7 @@ function App() { const [apiKey, setApiKey] = useState(""); const [isOpenSendQort, setIsOpenSendQort] = useState(false) const [isOpenSendQortSuccess, setIsOpenSendQortSuccess] = useState(false) + const [rootHeight, setRootHeight] = useState('100%') useEffect(() => { if(!isMobile) return // Function to set the height of the app to the viewport height @@ -320,6 +321,7 @@ function App() { const height = window.visualViewport ? window.visualViewport.height : window.innerHeight; // Set the height to the root element (usually #root) document.getElementById('root').style.height = height + "px"; + setRootHeight(height + "px") }; // Set the initial height @@ -1619,6 +1621,7 @@ function App() { onOk, show, message, + rootHeight }} > { editorRef.current = editorInstance; }; + const [, forceUpdate] = useReducer((x) => x + 1, 0); + + const triggerRerender = () => { + forceUpdate(); // Trigger re-render by updating the state + }; const publicKeyOfRecipientRef = useRef(null) console.log({messages}) const getPublicKeyFunc = async (address)=> { @@ -276,6 +281,9 @@ const clearEditorContent = () => { editorRef.current?.chain().blur().run(); setIsFocusedParent(false) executeEvent("sent-new-message-group", {}) + setTimeout(() => { + triggerRerender(); + }, 300); }, 200); } } diff --git a/src/components/Chat/ChatGroup.tsx b/src/components/Chat/ChatGroup.tsx index 2ffad67..8dbf927 100644 --- a/src/components/Chat/ChatGroup.tsx +++ b/src/components/Chat/ChatGroup.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' +import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react' import { CreateCommonSecret } from './CreateCommonSecret' import { reusableGet } from '../../qdn/publish/pubish' import { uint8ArrayToObject } from '../../backgroundFunctions/encryption' @@ -44,7 +44,11 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey, const groupSocketTimeoutRef = useRef(null); // Group Socket Timeout reference const editorRef = useRef(null); const { queueChats, addToQueue, processWithNewMessages } = useMessageQueue(); - + const [, forceUpdate] = useReducer((x) => x + 1, 0); + + const triggerRerender = () => { + forceUpdate(); // Trigger re-render by updating the state + }; const setEditorRef = (editorInstance) => { editorRef.current = editorInstance; }; @@ -292,6 +296,9 @@ const clearEditorContent = () => { editorRef.current?.chain().blur().run(); setIsFocusedParent(false) executeEvent("sent-new-message-group", {}) + setTimeout(() => { + triggerRerender(); + }, 300); }, 200); } } diff --git a/src/components/Chat/GroupAnnouncements.tsx b/src/components/Chat/GroupAnnouncements.tsx index 9721adf..ff4ce82 100644 --- a/src/components/Chat/GroupAnnouncements.tsx +++ b/src/components/Chat/GroupAnnouncements.tsx @@ -143,7 +143,7 @@ export const GroupAnnouncements = ({ const [selectedAnnouncement, setSelectedAnnouncement] = useState(null); const [isFocusedParent, setIsFocusedParent] = useState(false); - const { show } = React.useContext(MyContext); + const { show, rootHeight } = React.useContext(MyContext); const [openSnack, setOpenSnack] = React.useState(false); const [infoSnack, setInfoSnack] = React.useState(null); const hasInitialized = useRef(false); @@ -488,7 +488,7 @@ export const GroupAnnouncements = ({
{ + const { rootHeight } = useContext(MyContext); const [isMoved, setIsMoved] = useState(false); useEffect(() => { if (hide) { @@ -38,7 +40,7 @@ export const GroupForum = ({
(null); const [timestampEnterData, setTimestampEnterData] = useState({}); const [chatMode, setChatMode] = useState("groups"); @@ -1552,7 +1552,7 @@ export const Group = ({ width: isMobile ? "100%" : "380px", flexDirection: "column", alignItems: "flex-start", - height: isMobile ? `calc(${getRootHeight()} - 45px)` : "100%", + height: isMobile ? `calc(${rootHeight} - 45px)` : "100%", background: !isMobile && 'var(--bg-primary)', borderRadius: !isMobile && '0px 15px 15px 0px' }} @@ -2266,7 +2266,7 @@ export const Group = ({ top: "0px", background: "#27282c", zIndex: 5, - height: isMobile && `calc(${getRootHeight()} - 45px)`, + height: isMobile && `calc(${rootHeight} - 45px)`, }} >