Home Explore Help
Sign In
Sheva77
/
Chat_final_project
Watch 2
Star 0
Fork 0
Files Issues 1 Pull Requests 0 Wiki
Browse Source

buts

sheva77 3 years ago
parent
b2636fbb73
commit
c3ba29a277
17 changed files with 4115 additions and 49 deletions
Split View Show Diff Stats
  1. 1 1
      chat_final_bootstrap/public/index.html
  2. 1 0
      chat_final_bootstrap/src/App.js
  3. 34 22
      chat_final_bootstrap/src/App.scss
  4. 1 1
      chat_final_bootstrap/src/Components/AdditionalTools.js
  5. 10 0
      chat_final_bootstrap/src/Components/ButtonToMain.js
  6. 5 1
      chat_final_bootstrap/src/Components/ChatContain.js
  7. 42 13
      chat_final_bootstrap/src/Components/ChatsList.js
  8. 2 1
      chat_final_bootstrap/src/Components/index.js
  9. 6 2
      chat_final_bootstrap/src/Layout/UserInfo.js
  10. 2 3
      chat_final_bootstrap/src/Pages/PageAbout.js
  11. 2 2
      chat_final_bootstrap/src/Pages/PageMain.js
  12. 8 1
      chat_final_bootstrap/src/Pages/PageNewChat.js
  13. 3 2
      chat_final_bootstrap/src/Pages/PageUpload.js
  14. 3995 0
      chat_final_bootstrap/src/icons/bootstrap-icons.css
  15. BIN
      chat_final_bootstrap/src/icons/fonts/bootstrap-icons.woff
  16. BIN
      chat_final_bootstrap/src/icons/fonts/bootstrap-icons.woff2
  17. 3 0
      chat_final_bootstrap/src/icons/person-fill.svg

+ 1 - 1
chat_final_bootstrap/public/index.html
View File 

@@ -3,10 +3,10 @@
 
     <head>
 
         <meta charset="utf-8" />
 
         <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 
+
 
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
 
         <meta name="theme-color" content="#000000" />
 
         <meta name="description" content="Web site created using create-react-app" />
 
-        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
         <!--
 
       manifest.json provides metadata used when your web app is installed on a
 
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

+ 1 - 0
chat_final_bootstrap/src/App.js
View File 

@@ -1,5 +1,6 @@
 
 import React from "react";
 
 import "bootstrap/dist/css/bootstrap.min.css";
 
+import "./icons/bootstrap-icons.css";
 
 import "./App.scss";
 
 import {
 
     // BrowserRouter as Router, // https://stackoverflow.com/questions/42701129/how-to-push-to-history-in-react-router-v4

+ 34 - 22
chat_final_bootstrap/src/App.scss
View File 

@@ -2,19 +2,40 @@ body {
 
     overflow: hidden;
 
 }
 
 
-.mainWrapper {
 
-    min-height: 100vh;
 
-    max-height: 100vh;
 
-}
 
-
 
 .ChatsList {
 
-    max-height: 65vh;
 
-    margin: auto;
 
+    max-height: calc(100vh - 350px);
 
     overflow: auto;
 
+
 
+    div:first-child {
 
+        position: relative;
 
+        width: 48px;
 
+        height: 48px;
 
+        border-radius: 50%;
 
+        overflow: hidden;
 
+        float: left;
 
+        i {
 
+            color: honeydew;
 
+            margin: 0;
 
+            position: absolute;
 
+            top: 50%;
 
+            left: 50%;
 
+            margin-right: -50%;
 
+            transform: translate(-52%, -55%);
 
+        }
 
+    }
 
+
 
+    div:nth-child(2) {
 
+        padding-left: 55px;
 
+    }
 
+
 
+    img {
 
+        width: 48px;
 
+        height: 48px;
 
+    }
 
 }
 
 
 .Messages_map {
 
-    max-height: 65vh;
 
+    max-height: calc(100vh - 350px);
 
     overflow: auto;
 
 }
 
 
@@ -22,6 +43,9 @@ body {
 
     img {
 
         width: 50px;
 
     }
 
+    input {
 
+        width: 80%;
 
+    }
 
     .MessagesList_map {
 
         max-height: 70vh;
 
         overflow: auto;
 
@@ -30,23 +54,11 @@ body {
 
 
 div {
 
     border-radius: 7px;
 
-    border: 1px solid red;
 
+    // border: 1px solid red;
 
 }
 
 
 .LoginForm {
 
-    // background-color: lightgreen;
 
-}
 
-
 
-.PageMain {
 
-    // background-color: lightskyblue;
 
-    div {
 
-        // .Sidebar {
 
-        //     background-color: lightgreen;
 
-        // }
 
-        .ChatContain {
 
-            // background-color: lightpink;
 
-        }
 
-    }
 
+    background-color: lightgreen;
 
 }
 
 
 .ChatItem {

+ 1 - 1
chat_final_bootstrap/src/Components/AdditionalTools.js
View File 

@@ -37,7 +37,7 @@ export const AdditionalTools = ({ _userId, onSearch = null }) => {
 
             >
 
                 New Chat
 
             </Button>
 
-            <Button className="gradient" variant="secondary btn-sm">
 
+            <Button className="gradient" variant="secondary btn-sm  ms-2">
 
                 Join to another chat
 
             </Button>
 
         </div>

+ 10 - 0
chat_final_bootstrap/src/Components/ButtonToMain.js
View File 

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

+ 5 - 1
chat_final_bootstrap/src/Components/ChatContain.js
View File 

@@ -83,7 +83,11 @@ const Messages = ({ arrayOfMessages, avatar, _id = "", title = "", doSearchMsg }
 
 
     return (
 
         <div className="Messages">
 
-            <input placeholder="Serch message" onInput={(e) => setSearchMsgStr(e.target.value)}></input>
 
+            <input
 
+                placeholder="Serch message"
 
+                onInput={(e) => setSearchMsgStr(e.target.value)}
 
+                className="form-control mb-2 p-2 border border-success border-2"
 
+            ></input>
 
             <span>🔍</span>
 
             <div>
 
                 <b>ChatContain</b>

+ 42 - 13
chat_final_bootstrap/src/Components/ChatsList.js
View File 

@@ -2,20 +2,43 @@ import logo from "../images//logo23.jpg";
 
 import { connect } from "react-redux";
 
 import { urlConst } from "../const";
 
 import { Link } from "react-router-dom";
 
+import personFillIcon from "../icons/person-fill.svg";
 
+import history from "../history";
 
 
-const ChatItem = ({ _id = "", avatar, title = "no title", messages, userId }) => (
 
-    <Link to={`/main/${userId}/${_id}`}>
 
-        <div className="ChatItem">
 
-            <img src={avatar && avatar.url ? `${urlConst}/${avatar.url}}` : logo}></img>
 
-            <p>Title: {title}</p>
 
-            <span>Count of msg: {messages && messages.length ? messages.length : 0}</span>
 
-            <br />
 
-            <span> chatID: {_id}</span>
 
-        </div>
 
+const ChatItem = ({ _id = "", avatar, title = "no title", messages, userId, chatId }) => (
 
+    // здесь _id - чата
 
+    <Link to={`/main/${userId}/${_id}`} className="noUnderLine">
 
+        <>
 
+            <li
 
+                className={
 
+                    _id === chatId
 
+                        ? "list-group-item list-group-item-success my-1 gradient"
 
+                        : "list-group-item list-group-item-light my-1 gradient"
 
+                }
 
+            >
 
+                <div>
 
+                    {avatar && avatar.url ? (
 
+                        <img src={`${urlConst}/${avatar.url}`}></img>
 
+                    ) : (
 
+                        <div className="bg-success border border-2 border-success">
 
+                            <i class="fs-3 text-light bi bi-chat-dots "></i>
 
+                        </div>
 
+                    )}
 
+                </div>
 
+                <div className="text-success ">
 
+                    <span>Title: {title}</span>
 
+                    <br />
 
+                    <span>Count of msg: {messages && messages.length ? messages.length : 0}</span>
 
+                </div>
 
+
 
+                <br />
 
+                <span> chatID: {_id}</span>
 
+            </li>
 
+        </>
 
     </Link>
 
 );
 
 
-const List = ({ arrayOfChats, userId }) => {
 
+const List = ({ arrayOfChats, userId, chatId }) => {
 
     if (!arrayOfChats) return <></>;
 
 
     // сортируем чаты так, чтобы сверху показывались чаты, в которых последнее сообщение "свежее" всех остальных
 
@@ -43,15 +66,21 @@ const List = ({ arrayOfChats, userId }) => {
 
     // console.log("chatsList - arrayOfChats.sort: ", arrayOfChats);
 
 
     return (
 
-        <div>
 
+        <ul class="list-group" role="tablist">
 
             {arrayOfChats.map((a) => (
 
-                <ChatItem key={a._id} {...a} userId={userId} />
 
+                <ChatItem key={a._id} {...a} userId={userId} chatId={chatId} />
 
             ))}
 
-        </div>
 
+        </ul>
 
     );
 
 };
 
 
 const CList = connect((s) => ({
 
+    chatId:
 
+        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,
 
     arrayOfChats:
 
         s.promise.searchChat &&
 
         s.promise.searchChat.payload &&

+ 2 - 1
chat_final_bootstrap/src/Components/index.js
View File 

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

+ 6 - 2
chat_final_bootstrap/src/Layout/UserInfo.js
View File 

@@ -1,4 +1,5 @@
 
 import myPhoto from "../images/Iam_new2.jpg";
 
+import personFillIcon from "../icons/person-fill.svg";
 
 import { CButtonLogout, CLoginInfo } from "../Components";
 
 import { Link } from "react-router-dom";
 
 import { urlUploadConst } from "../const";
 
@@ -6,8 +7,11 @@ import { urlUploadConst } from "../const";
 
 export 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">
 
-                <img className="border border-success" src={avatarUrl ? `${urlUploadConst}/${avatarUrl}` : myPhoto} />
 
+            <span className="m-2  ">
 
+                <img
 
+                    className="border border-2 border-success bg-light"
 
+                    src={avatarUrl ? `${urlUploadConst}/${avatarUrl}` : personFillIcon}
 
+                />
 
 
                 <CLoginInfo />
 
             </span>

+ 2 - 3
chat_final_bootstrap/src/Pages/PageAbout.js
View File 

@@ -1,9 +1,8 @@
 
-import { Button } from "react-bootstrap";
 
-import history from "../history";
 
+import { ButtonToMain } from "../Components";
 
 
 export const PageAbout = () => (
 
     <>
 
         FEA-23. Shevchenko Andrey. +38 (098) 852-46-10
 
-        <Button onClick={() => history.push("/")}>Вернуться на главную</Button>
 
+        <ButtonToMain />
 
     </>
 
 );

+ 2 - 2
chat_final_bootstrap/src/Pages/PageMain.js
View File 

@@ -43,8 +43,8 @@ const PageMain = ({match: {params: { _userId, _chatId },}, getChatList = null, g
 
         <div className="PageMain container-fluid">
 
             <div className="row">
 
                 <div className="col-md-4">
 
-                    {_userId+` - подмена id`}
 
-                    <Sidebar />
 
+                    {_userId + ` - подмена id`}
 
+                    <Sidebar  />
 
                 </div>
 
                 <div className="col-md-8">
 
                     <ChatContain _chatId={_chatId} />

+ 8 - 1
chat_final_bootstrap/src/Pages/PageNewChat.js
View File 

@@ -1 +1,8 @@
 
-export const PageNewChat = () => <div>PageNewChat</div>;
 
+import { ButtonToMain } from "../Components";
 
+
 
+export const PageNewChat = () => (
 
+    <>
 
+        PageNewChat
 
+        <ButtonToMain />
 
+    </>
 
+);

+ 3 - 2
chat_final_bootstrap/src/Pages/PageUpload.js
View File 

@@ -2,6 +2,7 @@ import { useRef, useState } from "react";
 
 import { urlUploadConst } from "../const";
 
 import React, { useCallback } from "react";
 
 import { useDropzone } from "react-dropzone";
 
+import { ButtonToMain } from "../Components";
 
 
 export const PageUpload = () => {
 
     const [fl, setFl] = useState(false);
 
@@ -51,8 +52,8 @@ export const PageUpload = () => {
 
     return (
 
         <>
 
             <div>
 
-                PageUpload <br />
 
-                <br />
 
+                PageUpload
 
+                <ButtonToMain />
 
             </div>
 
             <br />
 
             <MyDropzone />

File diff suppressed because it is too large
+ 3995 - 0
chat_final_bootstrap/src/icons/bootstrap-icons.css


BIN
chat_final_bootstrap/src/icons/fonts/bootstrap-icons.woff
View File


BIN
chat_final_bootstrap/src/icons/fonts/bootstrap-icons.woff2
View File


+ 3 - 0
chat_final_bootstrap/src/icons/person-fill.svg
View File 

@@ -0,0 +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">
 
+  <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>