added more native back btn functionality

This commit is contained in:
PhilReact 2024-11-26 00:02:58 +02:00
parent 71ad2cc81d
commit 8a2a09d6c8
5 changed files with 71 additions and 30 deletions

View File

@ -89,4 +89,14 @@ export const promotionTimeIntervalAtom = atom({
export const promotionsAtom = atom({
key: 'promotionsAtom',
default: [],
});
export const isFocusedParentGroupAtom = atom({
key: 'isFocusedParentGroupAtom',
default: false,
});
export const isFocusedParentDirectAtom = atom({
key: 'isFocusedParentDirectAtom',
default: false,
});

View File

@ -20,6 +20,8 @@ import ShortUniqueId from "short-unique-id";
import { ReturnIcon } from '../../assets/Icons/ReturnIcon';
import { ExitIcon } from '../../assets/Icons/ExitIcon';
import { MessageItem, ReplyPreview } from './MessageItem';
import { isFocusedParentDirectAtom } from '../../atoms/global';
import { useRecoilState } from 'recoil';
const uid = new ShortUniqueId({ length: 5 });
@ -27,8 +29,9 @@ const uid = new ShortUniqueId({ length: 5 });
export const ChatDirect = ({ myAddress, isNewChat, selectedDirect, setSelectedDirect, setNewChat, getTimestampEnterChat, myName, balance, close, setMobileViewModeKeepOpen}) => {
const { queueChats, addToQueue, processWithNewMessages} = useMessageQueue();
const [isFocusedParent, setIsFocusedParent] = useState(false);
const [isFocusedParent, setIsFocusedParent] = useRecoilState(
isFocusedParentDirectAtom
);
const [messages, setMessages] = useState([])
const [isSending, setIsSending] = useState(false)
const [directToValue, setDirectToValue] = useState('')
@ -51,11 +54,7 @@ export const ChatDirect = ({ myAddress, isNewChat, selectedDirect, setSelectedDi
};
const [messageSize, setMessageSize] = useState(0)
const [, forceUpdate] = useReducer((x) => x + 1, 0);
const triggerRerender = () => {
forceUpdate(); // Trigger re-render by updating the state
};
const publicKeyOfRecipientRef = useRef(null)
const getPublicKeyFunc = async (address)=> {
try {
@ -340,6 +339,14 @@ const sendChatDirect = async ({ chatReference = undefined, messageText, otherDat
} finally {
}
}
useEffect(()=> {
if(isFocusedParent === false){
setReplyMessage(null)
setOnEditMessage(null)
clearEditorContent()
}
}, [isFocusedParent])
const clearEditorContent = () => {
if (editorRef.current) {
editorRef.current.chain().focus().clearContent().run();
@ -348,10 +355,6 @@ const clearEditorContent = () => {
setTimeout(() => {
editorRef.current?.chain().blur().run();
setIsFocusedParent(false)
executeEvent("sent-new-message-group", {})
setTimeout(() => {
triggerRerender();
}, 300);
}, 200);
}
}
@ -650,9 +653,7 @@ const sendMessage = async ()=> {
onClick={()=> {
if(isSending) return
setIsFocusedParent(false)
setReplyMessage(null)
setOnEditMessage(null)
clearEditorContent()
// Unfocus the editor
}}
style={{

View File

@ -23,6 +23,8 @@ import { RESOURCE_TYPE_NUMBER_GROUP_CHAT_REACTIONS } from '../../constants/resou
import { isExtMsg } from '../../background'
import MentionList from './MentionList'
import { ChatOptions } from './ChatOptions'
import { isFocusedParentGroupAtom } from '../../atoms/global'
import { useRecoilState } from 'recoil'
const uid = new ShortUniqueId({ length: 5 });
@ -38,7 +40,9 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
const [openSnack, setOpenSnack] = React.useState(false);
const [infoSnack, setInfoSnack] = React.useState(null);
const hasInitialized = useRef(false)
const [isFocusedParent, setIsFocusedParent] = useState(false);
const [isFocusedParent, setIsFocusedParent] = useRecoilState(
isFocusedParentGroupAtom
);
const [replyMessage, setReplyMessage] = useState(null)
const hasInitializedWebsocket = useRef(false)
@ -47,7 +51,6 @@ 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 lastReadTimestamp = useRef(null)
@ -106,9 +109,7 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey,
return Array.from(uniqueMembers);
}, [messages]);
const triggerRerender = () => {
forceUpdate(); // Trigger re-render by updating the state
};
const setEditorRef = (editorInstance) => {
editorRef.current = editorInstance;
};
@ -552,6 +553,13 @@ const sendChatGroup = async ({groupId, typeMessage = undefined, chatReference =
throw new Error(error)
}
}
useEffect(()=> {
if(isFocusedParent === false){
setReplyMessage(null)
setOnEditMessage(null)
clearEditorContent()
}
}, [isFocusedParent])
const clearEditorContent = () => {
if (editorRef.current) {
editorRef.current.chain().focus().clearContent().run();
@ -560,10 +568,7 @@ const clearEditorContent = () => {
setTimeout(() => {
editorRef.current?.chain().blur().run();
setIsFocusedParent(false)
executeEvent("sent-new-message-group", {})
setTimeout(() => {
triggerRerender();
}, 300);
}, 200);
}
}
@ -839,9 +844,9 @@ const sendMessage = async ()=> {
onClick={()=> {
if(isSending) return
setIsFocusedParent(false)
setReplyMessage(null)
setOnEditMessage(null)
clearEditorContent()
// setReplyMessage(null)
// setOnEditMessage(null)
// clearEditorContent()
// Unfocus the editor
}}

View File

@ -1536,7 +1536,7 @@ export const Group = ({
};
useHandleMobileNativeBack({mobileViewMode, goToHome, setMobileViewMode})
useHandleMobileNativeBack({mobileViewMode, goToHome, setMobileViewMode, mobileViewModeKeepOpen, setMobileViewModeKeepOpen, newChat, selectedDirect, setSelectedDirect, setNewChat })
const goToAnnouncements = async () => {

View File

@ -1,16 +1,41 @@
import React, { useCallback, useEffect } from 'react'
import { subscribeToEvent, unsubscribeFromEvent } from '../utils/events';
import { useRecoilState } from 'recoil';
import { isFocusedParentDirectAtom, isFocusedParentGroupAtom } from '../atoms/global';
export const useHandleMobileNativeBack = ({mobileViewMode, goToHome, setMobileViewMode}) => {
export const useHandleMobileNativeBack = ({mobileViewMode, goToHome, setMobileViewMode, mobileViewModeKeepOpen, selectedDirect, newChat, setMobileViewModeKeepOpen, setSelectedDirect, setNewChat}) => {
const [isFocusedParent, setIsFocusedParent] = useRecoilState(
isFocusedParentGroupAtom
);
const [isFocusedParentDirect, setIsFocusedParentDirect] = useRecoilState(
isFocusedParentDirectAtom
);
const handleMobileNativeBackFunc = useCallback((e) => {
if(mobileViewModeKeepOpen === 'messaging'){
if(!selectedDirect && !newChat){
setMobileViewModeKeepOpen("")
}
else if(selectedDirect || newChat){
if(isFocusedParentDirect){
setIsFocusedParentDirect(false)
return
}
setSelectedDirect(null)
setNewChat(false)
}
return
}
if(mobileViewMode === 'groups'){
goToHome()
} else if(mobileViewMode === "group"){
if(isFocusedParent){
setIsFocusedParent(false)
return
}
setMobileViewMode('groups')
}
}, [mobileViewMode]);
}, [mobileViewMode, isFocusedParent, mobileViewModeKeepOpen, newChat, selectedDirect, isFocusedParentDirect]);
useEffect(() => {
subscribeToEvent("handleMobileNativeBack", handleMobileNativeBackFunc);