push all

Fakogram REACT project/fakogram/src/App.css

@@ -168,6 +168,7 @@
     min-width: 400px;
     min-height: 94vh;
     background-color: white;
+    overflow: auto;
 }
 
 .mainContainer {
@@ -258,6 +259,16 @@
     flex-direction: column;
 }
 
+.dfb {
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.p {
+    color: #0d6efd;
+    text-align: center;
+}
+
 .changepasLink {
     padding-top: 20px;
     text-decoration: none;
@@ -276,6 +287,8 @@
 
 .msgMedia {
     max-width: 480px;
+    border-radius: 10px;
+    margin: 5px 0;
 }
 
 .dropZoneStyle {
@@ -353,7 +366,7 @@
 }
 
 .msgLi {
-    max-width: 500px;
+    width: 500px;
     border: 1px solid gray;
     margin: 10px;
     background-color: rgb(76, 145, 199);
@@ -386,9 +399,13 @@
 }
 
 .chatContainer {
-    margin: 20px 0px;
-    max-height: 75vh;
-    width: 240vh;
+    /* margin: 10px 0px; */
+    max-height: 70vh;
+    /* width: 240vh; */
+    overflow: auto;
+}
+
+.chatsContainer{
     overflow: auto;
 }
 
@@ -400,6 +417,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    max-height: 95vh;
 }
 
 .msgBlock {
@@ -511,9 +529,27 @@
     flex-direction: column;
     align-items: center;
     padding-top: 30vh;
+    
+}
+
+.searchBlock {
+    padding: 10px 10px 10px 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    
+}
+
+.membersBlock {
+    width: 50vh;
+    padding: 10px 10px 10px 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
 .searchBlock:hover{
+    
     width: 100%;
     background-color: lightgray;
 }
@@ -533,4 +569,5 @@
 .search-item {
     margin: 5px 0;
     text-decoration: none;
-}
+}
+

Fakogram REACT project/fakogram/src/App.js

@@ -9,7 +9,6 @@ import { CLogin } from "./pages/LoginPage";
 import { CRegistration } from "./pages/RegPage";
 import Header from "./pages/Header";
 import { CProfilePage } from "./pages/ProfilePage";
-import { ChatPage, CChatsPage } from "./pages/ChatsPage";
 import { CNewChatPage } from "./pages/NewChatPage";
 import { CChangePass } from "./pages/ChangePassPage";
 import { ChangesDone } from "./pages/ChangesDonePage";

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

@@ -218,28 +218,4 @@ const actionUpdateUserChats = (userId, newChats) =>
         )
     );
 
-    export const removeUserChat = (chatId) => async (dispatch, getState) => {
-        const state = getState()
-        const myId = state.promise.myProfile.payload._id
-        const oldChats = state.promise.myProfile.payload.chats
-    
-        const newChats = oldChats.filter((chat) => chat._id !== chatId)
-        await dispatch(actionUpdateUserChats(myId, newChats))
-    
-        const ownerId = state.chats[chatId]?.owner?._id
-        // тут событие ухода из чата не приходит по сокету,
-        // поэтому нужно делать все то, что и в сокете
-    
-        if (myId !== ownerId) {
-            dispatch(actionChatLeft({ _id: chatId }))
-            const [, , histId] = history.location.pathname.split('/')
-            if (histId === chatId) {
-                history.push('/')
-            }
-        } else {
-            const chat = await dispatch(actionGetChatById(chatId))
-            await dispatch(actionChatOne(chat))
-        }
-    
-        await dispatch(actionAboutMe())
-    }
+   

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

@@ -12,7 +12,7 @@ import {
     actionFullChatList,
     actionGetChatById,
     actionChatsCount,
-    removeUserChat,
+    
 } from "./chatsActions";
 import { actionFindUsers, actionFindChatsByUser } from "./findActions";
 import { actionUploadFile } from "./mediaActions";
@@ -40,7 +40,6 @@ export {
     actionFullChatList,
     actionGetChatById,
     actionChatsCount,
-    removeUserChat,
     actionFindUsers,
     actionFindChatsByUser,
     actionUploadFile,

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

@@ -48,7 +48,7 @@ export const CChatAvatar = connect((state) => ({
 const SearchAvatar = ({findUser, avatarUrl}) => {
     return(
         <div className="searchBlock">
-            <img src={backURL + avatarUrl.avatar.url} className="smallForChat"/>
+            <img src={backURL + avatarUrl?.avatar?.url} className="smallForChat"/>
             
         </div>
     )

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

@@ -10,7 +10,7 @@ export const color = () => {
 export const AvatarStub = (props) => {
     return (
         <div className="stubAvatar" style={{ backgroundColor: props.color }}>
-            <p className="chatAvatarText">
+            <p className="chatAvatarText" >
                 {props.login
                     .split(" ")
                     .map(function (item) {

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

@@ -1,21 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import { CSearchAvatar } from "../components/Avatar";
-
-export const OneUserCard = ({ user }) => {
-    return (
-        <>
-            <div className="searchBlock">
-                <Link className="search-item">
-                    {user?.avatar !== null ? (
-                        <CSearchAvatar avatarUrl={user} />
-                    ) : (
-                        <div className="avatarStubChat2"></div>
-                    )}
-
-                    <div>{user?.login ? user.login : "anon"}</div>
-                </Link>
-            </div>
-        </>
-    );
-};

Fakogram REACT project/fakogram/src/helpers/UserSearch.js

@@ -1,29 +1,33 @@
-import React, {useEffect, useRef, useState} from 'react';
-import {connect, useDispatch} from 'react-redux';
-import {actionFindUsers} from "../actions";
-import {OneUserCard} from "../components/OneUserCard";
+import React, { useEffect, useRef, useState } from "react";
+import { connect, useDispatch } from "react-redux";
+import { actionFindUsers } from "../actions";
+import { CSearchAvatar } from "../components/Avatar";
 
-import Button from 'react-bootstrap/esm/Button';
-import {Link} from "react-router-dom";
+import Button from "react-bootstrap/esm/Button";
+import { Link } from "react-router-dom";
 
-const useDebounce = (cb, depArray, delay) => {
-    let timeoutRef = useRef()
-    // timeoutRef.current = setTimeout
+const useDebounce = (cb, depArray, delay, onAdd) => {
+    let timeoutRef = useRef();
     useEffect(() => {
-        clearInterval(timeoutRef.current)
-        timeoutRef.current === undefined ? timeoutRef.current = -1 : timeoutRef.current = setTimeout(cb, delay)
-    }, depArray)
+        clearInterval(timeoutRef.current);
+        timeoutRef.current === undefined
+            ? (timeoutRef.current = -1)
+            : (timeoutRef.current = setTimeout(cb, delay));
+    }, depArray);
 };
 
-const SearchByLogin = ({ user, onGetUser, foundUsers, state }) => {
-    const [login, setLogin] = useState()
-    useDebounce( () => onGetUser(login), [login], 2000);
+const SearchByLogin = ({ onGetUser, foundUsers, onChange }) => {
+    const [login, setLogin] = useState();
+    useDebounce(() => onGetUser(login), [login], 2000);
+
+    const newUserId = (user) => {
+        onChange(user)
+    }
+
     return (
         <form>
-            <label for="loginInput">
-            Add users to a group:{" "}
-                        </label>
-            <div className='search-box'>
+            <label for="loginInput">Add users to a group: </label>
+            <div className="search-box">
                 <input
                     className="form-control-editing form-control"
                     placeholder=""
@@ -32,23 +36,41 @@ const SearchByLogin = ({ user, onGetUser, foundUsers, state }) => {
                 />
             </div>
 
-            {foundUsers  ?
-                    foundUsers.map((user) => {
-                        return (<OneUserCard key={user._id} user={user}/>)
-                        
-                    })
-                : null
-            }
+            {foundUsers
+                ? foundUsers.map((user) => {
+                      return (
+                          <div className="searchBlock">
+                              {user?.avatar !== null ? (
+                                  <CSearchAvatar avatarUrl={user} />
+                              ) : (
+                                  <div className="avatarStubChat2"></div>
+                              )}
+
+                              <div>{user?.login ? user.login : "anon"}</div>
+
+                              <div>
+                                  <Button
+                                      user={user}
+                                      onClick={() => console.log(user)}
+                                      onChange={newUserId}
+                                  >
+                                      +
+                                  </Button>
+                              </div>
+                          </div>
+                      );
+                  })
+                : null}
         </form>
     );
 };
 
 export const CSearchByLogin = connect(
     (state) => ({
-        foundUsers: state?.promise?.findUsers?.payload
+        foundUsers: state?.promise?.findUsers?.payload,
         // state: state
     }),
     {
         onGetUser: actionFindUsers,
     }
-)(SearchByLogin);
+)(SearchByLogin);

Fakogram REACT project/fakogram/src/index.js

@@ -8,7 +8,6 @@ import { Preloader } from "./helpers/preloaders";
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
     <>
-        {/* <div id="spinner"><Preloader/></div> */}
         <App />
     </>
     

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

@@ -1,24 +1,43 @@
-import React, { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { connect } from "react-redux";
 import { useDropzone } from "react-dropzone";
 import { Link, useParams } from "react-router-dom";
 import Button from "react-bootstrap/esm/Button";
-import { Input, InputDebounce } from "../helpers/UserSearch";
-import { CUserSearch } from "../helpers/UserSearch";
-import { removeUserChat } from "../actions";
-import { CSearchByLogin } from '../helpers/UserSearch'
 
+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";
+
+const ChatEditing = ({
+    chatId,
+    onChat,
+    myProfile,
+    create,
+    onLeave,
+    onGetUser,
+    foundUsers,
+}) => {
+    const useDebounce = (cb, depArray, delay, onAdd) => {
+        let timeoutRef = useRef();
+        useEffect(() => {
+            clearInterval(timeoutRef.current);
+            timeoutRef.current === undefined
+                ? (timeoutRef.current = -1)
+                : (timeoutRef.current = setTimeout(cb, delay));
+        }, depArray);
+    };
+
+    const [login, setLogin] = useState();
+    useDebounce(() => onGetUser(login), [login], 2000);
 
-const ChatEditing = ({ chatId, onChat, myProfile, create, onLeave }) => {
     let { _id } = useParams();
 
     const [chat] = useState();
     const [img, setImg] = useState(null);
     const [newTitle, setNewTitle] = useState(chatId[_id]?.title || "");
-    const [members, setMembers] = useState(chat?.members || [myProfile]);
 
     const { getRootProps, getInputProps, isDragActive } = useDropzone({
         accept: "image/*",
@@ -28,6 +47,10 @@ const ChatEditing = ({ chatId, onChat, myProfile, create, onLeave }) => {
         },
     });
 
+    const [members, setMembers] = useState(chatId[_id].members || [myProfile]);
+
+    console.log(members)
+
     function prepareMembers(members) {
         const newMembers = [];
 
@@ -40,84 +63,191 @@ const ChatEditing = ({ chatId, onChat, myProfile, create, onLeave }) => {
                 newMembers.push({ _id: member._id });
             }
         }
+
         return newMembers;
     }
 
+    const onAddMember = (newMember) => {
+        setMembers(prepareMembers([...members, newMember]));
+    };
+
+    const onDelMember = (i) => {
+        setMembers(
+            members.filter((el, index) => members[index]._id !== members[i]._id)
+        );
+    };
+
     return (
         <div className="newChatContainer">
-            <div {...getRootProps({ className: "dropZoneStyle" })}>
-                <input {...getInputProps()} />
-                {isDragActive ? (
-                    <p className="dropZoneStyleBr">Drop the files here ...</p>
-                ) : (
-                    <CChatAvatar
-                        _id={_id}
-                        text="upload chat avatar"
-                        className="profileStyle"
-                    />
-                )}
-            </div>
-            <div className="profileContainer">
-                <div className="loginNickSetting">
-                    <div className="inputContainer">
-                        <label for="loginInput">
-                            Enter the new name of the chat:{" "}
-                        </label>
-                        <input
-                            className="form-control-editing form-control"
-                            id="loginInput"
-                            type="text"
-                            value={newTitle}
-                            onChange={(e) => {
-                                setNewTitle(e.target.value);
-                            }}
-                        />
+            <div className="dfb">
+                <div>
+                    <div {...getRootProps({ className: "dropZoneStyle" })}>
+                        <input {...getInputProps()} />
+                        {isDragActive ? (
+                            <p className="dropZoneStyleBr">
+                                Drop the files here ...
+                            </p>
+                        ) : (
+                            <CChatAvatar
+                                _id={_id}
+                                text="upload chat avatar"
+                                className="profileStyle"
+                            />
+                        )}
                     </div>
+                    <div className="profileContainer">
+                        <div className="loginNickSetting">
+                            <div className="inputContainer">
+                                <label for="loginInput">
+                                    Enter the new name of the chat:{" "}
+                                </label>
+                                <input
+                                    className="form-control-editing form-control"
+                                    id="loginInput"
+                                    type="text"
+                                    value={newTitle}
+                                    onChange={(e) => {
+                                        setNewTitle(e.target.value);
+                                    }}
+                                />
+                            </div>
 
-                    <div className="inputContainer">
-                        <CSearchByLogin/>
+                            <div className="inputContainer">
+                                {/* <CSearchByLogin onChange={newUserId}/> */}
+                                <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={() => {
+                                                                  onAddMember(
+                                                                      user
+                                                                  );
+                                                                      (document.getElementById(
+                                                                          user._id + i
+                                                                      ).innerHTML =
+                                                                          "✓");
+                                                              }}
+                                                          >
+                                                              +
+                                                          </Button>
+                                                      </div>
+                                                  </div>
+                                              );
+                                          })
+                                        : null}
+                                </form>
+                            </div>
+
+                            <div className="df">
+                                <div className="df"></div>
+                                <Button
+                                    variant="primary"
+                                    className="buttonSetting"
+                                    onClick={() => {
+                                        onChat(
+                                            "media",
+                                            img,
+                                            newTitle,
+                                            prepareMembers(members),
+                                            _id
+                                        );
+                                    }}
+                                >
+                                    <Link
+                                        to="/changesdonechats"
+                                        style={{
+                                            color: "white",
+                                            textDecoration: "none",
+                                        }}
+                                    >
+                                        Apply Changes
+                                    </Link>
+                                </Button>
+                                
+
+                                <Link
+                                    to={"/main/" + _id}
+                                    className="changepasLink"
+                                >
+                                    Back to chat
+                                </Link>
+                            </div>
+                        </div>
                     </div>
-                    <div className="df">
-                        <div className="df"></div>
-                        <Button
-                            variant="primary"
-                            className="buttonSetting"
-                            onClick={() => {
-                                onChat(
-                                    "media",
-                                    img,
-                                    newTitle,
-                                    prepareMembers(members),
-                                    _id
-                                );
-                            }}
-                        >
-                            <Link
-                                to="/changesdonechats"
-                                style={{
-                                    color: "white",
-                                    textDecoration: "none",
-                                }}
-                            >
-                                Apply Changes
-                            </Link>
-                        </Button>
-                        <Button variant="danger" onClick={() => onLeave(_id)}>
-                            <Link
-                                to="/changesdonechats"
-                                style={{
-                                    color: "white",
-                                    textDecoration: "none",
-                                }}
-                            >
-                                Remove chat
-                            </Link>
-                        </Button>
-
-                        <Link to={"/main/" + _id} className="changepasLink">
-                            Back to chat
-                        </Link>
+                </div>
+                <div>
+                    <div>
+                        {chatId[_id]?.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>
+                                            <Button
+                                                id={login._id}
+                                                user={login?.login}
+                                                onClick={() => {
+                                                    onDelMember(i);
+                                                    document.getElementById(
+                                                        login._id
+                                                    ).innerHTML = "✓";
+                                                }}
+                                                key={i}
+                                            >
+                                                x
+                                            </Button>
+                                        </div>
+                                    </div>
+                                </>
+                            );
+                        })}
                     </div>
+                    <p className="p">
+                        *Click on "x" and don't forget to click "Apply Changes"
+                    </p>
                 </div>
             </div>
         </div>
@@ -128,6 +258,11 @@ export const CChatEditing = connect(
     (state) => ({
         myProfile: state.promise.myProfile?.payload || {},
         chatId: state.chats,
+        foundUsers: state?.promise?.findUsers?.payload,
     }),
-    { onChat: actionSetChatInfo, onLeave: removeUserChat }
+    {
+        onChat: actionSetChatInfo,
+        
+        onGetUser: actionFindUsers,
+    }
 )(ChatEditing);

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

@@ -25,14 +25,21 @@ const ChatMsgs = ({
         })) || []
     );
 
-    const { getRootProps, getInputProps, isDragActive } = useDropzone({
-        accept: "image/*",
-        maxFiles: 2,
-        onDrop: (acceptedFiles) => {
-            setFiles(acceptedFiles[0]);
+    const { getRootProps, getInputProps } = useDropzone({
+        noKeyboard: true,
+        onDrop: async (acceptedFiles) => {
+           
+            await setFiles([
+                ...files,
+                ...acceptedFiles.map((file) =>
+                    Object.assign(file, {
+                        url: URL.createObjectURL(file),
+                    })
+                ),
+            ])
         },
-    });
-
+    })
+    {console.log(files, "FILES")}
     const [msgsBlock, setMsgsBlock] = useState(0);
 
     let { _id } = useParams();
@@ -44,6 +51,7 @@ const ChatMsgs = ({
     const [text, setText] = useState("");
     const [msgs] = useState(getChat);
 
+    
     const oneChatMsgs = getChat[_id]?.messages;
     return (
         <>
@@ -76,38 +84,42 @@ const ChatMsgs = ({
                             <h2 className="noMsg">No messages</h2>
                         ) : (
                             oneChatMsgs.map((msg) => (
+                                
                                 <div
                                     className={
-                                        msg.owner.nick === nickOwner
+                                        msg?.owner?.nick === nickOwner
                                             ? "msgLi"
                                             : "msgOther"
                                     }
+                                    key={Math.random()}
                                 >
-                                    {/* {msg?.media[0]?.url !== undefined ? (
-                                            <img
-                                                className="msgMedia"
-                                                src={
-                                                    backURL + msg?.media[0]?.url
-                                                }
-                                            />
-                                        ) : (
-                                            ""
-                                        )} */}
+                                
 
-                                        {console.log(msg?.owner.avatar?.url)}
+                                        
                                     <div className="msgBlock">
-                                        {msg?.owner.avatar?.url === undefined ? 
-                                        <div className="avatarStubChat1"></div> :
+                                        {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" }}>
-                                            {msg?.owner.nick}
+                                        
+                                        <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>
                             ))
@@ -127,26 +139,15 @@ const ChatMsgs = ({
                                     })}
                                 >
                                     <input {...getInputProps()} />
-                                    {isDragActive ? (
-                                        <p className="dropZoneStyleBr">
-                                            Drop the files here ...
-                                        </p>
-                                    ) : (
+                                    
                                         <img
                                             src="https://img.icons8.com/ios-filled/344/folder-invoices--v2.png"
                                             className="sandFile"
                                         />
-                                    )}
+                                    
                                 </div>
-                                {/* <img
-                                    src="https://img.icons8.com/ios-filled/344/folder-invoices--v2.png"
-                                    className="sandFile"
-                                    value={text}
-                            onChange={(e) => {
-                                setText(e.target.value);
-                            }}
-                                /> */}
                                 <textarea
+                                    name="inputName"
                                     placeholder="Write a message..."
                                     rows="2"
                                     value={text}
@@ -158,12 +159,17 @@ const ChatMsgs = ({
 
                             <Button
                                 onClick={() =>
-                                    sendMsg(
-                                        getChat[_id]?._id,
-                                        text,
-                                        "media",
-                                        files
-                                    )
+                                    {
+                                        sendMsg(
+                                            getChat[_id]?._id,
+                                            text,
+                                            "media",
+                                            files
+                                        )
+                                        setText("")
+                                        setFiles([])
+                                    }
+                                    
                                 }
                             >
                                 Send a message
@@ -176,10 +182,11 @@ const ChatMsgs = ({
     );
 };
 
+
 export const CChatMsgs = connect(
     (state) => ({
         getChat: state.chats,
-        nickOwner: store.getState().promise.myProfile.payload.nick,
+        nickOwner: store.getState().promise.myProfile.payload?.nick,
     }),
     {
         chatMsgs: actionFullMsgsByChat,

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

@@ -20,6 +20,7 @@ const ChatsAside = ({ chats = [], auth, ownerChats }) => {
     return (
         <>
             <div className="chatsContainer" key={Math.random}>
+                <div>
                 {chats.map((chat, _id) => (
                     <>
                         <Link
@@ -74,6 +75,7 @@ const ChatsAside = ({ chats = [], auth, ownerChats }) => {
                 <Link className="newChatButton" to="/newchat" key={Math.random}>
                     +
                 </Link>
+                </div>
             </div>
         </>
     );

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

@@ -1,61 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { connect } from "react-redux";
-import { backURL } from "../constants";
-import { Link } from "react-router-dom";
-import { AvatarStub, color } from "../components/AvatarStub";
-import { actionFullMsgsByChat } from "../actions";
-import { actionUserFindOne, store } from "../reducers";
-import Button from "react-bootstrap/esm/Button";
-
-
-
-const ChatsPage = ({ chats = [], _id, msgOneChat, msgCount = 20,}) => {
-
-    
-    
-    return (
-        <>
-            <div className="chatsContainer">
-                {chats.map((chat, _id) => (
-                    <>
-                        
-                        <Link className="chatsList"  to={`/main/${chat._id}`}>
-                            {chat.avatar?.url ? (
-                                <img
-                                    className="smallForChat"
-                                    src={backURL + chat.avatar?.url}
-                                />
-                            ) : (
-                                <AvatarStub
-                                    login={
-                                        chat.title !== null
-                                            ? chat.title
-                                            : "chat without title"
-                                    }
-                                    color={color()}
-                                />
-                            )}
-                            <h5 className="chatTitle">
-                                {chat.title !== null
-                                    ? chat.title
-                                    : "chat without title"}
-                            </h5>
-
-                        </Link>
-                    </>
-                ))}
-                <Link className="newChatButton" to="/newchat">
-                    +
-                </Link>
-                
-            </div>
-            
-        </>
-    );
-};
-
-export const CChatsPage = connect(
-    (state) => ({
-        chats: Object.values(state.chats).filter((el) => el._id),
-    }), {msgOneChat : actionFullMsgsByChat}
-)(ChatsPage);

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

@@ -9,9 +9,17 @@ import { actionFullLogin } from "../actions";
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 
-const Login = ({ onLogin }) => {
+
+
+const Login = ({ onLogin, loginCheck }) => {
+
     const [login, setLogin] = useState("");
     const [password, setPassword] = useState("");
+
+    if(loginCheck.token === {}) {
+        alert('error')
+    }
+
     return (
         <div className="formContainerLogin">
             <h1 className="textLogin">Login</h1>
@@ -55,6 +63,7 @@ const Login = ({ onLogin }) => {
                 >
                     <b>Login</b>
                 </Button>
+                
                 <Link to="/registration" className="registerLink alert-link">
                     Don't have an account? Register
                 </Link>
@@ -63,4 +72,4 @@ const Login = ({ onLogin }) => {
     );
 };
 
-export const CLogin = connect(null, { onLogin: actionFullLogin })(Login);
+export const CLogin = connect((state) => ({loginCheck: state.auth}), { onLogin: actionFullLogin })(Login);

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

@@ -1,20 +1,50 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { connect } from "react-redux";
 import { useDropzone } from "react-dropzone";
 import { Link } from "react-router-dom";
 import Button from "react-bootstrap/esm/Button";
-import { Input, InputDebounce } from "../helpers/UserSearch";
-import { CSearchByLogin } from "../helpers/UserSearch";
-
+import { CSearchAvatar } from "../components/Avatar";
 import { actionSetChatInfo } from "../actions";
+import { actionFindUsers } from "../actions";
 
 import { CChatAvatar } from "../components/Avatar";
 
-const ChatPage = ({ onChat, chat, myProfile, create }) => {
+const ChatPage = ({
+    onChat,
+    chat,
+    myProfile,
+    create,
+    onGetUser,
+    foundUsers,
+}) => {
+    const useDebounce = (cb, depArray, delay, onAdd) => {
+        let timeoutRef = useRef();
+        useEffect(() => {
+            clearInterval(timeoutRef.current);
+            timeoutRef.current === undefined
+                ? (timeoutRef.current = -1)
+                : (timeoutRef.current = setTimeout(cb, delay));
+        }, depArray);
+    };
+
+    const [login, setLogin] = useState();
+    useDebounce(() => onGetUser(login), [login], 2000);
+
+    const [open, setOpen] = useState(false);
     const [img, setImg] = useState(null);
     const [title, setTitle] = useState(chat?.title || "");
     const [members, setMembers] = useState(chat?.members || [myProfile]);
 
+    const onAddMember = (newMember) => {
+        setMembers(prepareMembers([...members, newMember]));
+    };
+
+    useEffect(() => {
+        setTitle(chat?.title || "");
+        setImg(null);
+        setMembers(chat?.members || [myProfile]);
+    }, [open]);
+
     const { getRootProps, getInputProps, isDragActive } = useDropzone({
         accept: "image/*",
         maxFiles: 1,
@@ -70,7 +100,55 @@ const ChatPage = ({ onChat, chat, myProfile, create }) => {
                     </div>
 
                     <div className="inputContainer">
-                        <CSearchByLogin/>
+                        <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={() => {
+                                                          onAddMember(user);
+                                                          document.getElementById(
+                                                              user._id + i
+                                                          ).innerHTML = "✓";
+                                                      }}
+                                                  >
+                                                      +
+                                                  </Button>
+                                              </div>
+                                          </div>
+                                      );
+                                  })
+                                : null}
+                        </form>
                     </div>
 
                     <div className="df">
@@ -78,16 +156,18 @@ const ChatPage = ({ onChat, chat, myProfile, create }) => {
                             variant="primary"
                             className="buttonSetting"
                             onClick={() => {
+                                (console.log(prepareMembers(members, "members")))
                                 onChat(
                                     "media",
                                     img,
                                     title,
                                     prepareMembers(members),
-                                    chat?.id
-                                );
-                                
+                                    chat?.id,
+                                    
+                                )
                             }}
                         >
+                            {console.log(members, "members")}
                             <Link
                                 to="/changesdonechats"
                                 style={{
@@ -112,6 +192,7 @@ const ChatPage = ({ onChat, chat, myProfile, create }) => {
 export const CNewChatPage = connect(
     (state) => ({
         myProfile: state.promise.myProfile?.payload || {},
+        foundUsers: state?.promise?.findUsers?.payload,
     }),
-    { onChat: actionSetChatInfo }
+    { onChat: actionSetChatInfo, onGetUser: actionFindUsers }
 )(ChatPage);

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

@@ -37,7 +37,7 @@ const ProfilePage = ({ myProfile, onChanges }) => {
             <div className="profileContainer">
                 <div className="loginNickSetting">
                     <div className="inputContainer">
-                        <label for="loginInput">Enter a new Login: </label>
+                        <label>Enter a new Login: </label>
                         <input
                             className="form-control-editing form-control"
                             id="loginInput"
@@ -50,7 +50,7 @@ const ProfilePage = ({ myProfile, onChanges }) => {
                     </div>
 
                     <div className="inputContainer">
-                        <label for="nickInput">Enter a new Nick: </label>
+                        <label>Enter a new Nick: </label>
                         <input
                             className="form-control-editing form-control"
                             id="nickInput"