start msgReduser

chat_final_bootstrap/src/Actions/ActionLogin.js

@@ -11,12 +11,13 @@ export const actionAuthLogout = () => {
     return { type: "LOGOUT" };
 };
 
-export const actionAuthInfo = ({ login, nick, _id, avtar: { url } = { url: null } }) => {
+export const actionAuthInfo = ({ login, nick, _id, avatar: { url } = { url: null }, chats = [] }) => {
     // console.log("actionAuthInfo - ", login, nick, _id, url);
-    return { type: "INFO", userInfo: { login, nick, _id, url } };
+    return { type: "INFO", userInfo: { login, nick, _id, url, chats } };
 };
 
 export const actionUserInfo = (userId) => async (dispatch) => {
+    // console.log("actionUserInfo - ########### ", userId);
     let userData = await dispatch(
         actionPromise(
             "UserFindOne",
@@ -26,7 +27,12 @@ export const actionUserInfo = (userId) => async (dispatch) => {
                             login
                             nick
                             _id
-                            avatar { url }
+                            avatar {url}
+                            chats {
+                                _id
+                                title
+                                avatar {url}
+                                }
                         }
                     }`,
                 { userId: JSON.stringify([{ _id: userId }]) }
@@ -34,7 +40,7 @@ export const actionUserInfo = (userId) => async (dispatch) => {
         )
     );
 
-    // console.log("UserFindOne", userData);
+    // console.log("UserFindOne - ##########", userData.data.UserFindOne);
 
     if (userData && userData.data.UserFindOne) {
         dispatch(actionAuthInfo(userData.data.UserFindOne));
@@ -62,7 +68,7 @@ export const actionLogin = (login, password) => async (dispatch) => {
         dispatch(actionAuthLogin(loginData.data.login));
         dispatch(actionUserInfo(store.getState().auth.payloadId));
 
-        history.push(`/main/${store.getState().auth.payloadId}`);
+        history.push(`/main`);
     } else {
         alert("Авторизация не прошла. Проверьте логин и пароль.");
     }

chat_final_bootstrap/src/Actions/ActionsGql.js

@@ -98,7 +98,7 @@ export const actionGetMessagesByChatId = (_chatId) => async (dispatch) => {
             )
         )
     );
-    // console.log(ChatFindOne);
+    // console.log("actionGetMessagesByChatId");
 };
 
 export const actionSearchChat = (_userId = "", str = "") => async (dispatch) => {
@@ -128,5 +128,5 @@ export const actionSearchChat = (_userId = "", str = "") => async (dispatch) =>
             )
         )
     );
-    // console.log("actionSearchChat - searchData:", searchData);
+    console.log("actionSearchChat - searchData:", searchData);
 };

chat_final_bootstrap/src/App.js

@@ -14,14 +14,14 @@ import {
 import history from "./history";
 import { Provider, connect } from "react-redux";
 import { Header, Footer } from "./Layout";
-import { CPageMain, PageLogin, PageNewChat, PageUpload, PageAbout } from "./Pages";
+import { CPageMain, PageLogin, PageNewChat, PageUpload, PageAbout, CPageSearch } from "./Pages";
 import { actionFindChatsByUserId } from "./Actions";
 
 import { store } from "./Reducers";
 
 const PageNotFound = () => {
     setTimeout(() => {
-        history.push("/");
+        history.push("/main");
     }, 3000);
     return (
         <div>
@@ -40,13 +40,14 @@ const App = () => (
                 <Route path="/newchat" component={PageNewChat} exact />
                 <Route path="/upload" component={PageUpload} exact />
                 <Route path="/" component={PageLogin} exact />
-                <Route path="/main/:_userId/:_chatId" component={CPageMain} exact />
-                <Route path="/main/:_userId" component={CPageMain} 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>
 
-            <Footer />
+            {/* <Footer /> */}
         </Router>
     </Provider>
 );

chat_final_bootstrap/src/App.scss

@@ -5,6 +5,14 @@ $position-values: (
     20: 20%,
 );
 
+// // Create your own map
+// $custom-colors: (
+//     "custom-color": #900,
+// );
+
+// // Merge the maps
+// $theme-colors: map-merge($theme-colors, $custom-colors);
+
 div {
     border-radius: 7px;
     // border: 1px solid red;
@@ -35,16 +43,30 @@ body {
 }
 
 .ChatsList {
-    max-height: calc(100vh - 350px);
+    max-height: calc(100vh - 220px);
     overflow: auto;
 
-    div:first-child {
+    div:nth-child(2) {
+        padding-left: 55px;
+    }
+
+    img {
+        width: 48px;
+        height: 48px;
+    }
+}
+
+.roundIcon {
+    div:first-child,
+    img {
         position: relative;
         width: 48px;
         height: 48px;
         border-radius: 50%;
         overflow: hidden;
         float: left;
+        margin-right: 10px;
+
         i,
         p {
             color: honeydew;
@@ -56,14 +78,18 @@ body {
             transform: translate(-52%, -55%);
         }
     }
+}
 
-    div:nth-child(2) {
-        padding-left: 55px;
-    }
-
-    img {
-        width: 48px;
-        height: 48px;
+.middleHeight {
+    position: relative;
+    height: 48px;
+    p {
+        // margin: 0;
+        position: absolute;
+        top: 50%;
+        left: 0%;
+        // margin-right: -50%;
+        transform: translate(55px, -55%);
     }
 }
 
@@ -79,32 +105,10 @@ body {
     input {
         width: 80%;
     }
-    .MessagesList_map {
-        max-height: 70vh;
-        overflow: auto;
-    }
 }
 
 .messagesTitle {
     min-height: 70px;
-    div:first-child {
-        position: relative;
-        width: 48px;
-        height: 48px;
-        border-radius: 50%;
-        overflow: hidden;
-        float: left;
-        i,
-        p {
-            color: honeydew;
-            margin: 0;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            margin-right: -50%;
-            transform: translate(-52%, -55%);
-        }
-    }
 }
 
 .messageItem {
@@ -115,13 +119,14 @@ body {
     background-color: lightgreen;
 }
 
-.ChatItem {
-    img {
-        max-width: 50px;
-    }
-    p {
-        font-weight: 700;
-    }
+.chatItem {
+    min-height: 70px;
+    // img {
+    //     max-width: 50px;
+    // }
+    // p {
+    //     font-weight: 700;
+    // }
 }
 
 .gradient {

chat_final_bootstrap/src/Components/AdditionalTools.js

@@ -6,27 +6,24 @@ import { connect } from "react-redux";
 import { Button } from "react-bootstrap";
 
 export const AdditionalTools = ({ _userId, onSearch = null }) => {
-    const [searchStr, setSearchStr] = useState("");
+    // const [searchStr, setSearchStr] = useState("");
 
-    //FIXME: отладочный _userId
-    if (_userId) _userId = "5e97105693e2915e617c6fc1";
-
-    useEffect(() => {
-        if (typeof onSearch === "function") {
-            onSearch(_userId, searchStr);
-            // console.log("AdditionalTools - run searchStr", _userId, searchStr);
-        }
-    }, [searchStr]);
+    // useEffect(() => {
+    //     if (typeof onSearch === "function") {
+    //         onSearch(_userId, searchStr);
+    //         // console.log("AdditionalTools - run searchStr", _userId, searchStr);
+    //     }
+    // }, [searchStr]);
 
     return (
         <div className="bg-light mb-2 text-nowrap">
-            <input
+            {/* <input
                 className="form-control mb-2 p-2 border border-success border-2"
                 placeholder="Search by title in my chats"
                 onInput={(e) => {
                     setSearchStr(e.target.value);
                 }}
-            ></input>
+            ></input> */}
             {/* <span>🔍</span> */}
             <Button
                 className="gradient"
@@ -47,6 +44,6 @@ export const AdditionalTools = ({ _userId, onSearch = null }) => {
 export const CAdditionalTools = connect(
     (s) => ({
         _userId: s.auth && s.auth.payloadId,
-    }),
-    { onSearch: actionSearchChat }
+    })
+    // { onSearch: actionSearchChat }
 )(AdditionalTools);

chat_final_bootstrap/src/Components/ButtonToMain.js

@@ -3,7 +3,7 @@ import history from "../history";
 
 export const ButtonToMain = () => (
     <>
-        <Button className="gradient mx-2" variant="success btn-sm" onClick={() => history.push("/")}>
+        <Button className="gradient mx-2" variant="success btn-sm" onClick={() => history.push("/main")}>
             Вернуться на главную
         </Button>
     </>

chat_final_bootstrap/src/Components/ChatContain.js

@@ -2,9 +2,9 @@ import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 import { useState, useEffect, useRef } from "react";
 import logo from "../images//logo23.jpg";
-import { actionSearchMessagesByChatId } from "../Actions";
+import { actionSearchMessagesByChatId, actionGetMessagesByChatId } from "../Actions";
 import ScrollableFeed from "react-scrollable-feed";
-import { urlConst } from "../const";
+import { urlUploadConst } from "../const";
 
 const MessageItem = ({
     _id,
@@ -16,6 +16,7 @@ const MessageItem = ({
     // первый _id - messageId
 
     if (!nick) nick = login;
+
     let date = new Date(+createdAt);
     let dateStr =
         date.getFullYear().toString().padStart(4, 0) +
@@ -34,43 +35,50 @@ const MessageItem = ({
         // <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 text-red"
+                myId === ownerId ? "start-right list-group-item-success text-success" : " list-group-item-light"
             }`}
         >
             {/*  */}
-            {avatar && avatar.url ? (
-                <img src={`${urlConst}/${avatar.url}`}></img>
-            ) : (
-                <div className="bg-success border border-2 border-success gradient">
-                    {/* <i class="fs-3 text-light bi bi-chat-dots "></i> */}
-                    <p className="fs-5 text-light fw-bolder">
-                        {`${title.split(" ")[0][0].toUpperCase()}` +
-                            `${
-                                (title.split(" ").slice(1).pop() && title.split(" ").slice(1).pop()[0].toUpperCase()) ||
-                                ""
-                            }`}
-                    </p>
-                </div>
-            )}
+
+            <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>
 
             {/*  */}
             {/* <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>
+            <div className="text-dark fs-5 lh-sm">{text}</div>
             <span>{`message id: ${_id}`}</span>
-            <br />
-            <p>{`Login: ${login}, Nick: ${nick}, ownerId: ${ownerId}`}</p>
-            <h5>{text}</h5>
-            <div>{dateStr}</div>
+            <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 = ({ arrayOfMessages, myId }) => {
-    const messagesEndRef = useRef(null);
-
-    //FIXME: подмена myId
-    if (myId) myId = "5e97105693e2915e617c6fc1";
+    const messagesEndRef = useRef(null); // указатель на пустой div  в коце сообщений для перемотки
 
     // скролл в самый низ при приходе новых сообщений
     const scrollToBottom = () => messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
@@ -79,8 +87,6 @@ const MessagesList = ({ arrayOfMessages, myId }) => {
 
     return (
         <div className="Messages_map">
-            {/* //FIXME: */}
-            {/* {myId} */}
             {!!arrayOfMessages && arrayOfMessages.map((mess) => <MessageItem key={mess._id} {...mess} myId={myId} />)}
             <div ref={messagesEndRef} />
         </div>
@@ -110,50 +116,51 @@ const CMessagesList = connect(
     {}
 )(MessagesList);
 
-const Messages = ({ arrayOfMessages, avatar, _id = "", title = "No Title", doSearchMsg }) => {
+const Messages = ({ avatar, _id = "", title = "No Title", getMsg }) => {
     // id чата, аватар чата
 
-    const [searchMsgStr, setSearchMsgStr] = useState("");
-
     useEffect(() => {
-        if (typeof doSearchMsg === "function") doSearchMsg(_id, searchMsgStr);
-    }, [searchMsgStr, _id]);
+        if (typeof doSearchMsg === "function") getMsg(_id);
+    }, [_id]);
 
-    useEffect(() => {
-        if (typeof doSearchMsg === "function") doSearchMsg(_id, searchMsgStr);
-    }, []);
+    // useEffect(() => {
+    //     if (typeof doSearchMsg === "function") doSearchMsg(_id, searchMsgStr);
+    // }, []);
 
     return (
         <div className="Messages">
-            <input
+            {/* <input
                 placeholder="Search message"
                 onInput={(e) => setSearchMsgStr(e.target.value)}
                 className="form-control mb-2 p-2 border border-success border-2"
-            ></input>
+            ></input> */}
             {/* <span>🔍</span> */}
-            <div className=" messagesTitle mb-3 border border-3 border-success p-2">
-                {/* <img src={avatar && avatar.url ? urlConst + "/" + avatar.url : logo}></img> */}
-
-                {avatar && avatar.url ? (
-                    <img src={`${urlConst}/${avatar.url}`}></img>
-                ) : (
-                    <div className="bg-success border border-2 border-success gradient">
-                        {/* <i class="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="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>
-                )}
-
-                <span className="ms-2 fs-4 fw-bolder">{`Title: ${title}`}</span>
-                {` _chatId: ${_id}`}
+                </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>
@@ -189,7 +196,7 @@ const CMessages = connect(
             s.promise.chatFindOne.payload.data.ChatFindOne &&
             s.promise.chatFindOne.payload.data.ChatFindOne.title,
     }),
-    { doSearchMsg: actionSearchMessagesByChatId }
+    { getMsg: actionGetMessagesByChatId }
 )(Messages);
 
 // const CMessagesList = connect((s) => ({

chat_final_bootstrap/src/Components/ChatsList.js

@@ -2,48 +2,62 @@ import logo from "../images//logo23.jpg";
 import { connect } from "react-redux";
 import { urlConst } from "../const";
 import { Link } from "react-router-dom";
+import { Counter } from "../Components";
 import personFillIcon from "../icons/person-fill.svg";
 import history from "../history";
 
-const ChatItem = ({ _id = "", avatar, title = "no title", messages, userId, currentChatId }) => (
-    // здесь _id - чата, currentChatId - текущий выбраный чат
-    <Link to={`/main/${userId}/${_id}`} className="noUnderLine">
-        <>
-            <li
-                className={
-                    _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"
-                }
-            >
-                <div>
+const CCounter = connect;
+
+const ChatItem = ({ _id = "", avatar, title, messages, userId, currentChatId }) => {
+    // здесь _id, avatar, title - чата,
+    // currentChatId - текущий выбраный чат
+
+    return (
+        <Link to={`/main/${_id}`} className="noUnderLine">
+            <>
+                <li
+                    className={
+                        "roundIcon chatItem " +
+                        (_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")
+                    }
+                >
                     {avatar && avatar.url ? (
                         <img src={`${urlConst}/${avatar.url}`}></img>
                     ) : (
                         <div className="bg-success border border-2 border-success gradient">
-                            {/* <i class="fs-3 text-light bi bi-chat-dots "></i> */}
+                            {/* <i className="fs-3 text-light bi bi-chat-dots "></i> */}
                             <p className="fs-5 text-light fw-bolder">
-                                {`${title.split(" ")[0][0].toUpperCase()}` +
-                                    `${
-                                        (title.split(" ").slice(1).pop() &&
-                                            title.split(" ").slice(1).pop()[0].toUpperCase()) ||
-                                        ""
-                                    }`}
+                                {title &&
+                                    `${title.split(" ")[0][0].toUpperCase()}` +
+                                        `${
+                                            (title.split(" ").slice(1).pop() &&
+                                                title.split(" ").slice(1).pop()[0].toUpperCase()) ||
+                                            ""
+                                        }`}
                             </p>
                         </div>
                     )}
-                </div>
-                <div className="text-success text-nowrap">
-                    <span>Title: {title}</span>
-                    <br />
-                    <span>Count of msg: {messages && messages.length ? messages.length : 0}</span>
-                </div>
+                    <div className="text-success text-dark middleHeight">
+                        <p className="text-dark fs-5 fw-bolder lh-sm">{`${title}`}</p>
+                        <br />
 
-                {/* <span className="text-nowrap"> chatID: {_id}</span> */}
-            </li>
-        </>
-    </Link>
-);
+                        {/* счетчик сообщений */}
+                        {/* <span>Count of msg: {messages && messages.length ? messages.length : 0}</span> */}
+                        {/* <span>Count of msg: {Counter(_id)}</span> */}
+                        {/* <div className="">{Counter(_id)}</div> */}
+                    </div>
+                    <span className="position-absolute bottom-0 end-0  badge rounded-pill bg-secondary">
+                        {Counter(_id)}
+                        <span className="visually-hidden">всего сообщений</span>
+                    </span>
+                    {/* <span className="text-nowrap"> chatID: {_id}</span> */}
+                </li>
+            </>
+        </Link>
+    );
+};
 
 const List = ({ arrayOfChats, userId, currentChatId }) => {
     if (!arrayOfChats) return <></>;
@@ -73,7 +87,7 @@ const List = ({ arrayOfChats, userId, currentChatId }) => {
     // console.log("chatsList - arrayOfChats.sort: ", arrayOfChats);
 
     return (
-        <ul class="list-group" role="tablist">
+        <ul className="list-group" role="tablist">
             {arrayOfChats.map((a) => (
                 <ChatItem key={a._id} {...a} userId={userId} currentChatId={currentChatId} />
             ))}
@@ -88,11 +102,9 @@ const CList = connect((s) => ({
         s.promise.chatFindOne.payload.data &&
         s.promise.chatFindOne.payload.data.ChatFindOne &&
         s.promise.chatFindOne.payload.data.ChatFindOne._id,
-    arrayOfChats:
-        s.promise.searchChat &&
-        s.promise.searchChat.payload &&
-        s.promise.searchChat.payload.data &&
-        s.promise.searchChat.payload.data.ChatFind,
+
+    arrayOfChats: s.auth && s.auth.chats,
+
     userId: s.auth && s.auth.payloadId,
 }))(List);
 

chat_final_bootstrap/src/Components/Counter.js

@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+import { useRef, useState } from "react";
+import { gql } from "../Actions";
+
+export const Counter = (chatId) => {
+    const [res, setRes] = useState("error");
+    const [id, setId] = useState(chatId);
+
+    useEffect(() => messageCountByChatId(id), [id]);
+
+    const messageCountByChatId = async (id) => {
+        let count = await gql(
+            `query MessageCountByChatId ($chatId:String){
+            MessageCount(query: $chatId)
+        }`,
+            { chatId: JSON.stringify([{ "chat._id": id }]) }
+        );
+
+        if (!count.data.errors) setRes(count.data.MessageCount);
+    };
+
+    if (!id) return <span>0</span>;
+    // console.log(typeof res, res);
+
+    return <span>{res}</span>;
+};

chat_final_bootstrap/src/Components/LoginInfo.js

@@ -8,15 +8,19 @@ const LoginInfo = ({ login, nick, _id, getUserInfo }) => {
         getUserInfo(_id);
     }, [_id]);
 
+    if (!nick) {
+        nick = login;
+    }
+
     return (
         <span className="mx-2 text-white ">
             {login ? (
                 <span className="text-nowrap">
-                    <span className="text-nowrap"> {`Login: ${login}`} </span>
-                    {" / "}
+                    <span className="text-nowrap"> {`${login}`} </span>
+                    {/* {" / "}
                     <span className="text-nowrap">{`Nick: ${nick}`}</span>
                     <br />
-                    <span className="text-nowrap">{`_id: ${_id}`}</span>
+                    <span className="text-nowrap">{`_id: ${_id}`}</span> */}
                 </span>
             ) : (
                 <Link to="/">"You should log in"</Link>

chat_final_bootstrap/src/Components/index.js

@@ -5,5 +5,6 @@ import { CButtonLogout } from "./ButtonLogout";
 import { CButtonUpload } from "./ButtonUpload";
 import { ButtonToMain } from "./ButtonToMain";
 import { CLoginInfo } from "./LoginInfo";
+import { Counter } from "./Counter";
 
-export { CAdditionalTools, ChatsList, ChatContain, CButtonLogout, CLoginInfo, CButtonUpload, ButtonToMain };
+export { CAdditionalTools, ChatsList, ChatContain, CButtonLogout, CLoginInfo, CButtonUpload, ButtonToMain, Counter };

chat_final_bootstrap/src/Layout/Header.js

@@ -13,7 +13,7 @@ const CLogo = connect((s) => ({ link: s.auth.payloadId }))(Logo);
 export const Header = () => (
     <>
         {/* <Navbar className="gradient" collapseOnSelect expand="sm" bg="dark" variant="dark"> */}
-        <Navbar className="gradient header" collapseOnSelect bg="dark" variant="dark">
+        <Navbar className="gradient header mb-2" collapseOnSelect bg="dark" variant="dark">
             <Navbar.Toggle aria-controls="responsive-navbar-nav" />
             <Navbar.Collapse id="responsive-navbar-nav">
                 <Nav>

chat_final_bootstrap/src/Layout/Sidebar.js

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

chat_final_bootstrap/src/Layout/UserInfo.js

@@ -3,8 +3,9 @@ import personFillIcon from "../icons/person-fill.svg";
 import { CButtonLogout, CLoginInfo } from "../Components";
 import { Link } from "react-router-dom";
 import { urlUploadConst } from "../const";
+import { connect } from "react-redux";
 
-export const UserInfo = ({ avatarUrl }) => (
+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">
@@ -18,3 +19,5 @@ export const UserInfo = ({ avatarUrl }) => (
         </Link>
     </div>
 );
+
+export const CUserInfo = connect((s) => ({ avatarUrl: s.auth && s.auth.avatarUrl }))(UserInfo);

chat_final_bootstrap/src/Layout/index.js

@@ -1,6 +1,6 @@
 import { Header } from "./Header";
 import { Footer } from "./Footer";
-import { UserInfo } from "./UserInfo";
+import { CUserInfo } from "./UserInfo";
 import { Sidebar } from "./Sidebar";
 
-export { Header, Footer, UserInfo, Sidebar };
+export { Header, Footer, CUserInfo, Sidebar };

chat_final_bootstrap/src/Pages/PageMain.js

@@ -7,22 +7,27 @@ import { connect } from "react-redux";
 import { useState, useEffect } from "react";
 
 //prettier-ignore
-const PageMain = ({match: {params: { _userId, _chatId },}, getChatList = null, getMesagesList = null }) => {
-
+const PageMain = ({
+    match: {params: { _chatId }},
+    _userId,
+    // getChatList = null,
+    getMesagesList = null,
+}) => {
     // console.log("PageMain.js. - True _chatId: ", _chatId);
 
-    useEffect(() => {
-        if (typeof getChatList === "function") {
-            getChatList(_userId);
-        }
-    }, [_userId]);
+    // useEffect(() => {
+    //     if (typeof getChatList === "function") {
+    //         getChatList(_userId);
+    //     }
+    // }, [_userId]);
 
     useEffect(() => {
-        if (typeof getMesagesList === "function") {
+        if (typeof getMesagesList === "function" && _chatId) {
             getMesagesList(_chatId);
         }
     }, [_chatId]);
 
+
     if (
         //FIXME: надо засунуть router в redux
         !_userId ||
@@ -32,19 +37,13 @@ const PageMain = ({match: {params: { _userId, _chatId },}, getChatList = null, g
     ) {
         history.push("/");
     }
-
-    //FIXME: это временные _id
-    _userId = "5e97105693e2915e617c6fc1";  // login "Antipmen"
-    // if (_chatId) _chatId = "5e9ff91fd265602706d735cd"; // title "community"
-
-    // if (typeof getData === "function") getData(_userId);
-
+    
     return (
         <div className="PageMain container-fluid">
             <div className="row g-3">
                 <div className="col-md-4">
-                    {_userId + ` - подмена id`}
-                    <Sidebar  />
+                    {/* {_userId + ` - подмена id`} */}
+                    <Sidebar />
                 </div>
                 <div className="col-md-8">
                     <ChatContain _chatId={_chatId} />
@@ -55,4 +54,7 @@ const PageMain = ({match: {params: { _userId, _chatId },}, getChatList = null, g
 };
 
 // prettier-ignore
-export const CPageMain = connect(null, { getChatList: actionSearchChat, getMesagesList: actionGetMessagesByChatId })(PageMain);
+export const CPageMain = connect((s) => ({ _userId: s.auth && s.auth.payloadId }), {
+    // getChatList: actionSearchChat,
+    getMesagesList: actionGetMessagesByChatId,
+})(PageMain);

chat_final_bootstrap/src/Pages/PageSearch.js

@@ -0,0 +1,65 @@
+import { ChatContain } from "../Components";
+import { Sidebar } from "../Layout";
+import { store } from "../Reducers";
+import history from "../history";
+import { actionGetMessagesByChatId, actionSearchChat } from "../Actions";
+import { connect } from "react-redux";
+import { useState, useEffect } from "react";
+
+//prettier-ignore
+const PageMain = ({
+    match: {params: { _chatId }},
+    _userId,
+    getChatList = null,
+    getMesagesList = null,
+}) => {
+    // console.log("PageMain.js. - True _chatId: ", _chatId);
+
+    useEffect(() => {
+        if (typeof getChatList === "function") {
+            getChatList(_userId);
+        }
+    }, [_userId]);
+
+    useEffect(() => {
+        if (typeof getMesagesList === "function") {
+            getMesagesList(_chatId);
+        }
+    }, [_chatId]);
+
+    if (
+        //FIXME: надо засунуть router в redux
+        !_userId ||
+        !store.getState().auth ||
+        !store.getState().auth.login ||
+        _userId !== store.getState().auth.payloadId
+    ) {
+        history.push("/");
+    }
+
+    //FIXME: это временные _id
+    _userId = "5e97105693e2915e617c6fc1"; // login "Antipmen"
+    // if (_chatId) _chatId = "5e9ff91fd265602706d735cd"; // title "community"
+
+    // if (typeof getData === "function") getData(_userId);
+
+    return (
+        <div className="PageMain container-fluid">
+            <div className="row g-3">
+                <div className="col-md-4">
+                    {_userId + ` - подмена id`}
+                    <Sidebar />
+                </div>
+                <div className="col-md-8">
+                    <ChatContain _chatId={_chatId} />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+// prettier-ignore
+export const CPageSearch = connect((s) => ({ _userId: s.auth && s.auth.payloadId }), {
+    getChatList: actionSearchChat,
+    getMesagesList: actionGetMessagesByChatId,
+})(PageMain);

chat_final_bootstrap/src/Pages/index.js

@@ -3,5 +3,6 @@ import { PageLogin } from "./PageLogin";
 import { PageNewChat } from "./PageNewChat";
 import { PageUpload } from "./PageUpload";
 import { PageAbout } from "./PageAbout";
+import { CPageSearch } from "./PageSearch";
 
-export { CPageMain, PageLogin, PageNewChat, PageUpload, PageAbout };
+export { CPageMain, PageLogin, PageNewChat, PageUpload, PageAbout, CPageSearch };

chat_final_bootstrap/src/Reducers/index.js

@@ -23,7 +23,9 @@ function authReducer(state, action) {
                 login: true,
                 token: action.jwt,
                 payload: jwt_decode(action.jwt).sub.login,
-                payloadId: jwt_decode(action.jwt).sub.id,
+                // payloadId: jwt_decode(action.jwt).sub.id,
+                //FIXME: отладочный _userId
+                payloadId: "5e97105693e2915e617c6fc1",
             };
         } catch (error) {
             console.log(error);
@@ -39,11 +41,14 @@ function authReducer(state, action) {
     }
 
     if (action.type === "INFO") {
-        console.log("INFO", action.userInfo);
+        // console.log("INFO **************** ", action.userInfo);
         return {
             ...state,
+            payload: action.userInfo.login,
+            payloadId: action.userInfo._id,
             nick: action.userInfo.nick,
             avatarUrl: action.userInfo.url,
+            chats: action.userInfo.chats,
         };
     }
 
@@ -68,6 +73,13 @@ 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 });

chat_final_bootstrap/src/icons/person-fill.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-person-fill" viewBox="0 0 16 16">
   <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
 </svg>