some fixes

src/App.scss

@@ -1,6 +1,87 @@
 
 
 
-.chatItem:hover {
+.chatItem {
+   height: 70px;
+   max-width: 100%;
+   display: flex;
+   justify-content: flex-start;
+   align-items: center;
+   padding: 5px;
+
+   .chatAvatar {
+      flex-shrink: 0;
+      // пиздец
+      .MuiAvatar-root {
+         width: 50px;
+         height: 50px;
+      }
+   }
+
+   .chatBody {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: flex-start;
+      max-width: 100%;
+      flex-grow: 1;
+      margin-left: 10px;      
+
+      .chatTitle {
+         width: 100%;
+         display: flex;
+         justify-content: space-between;
+         align-items: center;
+
+         .chatName {
+            width: auto;
+            max-width: 80%;
+            flex-grow: 1;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            font-weight: 500;
+         }
+
+         .chatStatus {
+            flex-shrink: 0;
+
+         }
+      }
+
+      .chatSubTitle {
+         width: auto;
+         max-width: 80%;
+         overflow: hidden;
+         white-space: nowrap;
+         text-overflow: ellipsis;
+         font-size: 14px;
+         font-weight: 300;
+      }
+   }
+}
+
+.selectedChat {
+   background-color: #1976d2dd;
+   border-radius: 5px;
+   .chatName {
+      color: #fff;
+   }
+   .chatSubTitle {
+      color: #fff;
+   }
+}
+
+.notSelectedChat {
+   background-color: #fff;
+   .chatName {
+      color: #222;
+   }
+   .chatSubTitle {
+      color: #555;
+   }
+}
+.notSelectedChat:hover {
    background-color: #eee;
-}
+}
+

src/actions/chatsActions.js

@@ -33,9 +33,11 @@ export const actionGetChatsByUser = (userId, skipCount=0, limitCount=50) => (
          _id
          title
          avatar {
+            _id
             url
          }
          owner {
+            _id
             login
          }
          members {
@@ -88,9 +90,11 @@ export const actionGetChatById = (chatId) => (
          _id
          title
          avatar {
+            _id
             url
          }
          owner {
+            _id
             login
          }
          members {
@@ -116,6 +120,14 @@ export const actionGetChatById = (chatId) => (
 
 
 
+export const actionChatsCount = (userId) => (
+   actionPromise('chatsCount', gql(`query chatsCount($q: String) {
+      ChatCount (query: $q)  
+   }`, { 
+         q: JSON.stringify([ { ___owner: userId } ])
+      }
+   ))
+)
 
 
 
@@ -126,37 +138,40 @@ export const actionGetChatById = (chatId) => (
 
 
 
-// вспомогательный запрос
-export const actionGetAllChats = (userId) => (
-   actionPromise('getAll', gql(`query getAll($q: String){
-      ChatFind (query: $q){
-         _id
-         title
-         owner {
-            login
-         }
-         avatar {
-            url
-         }
-         members {
-            _id
-            login
-         }
-         messages {
-            owner {
-               login
-            }
-            text
-         }
-         lastModified
-      }         
-   }`, { 
-         q: JSON.stringify([ { 'members._id': userId }, { skip: [0], limit: [100] } ])
-         }
-   ))
-)
 
 
+
+
+// вспомогательный запрос
+// export const actionGetAllChats = (userId) => (
+//    actionPromise('getAll', gql(`query getAll($q: String){
+//       ChatFind (query: $q){
+//          _id
+//          title
+//          owner {
+//             login
+//          }
+//          avatar {
+//             url
+//          }
+//          members {
+//             _id
+//             login
+//          }
+//          messages {
+//             owner {
+//                login
+//             }
+//             text
+//          }
+//          lastModified
+//       }         
+//    }`, { 
+//          q: JSON.stringify([ { 'members._id': userId }, { skip: [0], limit: [100] } ])
+//          }
+//    ))
+// )
+
 // не работает
 // export const actionRemoveChat = (chatId) => (
 //    actionPromise('removeChat', gql(`mutation removeChat($chat:ChatInput) {

src/actions/index.js

@@ -9,10 +9,10 @@ import {
 import {
    actionUpdateChat,
    actionGetChatsByUser,
-   actionGetAllChats,
    actionGetChatById,
-
-   actionFullChatList
+   
+   actionFullChatList,
+   actionChatsCount
 } from './chatsActions'
 import {
    actionGetMsgsByChat,
@@ -42,10 +42,10 @@ export {
 export {
    actionUpdateChat,
    actionGetChatsByUser,
-   actionGetAllChats,
    actionGetChatById,
 
    actionFullChatList,
+   actionChatsCount
 }
 export {
    actionGetMsgsByChat,

src/actions/msgActions.js

@@ -102,6 +102,7 @@ const actionLastMsgByChat = (chatId) => (
             _id
          }
          media {
+            _id
             url
             originalFileName
             type

src/components/Avatar.jsx

@@ -8,6 +8,10 @@ const small = {
   height: '40px', 
   width: '40px'
 }
+const middle = {
+  height: '50px', 
+  width: '50px'
+}
 const big = {
   height: '70px', 
   width: '70px'
@@ -57,9 +61,9 @@ export const ChatAvatar = ({ chat, bigSize=false }) => {
     <>
     {
         getUrl() ?
-        <Avatar  sx={ bigSize ? big : small } 
+        <Avatar  sx={ bigSize ? big : middle } 
                 alt={chat.title } src={getUrl()} /> :
-        <Avatar  sx={ bigSize ? big : small }
+        <Avatar  sx={ bigSize ? big : middle }
                 {...stringColor.stringAvatar(chat.title)} /> 
     }        
     </>

src/components/ChatList.jsx

@@ -10,16 +10,6 @@ import {Link} from 'react-router-dom'
 import { FloatBtn, ChatAvatar } from "../components"
 import { connect }  from 'react-redux'
 
-const selectedChat = {
-  color: "#fff",
-  backgroundColor: "#1976d2dd" 
-}
-
-const notSelectedChat = {
-  color: "#1976d2",
-  backgroundColor: "#fff"
-}
-
 
 const Chat = ({ chat, currChat }) => {
 
@@ -29,7 +19,7 @@ const Chat = ({ chat, currChat }) => {
   // const { text, owner: msgOwner, media, createdAt } = messages
 
   useEffect(() => {
-    setMsgText( chat.messages && chat.messages[0]?.text || 'нема')
+    setMsgText( chat.messages && chat.messages[0]?.text || '...')
   }, [chat])
 
   return (
@@ -37,30 +27,34 @@ const Chat = ({ chat, currChat }) => {
       style={{ textDecoration: 'none' }}
       to={`/main/${chat._id}`}
       >
-      <ListItem 
-        className="chatItem"
-        style={ currChat ? selectedChat : notSelectedChat }
-        
+     
+      <div
+        className={`chatItem ${currChat ? "selectedChat" : "notSelectedChat"} `}
         >
-        <ListItemAvatar>
+        <div className={"chatAvatar"}>
           <ChatAvatar chat={chat} />
-        </ListItemAvatar>
-        <ListItemText 
-          primary={chat.title} 
-          secondary={msgText} />
-      </ListItem>
-
-      {/* <div
-        style={ currChat ? selectedChat : notSelectedChat }
-        >
-          <strong>
-            {chat.title}
-          </strong>         
-          <div>
+        </div>   
+
+        <div className={"chatBody"}>
+
+          <div className={"chatTitle"}>
+
+            <div className={"chatName"}>
+              {chat.title} 
+            </div> 
+
+            <div className={"chatStatus"}>
+      
+            </div> 
+          </div> 
+
+          <div className={"chatSubTitle"}>
             {msgText}
-          </div>
-          
-      </div> */}
+          </div> 
+
+        </div>
+              
+      </div>
     </Link>
   )
 }
@@ -68,7 +62,6 @@ const Chat = ({ chat, currChat }) => {
 const ChatList = ({ chats=[], currChatId }) => {
 
   // const [chatsInput, setChats] = useState(chats)
-
   // useEffect(() => {
   //   setChats(chats)
   // }, [chats])
@@ -81,7 +74,6 @@ const ChatList = ({ chats=[], currChatId }) => {
             <Box sx={{  position: 'fixed', top: '90%', left: '25%', zIndex: 10}} >
               <FloatBtn />
             </Box>
-
               {chats.map(chat =>          
                     <Chat key={chat._id} chat={chat} currChat={currChatId === chat._id} /> 
               )}  
@@ -95,3 +87,36 @@ const ChatList = ({ chats=[], currChatId }) => {
 export const CChatList = connect( state => ({ chats: Object.values(state.chats).filter(el => !!el._id)}))(ChatList)
 
 
+{/* <div class="ListItem Chat chat-item-clickable private no-selection has-ripple" style="top: 0px;">
+  <div class="ListItem-button" role="button" tabindex="0">
+    <div class="status">
+      <div class="Avatar size-large color-bg-8 saved-messages">
+        <i class="icon-avatar-saved-messages"></i>
+      </div>
+    </div>
+  <div class="info">
+    <div class="title">
+      <h3>Saved Messages</h3>
+      <div class="LastMessageMeta">
+        <div class="MessageOutgoingStatus">
+          <div class="Transition reveal">
+            <div class="Transition__slide--active">
+              <i class="icon-message-succeeded"></i>
+            </div>
+          </div>
+        </div>
+        <span class="time">Mon</span>
+      </div>
+    </div>
+    <div class="subtitle">
+      <p class="last-message" dir="ltr">https://dolgvol.github.io/ToDoListProd/</p>
+      <div class="Badge-transition open shown">
+        <div class="Badge pinned">
+          <i class="icon-pinned-chat"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="ripple-container"></div>
+</div>
+</div> */}

src/pages/ChatsPage.jsx

@@ -3,6 +3,7 @@ import React, {useState, useEffect, useRef} from 'react';
 import { connect }  from 'react-redux'
 import {
   actionFullChatList,
+  actionChatsCount,
 } from "../actions"
 
 import { CChatList } from '../components'
@@ -12,16 +13,26 @@ const chatsPage= {
    overflowY: "auto"
  }
 
-const ChatsPage = ({ match:{params:{_id}}, auth, getChats, chatsCount=20 }) => {
+const ChatsPage = ({  match:{params:{_id}}, auth, 
+                      getChats, chatsCount=20, 
+                      allCount, getAllCount, }) => {
+
    const [chatBlock, setChatBlock] = useState(0)
+   const [count, setCount] = useState(allCount)
+
  
    useEffect(async () => {
      const userId = auth.payload?.sub?.id 
      if (userId) {
       await getChats(userId, chatBlock, chatsCount)
+
+      // CHECK: правильно ли тут написано?
+      let res = await getAllCount(userId)
+      setCount(res)
      } 
+    //  console.log(chatBlock, count)
+
      return function cleanUp() {
-       
      }
    },[chatBlock])
  
@@ -29,9 +40,12 @@ const ChatsPage = ({ match:{params:{_id}}, auth, getChats, chatsCount=20 }) => {
      <div 
        style={chatsPage}
        onScroll={(e) => {
-          if (e.target.scrollTop >= e.target.scrollHeight - e.target.clientHeight) {
-            setChatBlock(chatBlock => chatBlock + chatsCount)
-          }
+         if (chatBlock < count) {
+
+            if (e.target.scrollTop >= e.target.scrollHeight - e.target.clientHeight) {
+              setChatBlock(chatBlock => chatBlock + chatsCount)
+            }
+         }
        }}
        >
 
@@ -40,6 +54,8 @@ const ChatsPage = ({ match:{params:{_id}}, auth, getChats, chatsCount=20 }) => {
      </div>
    )
  }
- export const CChatsPage= connect( state => ({ auth: state.auth }),
-                                          { getChats: actionFullChatList
+ export const CChatsPage= connect( state => ({  auth: state.auth, 
+                                                allCount: state.promise?.chatsCount?.payload || 0 }),
+                                          { getChats: actionFullChatList,
+                                            getAllCount: actionChatsCount
                                                 })(ChatsPage)

src/reducers/chatsReducer.js

@@ -62,7 +62,8 @@
     }
 
     const types = {
-      // БАГ: иногда чаты пропадают из стора, причины не до конца понятны
+      // BUG: иногда часть чатов пропадают из стора, причины не до конца понятны
+      // конкретный триггер пока не обнаружен, по идее в их id как то попадает undefined
       CHATS() {
         if (payload) {
 

src/reducers/findUserActions.js

@@ -2,6 +2,9 @@ import {gql} from '../helpers'
 import {
    actionPromise
 } from './promiseReducer'
+import {   
+   actionChatsCount
+} from '../actions'
 
 export const actionUserFindOne = (userId, name='findUserOne') => (
    actionPromise(name, gql(`query findUserOne($q: String) {
@@ -28,6 +31,7 @@ export const actionAboutMe = () => (
       let id = auth?.payload?.sub?.id 
       if (id) {
          await dispatch(actionUserFindOne(id, 'myProfile'))
+         await dispatch(actionChatsCount(id))
       }   
    }
 )