ホーム エクスプローラ ヘルプ
サインイン
Sheva77
/
Chat_final_project
Watch 2
Star 0
Fork 0
ファイル 課題 1 プルリクエスト 0 Wiki
ソースを参照

newChat+ava+members sendMsg

sheva77 3 年 前
親
5024219205
コミット
6c961bca39
22 ファイル変更、647 行追加、187 行削除
一括表示 差分情報を表示
  1. 33 0
      111.html
  2. 90 0
      chat_final_bootstrap/src/Actions/ActionsGqlUpsert.js
  3. 0 3
      chat_final_bootstrap/src/Actions/ActionsUser.js
  4. 3 0
      chat_final_bootstrap/src/Actions/index.js
  5. 25 9
      chat_final_bootstrap/src/App.scss
  6. 1 1
      chat_final_bootstrap/src/Components/AdditionalTools.js
  7. 1 1
      chat_final_bootstrap/src/Components/ButtonLogout.js
  8. 36 29
      chat_final_bootstrap/src/Components/ChatContain.js
  9. 7 4
      chat_final_bootstrap/src/Components/ChatsList.js
  10. 8 8
      chat_final_bootstrap/src/Components/LoginInfo.js
  11. 176 0
      chat_final_bootstrap/src/Components/NewChatDashBoard.js
  12. 13 2
      chat_final_bootstrap/src/Components/index.js
  13. 12 10
      chat_final_bootstrap/src/Layout/AllUsersList.js
  14. 7 5
      chat_final_bootstrap/src/Layout/Sidebar.js
  15. 68 7
      chat_final_bootstrap/src/Pages/PageMain.js
  16. 8 55
      chat_final_bootstrap/src/Pages/PageNewChat.js
  17. 2 2
      chat_final_bootstrap/src/Pages/PageSearch.js
  18. 41 22
      chat_final_bootstrap/src/Pages/PageUpload.js
  19. 2 2
      chat_final_bootstrap/src/Reducers/index.js
  20. 20 0
      fetch_authtoken.txt
  21. 94 0
      temp2 - дерево вариантов.js
  22. 0 27
      temp2.js

+ 33 - 0
111.html
ファイルの表示 

@@ -0,0 +1,33 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+    <head>
 
+        <meta charset="UTF-8" />
 
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+        <title>Document</title>
 
+    </head>
 
+    <body>
 
+        <input type="file" onchange="previewFile()" /><br />
 
+        <img src="" height="200" alt="Image preview..." />
 
+        <!-- // -->
 
+        <!--  -->
 
+        <script>
 
+            function previewFile() {
 
+                var preview = document.querySelector("img");
 
+                var file = document.querySelector("input[type=file]").files[0];
 
+                var reader = new FileReader();
 
+                console.log(preview, file, reader);
 
+
 
+                reader.onloadend = function () {
 
+                    preview.src = reader.result;
 
+                };
 
+
 
+                if (file) {
 
+                    reader.readAsDataURL(file);
 
+                } else {
 
+                    preview.src = "";
 
+                }
 
+            }
 
+        </script>
 
+    </body>
 
+</html>

+ 90 - 0
chat_final_bootstrap/src/Actions/ActionsGqlUpsert.js
ファイルの表示 

@@ -0,0 +1,90 @@
 
+//
 
+//
 
+import { urlUploadConst } from "../const";
 
+import { actionPromise } from "../Reducers";
 
+import { gql } from "../Actions";
 
+
 
+export const actionMessageUpsert = ({ text, chatId }) => async (dispatch) => {
 
+    console.log("actionMessageUpsert --- ", text, chatId);
 
+
 
+    let msgData = await dispatch(
 
+        actionPromise(
 
+            "MessageUpsert",
 
+            gql(
 
+                `mutation MessageUpsert($messageData:MessageInput){
 
+                    MessageUpsert(message: $messageData){
 
+                        _id
 
+                    }
 
+                }`,
 
+                { messageData: { text, chat: { _id: chatId } } }
 
+            )
 
+        )
 
+    );
 
+
 
+    console.log("MessageUpsert - ", msgData);
 
+
 
+    if (msgData && msgData.data && msgData.data.MessageUpsert && msgData.data.MessageUpsert._id) {
 
+        console.log("MessageUpsert - ", msgData);
 
+    }
 
+};
 
+
 
+const actionMediaUpsert = ({ chatId, mediaId }) => async (dispatch) => {
 
+    let mediaData = await dispatch(
 
+        actionPromise(
 
+            "MediaUpsert",
 
+            gql(
 
+                `mutation med($mediaData:MediaInput){
 
+                    MediaUpsert(media: $mediaData){
 
+                        _id
 
+                        owner{login}
 
+                        text
 
+                        url
 
+                        type
 
+                        userAvatar{login}
 
+                        chatAvatars{title}
 
+                    }
 
+                }`,
 
+                { mediaData: { _id: mediaId, chatAvatars: [{ _id: chatId }] } }
 
+            )
 
+        )
 
+    );
 
+};
 
+
 
+export const actionCreateNewChat = ({ title, members, avaFile }) => async (dispatch) => {
 
+    members = members.map((mem) => ({ _id: mem._id }));
 
+
 
+    let chatData = await dispatch(
 
+        actionPromise(
 
+            "ChatUpsert",
 
+            gql(
 
+                `mutation ChatUpsert($newChat:ChatInput){
 
+                    ChatUpsert(chat:$newChat){
 
+                        _id
 
+                        title
 
+                        owner{login}
 
+                        members{login}
 
+                    }
 
+                }`,
 
+                { newChat: { title, members } }
 
+            )
 
+        )
 
+    );
 
+
 
+    if (avaFile) {
 
+        let dataSingl = new FormData();
 
+        dataSingl.set("media", avaFile);
 
+        let avaUploadResult = await fetch(`${urlUploadConst}/upload`, {
 
+            method: "POST",
 
+            headers: localStorage.authToken ? { Authorization: "Bearer " + localStorage.authToken } : {},
 
+            body: dataSingl,
 
+        }).then((res) => res.json());
 
+
 
+        dispatch(actionMediaUpsert({ chatId: chatData.data.ChatUpsert._id, mediaId: avaUploadResult._id }));
 
+    }
 
+
 
+    // if (userData && userData.data.UserFindOne) {
 
+    //     dispatch(actionAuthInfo(userData.data.UserFindOne));
 
+    // } else {
 
+    //     console.log("UserFindOne - ошибка");
 
+    // }
 
+};

+ 0 - 3
chat_final_bootstrap/src/Actions/ActionsUser.js
ファイルの表示 

@@ -1,3 +0,0 @@
 
-//
 
-//
 
-//

+ 3 - 0
chat_final_bootstrap/src/Actions/index.js
ファイルの表示 

@@ -8,6 +8,7 @@ import {
 
 } from "./ActionsGql";
 
 } from "./ActionsGql";
 
 import { actionMsgNewChat, actionCurChatId, actionMsgInsertInHead } from "./ActionsMsg";
 
 import { actionMsgNewChat, actionCurChatId, actionMsgInsertInHead } from "./ActionsMsg";
 
 import { actionAddUserToChatList, actionDelUserFromChatList, actionNewChatList } from "./ActionsChatUsers";
 
 import { actionAddUserToChatList, actionDelUserFromChatList, actionNewChatList } from "./ActionsChatUsers";
 
+import { actionCreateNewChat, actionMessageUpsert } from "./ActionsGqlUpsert";
 
 
 
 export {
 
 export {
 
     actionUserInfo,
 
     actionUserInfo,
 
@@ -26,4 +27,6 @@ export {
 
     actionAddUserToChatList,
 
     actionAddUserToChatList,
 
     actionNewChatList,
 
     actionNewChatList,
 
     actionAllUsersFind,
 
     actionAllUsersFind,
 
+    actionCreateNewChat,
 
+    actionMessageUpsert,
 
 };
 
 };

+ 25 - 9
chat_final_bootstrap/src/App.scss
ファイルの表示 

@@ -65,23 +65,34 @@ body {
 
         height: 48px;
 
         height: 48px;
 
     }
 
     }
 
 }
 
 }
 
-
 
+//
 
+//
 
+//
 
+//
 
+//
 
+//
 
+//
 
+.pageMain_ChatMessages {
 
+    max-height: calc(100vh - 250px);
 
+    min-height: calc(100vh - 250px);
 
+}
 
 .MessagesList {
 
 .MessagesList {
 
-    max-height: calc(100vh - 350px);
 
+    max-height: calc(100vh - 330px);
 
+    min-height: calc(100vh - 330px);
 
+    // height: auto;
 
     overflow: auto;
 
     overflow: auto;
 
 }
 
 }
 
 
 
+.MessageInput {
 
+    max-height: 135px;
 
+    min-height: 135px;
 
+    background-color: darkslategray;
 
+}
 
+
 
 .fonRomaska {
 
 .fonRomaska {
 
     background: url("./images/romashki_1920x1080.jpg");
 
     background: url("./images/romashki_1920x1080.jpg");
 
 }
 
 }
 
 
 
-// .Messages {
 
-
 
-//     input {
 
-//         width: 70%;
 
-//     }
 
-// }
 
-
 
 .messageItem {
 
 .messageItem {
 
     // width: 75%;
 
     // width: 75%;
 
     width: calc(100% - 120px);
 
     width: calc(100% - 120px);
 
@@ -113,6 +124,11 @@ body {
 
     }
 
     }
 
 }
 
 }
 
 
 
+.messagesArea {
 
+    max-height: calc(100vh - 20px);
 
+    background-color: red;
 
+}
 
+
 
 .ChatDashBoard {
 
 .ChatDashBoard {
 
     min-height: calc(100vh - 110px);
 
     min-height: calc(100vh - 110px);
 
     padding: 20px;
 
     padding: 20px;

+ 1 - 1
chat_final_bootstrap/src/Components/AdditionalTools.js
ファイルの表示 

@@ -32,7 +32,7 @@ export const AdditionalTools = ({ _userId, onSearch = null }) => {
 
                     history.push("/newchat");
 
                     history.push("/newchat");
 
                 }}
 
                 }}
 
             >
 
             >
 
-                New Chat
 
+                <i class="bi bi-chat-left-text"></i> New Chat
 
             </Button>
 
             </Button>
 
             {/* <Button className="gradient" variant="secondary btn-sm  m-2">
 
             {/* <Button className="gradient" variant="secondary btn-sm  m-2">
 
                 Join to another chat
 
                 Join to another chat

+ 1 - 1
chat_final_bootstrap/src/Components/ButtonLogout.js
ファイルの表示 

@@ -4,7 +4,7 @@ import { Button } from "react-bootstrap";
 
 
 
 const ButtonLogout = ({ onLogout, isLoggedIn }) => (
 
 const ButtonLogout = ({ onLogout, isLoggedIn }) => (
 
     <Button className="gradient" variant="secondary btn-sm" onClick={onLogout} disabled={!isLoggedIn}>
 
     <Button className="gradient" variant="secondary btn-sm" onClick={onLogout} disabled={!isLoggedIn}>
 
-        Logout
 
+        <i class="bi bi-door-open"></i> Logout
 
     </Button>
 
     </Button>
 
 );
 
 );
 
 export const CButtonLogout = connect((s) => ({ isLoggedIn: s.auth.login }), { onLogout: actionAuthLogout })(
 
 export const CButtonLogout = connect((s) => ({ isLoggedIn: s.auth.login }), { onLogout: actionAuthLogout })(

+ 36 - 29
chat_final_bootstrap/src/Components/ChatContain.js
ファイルの表示 

@@ -145,7 +145,9 @@ const CMessagesList = connect(
 
     { getMoreMessages: actionSearchMessagesByChatId }
 
     { getMoreMessages: actionSearchMessagesByChatId }
 
 )(MessagesList);
 
 )(MessagesList);
 
 
 
-const Messages = ({ _id = "", messages, getMsg }) => {
 
+const Messages = ({ _id = "", chatInfo, messages, getMsg }) => {
 
+    if (chatInfo) chatInfo = chatInfo.filter((chat) => chat._id === _id);
 
+
 
     // id чата,
 
     // id чата,
 
 
 
     // console.log("Messages - id - ", _id);
 
     // console.log("Messages - id - ", _id);
 
@@ -154,8 +156,8 @@ const Messages = ({ _id = "", messages, getMsg }) => {
 
     //     !(messages && messages[_id] && messages[_id][0] && messages[_id][0].chat && messages[_id][0].chat._id)
 
     //     !(messages && messages[_id] && messages[_id][0] && messages[_id][0].chat && messages[_id][0].chat._id)
 
     // );
 
     // );
 
 
 
-    let avatar = messages && messages[_id] && messages[_id][0] && messages[_id][0].chat && messages[_id][0].chat.avatar;
 
-    let title = messages && messages[_id] && messages[_id][0] && messages[_id][0].chat && messages[_id][0].chat.title;
 
+    let avatar = chatInfo && chatInfo[0] && chatInfo[0].avatar && chatInfo[0].avatar.url;
 
+    let title = chatInfo && chatInfo[0] && chatInfo[0].title;
 
 
 
     useEffect(() => {
 
     useEffect(() => {
 
         if (
 
         if (
 
@@ -168,34 +170,39 @@ const Messages = ({ _id = "", messages, getMsg }) => {
 
     }, [_id]);
 
     }, [_id]);
 
 
 
     return (
 
     return (
 
-        <div>
 
-            <div className="position-relative  mb-3 border-bottom border-2 border-success ">
 
-                <div className="d-flex justify-content-start align-items-center">
 
-                    <div className="avatarka">
 
-                        {avatar && avatar.url ? (
 
-                            <img src={`${urlUploadConst}/${avatar.url}`}></img>
 
-                        ) : (
 
-                            <div className="d-flex justify-content-center align-items-center bg-success border border-2 border-success gradient">
 
-                                <div className="fs-5 text-light fw-bolder">
 
-                                    {title &&
 
-                                        `${title.split(" ")[0][0].toUpperCase()}` +
 
-                                            `${
 
-                                                (title.split(" ").slice(1).pop() &&
 
-                                                    title.split(" ").slice(1).pop()[0].toUpperCase()) ||
 
-                                                ""
 
-                                            }`}
 
+        <div className="mb-2">
 
+            {chatInfo && chatInfo[0] && (
 
+                <div className="position-relative  mb-3 border-bottom border-2 border-success ">
 
+                    <div className="d-flex justify-content-start align-items-center">
 
+                        <div className="avatarka">
 
+                            {avatar ? (
 
+                                <img
 
+                                    src={`${urlUploadConst}/${avatar}`}
 
+                                    className=" border border-2 border-success"
 
+                                ></img>
 
+                            ) : (
 
+                                <div className="d-flex justify-content-center align-items-center bg-success border border-2 border-success gradient">
 
+                                    <div className="fs-5 text-light fw-bolder">
 
+                                        {title &&
 
+                                            `${title.split(" ")[0][0].toUpperCase()}` +
 
+                                                `${
 
+                                                    (title.split(" ").slice(1).pop() &&
 
+                                                        title.split(" ").slice(1).pop()[0].toUpperCase()) ||
 
+                                                    ""
 
+                                                }`}
 
+                                    </div>
 
                                 </div>
 
                                 </div>
 
-                            </div>
 
-                        )}
 
+                            )}
 
+                        </div>
 
+
 
+                        <div className="fs-4 fw-bolder ms-2">{`${title}`}</div>
 
                     </div>
 
                     </div>
 
 
 
-                    <div className="fs-4 fw-bolder ms-2">{`${title}`}</div>
 
+                    <span className="position-absolute bottom-0 end-0  badge rounded-pill bg-secondary">
 
+                        {` _chatId: ${_id}`} <span className="visually-hidden">id чата</span>
 
+                    </span>
 
                 </div>
 
                 </div>
 
-
 
-                <span className="position-absolute bottom-0 end-0  badge rounded-pill bg-secondary">
 
-                    {` _chatId: ${_id}`} <span className="visually-hidden">id чата</span>
 
-                </span>
 
-            </div>
 
+            )}
 
             <div>
 
             <div>
 
                 <CMessagesList />
 
                 <CMessagesList />
 
             </div>
 
             </div>
 
@@ -203,9 +210,9 @@ const Messages = ({ _id = "", messages, getMsg }) => {
 
     );
 
     );
 
 };
 
 };
 
 
 
-const CMessages = connect((s) => ({ _id: s.curChatId.curChatId, messages: s.msg }), {
 
+const CMessages = connect((s) => ({ _id: s.curChatId.curChatId, messages: s.msg, chatInfo: s.auth.chats }), {
 
     getMsg: actionGetMessagesByChatId,
 
     getMsg: actionGetMessagesByChatId,
 
 })(Messages);
 
 })(Messages);
 
 // - id chata
 
 // - id chata
 
 
 
-export const ChatContain = ({ _chatId = "" }) => <div>{!!_chatId && <CMessages />}</div>;
 
+export const ChatMessages = ({ _chatId = "" }) => <div>{!!_chatId && <CMessages />}</div>;

+ 7 - 4
chat_final_bootstrap/src/Components/ChatsList.js
ファイルの表示 

@@ -28,15 +28,18 @@ const ChatItem = ({ _id = "", avatar, title, messages, userId, currentChatId })
 
                     <div className="d-flex justify-content-start align-items-center">
 
                     <div className="d-flex justify-content-start align-items-center">
 
                         <div className="avatarka ">
 
                         <div className="avatarka ">
 
                             {avatar && avatar.url ? (
 
                             {avatar && avatar.url ? (
 
-                                <img src={`${urlUploadConst}/${avatar.url}`}></img>
 
+                                <img
 
+                                    src={`${urlUploadConst}/${avatar.url}`}
 
+                                    className=" border border-2 border-success"
 
+                                ></img>
 
                             ) : (
 
                             ) : (
 
                                 <div className="d-flex justify-content-center align-items-center bg-success border border-2 border-success gradient">
 
                                 <div className="d-flex justify-content-center align-items-center bg-success border border-2 border-success gradient">
 
                                     <div className="fs-5 text-light fw-bolder">
 
                                     <div className="fs-5 text-light fw-bolder">
 
                                         {title &&
 
                                         {title &&
 
-                                            `${title.split(" ")[0][0].toUpperCase()}` +
 
+                                            `${title.trim().split(" ")[0][0].toUpperCase()}` +
 
                                                 `${
 
                                                 `${
 
-                                                    (title.split(" ").slice(1).pop() &&
 
-                                                        title.split(" ").slice(1).pop()[0].toUpperCase()) ||
 
+                                                    (title.trim().split(" ").slice(1).pop() &&
 
+                                                        title.trim().split(" ").slice(1).pop()[0].toUpperCase()) ||
 
                                                     ""
 
                                                     ""
 
                                                 }`}
 
                                                 }`}
 
                                     </div>
 
                                     </div>

+ 8 - 8
chat_final_bootstrap/src/Components/LoginInfo.js
ファイルの表示 

@@ -5,20 +5,20 @@ import { actionUserInfo } from "../Actions";
 
 
 
 const LoginInfo = ({ login, nick, _id, getUserInfo }) => {
 
 const LoginInfo = ({ login, nick, _id, getUserInfo }) => {
 
     useEffect(() => {
 
     useEffect(() => {
 
-        getUserInfo(_id);
 
-    }, [_id]);
 
-
 
-    if (!nick) {
 
-        nick = login;
 
-    }
 
+        // здесь нужен именно undefined, так как из базы может прийти null или ""
 
+        // undefined - значит еще не было инфы из базы
 
+        if (nick === undefined) {
 
+            getUserInfo(_id);
 
+        }
 
+    }, []);
 
 
 
     return (
 
     return (
 
         <span className="mx-2 text-white ">
 
         <span className="mx-2 text-white ">
 
             {login ? (
 
             {login ? (
 
                 <span className="text-nowrap">
 
                 <span className="text-nowrap">
 
-                    <span className="text-nowrap"> {`${login}`} </span>
 
+                    <span className="text-nowrap"> {`${nick ? nick : login}`} </span>
 
                     {/* {" / "}
 
                     {/* {" / "}
 
-                    <span className="text-nowrap">{`Nick: ${nick}`}</span>
 
+                    <span className="text-nowrap">{`Login: ${login}`}</span>
 
                     <br />
 
                     <br />
 
                     <span className="text-nowrap">{`_id: ${_id}`}</span> */}
 
                     <span className="text-nowrap">{`_id: ${_id}`}</span> */}
 
                 </span>
 
                 </span>

+ 176 - 0
chat_final_bootstrap/src/Components/NewChatDashBoard.js
ファイルの表示 

@@ -0,0 +1,176 @@
 
+import { ButtonToMain } from "../Components";
 
+import { urlUploadConst } from "../const";
 
+import { actionDelUserFromChatList, actionCreateNewChat } from "../Actions";
 
+import { connect } from "react-redux";
 
+import { useEffect } from "react";
 
+import { useState } from "react";
 
+import { store } from "../Reducers";
 
+import { useRef } from "react";
 
+import history from "../history";
 
+import { CUserInfo } from "../Layout";
 
+import { CAllUsersList } from "../Layout";
 
+import { useDropzone } from "react-dropzone";
 
+import logo from "../images/logo23.png";
 
+import chat_square_text from "../icons/chat-square-text.svg";
 
+import userEvent from "@testing-library/user-event";
 
+
 
+const MemberItem = ({ member, myId, dellFromList = null }) => {
 
+    return (
 
+        <span className="fs-5">
 
+            <span className="badge bg-success  m-1 rounded-pill gradient">
 
+                {member.nick || member.login}
 
+
 
+                <button
 
+                    type="button"
 
+                    className="btn-close ms-2 text-light "
 
+                    aria-label="Close"
 
+                    disabled={member._id === myId}
 
+                    onClick={() => {
 
+                        if (typeof dellFromList === "function") dellFromList(member._id);
 
+                    }}
 
+                ></button>
 
+            </span>
 
+        </span>
 
+    );
 
+};
 
+
 
+const CMemberItem = connect(
 
+    (s, { member }) => ({
 
+        member,
 
+        myId: s.auth.payloadId,
 
+    }),
 
+    { dellFromList: actionDelUserFromChatList }
 
+)(MemberItem);
 
+
 
+const NewChatDashBoard = ({ members = {}, createNewChat = null }) => {
 
+    const [chatMembers, setChatMembers] = useState(Object.values(members));
 
+    const [inpTitle, setInpTitle] = useState("");
 
+    const uploadRef = useRef(null);
 
+    const uploadImgRef = useRef(null);
 
+    const [srcAva, setSrcAva] = useState("");
 
+
 
+    // console.log(members);
 
+
 
+    useEffect(() => {
 
+        setChatMembers(Object.values(members));
 
+    }, [members]);
 
+
 
+    const doCreateNewChat = () => {
 
+        createNewChat({
 
+            title: inpTitle,
 
+            members: chatMembers,
 
+            avaFile: uploadRef.current && uploadRef.current.files && uploadRef.current.files[0],
 
+        });
 
+    };
 
+
 
+    function previewFile() {
 
+        let preview = uploadImgRef.current;
 
+        let file = uploadRef.current && uploadRef.current.files && uploadRef.current.files[0];
 
+        let reader = new FileReader();
 
+
 
+        reader.onloadend = function () {
 
+            setSrcAva(reader.result);
 
+        };
 
+
 
+        if (file) {
 
+            // console.log(file);
 
+            reader.readAsDataURL(file);
 
+        } else {
 
+            setSrcAva("");
 
+        }
 
+    }
 
+
 
+    return (
 
+        <>
 
+            <div className="ChatDashBoard bg-light">
 
+                <h4>ChatDashBoard</h4>
 
+                <table className="table table-bordered align-middle">
 
+                    <tbody>
 
+                        <tr>
 
+                            <td className="fw-bolder">Chat title:</td>
 
+                            <td>
 
+                                <input
 
+                                    className="form-control mb-2 p-2 border border-success border-2"
 
+                                    placeholder="Input title for new chat"
 
+                                    onChange={(e) => setInpTitle(e.target.value)}
 
+                                ></input>
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>Chat avatar:</td>
 
+                            <td>
 
+                                <div className="avatarka ">
 
+                                    {srcAva ? (
 
+                                        <img
 
+                                            // src={`${urlUploadConst}/${avatarUrl}`}
 
+                                            src={srcAva}
 
+                                            className="border border-2 border-success"
 
+                                        ></img>
 
+                                    ) : (
 
+                                        <div className="d-flex justify-content-center align-items-center bg-success border border-2 border-success gradient">
 
+                                            <div className="fs-5 text-light fw-bolder">
 
+                                                {!!inpTitle &&
 
+                                                    `${
 
+                                                        inpTitle.trim().split(" ")[0] &&
 
+                                                        inpTitle.trim().split(" ")[0][0] &&
 
+                                                        inpTitle.trim().split(" ")[0][0].toUpperCase()
 
+                                                    }` +
 
+                                                        `${
 
+                                                            (inpTitle.trim().split(" ").slice(1).pop() &&
 
+                                                                inpTitle.trim().split(" ").slice(1).pop()[0] &&
 
+                                                                inpTitle
 
+                                                                    .trim()
 
+                                                                    .split(" ")
 
+                                                                    .slice(1)
 
+                                                                    .pop()[0]
 
+                                                                    .toUpperCase()) ||
 
+                                                            ""
 
+                                                        }`}
 
+                                            </div>
 
+                                        </div>
 
+                                    )}
 
+                                </div>
 
+                                <input
 
+                                    type="file"
 
+                                    onChange={previewFile}
 
+                                    ref={uploadRef}
 
+                                    accept="image/*,image/jpeg"
 
+                                    className="form-control form-control-sm m-2"
 
+                                    aria-label="file example"
 
+                                />
 
+                                {/* <br />
 
+                                <img src={srcAva} height="200" alt="Image preview..." ref={uploadImgRef}></img> */}
 
+
 
+                                {/*  */}
 
+
 
+                                {/* <span className="avatarka">
 
+                                    <img
 
+                                        src={chat_square_text}
 
+                                        className="border border-2 border-success bg-light "
 
+                                        alt="Avatar"
 
+                                    />
 
+                                </span> */}
 
+                            </td>
 
+                        </tr>
 
+                        <tr>
 
+                            <td>Chat members:</td>
 
+                            <td>
 
+                                {chatMembers.map((member) => (
 
+                                    <CMemberItem key={member._id} member={member} />
 
+                                ))}
 
+                            </td>
 
+                        </tr>
 
+                    </tbody>
 
+                </table>
 
+                <button className="btn-success gradient rounded" disabled={!inpTitle} onClick={doCreateNewChat}>
 
+                    Create new chat
 
+                </button>
 
+                {!inpTitle && <span className="text-danger"> You should fill in the 'Chat title' field.</span>}
 
+            </div>
 
+        </>
 
+    );
 
+};
 
+
 
+export const CNewChatDashBoard = connect((s) => ({ members: s.newChatUsers }), { createNewChat: actionCreateNewChat })(
 
+    NewChatDashBoard
 
+);

+ 13 - 2
chat_final_bootstrap/src/Components/index.js
ファイルの表示 

@@ -1,10 +1,21 @@
 
 import { CAdditionalTools } from "./AdditionalTools";
 
 import { CAdditionalTools } from "./AdditionalTools";
 
 import { ChatsList } from "./ChatsList";
 
 import { ChatsList } from "./ChatsList";
 
-import { ChatContain } from "./ChatContain";
 
+import { ChatMessages } from "./ChatMessages";
 
 import { CButtonLogout } from "./ButtonLogout";
 
 import { CButtonLogout } from "./ButtonLogout";
 
 import { CButtonUpload } from "./ButtonUpload";
 
 import { CButtonUpload } from "./ButtonUpload";
 
 import { ButtonToMain } from "./ButtonToMain";
 
 import { ButtonToMain } from "./ButtonToMain";
 
 import { CLoginInfo } from "./LoginInfo";
 
 import { CLoginInfo } from "./LoginInfo";
 
 import { Counter } from "./Counter";
 
 import { Counter } from "./Counter";
 
+import { CNewChatDashBoard } from "./NewChatDashBoard";
 
 
 
-export { CAdditionalTools, ChatsList, ChatContain, CButtonLogout, CLoginInfo, CButtonUpload, ButtonToMain, Counter };
 
+export {
 
+    CAdditionalTools,
 
+    ChatsList,
 
+    ChatMessages,
 
+    CButtonLogout,
 
+    CLoginInfo,
 
+    CButtonUpload,
 
+    ButtonToMain,
 
+    Counter,
 
+    CNewChatDashBoard,
 
+};

+ 12 - 10
chat_final_bootstrap/src/Layout/AllUsersList.js
ファイルの表示 

@@ -45,14 +45,13 @@ const AllUsersConst = [
 
     },
 
     },
 
 ];
 
 ];
 
 
 
-const UserItem = ({ _id, login, nick, avatar, myId, addUserToList = null, delUserFromList = null }) => {
 
-    const [isSelected, setIsSelected] = useState(false);
 
+const UserItem = ({ _id, login, nick, avatar, myId, addUserToList = null, delUserFromList = null, newChatUsers }) => {
 
     const avatarUrl = avatar && avatar.url;
 
     const avatarUrl = avatar && avatar.url;
 
     nick = !!nick ? nick : login;
 
     nick = !!nick ? nick : login;
 
 
 
     const doSelectUser = () => {
 
     const doSelectUser = () => {
 
         if (_id !== myId) {
 
         if (_id !== myId) {
 
-            if (isSelected) {
 
+            if (_id in newChatUsers) {
 
                 if (typeof addUserToList === "function") {
 
                 if (typeof addUserToList === "function") {
 
                     delUserFromList(_id);
 
                     delUserFromList(_id);
 
                 }
 
                 }
 
@@ -61,7 +60,6 @@ const UserItem = ({ _id, login, nick, avatar, myId, addUserToList = null, delUse
 
                     addUserToList({ _id, login, nick, avatar });
 
                     addUserToList({ _id, login, nick, avatar });
 
                 }
 
                 }
 
             }
 
             }
 
-            setIsSelected((prev) => !prev);
 
         }
 
         }
 
     };
 
     };
 
 
 
@@ -69,7 +67,7 @@ const UserItem = ({ _id, login, nick, avatar, myId, addUserToList = null, delUse
 
         <>
 
         <>
 
             <li
 
             <li
 
                 className={`list-group-item list-group-item-${
 
                 className={`list-group-item list-group-item-${
 
-                    isSelected || _id === myId ? "success" : "light"
 
+                    _id in newChatUsers || _id === myId ? "success" : "light"
 
                 } m-1 gradient shadow-sm border-2 `}
 
                 } m-1 gradient shadow-sm border-2 `}
 
                 onClick={doSelectUser}
 
                 onClick={doSelectUser}
 
             >
 
             >
 
@@ -110,12 +108,15 @@ const UserItem = ({ _id, login, nick, avatar, myId, addUserToList = null, delUse
 
     );
 
     );
 
 };
 
 };
 
 
 
-const CUserItem = connect(null, { delUserFromList: actionDelUserFromChatList, addUserToList: actionAddUserToChatList })(
 
-    UserItem
 
-);
 
+const CUserItem = connect(
 
+    (s) => ({
 
+        newChatUsers: s.newChatUsers,
 
+    }),
 
+    { delUserFromList: actionDelUserFromChatList, addUserToList: actionAddUserToChatList }
 
+)(UserItem);
 
 
 
 const AllUsersList = ({
 
 const AllUsersList = ({
 
-    searchUserResultArr = [],
 
+    searchUserResultArr,
 
     myId,
 
     myId,
 
     myLogin,
 
     myLogin,
 
     myNick,
 
     myNick,
 
@@ -127,6 +128,7 @@ const AllUsersList = ({
 
     //  FIXME: следующая строка - для отладки без инета
 
     //  FIXME: следующая строка - для отладки без инета
 
     // searchUserResultArr = AllUsersConst;
 
     // searchUserResultArr = AllUsersConst;
 
 
 
+    // создаем новый список пользователей нового чата со мной во главе
 
     useEffect(() => {
 
     useEffect(() => {
 
         if (typeof createNewChatList === "function")
 
         if (typeof createNewChatList === "function")
 
             createNewChatList({ _id: myId, login: myLogin, nick: myNick, avatar: { url: myAvatarUrl } });
 
             createNewChatList({ _id: myId, login: myLogin, nick: myNick, avatar: { url: myAvatarUrl } });
 
@@ -137,7 +139,7 @@ const AllUsersList = ({
 
     // если из базы ничего еще не пришло по поиску пользователей,
 
     // если из базы ничего еще не пришло по поиску пользователей,
 
     // то посмотрим на всех, с кeм мы вообще уже общались в чатах
 
     // то посмотрим на всех, с кeм мы вообще уже общались в чатах
 
 
 
-    if (!searchUserStr || !searchUserResultArr || !searchUserResultArr.length) {
 
+    if (!searchUserStr || !searchUserResultArr) {
 
         let tempObj = {};
 
         let tempObj = {};
 
         for (let chat of myChats) {
 
         for (let chat of myChats) {
 
             for (let member of chat.members) {
 
             for (let member of chat.members) {

+ 7 - 5
chat_final_bootstrap/src/Layout/Sidebar.js
ファイルの表示 

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

+ 68 - 7
chat_final_bootstrap/src/Pages/PageMain.js
ファイルの表示 

@@ -1,10 +1,68 @@
 
-import { ChatContain } from "../Components";
 
+import { ChatMessages } from "../Components";
 
 import { Sidebar } from "../Layout";
 
 import { Sidebar } from "../Layout";
 
 import { store } from "../Reducers";
 
 import { store } from "../Reducers";
 
 import history from "../history";
 
 import history from "../history";
 
-import { actionSearchMessagesByChatId, actionCurChatId } from "../Actions";
 
+import { actionSearchMessagesByChatId, actionCurChatId, actionMessageUpsert } from "../Actions";
 
 import { connect } from "react-redux";
 
 import { connect } from "react-redux";
 
-import { useState, useEffect } from "react";
 
+import { useState, useEffect, useRef } from "react";
 
+import userEvent from "@testing-library/user-event";
 
+
 
+const MessageInput = ({ curChatId: { curChatId } = {}, messageUpsert }) => {
 
+    const textRef = useRef("");
 
+    const [text, setText] = useState("");
 
+
 
+    const textTyping = (e) => {
 
+        setText(e.target.value);
 
+        // console.log(e);
 
+    };
 
+
 
+    // отправка по Ctrl+Enter но не по Enter
 
+    const sendMsgByEnterKey = (e) => {
 
+        if (["NumpadEnter", "Enter"].includes(e.code) && e.ctrlKey && text.trim()) {
 
+            sendMsg();
 
+        }
 
+    };
 
+
 
+    const sendMsg = () => {
 
+        if (text.trim()) {
 
+            // console.log(text.trim());
 
+            setText("");
 
+            textRef.current.value = "";
 
+            messageUpsert({ text: text.trim(), chatId: curChatId });
 
+        }
 
+    };
 
+
 
+    return (
 
+        <>
 
+            {curChatId && (
 
+                <div className="bg-light shadow-sm border border-2 rounded-3 MessageInput">
 
+                    {/* <div> InputArea</div>
 
+                    <div> {`${curChatId}`}</div> */}
 
+                    <div className="position-relative">
 
+                        <textarea
 
+                            className="form-control h-75"
 
+                            placeholder="Write a message..."
 
+                            ref={textRef}
 
+                            onChange={textTyping}
 
+                            onKeyUp={sendMsgByEnterKey}
 
+                        ></textarea>
 
+                        <span
 
+                            className="position-absolute bottom-0 end-0  badge rounded-pill bg-success"
 
+                            role-button="true"
 
+                            onClick={sendMsg}
 
+                        >
 
+                            <i class="bi bi-chat-dots"></i> <i class="bi bi-reply-fill"></i>
 
+                        </span>
 
+                    </div>
 
+                </div>
 
+            )}
 
+        </>
 
+    );
 
+};
 
+
 
+export const CMessageInput = connect((s) => ({ curChatId: s.curChatId }), { messageUpsert: actionMessageUpsert })(
 
+    MessageInput
 
+);
 
 
 
 //prettier-ignore
 
 //prettier-ignore
 
 const PageMain = ({
 
 const PageMain = ({
 
@@ -42,16 +100,19 @@ const PageMain = ({
 
         if (typeof setCurId === "function") setCurId(_chatId);
 
         if (typeof setCurId === "function") setCurId(_chatId);
 
     }, [_chatId]);
 
     }, [_chatId]);
 
 
 
-    
+  
 
 
     return (
 
     return (
 
-        <div className="container-fluid">
 
+        <div className="container-fluid ">
 
             <div className="row g-3">
 
             <div className="row g-3">
 
-                <div className="col-md-4">
 
+                <div className="col-md-4  bg-light">
 
                     <Sidebar />
 
                     <Sidebar />
 
                 </div>
 
                 </div>
 
                 <div className="col-md-8">
 
                 <div className="col-md-8">
 
-                    <ChatContain _chatId={_chatId} />
 
+                    <div className="pageMain_ChatMessages mb-2">
 
+                        <ChatMessages _chatId={_chatId} />
 
+                    </div>
 
+                    <CMessageInput />
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>

+ 8 - 55
chat_final_bootstrap/src/Pages/PageNewChat.js
ファイルの表示 

@@ -1,6 +1,6 @@
 
-import { ButtonToMain } from "../Components";
 
+import { ButtonToMain, CNewChatDashBoard } from "../Components";
 
 import { urlUploadConst } from "../const";
 
 import { urlUploadConst } from "../const";
 
-import { actionGetAllUsers, actionAllUsersFind } from "../Actions";
 
+import { actionGetAllUsers, actionAllUsersFind, actionDelUserFromChatList } from "../Actions";
 
 import { connect } from "react-redux";
 
 import { connect } from "react-redux";
 
 import { useEffect } from "react";
 
 import { useEffect } from "react";
 
 import { useState } from "react";
 
 import { useState } from "react";
 
@@ -9,58 +9,10 @@ import { useRef } from "react";
 
 import history from "../history";
 
 import history from "../history";
 
 import { CUserInfo } from "../Layout";
 
 import { CUserInfo } from "../Layout";
 
 import { CAllUsersList } from "../Layout";
 
 import { CAllUsersList } from "../Layout";
 
+import { useDropzone } from "react-dropzone";
 
 import logo from "../images/logo23.png";
 
 import logo from "../images/logo23.png";
 
 import chat_square_text from "../icons/chat-square-text.svg";
 
 import chat_square_text from "../icons/chat-square-text.svg";
 
-
 
-const MemberItem = ({ member }) => <pre>{member.login}</pre>;
 
-
 
-const ChatDashBoard = ({ members = {} }) => {
 
-    const [chatMembers, setChatMembers] = useState(Object.values(members));
 
-    useEffect(() => setChatMembers(Object.values(members)), [members]);
 
-
 
-    return (
 
-        <>
 
-            <div className="ChatDashBoard bg-light">
 
-                <h4>ChatDashBoard</h4>
 
-                <table className="table table-bordered">
 
-                    <tbody>
 
-                        <tr>
 
-                            <td>Chat title:</td>
 
-                            <td>
 
-                                <input
 
-                                    className="form-control mb-2 p-2 border border-success border-2"
 
-                                    placeholder="Input title for new chat"
 
-                                ></input>
 
-                            </td>
 
-                        </tr>
 
-                        <tr>
 
-                            <td>Chat avatar:</td>
 
-                            <td>
 
-                                <span className="avatarka">
 
-                                    <img
 
-                                        src={chat_square_text}
 
-                                        className="border border-2 border-success bg-light "
 
-                                        alt="Avatar"
 
-                                    />
 
-                                </span>
 
-                            </td>
 
-                        </tr>
 
-                        <tr>
 
-                            <td>Chat members:</td>
 
-                            <td>
 
-                                {chatMembers.map((member) => (
 
-                                    <MemberItem key={member._id} member={member} />
 
-                                ))}
 
-                            </td>
 
-                        </tr>
 
-                    </tbody>
 
-                </table>
 
-            </div>
 
-        </>
 
-    );
 
-};
 
-
 
-const CChatDashBoard = connect((s) => ({ members: s.newChatUsers }))(ChatDashBoard);
 
+import userEvent from "@testing-library/user-event";
 
 
 
 const PageNewChat = ({ doSearchUsers = null }) => {
 
 const PageNewChat = ({ doSearchUsers = null }) => {
 
     const [searchUserStr, setSearchUserStr] = useState("");
 
     const [searchUserStr, setSearchUserStr] = useState("");
 
@@ -70,6 +22,7 @@ const PageNewChat = ({ doSearchUsers = null }) => {
 
         history.push("/");
 
         history.push("/");
 
     }
 
     }
 
 
 
+    // если ввели поиск пользователей - будем искать
 
     useEffect(() => {
 
     useEffect(() => {
 
         if (searchUserStr && typeof doSearchUsers === "function") {
 
         if (searchUserStr && typeof doSearchUsers === "function") {
 
             doSearchUsers(0, searchUserStr);
 
             doSearchUsers(0, searchUserStr);
 
@@ -83,9 +36,9 @@ const PageNewChat = ({ doSearchUsers = null }) => {
 
 
 
     return (
 
     return (
 
         <>
 
         <>
 
-            <div className="PageMain container-fluid">
 
+            <div className="container-fluid">
 
                 <div className="row g-3">
 
                 <div className="row g-3">
 
-                    <div className="col-md-4  bg-light">
 
+                    <div className="col-md-4  bg-light gradient shadow-sm border-2 rounded-3">
 
                         <CUserInfo />
 
                         <CUserInfo />
 
                         <ButtonToMain />
 
                         <ButtonToMain />
 
 
 
@@ -100,7 +53,7 @@ const PageNewChat = ({ doSearchUsers = null }) => {
 
                         <CAllUsersList searchUserStr={searchUserStr} />
 
                         <CAllUsersList searchUserStr={searchUserStr} />
 
                     </div>
 
                     </div>
 
                     <div className="col-md-8">
 
                     <div className="col-md-8">
 
-                        <CChatDashBoard />
 
+                        <CNewChatDashBoard />
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>

+ 2 - 2
chat_final_bootstrap/src/Pages/PageSearch.js
ファイルの表示 

@@ -1,4 +1,4 @@
 
-import { ChatContain } from "../Components";
 
+import { ChatMessages } from "../Components";
 
 import { Sidebar } from "../Layout";
 
 import { Sidebar } from "../Layout";
 
 import { store } from "../Reducers";
 
 import { store } from "../Reducers";
 
 import history from "../history";
 
 import history from "../history";
 
@@ -51,7 +51,7 @@ const PageMain = ({
 
                     <Sidebar />
 
                     <Sidebar />
 
                 </div>
 
                 </div>
 
                 <div className="col-md-8">
 
                 <div className="col-md-8">
 
-                    <ChatContain _chatId={_chatId} />
 
+                    <ChatMessages _chatId={_chatId} />
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>

+ 41 - 22
chat_final_bootstrap/src/Pages/PageUpload.js
ファイルの表示 

@@ -7,30 +7,43 @@ import { ButtonToMain } from "../Components";
 
 export const PageUpload = () => {
 
 export const PageUpload = () => {
 
     const [fl, setFl] = useState(false);
 
     const [fl, setFl] = useState(false);
 
     const resultArray = useRef([]);
 
     const resultArray = useRef([]);
 
+    const uploadImgRef = useRef(null);
 
 
 
     function MyDropzone() {
 
     function MyDropzone() {
 
         const onDrop = useCallback(async (acceptedFiles) => {
 
         const onDrop = useCallback(async (acceptedFiles) => {
 
-            // console.log("МАССИВ", typeof acceptedFiles[0], acceptedFiles[0]);
 
+            console.log("МАССИВ", acceptedFiles);
 
+
 
+            let reader = new FileReader();
 
+
 
+            reader.onloadend = function () {
 
+                uploadImgRef.current.src = reader.result;
 
+            };
 
+
 
+            if (acceptedFiles[0]) {
 
+                reader.readAsDataURL(acceptedFiles[0]);
 
+            } else {
 
+                uploadImgRef.current.src = "";
 
+            }
 
 
 
             setFl(false);
 
             setFl(false);
 
 
 
-            let aaryOfFatchs = acceptedFiles.map((file) => {
 
-                let dataSingl = new FormData();
 
-                dataSingl.set("media", file);
 
-                return fetch(`${urlUploadConst}/upload`, {
 
-                    method: "POST",
 
-                    headers: localStorage.authToken ? { Authorization: "Bearer " + localStorage.authToken } : {},
 
-                    body: dataSingl,
 
-                }).then((res) => res.json());
 
-            });
 
+            // let aaryOfFatchs = acceptedFiles.map((file) => {
 
+            //     let dataSingl = new FormData();
 
+            //     dataSingl.set("media", file);
 
+            //     return fetch(`${urlUploadConst}/upload`, {
 
+            //         method: "POST",
 
+            //         headers: localStorage.authToken ? { Authorization: "Bearer " + localStorage.authToken } : {},
 
+            //         body: dataSingl,
 
+            //     }).then((res) => res.json());
 
+            // });
 
 
 
-            resultArray.current = [];
 
+            // resultArray.current = [];
 
 
 
-            await Promise.all(aaryOfFatchs)
 
-                .then((responses) => responses.forEach((response) => resultArray.current.push(response)))
 
-                .catch((e) => alert("Произошла ошибка.", e));
 
+            // await Promise.all(aaryOfFatchs)
 
+            //     .then((responses) => responses.forEach((response) => resultArray.current.push(response)))
 
+            //     .catch((e) => alert("Произошла ошибка.", e));
 
 
 
-            console.log(resultArray.current);
 
+            // console.log(resultArray.current);
 
 
 
             setFl(true);
 
             setFl(true);
 
         }, []);
 
         }, []);
 
@@ -43,7 +56,7 @@ export const PageUpload = () => {
 
                 {isDragActive ? (
 
                 {isDragActive ? (
 
                     <p>Drop the files here ...</p>
 
                     <p>Drop the files here ...</p>
 
                 ) : (
 
                 ) : (
 
-                    <p>Drag 'n' drop some files here, or click to select files</p>
 
+                    <p className="border border-success">Drag 'n' drop some files here, or click to select files</p>
 
                 )}
 
                 )}
 
             </div>
 
             </div>
 
         );
 
         );
 
@@ -51,15 +64,21 @@ export const PageUpload = () => {
 
 
 
     return (
 
     return (
 
         <>
 
         <>
 
-            <div>
 
+            <div className="m-2">
 
                 PageUpload
 
                 PageUpload
 
                 <ButtonToMain />
 
                 <ButtonToMain />
 
+                <br />
 
+                <br />
 
+                <MyDropzone />
 
+                <img src="" height="200" alt="Image preview..." ref={uploadImgRef}></img>
 
+                <br />
 
+                <br />
 
+                Результат
 
+                <br />
 
+                {resultArray.current.map((res) => (
 
+                    <img src={`${urlUploadConst}/${res.url}`} width="100px" key={res._id} />
 
+                ))}
 
             </div>
 
             </div>
 
-            <br />
 
-            <MyDropzone />
 
-            {resultArray.current.map((res) => (
 
-                <img src={`${urlUploadConst}/${res.url}`} width="100px" key={res._id} />
 
-            ))}
 
         </>
 
         </>
 
     );
 
     );
 
 };
 
 };

+ 2 - 2
chat_final_bootstrap/src/Reducers/index.js
ファイルの表示 

@@ -79,11 +79,11 @@ function newChatUsersReduser(state = {}, action) {
 
 
 
     if (action.type === "DELETE_USER_FROM_CHAT_LIST") {
 
     if (action.type === "DELETE_USER_FROM_CHAT_LIST") {
 
         delete state[action._id];
 
         delete state[action._id];
 
-        return state;
 
+        return { ...state };
 
     }
 
     }
 
 
 
     if (action.type === "NEW_CHAT_LIST") {
 
     if (action.type === "NEW_CHAT_LIST") {
 
-        return { ...state, ...action.user };
 
+        return { ...action.user };
 
     }
 
     }
 
 
 
     return state;
 
     return state;

ファイルの差分が大きいため隠しています
+ 20 - 0
fetch_authtoken.txt


+ 94 - 0
temp2 - дерево вариантов.js
ファイルの表示 

@@ -0,0 +1,94 @@
 
+let testArr = [
 
+    ["USA", "Mexico"],
 
+    ["Green", "Red", "Blue"],
 
+    ["Metall", "Glass", "Plastic"],
 
+];
 
+
 
+function arrayOfTree(arr = []) {
 
+    let iter = arr.reduce((a, b) => a * b.length, 1); // 18
 
+    let res = Array.from(Array(iter), () => Array(arr.length)); // 18*3
 
+
 
+    let step = iter;
 
+    let i = 0;
 
+
 
+    for (let k = 0; k < arr.length; k++) {
 
+        step = step / arr[k].length; // 9, 3, 1
 
+        // console.log("step - ", step);
 
+        i = 0;
 
+        for (let j = 0; j < iter; j++) {
 
+            res[j][k] = arr[k][Math.floor(i++ / step) % arr[k].length];
 
+        }
 
+    }
 
+
 
+    return res;
 
+}
 
+
 
+console.log(arrayOfTree(testArr));
 
+
 
+// не боится пустого массива на входе
 
+
 
+//////////////////
 
+//////////////////
 
+//////////////////
 
+//////////////////
 
+//////////////////
 
+//////////////////
 
+
 
+var list = [
 
+    ["USA", "Mexico"],
 
+    ["Green", "Red", "Blue"],
 
+    ["Metall", "Glass", "Plastic"],
 
+];
 
+var tree = [];
 
+
 
+list.forEach(function (listArrayValue, listKey) {
 
+    let secondListKeyElement = 1;
 
+    if (listKey === 0) {
 
+        addElementsToSecondBranch(list, tree, secondListKeyElement, listArrayValue);
 
+    }
 
+});
 
+
 
+function addElementsToSecondBranch(list, tree, secondListKeyElement, listArrayValue) {
 
+    listArrayValue.forEach(function (branchKey) {
 
+        tree[branchKey] = [];
 
+        if (typeof tree[branchKey] !== "undefined" && typeof list[secondListKeyElement] !== "undefined") {
 
+            addElementsToSecondBranch(list, tree[branchKey], secondListKeyElement + 1, list[secondListKeyElement]);
 
+        }
 
+    });
 
+}
 
+
 
+console.log(tree);
 
+
 
+/////////////
 
+/////////////
 
+/////////////
 
+/////////////
 
+/////////////
 
+/////////////
 
+/////////////
 
+/////////////
 
+
 
+let testArr = [
 
+    ["USA", "Mexico"],
 
+    ["Green", "Red", "Blue"],
 
+    ["Metall", "Glass", "Plastic"],
 
+];
 
+
 
+(() => {
 
+    const inc = (indexes) => {
 
+        let i;
 
+        for (i = testArr.length - 1; i >= 0 && testArr[i].length <= (indexes[i] || 0) + 1; i--);
 
+        if (i === -1) return NaN;
 
+        indexes[i] = (indexes[i] || 0) + 1;
 
+        i < testArr.length - 1 && (indexes[i + 1] = 0);
 
+        return [...indexes];
 
+    };
 
+
 
+    let indexes = [0, 0, 0],
 
+        result = [];
 
+
 
+    do {
 
+        result.push(indexes.map((i, j) => testArr[j][i || 0]));
 
+    } while ((indexes = inc(indexes)));
 
+    return result;
 
+})();

+ 0 - 27
temp2.js
ファイルの表示 

@@ -1,27 +0,0 @@
 
-let testArr = [
 
-    ["USA", "Mexico"],
 
-    ["Green", "Red", "Blue"],
 
-    ["Metall", "Glass", "Plastic"],
 
-];
 
-
 
-function arrayOfTree(arr = []) {
 
-    let iter = arr.reduce((a, b) => a * b.length, 1); // 18
 
-    let res = Array.from(Array(iter), () => Array(arr.length)); // 18*3
 
-
 
-    let step = iter;
 
-    let i = 0;
 
-
 
-    for (let k = 0; k < arr.length; k++) {
 
-        step = step / arr[k].length; // 9, 3, 1
 
-        // console.log("step - ", step);
 
-        i = 0;
 
-        for (let j = 0; j < iter; j++) {
 
-            res[j][k] = arr[k][Math.floor(i++ / step) % arr[k].length];
 
-        }
 
-    }
 
-    return res;
 
-}
 
-
 
-console.log(arrayOfTree(testArr));
 
-
 
-// не боится пустого массива на входе