chat-updAva worstka

chat_final_bootstrap/src/Actions/ActionsGqlUpsert.js

@@ -52,6 +52,8 @@ const actionMediaUpsert = ({ chatId, mediaId }) => async (dispatch) => {
 };
 
 export const actionCreateNewChat = ({ _id, title, members, avaFile }) => async (dispatch) => {
+    // console.log(avaFile);
+
     members = members.map((mem) => ({ _id: mem._id }));
 
     let tempObj = { title, members };
@@ -89,7 +91,7 @@ export const actionCreateNewChat = ({ _id, title, members, avaFile }) => async (
                 body: dataSingl,
             }).then((res) => res.json());
 
-            dispatch(actionMediaUpsert({ chatId: chatData.data.ChatUpsert._id, mediaId: avaUploadResult._id }));
+            await dispatch(actionMediaUpsert({ chatId: chatData.data.ChatUpsert._id, mediaId: avaUploadResult._id }));
         }
 
         // обновить списки моих чатов

chat_final_bootstrap/src/App.scss

@@ -76,6 +76,22 @@ body {
     max-height: calc(100vh - 250px);
     min-height: calc(100vh - 250px);
 }
+
+.maxWidthForSideBar {
+    max-width: 350px;
+    margin: auto;
+}
+
+.maxWidthPageMain {
+    max-width: 1300px;
+    margin: auto;
+}
+
+.maxWidthForMsg {
+    max-width: 800px;
+    margin: auto;
+}
+
 .MessagesList {
     max-height: calc(100vh - 330px);
     min-height: calc(100vh - 330px);
@@ -116,6 +132,7 @@ body {
 
 .ChatsList {
     max-height: calc(100vh - 220px);
+    min-height: calc(100vh - 220px);
     overflow: auto;
 
     img {

chat_final_bootstrap/src/Components/AdditionalTools.js

@@ -26,13 +26,14 @@ export const AdditionalTools = ({ _userId, onSearch = null }) => {
             ></input> */}
             {/* <span>🔍</span> */}
             <Button
-                className="gradient ms-2 mb-2"
+                className="gradient ms-2 mb-2 rounded-3"
                 variant="success btn-sm"
                 onClick={() => {
                     history.push("/newchat");
                 }}
             >
-                <i className="bi bi-chat-left-text"></i> New Chat
+                <i className="bi bi-chat-left-text"></i>
+                <span className="ms-2">New Chat</span>
             </Button>
             {/* <Button className="gradient" variant="secondary btn-sm  m-2">
                 Join to another chat

chat_final_bootstrap/src/Components/ButtonCansel.js

@@ -0,0 +1,12 @@
+import { Button } from "react-bootstrap";
+import history from "../history";
+import houseSvg from "../icons/house.svg";
+
+export const ButtonCancel = () => (
+    <>
+        <Button className="gradient rounded-3 ms-2 mb-2" variant="secondary btn-sm" onClick={() => history.goBack()}>
+            <i className="bi bi-x-square"></i>
+            <span className="ms-2">Cansel</span>
+        </Button>
+    </>
+);

chat_final_bootstrap/src/Components/ButtonLogout.js

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import { Button } from "react-bootstrap";
 
 const ButtonLogout = ({ onLogout, isLoggedIn }) => (
-    <Button className="gradient" variant="secondary btn-sm" onClick={onLogout} disabled={!isLoggedIn}>
+    <Button className="gradient m-2" variant="secondary btn-sm" onClick={onLogout} disabled={!isLoggedIn}>
         <i className="bi bi-door-open"></i> Logout
     </Button>
 );

chat_final_bootstrap/src/Components/ButtonToMain.js

@@ -4,7 +4,7 @@ import houseSvg from "../icons/house.svg";
 
 export const ButtonToMain = () => (
     <>
-        <Button className="gradient mb-2 ms-2" variant="success btn-sm" onClick={() => history.push("/main")}>
+        <Button className="gradient mb-2 ms-2 rounded-3" variant="success btn-sm" onClick={() => history.push("/main")}>
             <i className="bi bi-house-door"></i> Main page
         </Button>
     </>

chat_final_bootstrap/src/Components/ChatMessages.js

@@ -62,8 +62,8 @@ const MessageItem = ({
                 {/* <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>
+                <div className="text-dark fs-6 lh-sm mb-3">{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>

chat_final_bootstrap/src/Components/ChatsList.js

@@ -47,13 +47,14 @@ const ChatItem = ({ _id = "", avatar, title, messages, userId, currentChatId })
                             )}
                         </div>
 
-                        <div className="text-dark fs-5 fw-bolder ms-2">{`${title}`}</div>
+                        <div className="text-dark fs-6 fw-bolder ms-2 lh-1">{`${title}`}</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>
+                    {/* FIXME: */}
+                    {/* <span className="text-nowrap"> chatID: {_id}</span> */}
                 </li>
             </>
         </Link>

chat_final_bootstrap/src/Components/NewChatDashBoard.js

@@ -1,9 +1,10 @@
-import { ButtonToMain } from "../Components";
+import { ButtonToMain, ButtonCancel } from "../Components";
 import { urlUploadConst } from "../const";
 import { actionDelUserFromChatList, actionCreateNewChat, actionAddUserToChatList } from "../Actions";
 import { connect } from "react-redux";
 import { useEffect } from "react";
 import { useState } from "react";
+import { Button } from "react-bootstrap";
 import { store } from "../Reducers";
 import { useRef } from "react";
 import history from "../history";
@@ -42,25 +43,26 @@ const CMemberItem = connect(
     { dellFromList: actionDelUserFromChatList }
 )(MemberItem);
 
-const NewChatDashBoard = ({ members = {}, chatUpsert = null, _chatId, myChats = [], addUserToList }) => {
+const NewChatDashBoard = ({ members = {}, chatUpsert = null, _chatId, myChats = [], addUserToList, myId }) => {
     const [chatMembers, setChatMembers] = useState(Object.values(members));
     const [inpTitle, setInpTitle] = useState("");
     const uploadRef = useRef(null); // ссылка на input type=file для авы
     const inputTiylegRef = useRef(null);
     const [srcAva, setSrcAva] = useState("");
+    const chatInfo = useRef({});
 
     // достаем из redux даные о чате, который хотим редактировать
     useEffect(() => {
         if (_chatId) {
-            let chatInfo = {};
+            // let chatInfo = {};
 
             myChats = myChats.filter((chat) => chat._id === _chatId); // оставляем в myChats только редактируемый
-            chatInfo = myChats && myChats[0];
+            chatInfo.current = myChats && myChats[0];
 
-            if (chatInfo && Object.keys(chatInfo).length) {
-                inputTiylegRef.current.value = chatInfo.title;
-                setInpTitle(chatInfo.title);
-                chatInfo.members.forEach((mem) => {
+            if (chatInfo.current && Object.keys(chatInfo.current).length) {
+                inputTiylegRef.current.value = chatInfo.current.title;
+                setInpTitle(chatInfo.current.title);
+                chatInfo.current.members.forEach((mem) => {
                     if (typeof addUserToList === "function") {
                         addUserToList(mem);
                     }
@@ -100,14 +102,19 @@ const NewChatDashBoard = ({ members = {}, chatUpsert = null, _chatId, myChats =
         }
     }
 
+    // console.log(chatInfo.current);
+
     return (
         <>
             <div className="ChatDashBoard bg-light">
                 <h5>{_chatId ? "Update chat:" : "New Chat:"}</h5>
+                {myId !== (chatInfo.current && chatInfo.current.owner && chatInfo.current.owner._id) && _chatId && (
+                    <span className="text-danger fw-bolder mb-2">You have no rights to edit this chat.</span>
+                )}
                 <table className="table table-bordered align-middle">
                     <tbody>
                         <tr>
-                            <td className="fw-bolder">Chat title:</td>
+                            <td className={`fw-bolder text-${!inpTitle ? "danger" : "dark"}`}>Chat title:</td>
                             <td>
                                 <input
                                     className="form-control mb-2 p-2 border border-success border-2"
@@ -120,45 +127,52 @@ const NewChatDashBoard = ({ members = {}, chatUpsert = null, _chatId, myChats =
                         <tr>
                             <td>Chat avatar:</td>
                             <td>
-                                <div className="avatarka ">
-                                    {srcAva ? (
-                                        <img
-                                            // src={`${urlUploadConst}/${avatarUrl}`}
-                                            src={srcAva}
-                                            className="border border-2 border-success"
-                                        ></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">
-                                                {!!inpTitle &&
-                                                    `${
-                                                        inpTitle.trim().split(" ")[0] &&
-                                                        inpTitle.trim().split(" ")[0][0] &&
-                                                        inpTitle.trim().split(" ")[0][0].toUpperCase()
-                                                    }` +
+                                <div className="d-flex align-items-center">
+                                    <div className="avatarka ">
+                                        {srcAva ||
+                                        (chatInfo.current && chatInfo.current.avatar && chatInfo.current.avatar.url) ? (
+                                            <img
+                                                src={srcAva || `${urlUploadConst}/${chatInfo.current.avatar.url}`}
+                                                className="border border-2 border-success"
+                                            ></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">
+                                                    {!!inpTitle &&
                                                         `${
-                                                            (inpTitle.trim().split(" ").slice(1).pop() &&
-                                                                inpTitle.trim().split(" ").slice(1).pop()[0] &&
-                                                                inpTitle
-                                                                    .trim()
-                                                                    .split(" ")
-                                                                    .slice(1)
-                                                                    .pop()[0]
-                                                                    .toUpperCase()) ||
-                                                            ""
-                                                        }`}
+                                                            inpTitle.trim().split(" ")[0] &&
+                                                            inpTitle.trim().split(" ")[0][0] &&
+                                                            inpTitle.trim().split(" ")[0][0].toUpperCase()
+                                                        }` +
+                                                            `${
+                                                                (inpTitle.trim().split(" ").slice(1).pop() &&
+                                                                    inpTitle.trim().split(" ").slice(1).pop()[0] &&
+                                                                    inpTitle
+                                                                        .trim()
+                                                                        .split(" ")
+                                                                        .slice(1)
+                                                                        .pop()[0]
+                                                                        .toUpperCase()) ||
+                                                                ""
+                                                            }`}
+                                                </div>
                                             </div>
-                                        </div>
-                                    )}
+                                        )}
+                                    </div>
+
+                                    <label className="btn btn-default btn-file">
+                                        <input
+                                            type="file"
+                                            onChange={previewFile}
+                                            ref={uploadRef}
+                                            accept="image/*,image/jpeg"
+                                            className="form-control form-control-sm m-2"
+                                            aria-label="file example"
+                                            style={{ display: "none" }}
+                                        />
+                                        Browse...
+                                    </label>
                                 </div>
-                                <input
-                                    type="file"
-                                    onChange={previewFile}
-                                    ref={uploadRef}
-                                    accept="image/*,image/jpeg"
-                                    className="form-control form-control-sm m-2"
-                                    aria-label="file example"
-                                />
                             </td>
                         </tr>
                         <tr>
@@ -171,23 +185,25 @@ const NewChatDashBoard = ({ members = {}, chatUpsert = null, _chatId, myChats =
                         </tr>
                     </tbody>
                 </table>
-                <button className="btn-success gradient rounded" disabled={!inpTitle} onClick={doCreateNewChat}>
-                    {_chatId ? "Update chat" : "Create new chat"}
-                    {/*  */}
-                    {/*  */}
-                    {/*  */}
-                    {/*  */}
-                    {/*  */}
-                    {/*  */}
-                </button>
-                {!inpTitle && <span className="text-danger"> You should fill in the 'Chat title' field.</span>}
+                <ButtonCancel />
+                {!(myId !== (chatInfo.current && chatInfo.current.owner && chatInfo.current.owner._id) && _chatId) && (
+                    <Button
+                        className="gradient rounded-3 ms-2 mb-2"
+                        disabled={!inpTitle}
+                        onClick={doCreateNewChat}
+                        variant="success btn-sm"
+                    >
+                        <i className="bi bi-check-square"></i>
+                        <span className="ms-2">{_chatId ? "Update chat" : "Create new chat"}</span>
+                    </Button>
+                )}
             </div>
         </>
     );
 };
 
 export const CNewChatDashBoard = connect(
-    (s, { _chatId }) => ({ myChats: s.auth.chats, members: s.newChatUsers, _chatId }),
+    (s, { _chatId }) => ({ myChats: s.auth.chats, members: s.newChatUsers, myId: s.auth.payloadId, _chatId }),
     {
         chatUpsert: actionCreateNewChat,
         addUserToList: actionAddUserToChatList,

chat_final_bootstrap/src/Components/index.js

@@ -4,6 +4,7 @@ import { ChatMessages } from "./ChatMessages";
 import { CButtonLogout } from "./ButtonLogout";
 import { CButtonUpload } from "./ButtonUpload";
 import { ButtonToMain } from "./ButtonToMain";
+import { ButtonCancel } from "./ButtonCansel";
 import { CLoginInfo } from "./LoginInfo";
 import { Counter } from "./Counter";
 import { CNewChatDashBoard } from "./NewChatDashBoard";
@@ -16,6 +17,7 @@ export {
     CLoginInfo,
     CButtonUpload,
     ButtonToMain,
+    ButtonCancel,
     Counter,
     CNewChatDashBoard,
 };

chat_final_bootstrap/src/Layout/AllUsersList.js

@@ -99,12 +99,13 @@ const UserItem = ({ _id, login, nick, avatar, myId, addUserToList = null, delUse
                             </div>
                         )}
                     </div>
-                    <div className="text-dark fs-5  ms-2">{`${nick}`}</div>
+                    <div className="text-dark fs-5 ms-2 lh-sm">{`${nick}`}</div>
                 </div>
-                <span className="position-absolute bottom-0 end-0  badge rounded-pill bg-secondary">
+                {/* FIXME: */}
+                {/* <span className="position-absolute bottom-0 end-0  badge rounded-pill bg-secondary">
                     {_id}
                     <span className="visually-hidden">_id пользователя</span>
-                </span>
+                </span> */}
             </li>
         </>
     );

chat_final_bootstrap/src/Layout/Header.js

@@ -23,7 +23,6 @@ export const Header = () => (
                 </Nav>
                 <Nav className="ms-auto">
                     <CButtonLogout />
-                    <CButtonUpload />
                 </Nav>
             </Navbar.Collapse>
         </Navbar>

chat_final_bootstrap/src/Layout/Sidebar.js

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

chat_final_bootstrap/src/Pages/PageMain.js

@@ -101,16 +101,24 @@ const PageMain = ({
   
 
     return (
-        <div className="container-fluid ">
-            <div className="row g-3">
-                <div className="col-md-4  bg-light">
-                    <Sidebar />
-                </div>
-                <div className="col-md-8">
-                    <div className="pageMain_ChatMessages mb-2">
-                        <ChatMessages _chatId={_chatId} />
+        <div className="maxWidthPageMain">
+            <div className="container-fluid ">
+                <div className="row g-3 ">
+                    <div className="col-md-4">
+                        <div className="maxWidthForSideBar shadow">
+                            <Sidebar />
+                        </div>
+                    </div>
+                    <div className="col-md-8">
+                        <div className="pageMain_ChatMessages mb-2">
+                            <div className="maxWidthForMsg">
+                                <ChatMessages _chatId={_chatId} />
+                            </div>
+                        </div>
+                        <div className="maxWidthForMsg">
+                            <CMessageInput />
+                        </div>
                     </div>
-                    <CMessageInput />
                 </div>
             </div>
         </div>

chat_final_bootstrap/src/Pages/PageNewChat.js

@@ -1,4 +1,4 @@
-import { ButtonToMain, CNewChatDashBoard } from "../Components";
+import { ButtonToMain, ButtonCancel, CNewChatDashBoard } from "../Components";
 import { urlUploadConst } from "../const";
 import { actionGetAllUsers, actionAllUsersFind, actionDelUserFromChatList } from "../Actions";
 import { connect } from "react-redux";
@@ -43,6 +43,7 @@ const PageNewChat = ({ doSearchUsers = null, match: { params: { _chatId = "" } =
                     <div className="col-md-4  bg-light gradient shadow-sm border-2 rounded-3">
                         <CUserInfo />
                         <ButtonToMain />
+                        <ButtonCancel />
 
                         <input
                             className="form-control mb-2 p-2 border border-success border-2"
@@ -55,7 +56,7 @@ const PageNewChat = ({ doSearchUsers = null, match: { params: { _chatId = "" } =
                         <CAllUsersList searchUserStr={searchUserStr} />
                     </div>
                     <div className="col-md-8">
-                        <CNewChatDashBoard _chatId={_chatId}/>
+                        <CNewChatDashBoard _chatId={_chatId} />
                     </div>
                 </div>
             </div>

chat_final_bootstrap/src/Reducers/index.js

@@ -24,7 +24,7 @@ function authReducer(state, action) {
                 token: action.jwt,
                 payload: jwt_decode(action.jwt).sub.login,
                 payloadId: jwt_decode(action.jwt).sub.id,
-                //FIXME: отладочный _userId
+                //FIXME: ниже отладочный _userId
                 // payloadId: "5e97105693e2915e617c6fc1",
             };
         } catch (error) {