3.08.2020

myproject/src/App.js

@@ -8,7 +8,7 @@ import { store } from "./store/store";
 import Login from "./signIn/signIn";
 import Register from "./signUp/signUp";
 import putPassword from "./putPassword/putPassword";
-import MyProfile from "./myProfile/myProfile"
+import MyProfile from "./myProfile/myProfile";
 
 const App = (props) => {
   console.log(props);
@@ -16,13 +16,11 @@ const App = (props) => {
     <Provider store={store}>
       <Router history={history}>
         <Switch>
-          <div className="wrapper">
-            <Route exact path={["/", "/sign_in"]} component={Login} />
-            <Route exact path="/sign_up" component={Register} />
-            <Route exact path="/put_password" component={putPassword} />
-            <Route exact path="/my_profile" component={MyProfile} />
-            <Route exact path="/my_profile/:id" component={MyProfile} />
-          </div>
+          <Route exact path={["/", "/sign_in"]} component={Login} />
+          <Route exact path="/sign_up" component={Register} />
+          <Route exact path="/put_password" component={putPassword} />
+          <Route exact path="/my_profile" component={MyProfile} />
+          <Route exact path="/my_profile/:id" component={MyProfile} />
         </Switch>
       </Router>
     </Provider>

myproject/src/index.css

@@ -5,14 +5,10 @@ html,
     "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   height: 100%;
+  background: url(https://apromaenergy.com/wp-content/uploads/2018/09/background-site.jpg)
+    no-repeat;
 }
 
 a {
   text-decoration: none;
 }
-
-.wrapper {
-  height: 100%;
-  background: url(https://apromaenergy.com/wp-content/uploads/2018/09/background-site.jpg)
-    no-repeat;
-}

myproject/src/index.js

@@ -1,39 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import ApolloClient from "apollo-boost";
-import { ApolloProvider } from "@apollo/react-hooks";
 import "./index.css";
 
 import App from "./App";
 
-const client = new ApolloClient({
-  uri: "http://localhost:3330/graphql",
-});
-
-// const state = {
-//   users: [
-//     { id: 1, email: "1", password: "1", login: "1" },
-//     { id: 2, email: "2", password: "2", login: "2" },
-//     { id: 3, email: "3", password: "3", login: "3" },
-//   ],
-//   message: [
-//     {
-//       id: 1,
-//       message: "Hello",
-//       idSendUser: "2",
-//       idGotUser: "1",
-//       image:
-//         "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg",
-//     },
-//   ],
-// };
-
-ReactDOM.render(
-  // <ApolloProvider client={client}>
-    <App 
-    // users={state.users} message={state.message} 
-    />
-  // </ApolloProvider>
-  ,
-  document.getElementById("root")
-);
+ReactDOM.render(<App />, document.getElementById("root"));

myproject/src/myProfile/chatGroups/actionChatGroup/actionChatGroup.js

@@ -1,4 +1,4 @@
-import { actionPromise, store } from "../../../store/store";
+import { actionPromise } from "../../../store/store";
 // import history from '../../history';
 
 const getGQL = (url, headers = {}) => (query = "", variables = {}) =>
@@ -12,7 +12,7 @@ const getGQL = (url, headers = {}) => (query = "", variables = {}) =>
     body: JSON.stringify({ query, variables }),
   }).then((res) => res.json());
 
-const actionChatGroupPromise = (id) => {
+const actionChatGroupUserPromise = (id) => {
   var promise = getGQL("http://localhost:3330/graphql")(
     `query allMessOneUser($id: ID!){
       getAllChatGroupsOneUser(id: $id){
@@ -25,6 +25,31 @@ const actionChatGroupPromise = (id) => {
     }`,
     { id }
   );
+  return actionPromise("chatGroupUser", promise);
+};
+
+const actionChatGroupUser = (id) => {
+  return async (dispatch) => {
+    var token = await dispatch(actionChatGroupUserPromise(id));
+    // console.log(token);
+    // if (token === undefined) await dispatch(actionLoginPromise1(login, password))
+    // if(token) history.push("/my_profile")
+  };
+};
+
+const actionChatGroupPromise = (id) => {
+  var promise = getGQL("http://localhost:3330/graphql")(
+    `query chatGroup($id: ID!) {
+      getChatGroup(id: $id){
+       id, autorId {
+         id, login
+       }, partnerId {
+         id, login
+       }
+      } 
+     }`,
+    { id }
+  );
   return actionPromise("chatGroup", promise);
 };
 
@@ -97,8 +122,14 @@ const actionAllMessOneUserPromise = (id) => {
 const actionAllMessOneUser = (id) => {
   return async (dispatch) => {
     var token = await dispatch(actionAllMessOneUserPromise(id));
-    // console.log(token);
+    console.log(token);
   };
 };
 
-export { actionChatGroup, actionMessage, actionUsers, actionAllMessOneUser };
+export {
+  actionChatGroupUser,
+  actionChatGroup,
+  actionMessage,
+  actionUsers,
+  actionAllMessOneUser,
+};

myproject/src/myProfile/chatGroups/chatGroups.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React from "react";
 import { connect } from "react-redux";
 
 import {
@@ -7,36 +7,26 @@ import {
 } from "./actionChatGroup/actionChatGroup";
 import "./chatGroups.css";
 
-const ChatGroupMessage = ({message}) => {
-  return (
-    <div className="last-message">
-      <span>{message}</span>
-      <div className="unread-messages">5</div>
-    </div>
-  );
-};
-
 const ChatGroups = ({ id, login, state }) => {
-  const a = localStorage.setItem("idChat", id);
-// console.log(localStorage.getItem("idChat"));
-  const way = (obj, resolverName, a) => {
-    const stateObj = state[obj];
-    for (var keys in stateObj) {
-      for (var keyData in stateObj[keys]) {
-        if (keyData === "data") {
-          const allObj = stateObj[keys][keyData][resolverName];
-          return allObj.map(a);
-        }
-      }
-    }
-  };
+  // const way = (obj, resolverName, a) => {
+  //   const stateObj = state[obj];
+  //   for (var keys in stateObj) {
+  //     for (var keyData in stateObj[keys]) {
+  //       if (keyData === "data") {
+  //         const allObj = stateObj[keys][keyData][resolverName];
+  //         return allObj.map(a);
+  //       }
+  //     }
+  //   }
+  // };
 
   return (
     <>
       <div className="groups" >
         <div className="avatar">
           {/* <img src={props.src} /> */}
-          <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />
+          
+          {/* <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" /> */}
         </div>
 
         <div className="data">

myproject/src/myProfile/chatMessages/actionMessages/actionMessages.js

@@ -1,4 +1,4 @@
-import { actionPromise, store } from "../../../store/store";
+import { actionPromise } from "../../../store/store";
 
 const getGQL = (url, headers = {}) => (query = "", variables = {}) =>
   fetch(url, {
@@ -29,7 +29,7 @@ const actionMessagePromise = () => {
 const actionMessage = () => {
   return async (dispatch) => {
     var token = await dispatch(actionMessagePromise());
-    // console.log(token);
+    console.log(token);
   };
 };
 

myproject/src/myProfile/chatMessages/chatMessages.js

@@ -1,12 +1,10 @@
-import React, { useState, Component } from "react";
+import React, { Component } from "react";
 import { connect } from "react-redux";
 
-import { actionMessage } from "./actionMessages/actionMessages";
+import { actionAllMessOneUser } from "../chatGroups/actionChatGroup/actionChatGroup";
 import "./chatMessages.css";
 
 const Messages = ({ id, login, message, autor, partner }) => {
-  localStorage.setItem("login", login);
-  
   return (
     <div className="messages">
       <div className="messageAutor">
@@ -39,7 +37,7 @@ class ChatMessageInfo extends Component {
         <div className="loginPartner">{localStorage.getItem("login")}</div>
         <div className="chatMessages">
           <div className="messagesBlock">
-            {this.way("message", "getAllMessages", (el) => (
+            {this.way("allMessOneUser", "getAllMessagesOneUser", (el) => (
               <Messages
                 key={el.id}
                 id={
@@ -69,13 +67,13 @@ class ChatMessageInfo extends Component {
   }
 }
 
-const ChatMessage = () => <ConnectedChatMessage />;
+const ChatMessage = (props) => <ConnectedChatMessage />;
 
 const ConnectedChatMessage = connect(
   (state) => {
     return { state };
   },
-  { message: actionMessage }
+  { message: actionAllMessOneUser }
 )(ChatMessageInfo);
 
 export default ChatMessage;

myproject/src/myProfile/myProfile.js

@@ -1,4 +1,4 @@
-import React, { Component, useState, useEffect } from "react";
+import React, { Component } from "react";
 import { TeamOutlined, FormOutlined, SearchOutlined } from "@ant-design/icons";
 import { connect } from "react-redux";
 import "./myProfile.css";
@@ -6,6 +6,7 @@ import "./myProfile.css";
 import ChatGroupsBar from "./chatGroups/chatGroups";
 import ChatMessage from "./chatMessages/chatMessages";
 import {
+  actionChatGroupUser,
   actionChatGroup,
   actionMessage,
   actionUsers,
@@ -13,10 +14,12 @@ import {
 } from "./chatGroups/actionChatGroup/actionChatGroup";
 import history from "../history";
 
+var activeMessage = false
+
 class MyProfile1 extends Component {
   constructor(props) {
     super(props);
-    this.state = { text: ""};
+    this.state = { text: "" };
   }
 
   way(obj, resolverName, a) {
@@ -45,11 +48,8 @@ class MyProfile1 extends Component {
   }
 
   componentDidMount() {
-    const a = localStorage.getItem("id")
-    this.props.chatGroup(a);
-    this.props.message();
-    // const ar = localStorage.getItem("a");
-    // this.props.allMessOneUser("2");
+    const ab = localStorage.getItem("id");
+    this.props.chatGroupUser(ab);
   }
 
   render() {
@@ -81,10 +81,24 @@ class MyProfile1 extends Component {
 
             <div className="chat-groups">
               {this.way1("users", "getUser") ||
-                this.way("chatGroup", "getAllChatGroupsOneUser", (el) => {
-                  console.log(el)
+                this.way("chatGroupUser", "getAllChatGroupsOneUser", (el) => {
+                  console.log(el);
                   return (
-                    <div key={el.id} onClick={() => history.push(`/my_profile/${el.id}`)}>
+                    <div
+                      key={el.id}
+                      onClick={() => {
+                        history.push(`/my_profile/${el.id}`);
+                        this.props.chatGroup(el.id);
+                        this.props.allMessOneUser(el.partnerId.id);
+                        activeMessage = true
+                        localStorage.setItem(
+                          "login",
+                          +localStorage.getItem("id") !== el.autorId.id
+                            ? el.autorId.login
+                            : el.partnerId.login
+                        );
+                      }}
+                    >
                       <ChatGroupsBar
                         id={el.id}
                         login={
@@ -100,21 +114,8 @@ class MyProfile1 extends Component {
           </div>
 
           <div className="chat-messages">
-            <ChatMessage />
-            {/* {this.way("allMessOneUser", "getAllMessagesOneUser", (el) => {
-              return (
-                <div key={el.id} >
-                  <ChatMessage
-                    id={el.id}
-                    // login={
-                    //   +localStorage.getItem("id") !== el.autorId.id
-                    //     ? el.autorId.login
-                    //     : el.partnerId.login
-                    // }
-                  />
-                </div>
-              );
-            })} */}
+            {activeMessage === true ? <ChatMessage /> : null}
+            {/* <ChatMessage /> */}
           </div>
         </div>
       </div>
@@ -129,6 +130,7 @@ const ConnectedChatGroups = connect(
     return { state };
   },
   {
+    chatGroupUser: actionChatGroupUser,
     chatGroup: actionChatGroup,
     message: actionMessage,
     users: actionUsers,

myproject/src/putPassword/actionPutPassword/actionPutPassword.js

@@ -1,4 +1,4 @@
-import { actionPromise, store } from "../../store/store";
+import { actionPromise } from "../../store/store";
 import history from '../../history';
 
 const getGQL = (url, headers = {}) => (query = "", variables = {}) =>

myproject/src/putPassword/putPassword.js

@@ -1,4 +1,4 @@
-import React, { Schema, useState } from "react";
+import React, { useState } from "react";
 import { connect } from "react-redux";
 import {
   UserOutlined,

myproject/src/signIn/actionLogin/actionLogin.js

@@ -1,4 +1,4 @@
-import { actionPromise, store } from "../../store/store";
+import { actionPromise } from "../../store/store";
 import history from '../../history';
 
 const getGQL = (url, headers = {}) => (query = "", variables = {}) =>

myproject/src/signIn/signIn.js

@@ -1,4 +1,4 @@
-import React, { useState, Component } from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 import {
@@ -10,9 +10,7 @@ import {
 import jwtDecode from "jwt-decode";
 
 import { actionLogin } from "./actionLogin/actionLogin";
-import history from "../history";
 import { actionChatGroup } from "../myProfile/chatGroups/actionChatGroup/actionChatGroup";
-import MyProfile from "../myProfile/myProfile";
 import "./signIn.css";
 
 const loginEye = () => {
@@ -62,7 +60,7 @@ const LoginForm = ({ onLogin, backError, state }) => {
     if (e.key === "Enter") onLogin(login, password);
   };
 
-  const handleClick = () => history.push("/my_profile");
+  // const handleClick = () => history.push("/my_profile");
 
   return (
     <div className="login">

server/index.js

@@ -114,6 +114,7 @@ var schema = buildSchema(`
     getMessage(id: ID!): Message
     getAllMessages: [Message]
     getAllMessagesOneUser(id: ID!): [Message]
+    getChatGroup(id: ID!): ChatGroup
     getAllChatGroups: [ChatGroup]
     getAllChatGroupsOneUser(id: ID!): [ChatGroup]
   }
@@ -283,6 +284,15 @@ const deleteMessage = async ({ id }) => {
   } else return "Message not find";
 };
 
+const getChatGroup = async ({id}) => {
+  const chatGroup = await ChatGroup.findByPk(id)
+  const autor = await User.findOne({ where: { id: chatGroup.autorId } });
+  const partner = await User.findOne({ where: { id: chatGroup.partnerId } });
+  chatGroup.autorId = autor;
+  chatGroup.partnerId = partner;
+  return chatGroup;
+}
+
 const getAllChatGroups = async () => {
   const foundAllChatGroups = await ChatGroup.findAll();
   for (var allUsers of foundAllChatGroups) {
@@ -379,6 +389,7 @@ var root = {
   deleteMessage,
   getAllMessages,
   getAllMessagesOneUser,
+  getChatGroup,
   getAllChatGroups,
   getAllChatGroupsOneUser,
   createChatGroup,