msgReduser

chat_final_bootstrap/src/Actions/ActionLogin.js

@@ -32,6 +32,7 @@ export const actionUserInfo = (userId) => async (dispatch) => {
                                 _id
                                 title
                                 avatar {url}
+                                members{_id login nick avatar{url}}
                                 }
                         }
                     }`,

chat_final_bootstrap/src/Actions/ActionsGql.js

@@ -2,6 +2,7 @@
 
 import { urlConst } from "../const";
 import { actionPromise } from "../Reducers";
+import { actionMsgAdd } from "../Actions";
 
 const getGQL = (url) => (query, variables = {}) => {
     return fetch(url, {
@@ -27,16 +28,16 @@ const toQuery = (str, fields = ["title", "text"]) => {
     return { $or: arr };
 };
 
-export const actionSearchMessagesByChatId = (_chatId, str) => async (dispatch) => {
-    let searchStr;
+export const actionSearchMessagesByChatId = (_chatId, skip = 0, limit = 10, str = "") => async (dispatch) => {
+    let searchObj;
     str = toQuery(str);
 
     if (_chatId) {
-        searchStr = { $and: [{ "chat._id": _chatId }] };
-        searchStr.$and.push(str);
-    } else searchStr = { str };
+        searchObj = { $and: [{ "chat._id": _chatId }] };
+        searchObj.$and.push(str);
+    } else searchObj = { str };
 
-    let ChatFindOne = await dispatch(
+    let messages = await dispatch(
         actionPromise(
             "MessageFind",
             gql(
@@ -59,11 +60,15 @@ export const actionSearchMessagesByChatId = (_chatId, str) => async (dispatch) =
                         }
                     }
                 }`,
-                { searchMsgStr: JSON.stringify([searchStr, { sort: [{ _id: 1 }] }]) }
+                { searchMsgStr: JSON.stringify([searchObj, { sort: [{ _id: -1 }], skip: [skip], limit: [limit] }]) }
             )
         )
     );
-    // console.log("actionFindMessagesByChatId result: ", ChatFindOne);
+    // console.log("actionFindMessagesByChatId result: ", messages);
+
+    if (messages && messages.data && messages.data.MessageFind && messages.data.MessageFind.length) {
+        dispatch(actionMsgAdd(messages.data.MessageFind.reverse()));
+    }
 };
 
 // получить все сообщения из чата с такм-то _id
@@ -77,9 +82,7 @@ export const actionGetMessagesByChatId = (_chatId) => async (dispatch) => {
                         _id
                         title
                         createdAt
-                        members {
-                            login
-                        }
+                        members {login}
                         messages {
                             _id
                             createdAt
@@ -89,16 +92,14 @@ export const actionGetMessagesByChatId = (_chatId) => async (dispatch) => {
                             }
                             text
                         }
-                        avatar {
-                            url
-                        }
+                        avatar {url}
                     }
                     }`,
                 { chatId: JSON.stringify([{ _id: _chatId }, { sort: [{ _id: 1 }] }]) }
             )
         )
     );
-    // console.log("actionGetMessagesByChatId");
+    console.log("actionGetMessagesByChatId");
 };
 
 export const actionSearchChat = (_userId = "", str = "") => async (dispatch) => {

chat_final_bootstrap/src/Actions/ActionsMsg.js

@@ -0,0 +1,4 @@
+export const actionMsgAdd = (msgArr) => {
+    // console.log("actionMsgAdd - ", JSON.stringify(msgArr, null, 4));
+    return { type: "ADDMSG", msgs: { [msgArr[0].chat._id]: msgArr } };
+};

chat_final_bootstrap/src/Actions/index.js

@@ -1,5 +1,6 @@
 import { actionAuthLogin, actionAuthLogout, actionLogin, actionRegistration, actionUserInfo } from "./ActionLogin";
 import { gql, actionSearchMessagesByChatId, actionGetMessagesByChatId, actionSearchChat } from "./ActionsGql";
+import { actionMsgAdd } from "./ActionsMsg";
 
 export {
     actionUserInfo,
@@ -11,4 +12,5 @@ export {
     actionGetMessagesByChatId,
     actionSearchChat,
     actionSearchMessagesByChatId,
+    actionMsgAdd,
 };

chat_final_bootstrap/src/Components/ChatContain.js

@@ -32,7 +32,6 @@ const MessageItem = ({
     // date.getSeconds().toString().padStart(2, 0);
 
     return (
-        // <div className="list-group-item list-group-item-success m-2 gradient shadow-sm border-2">
         <div
             className={`messageItem list-group-item m-2 gradient shadow-sm border-2 ${
                 myId === ownerId ? "start-right list-group-item-success text-success" : " list-group-item-light"
@@ -77,9 +76,11 @@ const MessageItem = ({
     );
 };
 
-const MessagesList = ({ arrayOfMessages, myId }) => {
+const MessagesList = ({ messages, myId, chatId }) => {
     const messagesEndRef = useRef(null); // указатель на пустой div  в коце сообщений для перемотки
 
+    let arrayOfMessages = messages[chatId];
+
     // скролл в самый низ при приходе новых сообщений
     const scrollToBottom = () => messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
 
@@ -106,18 +107,26 @@ const MessagesList = ({ arrayOfMessages, myId }) => {
 
 const CMessagesList = connect(
     (s) => ({
-        arrayOfMessages:
+        //FIXME: приконнектить массив сообщений
+        chatId:
             s.promise.MessageFind &&
             s.promise.MessageFind.payload &&
             s.promise.MessageFind.payload.data &&
-            s.promise.MessageFind.payload.data.MessageFind,
+            s.promise.MessageFind.payload.data.MessageFind &&
+            s.promise.MessageFind.payload.data.MessageFind[0] &&
+            s.promise.MessageFind.payload.data.MessageFind[0].chat &&
+            s.promise.MessageFind.payload.data.MessageFind[0].chat._id,
+        messages: s.msg,
         myId: s.auth && s.auth.payloadId,
     }),
     {}
 )(MessagesList);
 
-const Messages = ({ avatar, _id = "", title = "No Title", getMsg }) => {
-    // id чата, аватар чата
+const Messages = ({ _id = "", messages, getMsg }) => {
+    // id чата,
+
+    let avatar = messages && messages[_id] && messages[_id][0] && messages[_id][0].chat && messages[_id][0].chat.avatar;
+    let title = messages && messages[_id] && messages[_id][0] && messages[_id][0].chat && messages[_id][0].chat.title;
 
     useEffect(() => {
         if (typeof doSearchMsg === "function") getMsg(_id);
@@ -172,29 +181,34 @@ const CMessages = connect(
     (s) => ({
         //id чата
         _id:
-            s.promise.chatFindOne &&
-            s.promise.chatFindOne.payload &&
-            s.promise.chatFindOne.payload.data &&
-            s.promise.chatFindOne.payload.data.ChatFindOne &&
-            s.promise.chatFindOne.payload.data.ChatFindOne._id,
-        arrayOfMessages:
-            s.promise.chatFindOne &&
-            s.promise.chatFindOne.payload &&
-            s.promise.chatFindOne.payload.data &&
-            s.promise.chatFindOne.payload.data.ChatFindOne &&
-            s.promise.chatFindOne.payload.data.ChatFindOne.messages,
-        avatar:
-            s.promise.chatFindOne &&
-            s.promise.chatFindOne.payload &&
-            s.promise.chatFindOne.payload.data &&
-            s.promise.chatFindOne.payload.data.ChatFindOne &&
-            s.promise.chatFindOne.payload.data.ChatFindOne.avatar,
-        title:
-            s.promise.chatFindOne &&
-            s.promise.chatFindOne.payload &&
-            s.promise.chatFindOne.payload.data &&
-            s.promise.chatFindOne.payload.data.ChatFindOne &&
-            s.promise.chatFindOne.payload.data.ChatFindOne.title,
+            s.promise.MessageFind &&
+            s.promise.MessageFind.payload &&
+            s.promise.MessageFind.payload.data &&
+            s.promise.MessageFind.payload.data.MessageFind &&
+            s.promise.MessageFind.payload.data.MessageFind[0] &&
+            s.promise.MessageFind.payload.data.MessageFind[0].chat &&
+            s.promise.MessageFind.payload.data.MessageFind[0].chat._id,
+        messages: s.msg,
+        //     s.promise.chatFindOne.payload &&
+        //     s.promise.chatFindOne.payload.data &&
+        //     s.promise.chatFindOne.payload.data.ChatFindOne &&
+        //     s.promise.chatFindOne.payload.data.ChatFindOne.messages,
+        // avatar:
+        //     s.promise.MessageFind &&
+        //     s.promise.MessageFind.payload &&
+        //     s.promise.MessageFind.payload.data &&
+        //     s.promise.MessageFind.payload.data.MessageFind &&
+        //     s.promise.MessageFind.payload.data.MessageFind[0] &&
+        //     s.promise.MessageFind.payload.data.MessageFind[0].chat &&
+        //     s.promise.MessageFind.payload.data.MessageFind[0].chat.avatar,
+        // title:
+        //     s.promise.MessageFind &&
+        //     s.promise.MessageFind.payload &&
+        //     s.promise.MessageFind.payload.data &&
+        //     s.promise.MessageFind.payload.data.MessageFind &&
+        //     s.promise.MessageFind.payload.data.MessageFind[0] &&
+        //     s.promise.MessageFind.payload.data.MessageFind[0].chat &&
+        //     s.promise.MessageFind.payload.data.MessageFind[0].chat.title,
     }),
     { getMsg: actionGetMessagesByChatId }
 )(Messages);

chat_final_bootstrap/src/Components/ChatsList.js

@@ -5,6 +5,8 @@ import { Link } from "react-router-dom";
 import { Counter } from "../Components";
 import personFillIcon from "../icons/person-fill.svg";
 import history from "../history";
+import { useEffect } from "react";
+import { useState } from "react";
 
 const CCounter = connect;
 
@@ -52,7 +54,7 @@ const ChatItem = ({ _id = "", avatar, title, messages, userId, currentChatId })
                         {Counter(_id)}
                         <span className="visually-hidden">всего сообщений</span>
                     </span>
-                    {/* <span className="text-nowrap"> chatID: {_id}</span> */}
+                    <span className="text-nowrap"> chatID: {_id}</span>
                 </li>
             </>
         </Link>
@@ -97,12 +99,16 @@ const List = ({ arrayOfChats, userId, currentChatId }) => {
 
 const CList = connect((s) => ({
     currentChatId:
-        s.promise.chatFindOne &&
-        s.promise.chatFindOne.payload &&
-        s.promise.chatFindOne.payload.data &&
-        s.promise.chatFindOne.payload.data.ChatFindOne &&
-        s.promise.chatFindOne.payload.data.ChatFindOne._id,
+        s.promise &&
+        s.promise.MessageFind &&
+        s.promise.MessageFind.payload &&
+        s.promise.MessageFind.payload.data &&
+        s.promise.MessageFind.payload.data.MessageFind &&
+        s.promise.MessageFind.payload.data.MessageFind[0] &&
+        s.promise.MessageFind.payload.data.MessageFind[0].chat &&
+        s.promise.MessageFind.payload.data.MessageFind[0].chat._id,
 
+    //FIXME: для сортировки надо подсоеденить правильный массив
     arrayOfChats: s.auth && s.auth.chats,
 
     userId: s.auth && s.auth.payloadId,

chat_final_bootstrap/src/Layout/Sidebar.js

@@ -1,10 +1,12 @@
 import { CUserInfo } from "../Layout";
 import { CAdditionalTools, ChatsList } from "../Components";
 
-export const Sidebar = () => (
-    <aside className="Sidebar">
-        <CUserInfo />
-        <CAdditionalTools />
-        <ChatsList className="ChatsList" />
-    </aside>
-);
+export const Sidebar = () => {
+    return (
+        <aside className="Sidebar">
+            <CUserInfo />
+            <CAdditionalTools />
+            <ChatsList className="ChatsList" />
+        </aside>
+    );
+};

chat_final_bootstrap/src/Pages/PageMain.js

@@ -2,7 +2,7 @@ import { ChatContain } from "../Components";
 import { Sidebar } from "../Layout";
 import { store } from "../Reducers";
 import history from "../history";
-import { actionGetMessagesByChatId, actionSearchChat } from "../Actions";
+import { actionGetMessagesByChatId, actionSearchChat, actionSearchMessagesByChatId } from "../Actions";
 import { connect } from "react-redux";
 import { useState, useEffect } from "react";
 
@@ -43,7 +43,7 @@ const PageMain = ({
             <div className="row g-3">
                 <div className="col-md-4">
                     {/* {_userId + ` - подмена id`} */}
-                    <Sidebar />
+                    <Sidebar/>
                 </div>
                 <div className="col-md-8">
                     <ChatContain _chatId={_chatId} />
@@ -56,5 +56,5 @@ const PageMain = ({
 // prettier-ignore
 export const CPageMain = connect((s) => ({ _userId: s.auth && s.auth.payloadId }), {
     // getChatList: actionSearchChat,
-    getMesagesList: actionGetMessagesByChatId,
+    getMesagesList: actionSearchMessagesByChatId,
 })(PageMain);

chat_final_bootstrap/src/Reducers/index.js

@@ -55,6 +55,14 @@ function authReducer(state, action) {
     return state;
 }
 
+function msgReduser(state = {}, action) {
+    if (["LOGOUT", "LOGIN"].includes(action.type)) return {}; // кликнули по новому чату в sideBar
+    if (action.type === "ADDMSG") {
+        return { ...state, ...action.msgs };
+    }
+    return state;
+}
+
 function promiseReducer(state = {}, action) {
     if (["LOGOUT", "LOGIN"].includes(action.type)) return {};
     if (action.type === "PROMISE") {
@@ -73,13 +81,6 @@ function promiseReducer(state = {}, action) {
     return state;
 }
 
-function messagesReduser(state = {}, action) {
-    if (["LOGOUT", "LOGIN"].includes(action.type)) return {};
-    if (action.type === "ADDMSG") {
-    }
-    return state;
-}
-
 export const actionPromise = (name, promise) => {
     const actionPending = () => ({ type: "PROMISE", name, status: "PENDING", payload: null, error: null });
     const actionResolved = (payload) => ({ type: "PROMISE", name, status: "RESOLVED", payload, error: null });
@@ -99,7 +100,7 @@ export const actionPromise = (name, promise) => {
 };
 
 export const store = createStore(
-    combineReducers({ auth: authReducer, promise: promiseReducer }),
+    combineReducers({ auth: authReducer, promise: promiseReducer, msg: msgReduser }),
     applyMiddleware(thunk)
 );