fix(#644): fix scrolling issue in message list

.github/workflows/build-deploy-dev.yml

@@ -2,7 +2,7 @@ name: Build and Deploy
 on:
   push:
     branches:
-      - development
+      - bugfix/fix-scrolling
 
 concurrency:
   group: ${{ github.ref }}

src/base.scss

@@ -84,6 +84,7 @@ input {
   --dt-dark-wt-kingBlue: #262c38;
   --dt-dark-wt-whiter: #262c38;
   --dt-dark-wt-kingBlueLight-transparenter: #262c38;
+  --dt-dark-wt-kingBlueLight-hover: #222732;
   --dt-dark-wt-kingBlue-lighter: #262c38;
   --dt-dark-transparent-wt-kingBlueLight: rgba(38, 44, 56, 0.5);
   --dt-dark-transparent-wt-kingBlueLight-transparent: rgba(38, 44, 56, 0.5);

src/components/call-list/add-call/add-call-modal/add-call-modal.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
 
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -24,6 +24,7 @@ interface IAddCallModalProps {
 
 export const AddCallModal: React.FC<IAddCallModalProps> = ({ onClose }) => {
   const { t } = useTranslation();
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const friendsList = useSelector(getMyFriendsListSelector);
   const searchFriendsList = useSelector(getMySearchFriendsListSelector);
@@ -107,7 +108,7 @@ export const AddCallModal: React.FC<IAddCallModalProps> = ({ onClose }) => {
 
   return (
     <Modal closeModal={onClose}>
-      <>
+      <div ref={containerRef}>
         <Modal.Header>
           <AddCallSvg viewBox="0 0 65 64" className="add-call-modal__icon" />
           <span> {t('addCallModal.title')} </span>
@@ -120,14 +121,15 @@ export const AddCallModal: React.FC<IAddCallModalProps> = ({ onClose }) => {
             onChange={handleSearchInputChange}
           />
           <InfiniteScroll
+            containerRef={containerRef}
             className="add-call-modal__friends-block 1"
             onReachBottom={loadMore}
             hasMore={name.length ? hasMoreSearchFriends : hasMoreFriends}
             isLoading={name.length ? searchFriendsLoading : friendsLoading}>
             {selectEntities}
           </InfiniteScroll>
         </div>
-      </>
+      </div>
     </Modal>
   );
 };

src/components/call-list/call-list.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useMemo, useEffect } from 'react';
+import React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';
 
 import { useSelector } from 'react-redux';
 
@@ -18,10 +18,11 @@ const BLOCK_NAME = 'call-list';
 export const CallList = () => {
   const callsList = useSelector(getCallsListSelector);
   const searchCallsList = useSelector(getSearchCallsListSelector);
-
   const getCalls = useActionWithDispatch(getCallsAction);
   const resetSearchCalls = useActionWithDispatch(resetSearchCallsAction);
 
+  const containerRef = useRef<HTMLDivElement>(null);
+
   const [searchString, setSearchString] = useState('');
   const changeSearchString = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -75,8 +76,9 @@ export const CallList = () => {
           onChange={changeSearchString}
         />
       </div>
-      <div className={BLOCK_NAME}>
+      <div className={BLOCK_NAME} ref={containerRef}>
         <InfiniteScroll
+          containerRef={containerRef}
           onReachBottom={loadMore}
           hasMore={searchString.length ? searchCallsList.hasMore : callsList.hasMore}
           isLoading={searchString.length ? searchCallsList.loading : callsList.loading}>

src/components/chat-info-right-panel/chat-media/audio-list/audio-list.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 
 import { useSelector } from 'react-redux';
 
@@ -23,7 +23,7 @@ const AudioAttachmentComponent: React.FC<IAudioAttachment> = ({ ...audio }) => (
 
 export const AudioList = () => {
   const audiosForSelectedChat = useSelector(getSelectedChatAudiosSelector);
-
+  const containerRef = useRef<HTMLDivElement>(null);
   const getAudios = useActionWithDispatch(getAudioAttachmentsAction);
 
   const loadMore = useCallback(() => {
@@ -39,9 +39,10 @@ export const AudioList = () => {
   );
 
   return (
-    <div className="chat-audios">
+    <div className="chat-audios" ref={containerRef}>
       <div className="chat-audios__audios">
         <InfiniteScroll
+          containerRef={containerRef}
           onReachBottom={loadMore}
           hasMore={audiosForSelectedChat?.hasMore}
           isLoading={audiosForSelectedChat?.loading}

src/components/chat-info-right-panel/chat-media/file-list/file-list.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 
 import { useSelector } from 'react-redux';
 
@@ -24,7 +24,7 @@ const FileAttachmentComponent: React.FC<IBaseAttachment> = ({ ...file }) => (
 
 export const FileList = () => {
   const getRawAttachments = useActionWithDispatch(getRawAttachmentsAction);
-
+  const containerRef = useRef<HTMLDivElement>(null);
   const filesForSelectedChat = useSelector(getSelectedChatFilesSelector);
 
   const loadMore = useCallback(() => {
@@ -45,8 +45,9 @@ export const FileList = () => {
   );
 
   return (
-    <div className="chat-files">
+    <div className="chat-files" ref={containerRef}>
       <InfiniteScroll
+        containerRef={containerRef}
         onReachBottom={loadMore}
         hasMore={filesForSelectedChat?.hasMore}
         isLoading={filesForSelectedChat?.loading}

src/components/chat-info-right-panel/chat-media/photo-list/photo-list.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 
 import { useSelector } from 'react-redux';
 
@@ -26,6 +26,7 @@ type PhotoListProps = {
 const PhotoList: React.FC<PhotoListProps> = ({ observeIntersection }) => {
   const getPhotoAttachments = useActionWithDispatch(getPhotoAttachmentsAction);
   const photoForSelectedChat = useSelector(getSelectedChatPhotosSelector);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const loadMore = useCallback(() => {
     const page: IPage = {
@@ -54,8 +55,9 @@ const PhotoList: React.FC<PhotoListProps> = ({ observeIntersection }) => {
     ) : null;
 
   return (
-    <div className="chat-photo">
+    <div className="chat-photo" ref={containerRef}>
       <InfiniteScroll
+        containerRef={containerRef}
         className="chat-photo__photo-container"
         onReachBottom={loadMore}
         hasMore={photoForSelectedChat?.hasMore}

src/components/chat-info-right-panel/chat-media/recordings-list/recordings-list.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 
 import { useSelector } from 'react-redux';
 
@@ -16,7 +16,7 @@ import './recordings-list.scss';
 
 export const RecordingsList = () => {
   const recordingsForSelectedChat = useSelector(getSelectedChatRecordingsSelector);
-
+  const containerRef = useRef<HTMLDivElement>(null);
   const getRecordings = useActionWithDispatch(getVoiceAttachmentsAction);
 
   const loadMore = useCallback(() => {
@@ -36,9 +36,10 @@ export const RecordingsList = () => {
   );
 
   return (
-    <div className="chat-recordings">
+    <div className="chat-recordings" ref={containerRef}>
       <div className="chat-recordings__recordings">
         <InfiniteScroll
+          containerRef={containerRef}
           onReachBottom={loadMore}
           hasMore={recordingsForSelectedChat?.hasMore}
           isLoading={recordingsForSelectedChat?.loading}>

src/components/chat-info-right-panel/chat-media/video-list/video-list.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 
 import { useSelector } from 'react-redux';
 
@@ -19,7 +19,7 @@ import './video-list.scss';
 
 export const VideoList = () => {
   const getVideoAttachmentss = useActionWithDispatch(getVideoAttachmentsAction);
-
+  const containerRef = useRef<HTMLDivElement>(null);
   const videosForSelectedChat = useSelector(getSelectedChatVideosSelector);
 
   const loadMore = useCallback(() => {
@@ -45,8 +45,9 @@ export const VideoList = () => {
     ) : null;
 
   return (
-    <div className="chat-video">
+    <div className="chat-video" ref={containerRef}>
       <InfiniteScroll
+        containerRef={containerRef}
         className="chat-video__scroll"
         onReachBottom={loadMore}
         hasMore={videosForSelectedChat?.hasMore}

src/components/chat-info-right-panel/chat-members/chat-members.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 
 import classnames from 'classnames';
 import { useTranslation } from 'react-i18next';
@@ -25,6 +25,7 @@ const BLOCK_NAME = 'chat-members';
 export const ChatMembers: React.FC = () => {
   const [searchStr, setSearchStr] = useState<string>('');
   const [membersDisplayed, setMembersDisplayed] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const { t } = useTranslation();
 
@@ -64,7 +65,7 @@ export const ChatMembers: React.FC = () => {
   );
 
   return (
-    <div className={BLOCK_NAME}>
+    <div className={BLOCK_NAME} ref={containerRef}>
       <div className={`${BLOCK_NAME}__heading-block`}>
         <h3 className={`${BLOCK_NAME}__heading`}>{t('chatMembers.title')}</h3>
         <button
@@ -84,6 +85,7 @@ export const ChatMembers: React.FC = () => {
           </div>
 
           <InfiniteScroll
+            containerRef={containerRef}
             className={`${BLOCK_NAME}__members-list`}
             onReachBottom={loadMore}
             hasMore={membersListForGroupChat?.hasMore}

src/components/chat-list/chat-list.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useState, useMemo } from 'react';
+import React, { useEffect, useCallback, useState, useMemo, useRef } from 'react';
 
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
@@ -27,6 +27,8 @@ const ChatList = React.memo(() => {
   const chatsList = useSelector(getChatsListSelector);
   const searchChatsList = useSelector(getSearchChatsListSelector);
 
+  const containerRef = useRef<HTMLDivElement>(null);
+
   const getChatsRequest = useActionWithDispatch(getChatsAction);
   const changeSelectedChat = useActionWithDispatch(changeSelectedChatAction);
   const resetSearchChats = useActionWithDispatch(resetSearchChatsAction);
@@ -96,7 +98,7 @@ const ChatList = React.memo(() => {
 
   return (
     <>
-      <div>
+      <div ref={containerRef}>
         <div className={`${BLOCK_NAME}__search-top`}>
           <SearchBox
             containerClassName={`${BLOCK_NAME}__search-top__search-container`}
@@ -113,6 +115,7 @@ const ChatList = React.memo(() => {
         </div>
         <div className={BLOCK_NAME}>
           <InfiniteScroll
+            containerRef={containerRef}
             onReachBottom={loadMore}
             hasMore={searchString.length ? searchChatsList.hasMore : chatsList.hasMore}
             isLoading={searchString.length ? searchChatsList.loading : chatsList.loading}>

src/components/create-group-chat-modal/user-select/user-select.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState, useRef } from 'react';
 
 import { useSelector } from 'react-redux';
 
@@ -21,6 +21,8 @@ const UserSelect: React.FC<IUserSelectProps> = ({ changeSelectedState, isSelecte
 
   const [name, setName] = useState('');
 
+  const containerRef = useRef<HTMLDivElement>(null);
+
   const friendsList = useSelector(getMyFriendsListSelector);
   const searchFriendsList = useSelector(getMySearchFriendsListSelector);
 
@@ -76,12 +78,13 @@ const UserSelect: React.FC<IUserSelectProps> = ({ changeSelectedState, isSelecte
   }, [name.length, searchFriendIds, friendIds, renderSelectEntity]);
 
   return (
-    <div className="create-group-chat__select-friends">
+    <div className="create-group-chat__select-friends" ref={containerRef}>
       <SearchBox
         containerClassName="create-group-chat__select-friends__search"
         onChange={handleSearchInputChange}
       />
       <InfiniteScroll
+        containerRef={containerRef}
         className="create-group-chat__friends-block"
         onReachBottom={loadMore}
         hasMore={name.length ? hasMoreSearchFriends : hasMoreFriends}

src/components/forward-modal/forward-modal.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useMemo, useEffect } from 'react';
+import React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';
 
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -30,6 +30,8 @@ interface IForwardModalProps {
 export const ForwardModal: React.FC<IForwardModalProps> = ({ onClose, messageIdsToForward }) => {
   const { t } = useTranslation();
 
+  const containerRef = useRef<HTMLDivElement>(null);
+
   const chatsList = useSelector(getChatsListSelector);
   const searchChatsList = useSelector(getSearchChatsListSelector);
 
@@ -115,7 +117,7 @@ export const ForwardModal: React.FC<IForwardModalProps> = ({ onClose, messageIds
 
   return (
     <Modal closeModal={onClose}>
-      <>
+      <div ref={containerRef}>
         <Modal.Header>
           <>
             <ForwardSvg viewBox="0 0 16 16" className={`${BLOCK_NAME}__icon`} />
@@ -130,6 +132,7 @@ export const ForwardModal: React.FC<IForwardModalProps> = ({ onClose, messageIds
             onChange={handleChatSearchChange}
           />
           <InfiniteScroll
+            containerRef={containerRef}
             className={`${BLOCK_NAME}__chats-block`}
             onReachBottom={loadMore}
             hasMore={searchString.length ? searchChatsList.hasMore : chatsList.hasMore}
@@ -150,7 +153,7 @@ export const ForwardModal: React.FC<IForwardModalProps> = ({ onClose, messageIds
             </Button>
           </div>
         </div>
-      </>
+      </div>
     </Modal>
   );
 };

src/components/friend-list/friend-list.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useMemo, useEffect } from 'react';
+import React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';
 
 import { useSelector } from 'react-redux';
 
@@ -19,6 +19,8 @@ export const FriendList = () => {
   const friendsList = useSelector(getMyFriendsListSelector);
   const searchFriendsList = useSelector(getMySearchFriendsListSelector);
 
+  const containerRef = useRef<HTMLDivElement>(null);
+
   const { hasMore: hasMoreFriends, friendIds, loading: friendsLoading } = friendsList;
   const {
     hasMore: hasMoreSearchFriends,
@@ -70,7 +72,7 @@ export const FriendList = () => {
   }, [searchString.length, searchFriendIds, friendIds, renderFriend]);
 
   return (
-    <div>
+    <div ref={containerRef}>
       <div className="friend-list__search-top">
         <SearchBox
           containerClassName="friend-list__search-top__search-container"
@@ -81,6 +83,7 @@ export const FriendList = () => {
       </div>
       <div className="friend-list">
         <InfiniteScroll
+          containerRef={containerRef}
           onReachBottom={loadMore}
           hasMore={searchString.length ? hasMoreSearchFriends : hasMoreFriends}
           isLoading={searchString.length ? searchFriendsLoading : friendsLoading}>