unlimit scroll

src/App.js

@@ -14,12 +14,10 @@ import {
   Login, 
   Register, 
   Main,
-  ChatsPage,
+  AsidePage,
+  CChatsPage,
   CMsgPage
 } from "./pages"
-import {
-  CChatList
-} from "./components"
 
 import Grid from '@mui/material/Grid'
 
@@ -29,28 +27,21 @@ const PageNoChat = () => (
   <h1>Выбирай чат</h1>
 )
 
-const AuthSwitch = ({auth={}, getFirstChats}) => {
-
-  useEffect(() => {
-    const userId = auth.payload?.sub?.id 
-    if (userId) {
-      getFirstChats(userId, 0, 20)
-    } 
-  })
+const AuthSwitch = ({ token }) => {
 
   return (
     <>      
-      {auth.token ? 
+      {token ? 
       <>
         <Main>
 
           <Grid item xs={12} sm={4}>
-              <ChatsPage>
+              <AsidePage>
                 <Switch> 
                   <Route path="/find" component={PageNoChat} />
-                  <Route path="*" component={CChatList} /> 
+                  <Route path="*" component={CChatsPage} /> 
                 </Switch>
-              </ChatsPage>
+              </AsidePage>
           </Grid>
 
           <Grid item xs={12} sm={8}>
@@ -75,8 +66,7 @@ const AuthSwitch = ({auth={}, getFirstChats}) => {
     </>
   )
 }
-const CAuthSwitch = connect(state => ({auth: state.auth }), 
-                                                  {getFirstChats: actionFullChatList} )(AuthSwitch)
+const CAuthSwitch = connect(state => ({ token: state.auth.token || null }))(AuthSwitch)
 
 const history = createHistory()
 

src/components/ChatList.jsx

@@ -9,10 +9,8 @@ import {Link} from 'react-router-dom'
 
 import { FloatBtn, ChatAvatar } from "../components"
 import { connect }  from 'react-redux'
-import {
-  actionFullChatList
-} from "../actions"
- 
+
+
 const Chat = ({chat}) => {
 
   const {_id, title, owner, members} = chat
@@ -29,27 +27,20 @@ const Chat = ({chat}) => {
   )
 }
 
-const ChatList = ({chats, getData}) => {
-  // const [chatBlock, setChatBlock] = useState(0)
-
-  // useEffect(() => {
-  //   const userId = auth.payload?.sub?.id 
-  //   if (userId) {
-  //     getData(userId, chatBlock, 20)
-  //   } 
-  // },[])
+const ChatList = ({ chats=[] }) => {
 
   return (
-    <List sx={{ width: '100%', bgcolor: 'background.paper', position: 'relative', zIndex: 2 }}>
-      <Box sx={{  position: 'fixed', top: '90%', left: '25%', zIndex: 10}} >
-        <FloatBtn />
-      </Box>
-      {chats.map(chat => <Chat key={chat._id} chat={chat}/>)}  
-    
-    </List>
+      <List        
+        sx={{ width: '100%', bgcolor: 'background.paper', position: 'relative', zIndex: 2, }}
+        >
+        <Box sx={{  position: 'fixed', top: '90%', left: '25%', zIndex: 10}} >
+          <FloatBtn />
+        </Box>
+        {chats.map(chat => <Chat key={chat._id} chat={chat}/>)}  
+      
+      </List>
   )
 }
-export const CChatList = connect( state => ({ chats: Object.values(state.chats) || []}),
-                                        {getData: actionFullChatList})(ChatList)
+export const CChatList = connect( state => ({ chats: Object.values(state.chats) }))(ChatList)
 
 

src/pages/AsidePage.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import {
+   MenuDrawer, 
+   SearchBlock, 
+   Header, 
+} from "../components"
+
+
+const asidePageContainer = {
+   height: "100vh",
+   width: "100%"
+}
+const asidePageHeader = {
+   height: "60px"
+}
+
+export const AsidePage = ({children}) => {
+
+   return (
+      <div style={asidePageContainer}>
+
+         <div style={asidePageHeader}>
+            <Header>
+               <MenuDrawer />
+               <SearchBlock />
+            </Header>  
+         </div>
+
+         {children}
+
+      </div>
+   )
+}

src/pages/ChatsPage.jsx

@@ -1,40 +1,41 @@
-import React from 'react'
+import React, {useState, useEffect, useRef} from 'react';
 
+import { connect }  from 'react-redux'
 import {
-   MenuDrawer, 
-   SearchBlock, 
-   Header, 
-} from "../components"
+  actionFullChatList
+} from "../actions"
 
+import { CChatList } from '../components'
 
-const chatsPageContainer = {
-   height: "100vh",
-   width: "100%"
-}
-const chatsPageHeader = {
-   height: "60px"
-}
-const chatsPageBody = {
+const chatsPage= {
    height: "calc(100vh - 60px)",
    overflowY: "auto"
-}
-
-export const ChatsPage = ({children}) => {
-
+ }
+
+const ChatsPage = ({auth, getChats, chatsCount=50}) => {
+   const [chatBlock, setChatBlock] = useState(0)
+ 
+   useEffect(() => {
+     const userId = auth.payload?.sub?.id 
+     if (userId) {
+       getChats(userId, chatBlock, chatsCount)
+     } 
+   },[chatBlock])
+ 
    return (
-      <div style={chatsPageContainer}>
-
-         <div style={chatsPageHeader}>
-            <Header>
-               <MenuDrawer />
-               <SearchBlock />
-            </Header>  
-         </div>
-
-         <div style={chatsPageBody}>
-            {children}
-         </div>
-
-      </div>
+     <div 
+       style={chatsPage}
+       onScroll={(e) => {
+          if (e.target.scrollTop >= e.target.scrollHeight - e.target.clientHeight) {
+            setChatBlock(chatBlock => chatBlock + chatsCount)
+          }
+       }}
+       >
+
+         <CChatList />
+
+     </div>
    )
-}
+ }
+ export const CChatsPage= connect( state => ({ auth: state.auth }),
+                                         {getChats: actionFullChatList})(ChatsPage)

src/pages/index.js

@@ -2,13 +2,15 @@
 import {Login} from './Login'
 import {Register} from './Register'
 import {Main} from './Main'
-import {ChatsPage} from './ChatsPage'
+import {AsidePage} from './AsidePage'
+import {CChatsPage} from './ChatsPage'
 import {CMsgPage} from './MsgPage'
 
 
 export {Login} 
 export {Register} 
 export {Main} 
-export {ChatsPage} 
+export {AsidePage} 
+export {CChatsPage} 
 export {CMsgPage} 
 

src/reducers/chatsReducer.js

@@ -25,7 +25,7 @@
       CHATS() {
         if (payload && payload.length > 0) {
 
-          const newChats = state      
+          const newChats = {...state}     
           for (const chat of payload) {
             newChats[chat._id] = chat
           }
@@ -61,7 +61,7 @@
           
           for (const newMsg of payload || []) {   
               const currIndex = msgState.findIndex(oldMsg => oldMsg._id === newMsg._id)
-              
+
               if (currIndex === -1) {
                 msgState.push(newMsg)                
               } else {