scroll

README.md

@@ -1,2 +1,10 @@
 FEA-23. Final project "Chat"
-===
+---
+
+Что, как мне кажется, можно усовершенсвовать в back-е:
+
+1) В сущность "Chat" внести поле "lastModified", в которое back будет вносить
+	- при создании чата: копию поля "createdAt"
+	- при добавлении в чат нового сообщения: дату создания этого сообщения
+
+2) При создании нового чата в "members" автоматически добавлять owner-а этого чата

chat_final_bootstrap/src/Actions/ActionLogin.js

@@ -46,14 +46,6 @@ export const actionUserInfo = (userId) => async (dispatch) => {
 
     if (userData && userData.data.UserFindOne) {
         dispatch(actionAuthInfo(userData.data.UserFindOne));
-
-        //
-        //
-        //
-        //
-        //
-        //
-        //
     } else {
         console.log("UserFindOne - ошибка");
     }

chat_final_bootstrap/src/Actions/ActionsGql.js

@@ -2,7 +2,7 @@
 
 import { urlConst } from "../const";
 import { actionPromise } from "../Reducers";
-import { actionMsgAdd } from "../Actions";
+import { actionMsgNewChat, actionMsgInsertInHead } from "../Actions";
 
 const getGQL = (url) => (query, variables = {}) => {
     return fetch(url, {
@@ -28,14 +28,14 @@ const toQuery = (str, fields = ["title", "text"]) => {
     return { $or: arr };
 };
 
-export const actionSearchMessagesByChatId = (_chatId, skip = 0, limit = 10, str = "") => async (dispatch) => {
+export const actionSearchMessagesByChatId = (_chatId, skip = 0, searchStr = "", limit = 10) => async (dispatch) => {
     let searchObj;
-    str = toQuery(str);
+    searchStr = toQuery(searchStr);
 
     if (_chatId) {
         searchObj = { $and: [{ "chat._id": _chatId }] };
-        searchObj.$and.push(str);
-    } else searchObj = { str };
+        searchObj.$and.push(searchStr);
+    } else searchObj = { searchStr };
 
     let messages = await dispatch(
         actionPromise(
@@ -67,7 +67,11 @@ export const actionSearchMessagesByChatId = (_chatId, skip = 0, limit = 10, str
     // console.log("actionFindMessagesByChatId result: ", messages);
 
     if (messages && messages.data && messages.data.MessageFind && messages.data.MessageFind.length) {
-        dispatch(actionMsgAdd(messages.data.MessageFind.reverse()));
+        if (!skip) {
+            dispatch(actionMsgNewChat(messages.data.MessageFind.reverse()));
+        } else {
+            dispatch(actionMsgInsertInHead(messages.data.MessageFind.reverse()));
+        }
     }
 };
 

chat_final_bootstrap/src/Actions/ActionsMsg.js

@@ -1,8 +1,13 @@
 //
 
-export const actionMsgAdd = (msgArr) => {
+export const actionMsgNewChat = (msgArr) => {
     // console.log("actionMsgAdd - ", JSON.stringify(msgArr, null, 4));
-    return { type: "ADDMSG", msgs: { [msgArr[0].chat._id]: msgArr } };
+    return { type: "NEW_CHAT", msgs: { [msgArr[0].chat._id]: msgArr } };
+};
+
+export const actionMsgInsertInHead = (msgArr) => {
+    // console.log("actionMsgAdd - ", JSON.stringify(msgArr, null, 4));
+    return { type: "CHAT_INS_HEAD", msgs: { [msgArr[0].chat._id]: msgArr } };
 };
 
 export const actionCurChatId = (curChatId) => ({ type: "CURRENTID", curChatId });

chat_final_bootstrap/src/Actions/index.js

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

chat_final_bootstrap/src/App.scss

@@ -15,7 +15,7 @@ $position-values: (
 
 div {
     border-radius: 7px;
-    // border: 1px solid red;
+    border: 1px solid red;
 }
 
 ::-webkit-scrollbar {

chat_final_bootstrap/src/Components/ChatContain.js

@@ -2,7 +2,7 @@ import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 import { useState, useEffect, useRef } from "react";
 import logo from "../images//logo23.jpg";
-import { actionGetMessagesByChatId } from "../Actions";
+import { actionGetMessagesByChatId, actionSearchMessagesByChatId } from "../Actions";
 import ScrollableFeed from "react-scrollable-feed";
 import { urlUploadConst } from "../const";
 
@@ -72,35 +72,49 @@ const MessageItem = ({
     );
 };
 
-const MessagesList = ({ messages, myId, chatId }) => {
+const MessagesList = ({ messages, myId, chatId, getMoreMessages = null }) => {
     const messagesEndRef = useRef(null); // указатель на пустой div  в коце сообщений для перемотки
     const messagesListBlockRef = useRef(null); // для отслеживания скролла
-    const [offset, setOffset] = useState(0); // для отслеживания скролла
-
-    // const height = messagesListBlockRef.current.scrollHeight - messagesListBlockRef.current.clientHeight;
-    // console.log(height);
-    console.log(offset);
+    const [offset, setOffset] = useState(Infinity); // для отслеживания скролла
+    const [height, setHeight] = useState(Infinity); // для отслеживания скролла
+    const [oldScrollHeight, seOldScrollHeight] = useState(Infinity); // для отслеживания скролла
+    const isNeedMoreMessages = useRef(false);
 
     let arrayOfMessages = messages[chatId];
-
-    // скролл в самый низ при приходе новых сообщений
-    const scrollToBottom = () => messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+    // console.log(isNeedMoreMessages.current, arrayOfMessages && arrayOfMessages.length);
+
+    // скролл в самый низ при приходе новых сообщений, scrollIntoView({ behavior: "smooth" }) - плавно
+    const scrollToBottom = () => {
+        if (height - offset < 10) {
+            messagesEndRef.current.scrollIntoView();
+        } else {
+            messagesListBlockRef.current.scrollTop = messagesListBlockRef.current.scrollHeight - oldScrollHeight;
+            // messagesListBlockRef.current.style.overflow = "auto";
+        }
+        isNeedMoreMessages.current = false;
+    };
     useEffect(scrollToBottom, [arrayOfMessages]);
 
     useEffect(() => {
-        //отслеживает событие скролла
+        // вешаем обработчик скрола
         messagesListBlockRef.current.onscroll = () => {
             setOffset(Math.floor(messagesListBlockRef.current.scrollTop));
+            seOldScrollHeight(messagesListBlockRef.current.scrollHeight);
         };
+    }, []);
 
-        // if (height === offset) {
-        //     getUsers(skip, limit); //  actionAllUsers= (skipArg, limitArg)=>{...}
-        //     setSkip(limit);
-        //     setLimit((prev) => prev + 10);
-        //     // console.log(allUsers, "getUs");
-        //     // console.log(height, "height");
-        //     // console.log(offset);
-        // }
+    useEffect(() => {
+        setHeight(messagesListBlockRef.current.scrollHeight - messagesListBlockRef.current.clientHeight);
+        setTimeout(() => {
+            if (offset < 5) {
+                if (!isNeedMoreMessages.current) {
+                    isNeedMoreMessages.current = true;
+                    // messagesListBlockRef.current.style.overflow = "hidden";
+                    if (typeof getMoreMessages === "function")
+                        getMoreMessages(chatId, arrayOfMessages && arrayOfMessages.length);
+                }
+            }
+        }, 16);
     }, [offset]);
 
     return (
@@ -111,7 +125,7 @@ const MessagesList = ({ messages, myId, chatId }) => {
     );
 };
 
-// скролл вниз при новых сообщениях только если мы ща уже внизу
+// скролл вниз при новых сообщениях только если мы на этот момент уже были внизу внизу
 // const MessagesList = ({ arrayOfMessages }) => {
 //     return (
 //         <div className="MessagesList">
@@ -128,7 +142,7 @@ const CMessagesList = connect(
         messages: s.msg,
         myId: s.auth && s.auth.payloadId,
     }),
-    {}
+    { getMoreMessages: actionSearchMessagesByChatId }
 )(MessagesList);
 
 const Messages = ({ _id = "", messages, getMsg }) => {

chat_final_bootstrap/src/Pages/PageMain.js

@@ -27,13 +27,6 @@ if (
 ) {
     history.push("/");
 }
-    //
-    //
-    //
-    //
-    //
-    //
-    //
     //
     //
     //

chat_final_bootstrap/src/Pages/PageNewChat.js

@@ -1,8 +1,83 @@
 import { ButtonToMain } from "../Components";
 
-export const PageNewChat = () => (
-    <>
-        PageNewChat
-        <ButtonToMain />
-    </>
-);
+const ChatDashBoard = () => {
+    return (
+        <>
+            <h4>ChatDashBoard</h4>
+        </>
+    );
+};
+
+const AllUsersConst = [
+    {
+        _id: "5e25e0a41719bf13be585729",
+        login: "test3",
+        nick: "",
+        avatar: null,
+    },
+    {
+        _id: "5e25bf671719bf13be5856c4",
+        login: "t",
+        nick: "t",
+        avatar: null,
+    },
+    {
+        _id: "5f3e4cd7c3de58221910d207",
+        login: "Kiliar",
+        nick: "Kiliar",
+        avatar: null,
+    },
+    {
+        _id: "5f528e96c3de58221910d20c",
+        login: "mdm1",
+        nick: "jj",
+        avatar: null,
+    },
+    {
+        _id: "5f568538c3de58221910d20e",
+        login: "11",
+        nick: "11",
+        avatar: null,
+    },
+];
+
+const UserItem = ({ _id, login, nick, avatar }) => {
+    const avatarUrl = avatar && avatar.url;
+    return (
+        <p>
+            <div>{_id}</div>
+            <div>{login}</div>
+            <div>{nick}</div>
+            <div>{avatarUrl}</div>
+        </p>
+    );
+};
+
+const AllUsers = ({ allUsersArray = AllUsersConst, getAllUsers = null }) => {
+    console.log(allUsersArray);
+    return (
+        <>
+            <h4>AllUsers</h4>
+            <div>{!!allUsersArray && allUsersArray.map((user) => <UserItem key={user._id} {...user} />)}</div>
+        </>
+    );
+};
+
+export const PageNewChat = () => {
+    return (
+        <>
+            PageNewChat
+            <ButtonToMain />
+            <div className="PageMain container-fluid">
+                <div className="row g-3">
+                    <div className="col-md-4">
+                        <AllUsers />
+                    </div>
+                    <div className="col-md-8">
+                        <ChatDashBoard />
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};

chat_final_bootstrap/src/Reducers/index.js

@@ -56,10 +56,19 @@ function authReducer(state, action) {
 }
 
 function msgReduser(state = {}, action) {
+    // console.log("------------", action);
+
     if (["LOGOUT", "LOGIN"].includes(action.type)) return {}; // кликнули по новому чату в sideBar
-    if (action.type === "ADDMSG") {
+
+    if (action.type === "NEW_CHAT") {
         return { ...state, ...action.msgs };
     }
+
+    if (action.type === "CHAT_INS_HEAD") {
+        let [key, value] = Object.entries(action.msgs)[0];
+        return { ...state, [key]: [...value, ...state[key]] };
+    }
+
     return state;
 }