scroll not yet

chat_final_bootstrap/src/Actions/ActionLogin.js

@@ -11,7 +11,8 @@ export const actionAuthLogout = () => {
     return { type: "LOGOUT" };
 };
 
-export const actionAuthInfo = ({ login, nick, _id, avatar: { url } = { url: null }, chats = [] }) => {
+export const actionAuthInfo = ({ login, nick, _id, avatar, chats = [] }) => {
+    let url = avatar && avatar.url;
     // console.log("actionAuthInfo - ", login, nick, _id, url);
     return { type: "INFO", userInfo: { login, nick, _id, url, chats } };
 };
@@ -41,7 +42,7 @@ export const actionUserInfo = (userId) => async (dispatch) => {
         )
     );
 
-    console.log("UserFindOne - ##########", userData.data.UserFindOne);
+    // console.log("UserFindOne - ##########", userData.data.UserFindOne);
 
     if (userData && userData.data.UserFindOne) {
         dispatch(actionAuthInfo(userData.data.UserFindOne));

chat_final_bootstrap/src/App.js

@@ -33,21 +33,23 @@ const PageNotFound = () => {
 const App = () => (
     <Provider store={store}>
         <Router history={history}>
-            <Header />
+            <div className="mainWrapper">
+                <Header />
 
-            <Switch>
-                <Route path="/about" component={PageAbout} exact />
-                <Route path="/newchat" component={PageNewChat} exact />
-                <Route path="/upload" component={PageUpload} exact />
-                <Route path="/" component={PageLogin} exact />
-                <Route path="/main/:_chatId" component={CPageMain} exact />
-                <Route path="/main/" component={CPageMain} exact />
-                <Route path="/search/" component={CPageSearch} exact />
+                <Switch>
+                    <Route path="/about" component={PageAbout} exact />
+                    <Route path="/newchat" component={PageNewChat} exact />
+                    <Route path="/upload" component={PageUpload} exact />
+                    <Route path="/" component={PageLogin} exact />
+                    <Route path="/main/:_chatId" component={CPageMain} exact />
+                    <Route path="/main/" component={CPageMain} exact />
+                    <Route path="/search/" component={CPageSearch} exact />
 
-                <Route component={PageNotFound} exact />
-            </Switch>
+                    <Route component={PageNotFound} exact />
+                </Switch>
 
-            {/* <Footer /> */}
+                {/* <Footer /> */}
+            </div>
         </Router>
     </Provider>
 );

chat_final_bootstrap/src/App.scss

@@ -37,63 +37,37 @@ div {
 
 body {
     overflow: hidden;
+    background: url("./images/romashki_1920x1080.jpg");
+}
+
+.mainWrapper {
+    min-width: 250px;
 }
+
 .header {
-    min-width: 360px;
+    min-width: 250px;
 }
 
 .ChatsList {
     max-height: calc(100vh - 220px);
     overflow: auto;
 
-    div:nth-child(2) {
-        padding-left: 55px;
-    }
-
     img {
         width: 48px;
         height: 48px;
     }
 }
 
-.roundIcon {
-    div:first-child,
-    img {
-        position: relative;
+.avatarka {
+    > img,
+    > div {
+        border-radius: 50%;
         width: 48px;
         height: 48px;
-        border-radius: 50%;
-        overflow: hidden;
-        float: left;
-        margin-right: 10px;
-
-        i,
-        p {
-            color: honeydew;
-            margin: 0;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            margin-right: -50%;
-            transform: translate(-52%, -55%);
-        }
-    }
-}
-
-.middleHeight {
-    position: relative;
-    height: 48px;
-    p {
-        // margin: 0;
-        position: absolute;
-        top: 50%;
-        left: 0%;
-        // margin-right: -50%;
-        transform: translate(55px, -55%);
     }
 }
 
-.Messages_map {
+.MessagesList {
     max-height: calc(100vh - 350px);
     overflow: auto;
 }
@@ -102,21 +76,16 @@ body {
     background: url("./images/romashki_1920x1080.jpg");
 }
 
-.Messages {
-    img {
-        width: 50px;
-    }
-    input {
-        width: 80%;
-    }
-}
+// .Messages {
 
-.messagesTitle {
-    min-height: 70px;
-}
+//     input {
+//         width: 70%;
+//     }
+// }
 
 .messageItem {
-    width: 80%;
+    // width: 75%;
+    width: calc(100% - 120px);
 }
 
 .LoginForm {
@@ -125,12 +94,6 @@ body {
 
 .chatItem {
     min-height: 70px;
-    // img {
-    //     max-width: 50px;
-    // }
-    // p {
-    //     font-weight: 700;
-    // }
 }
 
 .gradient {
@@ -141,13 +104,5 @@ body {
     text-decoration: none;
 }
 
-.userInfo {
-    // background-color: darkseagreen;
-    img {
-        width: 48px;
-        border-radius: 50%;
-    }
-}
-
 @import "/node_modules/bootstrap/scss/bootstrap";
 @import "./login.scss";

chat_final_bootstrap/src/Components/ChatContain.js

@@ -32,62 +32,79 @@ const MessageItem = ({
     // date.getSeconds().toString().padStart(2, 0);
 
     return (
-        <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"
-            }`}
-        >
-            {/*  */}
-
-            <div className="roundIcon">
-                {avatar && avatar.url ? (
-                    <img
-                        src={`${urlUploadConst}/${avatar.url}`}
-                        className="bg-success border border-2 border-success"
-                    ></img>
-                ) : (
-                    <div className="bg-success border border-2 border-success gradient middleHeight">
-                        <p className="fs-5 text-light fw-bolder">
-                            {`${nick.split(" ")[0][0].toUpperCase()}` +
-                                `${
-                                    (nick.split(" ").slice(1).pop() &&
-                                        nick.split(" ").slice(1).pop()[0].toUpperCase()) ||
-                                    ""
-                                }`}
-                        </p>
-                    </div>
-                )}
+        <div className={`d-flex align-items-end ${myId === ownerId ? "justify-content-end" : ""}`}>
+            <div>
+                <div className="avatarka">
+                    {avatar && avatar.url ? (
+                        <img
+                            src={`${urlUploadConst}/${avatar.url}`}
+                            className="bg-success border border-2 border-success mb-1"
+                        ></img>
+                    ) : (
+                        <div className="d-flex justify-content-center align-items-center bg-success border border-2 border-success gradient mb-2">
+                            <div className="fs-5 text-light fw-bolder">
+                                {`${nick.split(" ")[0][0].toUpperCase()}` +
+                                    `${
+                                        (nick.split(" ").slice(1).pop() &&
+                                            nick.split(" ").slice(1).pop()[0].toUpperCase()) ||
+                                        ""
+                                    }`}
+                            </div>
+                        </div>
+                    )}
+                </div>
             </div>
-
-            {/*  */}
-            {/* <span>{`myid: ${myId}`}</span> */}
-
-            {/* <p>{`Login: ${login}, Nick: ${nick}, ownerId: ${ownerId}`}</p> */}
-            <div className="middleHeight mb-3">
-                <p className="text-dark fs-5 lh-sm">{`${nick}`}</p>
+            <div
+                className={`messageItem list-group-item m-1 gradient shadow-sm border-2 ${
+                    myId === ownerId ? "list-group-item-success" : " list-group-item-light"
+                }`}
+            >
+                {/* <span>{`myid: ${myId}`}</span> */}
+                {/* <p>{`Login: ${login}, Nick: ${nick}, ownerId: ${ownerId}`}</p> */}
+                <div className="lh-sm mb-2 text-success fw-bolder">{`${nick}`}</div>
+                <div className="text-dark fs-5 lh-sm">{text}</div>
+                <span className="text-success">{`message id: ${_id}`}</span>
+                <span className="position-absolute bottom-0 end-0  badge rounded-pill bg-secondary">
+                    {dateStr} <span className="visually-hidden">дата сообщения</span>
+                </span>
             </div>
-            <div className="text-dark fs-5 lh-sm">{text}</div>
-            <span>{`message id: ${_id}`}</span>
-            <span className="position-absolute bottom-0 end-0  badge rounded-pill bg-secondary">
-                {dateStr} <span className="visually-hidden">id чата</span>
-            </span>
-            {/* <div className="fs-6 text-end text-secondary">{dateStr}</div> */}
         </div>
     );
 };
 
 const MessagesList = ({ messages, myId, chatId }) => {
     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);
 
     let arrayOfMessages = messages[chatId];
 
     // скролл в самый низ при приходе новых сообщений
     const scrollToBottom = () => messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
-
     useEffect(scrollToBottom, [arrayOfMessages]);
 
+    useEffect(() => {
+        //отслеживает событие скролла
+        messagesListBlockRef.current.onscroll = () => {
+            setOffset(Math.floor(messagesListBlockRef.current.scrollTop));
+        };
+
+        // 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);
+        // }
+    }, [offset]);
+
     return (
-        <div className="Messages_map">
+        <div className="MessagesList" ref={messagesListBlockRef}>
             {!!arrayOfMessages && arrayOfMessages.map((mess) => <MessageItem key={mess._id} {...mess} myId={myId} />)}
             <div ref={messagesEndRef} />
         </div>
@@ -97,7 +114,7 @@ const MessagesList = ({ messages, myId, chatId }) => {
 // скролл вниз при новых сообщениях только если мы ща уже внизу
 // const MessagesList = ({ arrayOfMessages }) => {
 //     return (
-//         <div className="Messages_map">
+//         <div className="MessagesList">
 //             <ScrollableFeed>
 //                 {!!arrayOfMessages && arrayOfMessages.map((mess) => <MessageItem key={mess._id} {...mess} />)}
 //             </ScrollableFeed>
@@ -136,38 +153,35 @@ const Messages = ({ _id = "", messages, getMsg }) => {
         }
     }, [_id]);
 
-    // useEffect(() => {
-    //     if (typeof doSearchMsg === "function") doSearchMsg(_id, searchMsgStr);
-    // }, []);
-
     return (
-        <div className="Messages">
-            <div className="position-relative">
-                <div className="messagesTitle mb-3 border-bottom border-2 border-success p-2 roundIcon">
-                    {avatar && avatar.url ? (
-                        <img src={`${urlUploadConst}/${avatar.url}`}></img>
-                    ) : (
-                        <div className="bg-success border border-2 border-success gradient">
-                            <p className="fs-5 text-light fw-bolder">
-                                {title &&
-                                    `${title.split(" ")[0][0].toUpperCase()}` +
-                                        `${
-                                            (title.split(" ").slice(1).pop() &&
-                                                title.split(" ").slice(1).pop()[0].toUpperCase()) ||
-                                            ""
-                                        }`}
-                            </p>
-                        </div>
-                    )}
-                    <div className="middleHeight">
-                        <p className="fs-4 fw-bolder">{`${title}`}</p>
+        <div>
+            <div className="position-relative  mb-3 border-bottom border-2 border-success ">
+                <div className="d-flex justify-content-start align-items-center">
+                    <div className="avatarka">
+                        {avatar && avatar.url ? (
+                            <img src={`${urlUploadConst}/${avatar.url}`}></img>
+                        ) : (
+                            <div className="d-flex justify-content-center align-items-center bg-success border border-2 border-success gradient">
+                                <div className="fs-5 text-light fw-bolder">
+                                    {title &&
+                                        `${title.split(" ")[0][0].toUpperCase()}` +
+                                            `${
+                                                (title.split(" ").slice(1).pop() &&
+                                                    title.split(" ").slice(1).pop()[0].toUpperCase()) ||
+                                                ""
+                                            }`}
+                                </div>
+                            </div>
+                        )}
                     </div>
+
+                    <div className="fs-4 fw-bolder ms-2">{`${title}`}</div>
                 </div>
+
                 <span className="position-absolute bottom-0 end-0  badge rounded-pill bg-secondary">
                     {` _chatId: ${_id}`} <span className="visually-hidden">id чата</span>
                 </span>
             </div>
-
             <div>
                 <CMessagesList />
             </div>
@@ -180,8 +194,4 @@ const CMessages = connect((s) => ({ _id: s.curChatId.curChatId, messages: s.msg
 })(Messages);
 // - id chata
 
-export const ChatContain = ({ _chatId = "" }) => (
-    <div className="ChatContain">
-        <div>{!!_chatId && <CMessages />}</div>
-    </div>
-);
+export const ChatContain = ({ _chatId = "" }) => <div>{!!_chatId && <CMessages />}</div>;

chat_final_bootstrap/src/Components/ChatsList.js

@@ -20,36 +20,36 @@ const ChatItem = ({ _id = "", avatar, title, messages, userId, currentChatId })
             <>
                 <li
                     className={
-                        "roundIcon chatItem " +
-                        (_id === currentChatId
+                        _id === currentChatId
                             ? "list-group-item list-group-item-success m-1 gradient shadow border-2"
-                            : "list-group-item list-group-item-light m-1 gradient shadow-sm border-2")
+                            : "list-group-item list-group-item-light m-1 gradient shadow-sm border-2"
                     }
                 >
-                    {avatar && avatar.url ? (
-                        <img src={`${urlConst}/${avatar.url}`}></img>
-                    ) : (
-                        <div className="bg-success border border-2 border-success gradient">
-                            {/* <i className="fs-3 text-light bi bi-chat-dots "></i> */}
-                            <p className="fs-5 text-light fw-bolder">
-                                {title &&
-                                    `${title.split(" ")[0][0].toUpperCase()}` +
-                                        `${
-                                            (title.split(" ").slice(1).pop() &&
-                                                title.split(" ").slice(1).pop()[0].toUpperCase()) ||
-                                            ""
-                                        }`}
-                            </p>
+                    <div className="d-flex justify-content-start align-items-center">
+
+
+
+                        <div className="avatarka ">
+                            {avatar && avatar.url ? (
+                                <img src={`${urlConst}/${avatar.url}`}></img>
+                            ) : (
+                                <div className="d-flex justify-content-center align-items-center bg-success border border-2 border-success gradient">
+                                    <div className="fs-5 text-light fw-bolder">
+                                        {title &&
+                                            `${title.split(" ")[0][0].toUpperCase()}` +
+                                                `${
+                                                    (title.split(" ").slice(1).pop() &&
+                                                        title.split(" ").slice(1).pop()[0].toUpperCase()) ||
+                                                    ""
+                                                }`}
+                                    </div>
+                                </div>
+                            )}
                         </div>
-                    )}
-                    <div className="text-success text-dark middleHeight">
-                        <p className="text-dark fs-5 fw-bolder lh-sm">{`${title}`}</p>
-                        <br />
-
-                        {/* счетчик сообщений */}
-                        {/* <span>Count of msg: {messages && messages.length ? messages.length : 0}</span> */}
-                        {/* <span>Count of msg: {Counter(_id)}</span> */}
-                        {/* <div className="">{Counter(_id)}</div> */}
+
+                        
+
+                        <div className="text-dark fs-5 fw-bolder ms-2">{`${title}`}</div>
                     </div>
                     <span className="position-absolute bottom-0 end-0  badge rounded-pill bg-secondary">
                         {Counter(_id)}
@@ -103,10 +103,7 @@ const List = ({ arrayOfChats, userId, currentChatId }) => {
 
 const CList = connect((s) => ({
     currentChatId: s.curChatId && s.curChatId.curChatId,
-
-    //FIXME: для сортировки надо подсоеденить правильный массив
     arrayOfChats: s.auth && s.auth.chats,
-
     userId: s.auth && s.auth.payloadId,
 }))(List);
 

chat_final_bootstrap/src/Layout/Sidebar.js

@@ -3,7 +3,7 @@ import { CAdditionalTools, ChatsList } from "../Components";
 
 export const Sidebar = () => {
     return (
-        <aside className="Sidebar">
+        <aside className="bg-light gradient shadow-sm border-2 rounded-3">
             <CUserInfo />
             <CAdditionalTools />
             <ChatsList className="ChatsList" />

chat_final_bootstrap/src/Layout/UserInfo.js

@@ -7,8 +7,8 @@ import { connect } from "react-redux";
 
 const UserInfo = ({ avatarUrl }) => (
     <div className="userInfo bg-gradient bg-success text-white p-1 py-2 mb-2 text-white">
-        <Link to="/dashboard" className="userInfo noUnderLine">
-            <span className="m-2  text-nowrap">
+        <Link to="/dashboard" className="noUnderLine">
+            <span className="m-2  text-nowrap avatarka">
                 <img
                     className="border border-2 border-success bg-light"
                     src={avatarUrl ? `${urlUploadConst}/${avatarUrl}` : personFillIcon}

chat_final_bootstrap/src/Pages/PageLogin.js

@@ -17,7 +17,7 @@ const LoginForm = ({ onLogin = null, onRegistration = null, isLoggedIn, mode = "
     const containerR_ref = useRef(null);
 
     // console.log(login, pass, nick);
-    console.log(isLoggedIn, !!isLoggedIn);
+    // console.log(isLoggedIn, !!isLoggedIn);
 
     //FIXME: надо засунуть router в redux
     if (store.getState().auth && store.getState().auth.login && localStorage.authToken) {
@@ -81,7 +81,7 @@ const LoginForm = ({ onLogin = null, onRegistration = null, isLoggedIn, mode = "
                             className="btn_view"
                             onClick={() => {
                                 onRegistration(login, pass, nick);
-                                console.log("кнопка регистрации нажата");
+                                // console.log("кнопка регистрации нажата");
                             }}
                             disabled={isLoggedIn || !login || !pass || !nick}
                         >
@@ -120,7 +120,7 @@ const LoginForm = ({ onLogin = null, onRegistration = null, isLoggedIn, mode = "
                             className="btn_view"
                             onClick={() => {
                                 onLogin(login, pass, nick);
-                                console.log("кнопка лагин нажата");
+                                // console.log("кнопка логин нажата");
                             }}
                             disabled={isLoggedIn || !login || !pass}
                         >

chat_final_bootstrap/src/Pages/PageMain.js

@@ -33,8 +33,6 @@ if (
     //
     //
     //
-    //FIXME:  не посылать запрос если меседжи есть
-    //завести редакс для курент_ид
     //
     //
     //
@@ -57,10 +55,9 @@ if (
         <div className="PageMain container-fluid">
             <div className="row g-3">
                 <div className="col-md-4">
-                    {/* {_userId + ` - подмена id`} */}
                     <Sidebar />
                 </div>
-                <div className="col-md-8 fonRomaska">
+                <div className="col-md-8">
                     <ChatContain _chatId={_chatId} />
                 </div>
             </div>