diff --git a/src/script/page/LeftSidebar/LeftSidebar.tsx b/src/script/page/LeftSidebar/LeftSidebar.tsx index 061fcebb909..fd54b75ea65 100644 --- a/src/script/page/LeftSidebar/LeftSidebar.tsx +++ b/src/script/page/LeftSidebar/LeftSidebar.tsx @@ -17,7 +17,7 @@ * */ -import React, {useEffect} from 'react'; +import React, {useEffect, useRef, useState} from 'react'; import {amplify} from 'amplify'; import cx from 'classnames'; @@ -42,6 +42,9 @@ type LeftSidebarProps = { const LeftSidebar: React.FC = ({listViewModel, selfUser, isActivatedAccount}) => { const {conversationRepository, propertiesRepository} = listViewModel; const repositories = listViewModel.contentViewModel.repositories; + const inputRef = useRef(null); + + const [isConversationFilterFocused, setIsConversationFilterFocused] = useState(false); const listState = useAppState(state => state.listState); const switchList = (list: ListState) => listViewModel.switchList(list); @@ -49,20 +52,40 @@ const LeftSidebar: React.FC = ({listViewModel, selfUser, isAct const {setCurrentTab} = useSidebarStore(); useEffect(() => { - amplify.subscribe(WebAppEvents.SHORTCUT.START, () => { + function openCreateGroupModal() { amplify.publish(WebAppEvents.CONVERSATION.CREATE_GROUP, 'conversation_details'); - }); + } + + async function jumpToRecentSearch() { + switchList(ListState.CONVERSATIONS); - amplify.subscribe(WebAppEvents.SHORTCUT.SEARCH, () => { setCurrentTab(SidebarTabs.RECENT); - switchList(ListState.START_UI); - }); + setIsConversationFilterFocused(true); + } + + amplify.subscribe(WebAppEvents.SHORTCUT.START, openCreateGroupModal); + + amplify.subscribe(WebAppEvents.SHORTCUT.SEARCH, jumpToRecentSearch); + + return () => { + amplify.unsubscribe(WebAppEvents.SHORTCUT.START, openCreateGroupModal); + amplify.unsubscribe(WebAppEvents.SHORTCUT.SEARCH, jumpToRecentSearch); + }; }, []); + useEffect(() => { + if (isConversationFilterFocused) { + inputRef.current?.focus(); + } + }, [inputRef, isConversationFilterFocused]); + return (