project done

Fakogram REACT project/fakogram/src/App.css

@@ -75,7 +75,6 @@
 
 .buttonSetting {
     margin: 20px 0;
-    
 }
 
 .textProfile {
@@ -114,7 +113,7 @@
     border-radius: 50%;
 }
 
-.smallForChat1{
+.smallForChat1 {
     width: 30px;
     height: 30px;
     margin-right: 10px;
@@ -187,7 +186,6 @@
     background-color: lightgray;
 }
 
-
 .search-item:hover {
     width: 100%;
     background-color: lightgray;
@@ -198,19 +196,18 @@
 }
 
 .chatAvatarText {
-    padding: 6px;
-    color: white;
-    font-size: 30px;
+    padding: 8px;
+    color: #0d6efd;
+    font-size: 25px;
     text-align: center;
 }
 
 .chatAvatarTextHeader {
-    padding: 6px;
-    color: white;
+    padding: 5px;
+    color: #0d6efd;
     font-size: 25px;
     text-align: center;
     order: 10;
-    
 }
 
 .chatTitle {
@@ -223,6 +220,7 @@
     margin: 0 10px;
     overflow: hidden;
     border-radius: 50%;
+    border: 2px solid #0d6efd;
 }
 
 .stubAvatarHeader {
@@ -231,7 +229,13 @@
     margin: 0 10px;
     overflow: hidden;
     border-radius: 50%;
-    
+    border: 2px solid white;
+}
+
+.stubAvatarHeader p {
+    color: white;
+    margin: 0;
+    padding-top: 4px;
 }
 
 .burger.navbar-toggler.collapsed {
@@ -405,7 +409,7 @@
     overflow: auto;
 }
 
-.chatsContainer{
+.chatsContainer {
     overflow: auto;
 }
 
@@ -420,6 +424,8 @@
     max-height: 95vh;
 }
 
+
+
 .msgBlock {
     /* max-width: 500px; */
     display: flex;
@@ -485,41 +491,46 @@
     display: block;
 }
 
-
-/* ---------------------------------- */ 
+/* ---------------------------------- */
 @keyframes ldio-95gtuxj5ve {
-  0% { transform: translate(-50%,-50%) rotate(0deg); }
-  100% { transform: translate(-50%,-50%) rotate(360deg); }
+    0% {
+        transform: translate(-50%, -50%) rotate(0deg);
+    }
+    100% {
+        transform: translate(-50%, -50%) rotate(360deg);
+    }
 }
 .ldio-95gtuxj5ve div {
-  position: absolute;
-  width: 120px;
-  height: 120px;
-  border: 20px solid #0d6efd;
-  border-top-color: transparent;
-  border-radius: 50%;
+    position: absolute;
+    width: 120px;
+    height: 120px;
+    border: 20px solid #0d6efd;
+    border-top-color: transparent;
+    border-radius: 50%;
 }
 .ldio-95gtuxj5ve div {
-  animation: ldio-95gtuxj5ve 1s linear infinite;
-  top: 100px;
-  left: 100px
+    animation: ldio-95gtuxj5ve 1s linear infinite;
+    top: 100px;
+    left: 100px;
 }
 .loadingio-spinner-rolling-e3qh2r8uzre {
-  width: 200px;
-  height: 200px;
-  display: inline-block;
-  overflow: hidden;
-  background: #f1f2f3;
+    width: 200px;
+    height: 200px;
+    display: inline-block;
+    overflow: hidden;
+    background: #f1f2f3;
 }
 .ldio-95gtuxj5ve {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  transform: translateZ(0) scale(1);
-  backface-visibility: hidden;
-  transform-origin: 0 0; /* see note above */
-}
-.ldio-95gtuxj5ve div { box-sizing: content-box; }
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transform: translateZ(0) scale(1);
+    backface-visibility: hidden;
+    transform-origin: 0 0; /* see note above */
+}
+.ldio-95gtuxj5ve div {
+    box-sizing: content-box;
+}
 /* generated by https://loading.io/ */
 /* ------------------------------------------------------------ */
 
@@ -529,7 +540,6 @@
     flex-direction: column;
     align-items: center;
     padding-top: 30vh;
-    
 }
 
 .searchBlock {
@@ -537,7 +547,6 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    
 }
 
 .membersBlock {
@@ -548,9 +557,7 @@
     align-items: center;
 }
 
-.searchBlock:hover{
-    
-    width: 100%;
+.searchBlock:hover {
     background-color: lightgray;
 }
 
@@ -560,10 +567,9 @@
     width: 53vh;
 }
 
-.search-item div{
+.search-item div {
     font-size: 20px;
     color: black;
-    
 }
 
 .search-item {
@@ -571,3 +577,39 @@
     text-decoration: none;
 }
 
+.logErrorOn {
+    display: block;
+    text-align: center;
+    color: red;
+}
+
+.logErrorOff {
+    display: none;
+}
+
+.preload {
+    
+    width: 120px;
+    margin: 10px;
+}
+
+.preloadX{
+  
+    width: 20px;
+}
+
+.preloaderBlock{
+    position: relative;
+}
+
+.preloaderBlock button{
+    position: absolute;
+    right: 12px;
+    top: 12px;
+    border-radius: 50%;
+    opacity: 0.7;
+}
+
+.preloaderContainer{
+    display: flex;
+}

Fakogram REACT project/fakogram/src/App.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import "./App.css";
 import "bootstrap/dist/css/bootstrap.min.css";
 import { store, socket } from "./reducers";
@@ -23,10 +23,12 @@ import { CChatEditing } from "./pages/ChatEditing";
 export const history = createHistory();
 
 const AuthSwitch = ({ token }) => {
+
     if (token) {
         console.log("подключение сокета");
         socket.emit("jwt", token);
     }
+
     return (
         <>
             <Switch>
@@ -44,22 +46,16 @@ const AuthSwitch = ({ token }) => {
             <Route path="/chatediting/:_id" component={CChatEditing} />
             <Route path="/aboutus" component={AboutUs} />
             <div className="mainContainer">
-                <Route path="/main/" component={CChatsAside} />
+                <Route path="/main" component={CChatsAside} />
 
-                <Route path="/main/:_id" component={CChatMsgs} />
+                <Route path="/main/:_id" component={CChatMsgs} exact/>
             </div>
-            <Redirect
-                to={
-                    store.getState().auth.token === undefined
-                        ? "/login"
-                        : "/main"
-                }
-            />
+            <Redirect to={token === undefined ? "/login" : "/main"} />
         </>
     );
 };
 
-const CAuthSwitch = connect((state) => ({ token: state.auth.token || null }))(
+const CAuthSwitch = connect((state) => ({ token: state.auth?.token }))(
     AuthSwitch
 );
 

Fakogram REACT project/fakogram/src/actions/authActions.js

@@ -27,12 +27,16 @@ const actionLogin = (login, password) =>
     )
 
 export const actionFullLogin = (login, password) => async (dispatch) => {
-    history.push('/main')
+    
+    
     const token = await dispatch(actionLogin(login, password))
+    if (token) {
+        history.push('/main')
+    }
     if (token) {
         await dispatch(actionAuthLogin(token))
         await dispatch(actionAboutMe())
-    }
+    } 
 }
 
 const actionRegister = (login, password, nick) =>

Fakogram REACT project/fakogram/src/components/Avatar.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useEffect} from "react";
 import { connect } from "react-redux";
 import { backURL } from "../constants";
 
@@ -10,9 +10,15 @@ function getUrl(obj) {
     }
 }
 
+
+
 export const UserAvatar = ({ profile, text = "", className = "small" }) => {
+
+    useEffect(() => {}, [getUrl(profile)])
+
     return (
         <>
+            {console.log(getUrl(profile), "gjfsghfklsglk")}
             <div style={{display: "flex", alignItems: 'center'}}>
                 <img className={className} src={getUrl(profile)} />
                 <p>{text}</p>

Fakogram REACT project/fakogram/src/components/AvatarStub.js

@@ -1,18 +1,18 @@
 import React from "react";
 
-const r = () => Math.floor(Math.random() * 256);
-const g = () => Math.floor(Math.random() * 256);
-const b = () => Math.floor(Math.random() * 256);
-export const color = () => {
-    return "#" + r().toString(16) + g().toString(16) + b().toString(16);
-};
+// const r = () => Math.floor(Math.random() * 256);
+// const g = () => Math.floor(Math.random() * 256);
+// const b = () => Math.floor(Math.random() * 256);
+// export const color = () => {
+//     return "#" + r().toString(16) + g().toString(16) + b().toString(16);
+// };
 
 export const AvatarStub = (props) => {
     return (
-        <div className="stubAvatar" style={{ backgroundColor: props.color }}>
-            <p className="chatAvatarText" >
-                {props.login
-                    .split(" ")
+        <div className="stubAvatar" >
+            <p className="chatAvatarText">
+                {props?.login
+                    .split(" ", 2)
                     .map(function (item) {
                         return item[0];
                     })
@@ -26,16 +26,15 @@ export const AvatarStubHeader = (props) => {
     return (
         <div
             className="stubAvatarHeader"
-            style={{ backgroundColor: props.color }}
         >
-            {/* <p className="chatAvatarTextHeader">
-                {props?.login
-                    .split(" ")
+            <p className="chatAvatarTextHeader">
+                {props?.login === undefined ? " " : 
+                    props?.login.split(" ", 2)
                     .map(function (item) {
                         return item[0];
                     })
                     .join("")}
-            </p> */}
+            </p>
         </div>
     );
 };

Fakogram REACT project/fakogram/src/components/SendMsg.js

@@ -1,74 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import Button from 'react-bootstrap/esm/Button'
-import { connect } from 'react-redux'
-
-
-// import { MsgDropZone } from './MsgDropZone'
-import { actionSendMsg } from '../actions'
-import { backURL } from '../constants'
-
-const SendingField = ({ chatId, onSend, msg }) => {
-    const [text, setText] = useState(msg?.text || '')
-    const [files, setFiles] = useState(
-        msg?.media.map((mediaFile) => ({
-            ...mediaFile,
-            url: backURL + mediaFile.url,
-        })) || []
-    )
-    const [msgId, setMsgId] = useState(msg?._id || null)
-
-    useEffect(() => {
-        setText(msg?.text || '')
-        setFiles(
-            msg?.media.map((mediaFile) => ({
-                ...mediaFile,
-                url: backURL + mediaFile.url,
-            })) || []
-        )
-        setMsgId(msg?._id || null)
-    }, [msg])
-
-    return (
-        <div className="sendingField">
-            <div className="buttonSendBox">
-            
-                        <div className="sendBlock">
-                            <img src="https://img.icons8.com/ios-filled/344/folder-invoices--v2.png" className="sandFile"/>
-                            <textarea placeholder="Write a message..." rows="2"  value={text} onChange={(e) => setText(e.target.value)}/>
-                        </div>
-                        
-                        <Button 
-                        endIcon={"@"}
-                        onClick={() => {
-                            ;(text.match(/^\s*$/) && files.length === 0) ||
-                                onSend(chatId, text.trim(), 'media', files, msgId)
-                            setText('')
-                            setFiles([])
-                            setMsgId()
-                        }}
-                        >Send a message</Button>
-                    
-                <Button
-                    className="buttonSend"
-                    variant="contained"
-                    endIcon={"@"}
-                    onClick={() => {
-                        ;(text.match(/^\s*$/) && files.length === 0) ||
-                            onSend(chatId, text.trim(), 'media', files, msgId)
-                        setText('')
-                        setFiles([])
-                        setMsgId()
-                    }}
-                >
-                    Отправить
-                </Button>
-            </div>
-        </div>
-    )
-}
-
-
-
-export const CSendingField = connect(null, { onSend: actionSendMsg })(
-    SendingField
-)

Fakogram REACT project/fakogram/src/pages/ChatEditing.js

@@ -8,19 +8,17 @@ import { actionFindUsers } from "../actions";
 import { CSearchAvatar } from "../components/Avatar";
 import { actionSetChatInfo } from "../actions";
 import { CChatAvatar } from "../components/Avatar";
-import { backURL } from "../constants";
-import { color } from "../components/AvatarStub";
+import { history } from "../App";
 
 const ChatEditing = ({
     chatId,
     onChat,
     myProfile,
     create,
-    onLeave,
     onGetUser,
     foundUsers,
 }) => {
-    const useDebounce = (cb, depArray, delay, onAdd) => {
+    const useDebounce = (cb, depArray, delay) => {
         let timeoutRef = useRef();
         useEffect(() => {
             clearInterval(timeoutRef.current);
@@ -47,28 +45,39 @@ const ChatEditing = ({
         },
     });
 
-    const [members, setMembers] = useState(chatId[_id].members || [myProfile]);
+    const [members, setMembers] = useState(chatId[_id]?.members || [myProfile]);
 
-    console.log(members)
+    useEffect(() => {
+        onChat("media", img, newTitle, prepareMembers(members), _id);
+    }, [members]);
 
     function prepareMembers(members) {
         const newMembers = [];
-
+        
         for (const member of members) {
             if (create) {
                 if (member._id !== myProfile?._id) {
                     newMembers.push({ _id: member._id });
                 }
             } else {
-                newMembers.push({ _id: member._id });
+                newMembers.push({ _id: member?._id });
             }
         }
 
         return newMembers;
     }
 
+    function checkMembers(members, user) {
+        for (var i = 0; i < members.length; i++) {
+            if (members[i]?._id === user?._id) {
+                return null;
+            }
+        }
+        return onAddMember(user);
+    }
+
     const onAddMember = (newMember) => {
-        setMembers(prepareMembers([...members, newMember]));
+        setMembers([...members, newMember]);
     };
 
     const onDelMember = (i) => {
@@ -148,16 +157,19 @@ const ChatEditing = ({
 
                                                       <div>
                                                           <Button
-                                                            id={user._id + i}
+                                                              id={user._id + i}
                                                               user={user?.login}
                                                               onClick={() => {
-                                                                  onAddMember(
+                                                                  checkMembers(
+                                                                      members,
                                                                       user
                                                                   );
-                                                                      (document.getElementById(
-                                                                          user._id + i
-                                                                      ).innerHTML =
-                                                                          "✓");
+
+                                                                  document.getElementById(
+                                                                      user._id +
+                                                                          i
+                                                                  ).innerHTML =
+                                                                      "✓";
                                                               }}
                                                           >
                                                               +
@@ -183,10 +195,10 @@ const ChatEditing = ({
                                             prepareMembers(members),
                                             _id
                                         );
+                                        history.push("/main");
                                     }}
                                 >
                                     <Link
-                                        to="/changesdonechats"
                                         style={{
                                             color: "white",
                                             textDecoration: "none",
@@ -195,7 +207,6 @@ const ChatEditing = ({
                                         Apply Changes
                                     </Link>
                                 </Button>
-                                
 
                                 <Link
                                     to={"/main/" + _id}
@@ -209,7 +220,7 @@ const ChatEditing = ({
                 </div>
                 <div>
                     <div>
-                        {chatId[_id]?.members.map((login, i) => {
+                        {members.map((login, i) => {
                             return (
                                 <>
                                     <div className="membersBlock">
@@ -227,7 +238,7 @@ const ChatEditing = ({
 
                                         <div>
                                             <Button
-                                                id={login._id}
+                                                id={login?._id}
                                                 user={login?.login}
                                                 onClick={() => {
                                                     onDelMember(i);
@@ -245,9 +256,6 @@ const ChatEditing = ({
                             );
                         })}
                     </div>
-                    <p className="p">
-                        *Click on "x" and don't forget to click "Apply Changes"
-                    </p>
                 </div>
             </div>
         </div>
@@ -262,7 +270,7 @@ export const CChatEditing = connect(
     }),
     {
         onChat: actionSetChatInfo,
-        
+
         onGetUser: actionFindUsers,
     }
 )(ChatEditing);

Fakogram REACT project/fakogram/src/pages/ChatMsgsPage.js

@@ -5,7 +5,7 @@ import { actionFullMsgsByChat } from "../actions";
 import { store } from "../reducers";
 import Button from "react-bootstrap/esm/Button";
 import { backURL } from "../constants";
-import { AvatarStubHeader, color } from "../components/AvatarStub";
+import { AvatarStubHeader } from "../components/AvatarStub";
 import { actionSendMsg } from "../actions";
 import { useDropzone } from "react-dropzone";
 
@@ -17,7 +17,6 @@ const ChatMsgs = ({
     msg,
     nickOwner,
 }) => {
-   
     const [files, setFiles] = useState(
         msg?.media.map((mediaFile) => ({
             ...mediaFile,
@@ -28,7 +27,6 @@ const ChatMsgs = ({
     const { getRootProps, getInputProps } = useDropzone({
         noKeyboard: true,
         onDrop: async (acceptedFiles) => {
-           
             await setFiles([
                 ...files,
                 ...acceptedFiles.map((file) =>
@@ -36,22 +34,30 @@ const ChatMsgs = ({
                         url: URL.createObjectURL(file),
                     })
                 ),
-            ])
+            ]);
         },
-    })
-    {console.log(files, "FILES")}
+    });
     const [msgsBlock, setMsgsBlock] = useState(0);
 
+    console.log(files, "FILES");
+
     let { _id } = useParams();
 
+    useEffect(() => setFiles([]) , [getChat[_id]])
+
     useEffect(() => {
         chatMsgs(_id, msgsBlock, msgsCount);
     }, [_id]);
 
+    const onDelFiles = (i) => {
+        setFiles(
+            files.filter((el, index) => files[index].lastModified !== files[i].lastModified)
+        );
+    };
+
     const [text, setText] = useState("");
     const [msgs] = useState(getChat);
 
-    
     const oneChatMsgs = getChat[_id]?.messages;
     return (
         <>
@@ -70,7 +76,6 @@ const ChatMsgs = ({
                                         ? getChat[_id]?.title
                                         : "chat without title"
                                 }
-                                color={color()}
                             />
                         )}
                         <h5>{getChat[_id]?.title}</h5>
@@ -84,7 +89,6 @@ const ChatMsgs = ({
                             <h2 className="noMsg">No messages</h2>
                         ) : (
                             oneChatMsgs.map((msg) => (
-                                
                                 <div
                                     className={
                                         msg?.owner?.nick === nickOwner
@@ -93,33 +97,40 @@ const ChatMsgs = ({
                                     }
                                     key={Math.random()}
                                 >
-                                
-
-                                        
                                     <div className="msgBlock">
-                                        {msg?.owner?.avatar?.url === undefined ? 
-                                        <div className="avatarStubChat1" key={Math.random()}></div> :
-                                        <img
-                                            src={
-                                                backURL + msg?.owner.avatar?.url
-                                            }
-                                            className="smallForChat1"
-                                            key={Math.random()}
-                                        /> }
-                                        
-                                        <h5 style={{ paddingTop: "5px" }} key={Math.random()}>
-                                            {msg?.owner?.nick === null ? msg?.owner?.login : msg?.owner?.nick}
-                                        </h5>
-                                    </div>
-                                    {msg?.media?.map((oneMsg) => (
+                                        {msg?.owner?.avatar?.url ===
+                                        undefined ? (
+                                            <div
+                                                className="avatarStubChat1"
+                                                key={Math.random()}
+                                            ></div>
+                                        ) : (
                                             <img
-                                                className="msgMedia"
                                                 src={
-                                                    backURL + oneMsg.url
+                                                    backURL +
+                                                    msg?.owner.avatar?.url
                                                 }
+                                                className="smallForChat1"
                                                 key={Math.random()}
                                             />
-                                        ))}
+                                        )}
+
+                                        <h5
+                                            style={{ paddingTop: "5px" }}
+                                            key={Math.random()}
+                                        >
+                                            {msg?.owner?.nick === null
+                                                ? msg?.owner?.login
+                                                : msg?.owner?.nick}
+                                        </h5>
+                                    </div>
+                                    {msg?.media?.map((oneMsg) => (
+                                        <img
+                                            className="msgMedia"
+                                            src={backURL + oneMsg.url}
+                                            key={Math.random()}
+                                        />
+                                    ))}
                                     <li key={Math.random}>{msg?.text}</li>
                                 </div>
                             ))
@@ -131,49 +142,60 @@ const ChatMsgs = ({
                     {oneChatMsgs === getChat[_id] ? (
                         <></>
                     ) : (
-                        <div className="sendMsgBlock">
-                            <div className="sendBlock">
-                                <div
-                                    {...getRootProps({
-                                        className: "dropZoneStyle2",
-                                    })}
-                                >
-                                    <input {...getInputProps()} />
+                        <div>
+                            <div className="preloaderContainer">
+                                {files.map((file, i) => (
+                                    <div className="preloaderBlock">
+                                        <img src={file?.url} className="preload" key={file.lastModified}/>
+                                        <button onClick={() => onDelFiles(i)} key={i}>
+                                            x
+                                        </button>
+                                    </div>
                                     
+                                    
+                                ))}  
+                            </div>
+
+                            <div className="sendMsgBlock">
+                                <div className="sendBlock">
+                                    <div
+                                        {...getRootProps({
+                                            className: "dropZoneStyle2",
+                                        })}
+                                    >
+                                        <input {...getInputProps()} />
+
                                         <img
                                             src="https://img.icons8.com/ios-filled/344/folder-invoices--v2.png"
                                             className="sandFile"
                                         />
-                                    
+                                    </div>
+                                    <textarea
+                                        name="inputName"
+                                        placeholder="Write a message..."
+                                        rows="2"
+                                        value={text}
+                                        onChange={(e) => {
+                                            setText(e.target.value);
+                                        }}
+                                    />
                                 </div>
-                                <textarea
-                                    name="inputName"
-                                    placeholder="Write a message..."
-                                    rows="2"
-                                    value={text}
-                                    onChange={(e) => {
-                                        setText(e.target.value);
-                                    }}
-                                />
-                            </div>
 
-                            <Button
-                                onClick={() =>
-                                    {
+                                <Button
+                                    onClick={() => {
                                         sendMsg(
                                             getChat[_id]?._id,
                                             text,
                                             "media",
                                             files
-                                        )
-                                        setText("")
-                                        setFiles([])
-                                    }
-                                    
-                                }
-                            >
-                                Send a message
-                            </Button>
+                                        );
+                                        setText("");
+                                        setFiles([]);
+                                    }}
+                                >
+                                    Send a message
+                                </Button>
+                            </div>
                         </div>
                     )}
                 </div>
@@ -182,7 +204,6 @@ const ChatMsgs = ({
     );
 };
 
-
 export const CChatMsgs = connect(
     (state) => ({
         getChat: state.chats,

Fakogram REACT project/fakogram/src/pages/ChatsAside.js

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import { actionFullChatList, actionChatsCount } from "../actions";
 import { backURL } from "../constants";
 import { Link } from "react-router-dom";
-import { AvatarStub, color } from "../components/AvatarStub";
+import { AvatarStub } from "../components/AvatarStub";
 
 const ChatsAside = ({ chats = [], auth, ownerChats }) => {
     const [chatBlock, setChatBlock] = useState(0);
@@ -42,7 +42,6 @@ const ChatsAside = ({ chats = [], auth, ownerChats }) => {
                                                 ? chat.title
                                                 : "chat without title"
                                         }
-                                        color={color()}
                                         key={Math.random()}
                                     />
                                 )}

Fakogram REACT project/fakogram/src/pages/LoginPage.js

@@ -3,23 +3,26 @@ import FloatingLabel from "react-bootstrap/FloatingLabel";
 import Form from "react-bootstrap/Form";
 import Button from "react-bootstrap/Button";
 import Alert from "react-bootstrap/Alert";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { store } from "../reducers/index";
 import { actionFullLogin } from "../actions";
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
+import { compose } from "redux";
+import { history } from "../App";
 
-
-
-const Login = ({ onLogin, loginCheck }) => {
-
+const Login = ({ onLogin, token }) => {
+    
     const [login, setLogin] = useState("");
     const [password, setPassword] = useState("");
+    const [check, setCheck] = useState(false)
 
-    if(loginCheck.token === {}) {
-        alert('error')
-    }
+    // useEffect(() => {
+    //     if(token?.token) {
 
+    //     }
+    // }, [token])
+    
     return (
         <div className="formContainerLogin">
             <h1 className="textLogin">Login</h1>
@@ -58,12 +61,18 @@ const Login = ({ onLogin, loginCheck }) => {
                     className="btn-setting"
                     onClick={() => {
                         onLogin(login, password);
+                        setTimeout(() => setCheck(true), 1500)
+
                     }}
                     disabled={!login || !password}
                 >
                     <b>Login</b>
                 </Button>
-                
+
+                <div className={check ? "logErrorOn" : 'logErrorOff'}>
+                    <h5>Incorect Login or Password</h5>
+                </div>
+
                 <Link to="/registration" className="registerLink alert-link">
                     Don't have an account? Register
                 </Link>
@@ -72,4 +81,6 @@ const Login = ({ onLogin, loginCheck }) => {
     );
 };
 
-export const CLogin = connect((state) => ({loginCheck: state.auth}), { onLogin: actionFullLogin })(Login);
+export const CLogin = connect((state) => ({token: state.auth}), {
+    onLogin: actionFullLogin,
+})(Login);

Fakogram REACT project/fakogram/src/pages/NewChatPage.js

@@ -6,6 +6,7 @@ import Button from "react-bootstrap/esm/Button";
 import { CSearchAvatar } from "../components/Avatar";
 import { actionSetChatInfo } from "../actions";
 import { actionFindUsers } from "../actions";
+import { history } from "../App";
 
 import { CChatAvatar } from "../components/Avatar";
 
@@ -35,10 +36,27 @@ const ChatPage = ({
     const [title, setTitle] = useState(chat?.title || "");
     const [members, setMembers] = useState(chat?.members || [myProfile]);
 
+    function checkMembers(members, user) {
+        for (var i = 0; i < members.length; i++) {
+            if (members[i]?._id === user?._id) {
+                return false;
+            }
+        }
+        return onAddMember(user);
+    }
+
     const onAddMember = (newMember) => {
-        setMembers(prepareMembers([...members, newMember]));
+        setMembers([...members, newMember]);
     };
 
+    const onDelMember = (i) => {
+        setMembers(
+            members.filter((el, index) => members[index]._id !== members[i]._id)
+        );
+    };
+
+    
+
     useEffect(() => {
         setTitle(chat?.title || "");
         setImg(null);
@@ -57,7 +75,7 @@ const ChatPage = ({
         const newMembers = [];
 
         for (const member of members) {
-            if (create) {
+            if (checkMembers(newMembers, member)) {
                 if (member._id !== myProfile?._id) {
                     newMembers.push({ _id: member._id });
                 }
@@ -66,122 +84,173 @@ const ChatPage = ({
             }
         }
 
+        newMembers.shift();
         return newMembers;
     }
 
     return (
         <div className="newChatContainer">
-            <div {...getRootProps({ className: "dropZoneStyle" })}>
-                <input {...getInputProps()} />
-                {isDragActive ? (
-                    <p className="dropZoneStyleBr">Drop the files here ...</p>
-                ) : (
-                    <CChatAvatar
-                        text="upload chat avatar"
-                        className="profileStyle"
-                    />
-                )}
-            </div>
-            <div className="profileContainer">
-                <div className="loginNickSetting">
-                    <div className="inputContainer">
-                        <label for="loginInput">
-                            Enter the name of the chat:{" "}
-                        </label>
-                        <input
-                            className="form-control-editing form-control"
-                            id="loginInput"
-                            type="text"
-                            value={title}
-                            onChange={(e) => {
-                                setTitle(e.target.value);
-                            }}
-                        />
+            <div className="dfb">
+                <div className="newChatContainer">
+                    <div {...getRootProps({ className: "dropZoneStyle" })}>
+                        <input {...getInputProps()} />
+                        {isDragActive ? (
+                            <p className="dropZoneStyleBr">
+                                Drop the files here ...
+                            </p>
+                        ) : (
+                            <CChatAvatar
+                                text="upload chat avatar"
+                                className="profileStyle"
+                            />
+                        )}
                     </div>
-
-                    <div className="inputContainer">
-                        <form>
-                            <label for="loginInput">
-                                Add users to a group:{" "}
-                            </label>
-                            <div className="search-box">
+                    <div className="profileContainer">
+                        <div className="loginNickSetting">
+                            <div className="inputContainer">
+                                <label for="loginInput">
+                                    Enter the name of the chat:{" "}
+                                </label>
                                 <input
                                     className="form-control-editing form-control"
-                                    placeholder=""
-                                    value={login}
-                                    onChange={(e) => setLogin(e.target.value)}
+                                    id="loginInput"
+                                    type="text"
+                                    value={title}
+                                    onChange={(e) => {
+                                        setTitle(e.target.value);
+                                    }}
                                 />
                             </div>
-                            {foundUsers
-                                ? foundUsers.map((user, i) => {
-                                      return (
-                                          <div className="searchBlock">
-                                              {user?.avatar !== null ? (
-                                                  <CSearchAvatar
-                                                      avatarUrl={user}
-                                                  />
-                                              ) : (
-                                                  <div className="avatarStubChat2"></div>
-                                              )}
-
-                                              <div>
-                                                  {user?.login
-                                                      ? user.login
-                                                      : "anon"}
-                                              </div>
-
-                                              <div>
-                                                  <Button
-                                                      id={user._id + i}
-                                                      user={user?.login}
-                                                      onClick={() => {
-                                                          onAddMember(user);
-                                                          document.getElementById(
-                                                              user._id + i
-                                                          ).innerHTML = "✓";
-                                                      }}
-                                                  >
-                                                      +
-                                                  </Button>
-                                              </div>
-                                          </div>
-                                      );
-                                  })
-                                : null}
-                        </form>
+
+                            <div className="inputContainer">
+                                <form>
+                                    <label for="loginInput">
+                                        Add users to a group:{" "}
+                                    </label>
+                                    <div className="search-box">
+                                        <input
+                                            className="form-control-editing form-control"
+                                            placeholder=""
+                                            value={login}
+                                            onChange={(e) =>
+                                                setLogin(e.target.value)
+                                            }
+                                        />
+                                    </div>
+                                    {foundUsers
+                                        ? foundUsers.map((user, i) => {
+                                              return (
+                                                  <div className="searchBlock">
+                                                      {user?.avatar !== null ? (
+                                                          <CSearchAvatar
+                                                              avatarUrl={user}
+                                                          />
+                                                      ) : (
+                                                          <div className="avatarStubChat2"></div>
+                                                      )}
+
+                                                      <div>
+                                                          {user?.login
+                                                              ? user.login
+                                                              : "anon"}
+                                                      </div>
+
+                                                      <div>
+                                                          <Button
+                                                              id={user._id + i}
+                                                              user={user?.login}
+                                                              onClick={() => {
+                                                                  checkMembers(
+                                                                      members,
+                                                                      user
+                                                                  );
+                                                                  document.getElementById(
+                                                                      user._id +
+                                                                          i
+                                                                  ).innerHTML =
+                                                                      "✓";
+                                                              }}
+                                                          >
+                                                              +
+                                                          </Button>
+                                                      </div>
+                                                  </div>
+                                              );
+                                          })
+                                        : null}
+                                </form>
+                            </div>
+
+                            <div className="df">
+                                <Button
+                                    variant="primary"
+                                    className="buttonSetting"
+                                    onClick={() => {
+                                        onChat(
+                                            "media",
+                                            img,
+                                            title,
+                                            prepareMembers(members),
+                                            chat?.id
+                                        );
+                                        history.push("/main");
+                                    }}
+                                >
+                                    <Link
+                                        // to="/changesdonechats"
+                                        style={{
+                                            color: "white",
+                                            textDecoration: "none",
+                                        }}
+                                    >
+                                        Apply Changes
+                                    </Link>
+                                </Button>
+
+                                <Link to="/main" className="changepasLink">
+                                    Back to all chats
+                                </Link>
+                            </div>
+                        </div>
                     </div>
+                </div>
+                <div>
+                    <div>
+                        {members.map((login, i) => {
+                            return (
+                                <>
+                                    <div className="membersBlock">
+                                        {login?.avatar !== null ? (
+                                            <CSearchAvatar avatarUrl={login} />
+                                        ) : (
+                                            <div className="avatarStubChat2"></div>
+                                        )}
+
+                                        <div>
+                                            {login?.login
+                                                ? login.login
+                                                : "anon"}
+                                        </div>
 
-                    <div className="df">
-                        <Button
-                            variant="primary"
-                            className="buttonSetting"
-                            onClick={() => {
-                                (console.log(prepareMembers(members, "members")))
-                                onChat(
-                                    "media",
-                                    img,
-                                    title,
-                                    prepareMembers(members),
-                                    chat?.id,
-                                    
-                                )
-                            }}
-                        >
-                            {console.log(members, "members")}
-                            <Link
-                                to="/changesdonechats"
-                                style={{
-                                    color: "white",
-                                    textDecoration: "none",
-                                }}
-                            >
-                                Apply Changes
-                            </Link>
-                        </Button>
-
-                        <Link to="/main" className="changepasLink">
-                            Back to all chats
-                        </Link>
+                                        <div>
+                                            <Button
+                                                id={login._id}
+                                                user={login?.login}
+                                                onClick={() => {
+                                                    onDelMember(i);
+                                                    document.getElementById(
+                                                        login._id
+                                                    ).innerHTML = "✓";
+                                                }}
+                                                key={i}
+                                            >
+                                                x
+                                            </Button>
+                                        </div>
+                                    </div>
+                                </>
+                            );
+                        })}
                     </div>
                 </div>
             </div>

Fakogram REACT project/fakogram/src/pages/ProfilePage.js

@@ -13,6 +13,8 @@ const ProfilePage = ({ myProfile, onChanges }) => {
     const [nick, setNick] = useState(myProfile.nick);
     const [img, setImg] = useState(null);
 
+    console.log(img)
+
     const { getRootProps, getInputProps, isDragActive } = useDropzone({
         accept: "image/*",
         maxFiles: 1,
@@ -21,8 +23,6 @@ const ProfilePage = ({ myProfile, onChanges }) => {
         },
     });
 
-    // if(authLoginValidator === undefined) return <Redirect to='/login' />
-
     return (
         <div style={{ paddingTop: "100px" }}>
             <h1 className="textProfile">My profile</h1>
@@ -31,7 +31,7 @@ const ProfilePage = ({ myProfile, onChanges }) => {
                 {isDragActive ? (
                     <p className="dropZoneStyleBr">Drop the files here ...</p>
                 ) : (
-                    <CMyAvatar text="change avatar" className="profileStyle" />
+                    <CMyAvatar text="change avatar" className="profileStyle"/>
                 )}
             </div>
             <div className="profileContainer">

Fakogram REACT project/fakogram/src/reducers/index.js

@@ -368,7 +368,7 @@ store.dispatch(actionAboutMe());
 
 
 store.subscribe(() => console.log(store.getState()));
-console.log(store.getState());
+// console.log(store.getState());
 
 const bodyColor = () => {
     return (document.body.style.background = "#eee");