Chat List: Fix unconfirmed session error (#5853)

src/components/left/main/ChatList.tsx

@@ -32,7 +32,6 @@ import { useHotkeys } from '../../../hooks/useHotkeys';
 import useInfiniteScroll from '../../../hooks/useInfiniteScroll';
 import { useIntersectionObserver } from '../../../hooks/useIntersectionObserver';
 import useLastCallback from '../../../hooks/useLastCallback';
-import useShowTransition from '../../../hooks/useShowTransition';
 import useOrderDiff from './hooks/useOrderDiff';
 
 import InfiniteScroll from '../../ui/InfiniteScroll';
@@ -116,14 +115,6 @@ const ChatList: FC<OwnProps> = ({
     if (!shouldShowUnconfirmedSessions) setUnconfirmedSessionHeight(0);
   }, [shouldShowUnconfirmedSessions]);
 
-  const {
-    ref: sessionRef,
-    shouldRender,
-  } = useShowTransition({
-    isOpen: shouldShowUnconfirmedSessions,
-    withShouldRender: true,
-  });
-
   // Support <Alt>+<Up/Down> to navigate between chats
   useHotkeys(useMemo(() => (isActive && orderedIds?.length ? {
     'Alt+ArrowUp': (e: KeyboardEvent) => {
@@ -257,10 +248,9 @@ const ChatList: FC<OwnProps> = ({
       onLoadMore={getMore}
       onDragLeave={handleDragLeave}
     >
-      {shouldRender && (
+      {shouldShowUnconfirmedSessions && (
         <UnconfirmedSession
           key="unconfirmed"
-          sessionRef={sessionRef}
           sessions={sessions!}
           onHeightChange={setUnconfirmedSessionHeight}
         />

src/components/left/main/UnconfirmedSession.tsx

@@ -1,5 +1,4 @@
-import type { RefObject } from '../../../lib/teact/teact';
-import React, { memo, useMemo } from '../../../lib/teact/teact';
+import React, { memo, useMemo, useRef } from '../../../lib/teact/teact';
 import { getActions } from '../../../global';
 
 import type { ApiSession } from '../../../api/types';
@@ -15,14 +14,15 @@ import styles from './UnconfirmedSession.module.scss';
 type OwnProps = {
   sessions: Record<string, ApiSession>;
   onHeightChange: (height: number) => void;
-  sessionRef: RefObject<HTMLDivElement | null>;
 };
 
-const UnconfirmedSession = ({ sessionRef, sessions, onHeightChange } : OwnProps) => {
+const UnconfirmedSession = ({ sessions, onHeightChange } : OwnProps) => {
   const { changeSessionSettings, terminateAuthorization, showNotification } = getActions();
+  // eslint-disable-next-line no-null/no-null
+  const ref = useRef<HTMLDivElement>(null);
   const lang = useOldLang();
 
-  useResizeObserver(sessionRef, (entry) => {
+  useResizeObserver(ref, (entry) => {
     const height = entry.borderBoxSize?.[0]?.blockSize || entry.contentRect.height;
     onHeightChange(height);
   });
@@ -52,7 +52,7 @@ const UnconfirmedSession = ({ sessionRef, sessions, onHeightChange } : OwnProps)
   });
 
   return (
-    <div className={styles.root} ref={sessionRef}>
+    <div className={styles.root} ref={ref}>
       <h2 className={styles.title}>{lang('UnconfirmedAuthTitle')}</h2>
       <p className={styles.info}>
         {lang('UnconfirmedAuthSingle', locationString)}