fix: Change active conversation on click on filtered conversation (#1…

…8110) * fix: Change active conversation on click on filtered conversation * cr fixes
wireapp · Oct 2, 2024 · a3ea97f · a3ea97f
1 parent e83f8b6
commit a3ea97f
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 19 deletions.
diff --git a/src/script/page/LeftSidebar/panels/Conversations/Conversations.tsx b/src/script/page/LeftSidebar/panels/Conversations/Conversations.tsx
@@ -48,7 +48,7 @@ import {
 import {ConversationsList} from './ConversationsList';
 import {ConversationTabs} from './ConversationTabs';
 import {EmptyConversationList} from './EmptyConversationList';
-import {getTabConversations} from './helpers';
+import {getTabConversations, scrollToConversation} from './helpers';
 import {useFolderStore} from './useFoldersStore';
 import {SidebarStatus, SidebarTabs, useSidebarStore} from './useSidebarStore';
 
@@ -107,6 +107,8 @@ const Conversations: React.FC<ConversationsProps> = ({
   userState = container.resolve(UserState),
   selfUser,
 }) => {
+  const [conversationListRef, setConversationListRef] = useState<HTMLElement | null>(null);
+
   const {currentTab, status: sidebarStatus, setStatus: setSidebarStatus, setCurrentTab} = useSidebarStore();
   const [conversationsFilter, setConversationsFilter] = useState<string>('');
   const {classifiedDomains, isTeam} = useKoSubscribableChildren(teamState, ['classifiedDomains', 'isTeam']);
@@ -336,9 +338,15 @@ const Conversations: React.FC<ConversationsProps> = ({
     if (firstFoundConversation) {
       createNavigateKeyboard(generateConversationUrl(firstFoundConversation.qualifiedId), true)(event);
       setConversationsFilter('');
+      scrollToConversation(firstFoundConversation.id);
     }
   };
 
+  const onSearch = (searchValue: string) => {
+    setConversationsFilter(searchValue);
+    conversationListRef?.scrollTo(0, 0);
+  };
+
   return (
     <div className="conversations-wrapper">
       <div className="conversations-sidebar-spacer" css={conversationsSpacerStyles(isScreenLessThanMdBreakpoint)} />
@@ -352,12 +360,13 @@ const Conversations: React.FC<ConversationsProps> = ({
             selfUser={selfUser}
             showSearchInput={(showSearchInput && currentTabConversations.length !== 0) || !!conversationsFilter}
             searchValue={conversationsFilter}
-            setSearchValue={setConversationsFilter}
+            setSearchValue={onSearch}
             searchInputPlaceholder={searchInputPlaceholder}
             setIsConversationFilterFocused={value => setIsConversationFilterFocused(value)}
             onSearchEnterClick={handleEnterSearchClick}
           />
         }
+        setConversationListRef={setConversationListRef}
         hasHeader={!isPreferences}
         {...(!isTemporaryGuest && {sidebar})}
         footer={callingView}

diff --git a/src/script/page/LeftSidebar/panels/Conversations/ConversationsList.tsx b/src/script/page/LeftSidebar/panels/Conversations/ConversationsList.tsx
@@ -86,7 +86,7 @@ export const ConversationsList = ({
   const {setCurrentView} = useAppMainState(state => state.responsiveView);
   const {currentTab} = useSidebarStore();
 
-  const [clickedFilteredConversation, setClickedFilteredConversation] = useState<HTMLElement | null>(null);
+  const [clickedFilteredConversationId, setClickedFilteredConversationId] = useState<string | null>(null);
 
   const {joinableCalls} = useKoSubscribableChildren(callState, ['joinableCalls']);
 
@@ -124,7 +124,7 @@ export const ConversationsList = ({
       }
 
       clearSearchFilter();
-      setClickedFilteredConversation(event.currentTarget);
+      setClickedFilteredConversationId(conversation.id);
     },
     isSelected: isActiveConversation,
     onJoinCall: answerCall,
@@ -133,11 +133,11 @@ export const ConversationsList = ({
   });
 
   useEffect(() => {
-    if (!conversationsFilter && clickedFilteredConversation) {
-      scrollToConversation(clickedFilteredConversation);
-      setClickedFilteredConversation(null);
+    if (!conversationsFilter && clickedFilteredConversationId) {
+      scrollToConversation(clickedFilteredConversationId);
+      setClickedFilteredConversationId(null);
     }
-  }, [conversationsFilter, clickedFilteredConversation]);
+  }, [conversationsFilter, clickedFilteredConversationId]);
 
   const isFolderView = currentTab === SidebarTabs.FOLDER;
   const filteredConversations =

diff --git a/src/script/page/LeftSidebar/panels/Conversations/helpers.tsx b/src/script/page/LeftSidebar/panels/Conversations/helpers.tsx
@@ -100,15 +100,26 @@ export const conversationSearchFilter = (filter: string) => (conversation: Conve
   return conversationDisplayName.includes(filterWord);
 };
 
-export const scrollToConversation = (element: HTMLElement) => {
-  const rect = element.getBoundingClientRect();
-  const isVisible =
-    rect.top >= 0 &&
-    rect.left >= 0 &&
-    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-    rect.right <= (window.innerWidth || document.documentElement.clientWidth);
-
-  if (!isVisible) {
-    element.scrollIntoView({behavior: 'instant', block: 'center', inline: 'nearest'});
-  }
+export const scrollToConversation = (conversationId: string) => {
+  const timeout = setTimeout(() => {
+    const element = document.querySelector<HTMLElement>(`.conversation-list-cell[data-uie-uid="${conversationId}"]`);
+
+    if (!element) {
+      return;
+    }
+
+    const rect = element.getBoundingClientRect();
+
+    const isVisible =
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+
+    if (!isVisible) {
+      element.scrollIntoView({behavior: 'instant', block: 'center', inline: 'nearest'});
+    }
+
+    clearTimeout(timeout);
+  }, 1);
 };
diff --git a/src/script/page/LeftSidebar/panels/ListWrapper.tsx b/src/script/page/LeftSidebar/panels/ListWrapper.tsx
@@ -56,6 +56,8 @@ interface LeftListWrapperProps {
   id: string;
   onClose?: () => void;
   hasHeader?: boolean;
+  conversationsFilter?: string;
+  setConversationListRef?: (element: HTMLElement) => void;
 }
 
 const ListWrapper = ({
@@ -69,6 +71,7 @@ const ListWrapper = ({
   footer,
   before,
   headerUieName,
+  setConversationListRef,
 }: LeftListWrapperProps) => {
   const calculateBorders = throttle((element: HTMLElement) => {
     window.requestAnimationFrame(() => {
@@ -86,6 +89,9 @@ const ListWrapper = ({
     if (!element) {
       return;
     }
+
+    setConversationListRef?.(element);
+
     calculateBorders(element);
     element.addEventListener('scroll', () => calculateBorders(element));
   }