21.07.2020

index.js

@@ -33,6 +33,40 @@ User.init(
   { sequelize, modelName: "user" }
 );
 
+class Message extends Sequelize.Model {}
+
+Message.init(
+  { message: Sequelize.STRING },
+  { sequelize, modelName: "message" }
+);
+
+// class Transaction extends Sequelize.Model {}
+// Transaction.init(
+//   { amount: Sequelize.DECIMAL },
+//   {
+//     sequelize,
+//     modelName: "transaction",
+//     scopes: {
+//       before(date) {
+//         return {
+//           where: {
+//             createdAt: {
+//               [Op.lte]: date,
+//             },
+//           },
+//         };
+//       },
+//     },
+//   }
+// );
+
+User.hasMany(Message, {});
+Message.belongsTo(User, {});
+// Money.hasMany(Transaction, { as: "ins", foreignKey: "inId" });
+// Money.hasMany(Transaction, { as: "outs", foreignKey: "outId" });
+// Transaction.belongsTo(Money, { as: "in", sourceKey: "inId" });
+// Transaction.belongsTo(Money, { as: "out", sourceKey: "outId" });
+
 const secret = `7.!BMB?Y+Bc2vZE-Hb5YuCT6QvE^FN,JWN6M?_VtFXeC5dLtB!`;
 const secretPass = "JcFWhuLkpaK9aB3Gtbvo2Y0BApdw5q1tUyAyJeD8fJXs78d7zR";
 
@@ -48,6 +82,7 @@ var schema = buildSchema(`
   type Query {
     getLogin(login: String, password: String): String
     getUser(id: ID!): User
+    getMessage(id: ID!): Message
   } 
   type Mutation {
     createUser(email: String, password: String, login: String): User
@@ -58,10 +93,20 @@ var schema = buildSchema(`
     email: String
     login: String
   }
+  type Message {
+    id: Int
+    createdAt: String
+    message: String
+    userId: User
+  }
 `);
 
 const getUser = async ({ id }) => await User.findByPk(id);
 
+const getMessage = async ({ id }) => {
+  return await Message.findByPk(id) || getUser()
+};
+
 const getLogin = async ({ login, password }) => {
   const userFind = await User.findOne({ where: { login, password } });
   return authenticate(userFind);
@@ -74,11 +119,11 @@ const createUser = async ({ email, password, login }) => {
     const user = { email, password, login };
     const newUser = new User(user);
     await newUser.save();
-  } else console.log("bye");
-  return await User.findOne({ where: { login } });
+    return await User.findOne({ where: { login } });
+  } else console.error("error");
 };
 
-var root = { getUser, getLogin, createUser };
+var root = { getUser, getLogin, createUser, getMessage };
 
 app.use(
   "/graphql",
@@ -90,6 +135,7 @@ app.use(
 );
 
 app.get("/users", async (req, res) => res.send(await User.findAll()));
+app.get("/message", async (req, res) => res.send(await Message.findAll()));
 
 // app.post("/users", async (req, res) => {
 //   // const twoUsers = async () => {
@@ -165,7 +211,8 @@ app.get("/a", (req, res, next) => {
 // (async () => {
 //   let persone =
 //     // User.findOne({ where: { login: "David" } }) ||
-//     (await User.create({ email: "1", password: "1", login: "1" }))
+//     (await User.create({ email: "gfd@gfd.gfd", password: "1", login: "A" }))
+//    persone.createMessage({message: "Hello"})
 // })();
 
 sequelize.sync();

myproject/src/App.js

@@ -1,42 +1,32 @@
-import React, { Component } from "react";
+import React from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import { createBrowserHistory as createHistory } from "history";
+import { Provider } from "react-redux";
 import "reset-css";
 
+import { store } from "./store/store";
 import Login from "./signIn/signIn";
 import Register from "./signUp/signUp";
 import MyProfile from "./myProfile/myProfile";
 
-// const MyProfile = () => <h1>HELLO</h1>;
-
 const App = (props) => {
   return (
     <Router history={createHistory}>
-      
-      <Switch>
-        <div className="wrapper">
-          <Route
-            exact
-            path={["/", "/sign_in"]}
-            render={() => <Login loginEye={props.loginEye} />}
-          />
-          <Route
-            exact
-            path="/sign_up"
-            render={() => (
-              <Register
-                registerEye={props.registerEye}
-                registerConfirmEye={props.registerConfirmEye}
-              />
-            )}
-          />
-          <Route
-            exact
-            path="/my_profile"
-            render={() => <MyProfile message={props.message} users={props.users} />}
-          />
-        </div>
-      </Switch>
+      <Provider store={store}>
+        <Switch>
+          <div className="wrapper">
+            <Route exact path={["/", "/sign_in"]} component={Login} />
+            <Route exact path="/sign_up" component={Register} />
+            <Route
+              exact
+              path="/my_profile"
+              render={() => (
+                <MyProfile message={props.message} users={props.users} />
+              )}
+            />
+          </div>
+        </Switch>
+      </Provider>
     </Router>
   );
 };

myproject/src/index.js

@@ -3,73 +3,97 @@ import ReactDOM from "react-dom";
 import "./index.css";
 import App from "./App";
 
-const loginEye = () => {
-  const password = document.getElementById("password");
-  const notSee = document.querySelector(".not-see");
-  const see = document.querySelector(".see");
-
-  if (password.type === "password") {
-    password.type = "text";
-    see.style.display = "inline-block";
-    notSee.style.display = "none";
-  } else {
-    password.type = "password";
-    notSee.style.display = "inline-block";
-    see.style.display = "none";
-  }
-};
-
-const registerEye = () => {
-  const password = document.getElementById("registerPassword");
-  const notSee = document.querySelector(".not-see");
-  const see = document.querySelector(".see");
-
-  if (password.type === "password") {
-    password.type = "text";
-    see.style.display = "inline-block";
-    notSee.style.display = "none";
-  } else {
-    password.type = "password";
-    notSee.style.display = "inline-block";
-    see.style.display = "none";
-  }
-};
-
-const registerConfirmEye = () => {
-  const password = document.getElementById("confirmPassword");
-  const notSee = document.querySelector(".not-see-confirm");
-  const see = document.querySelector(".see-confirm");
-
-  if (password.type === "password") {
-    password.type = "text";
-    see.style.display = "inline-block";
-    notSee.style.display = "none";
-  } else {
-    password.type = "password";
-    notSee.style.display = "inline-block";
-    see.style.display = "none";
-  }
-};
-
 const state = {
   users: [
-    { id: 1, email: "1", password: "1", nickname: "1" },
-    { id: 2, email: "2", password: "2", nickname: "2" },
-    { id: 3, email: "3", password: "3", nickname: "3" },
+    { 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" },
-    { id: 1, message: "Привет", idSendUser: "3", idGotUser: "1" },
+    {
+      id: 1,
+      message: "Hello",
+      idSendUser: "2",
+      idGotUser: "1",
+      image:
+        "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg",
+    },
+    {
+      id: 2,
+      message: "Привет",
+      idSendUser: "3",
+      idGotUser: "1",
+      image:
+        "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg",
+    },
+    {
+      id: 1,
+      message: "Hello",
+      idSendUser: "2",
+      idGotUser: "1",
+      image:
+        "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg",
+    },
+    {
+      id: 2,
+      message: "Привет",
+      idSendUser: "3",
+      idGotUser: "1",
+      image:
+        "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg",
+    },
+    {
+      id: 1,
+      message: "Hello",
+      idSendUser: "2",
+      idGotUser: "1",
+      image:
+        "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg",
+    },
+    {
+      id: 2,
+      message: "Привет",
+      idSendUser: "3",
+      idGotUser: "1",
+      image:
+        "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg",
+    },
+    {
+      id: 1,
+      message: "Hello",
+      idSendUser: "2",
+      idGotUser: "1",
+      image:
+        "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg",
+    },
+    {
+      id: 2,
+      message: "Привет",
+      idSendUser: "3",
+      idGotUser: "1",
+      image:
+        "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg",
+    },
+    {
+      id: 1,
+      message: "Hello",
+      idSendUser: "2",
+      idGotUser: "1",
+      image:
+        "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg",
+    },
+    {
+      id: 2,
+      message: "Привет",
+      idSendUser: "3",
+      idGotUser: "1",
+      image:
+        "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg",
+    },
   ],
 };
 
 ReactDOM.render(
-  <App
-    loginEye={loginEye}
-    registerEye={registerEye}
-    registerConfirmEye={registerConfirmEye}
-    users={state.users}
-    message={state.message}
-  />,
+  <App users={state.users} message={state.message} />,
   document.getElementById("root")
 );

myproject/src/myProfile/chatGroups/chatGroups.js

@@ -1,5 +1,4 @@
-import React, { Schema, Component } from "react";
-// import "antd/dist/antd.css";
+import React from "react";
 import "./chatGroups.css";
 
 const ChatGroups = (props) => {
@@ -7,11 +6,11 @@ const ChatGroups = (props) => {
     <>
       <div className="groups">
         <div className="avatar">
-          <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />
+          <img src={props.src} />
         </div>
         <div className="data">
           <div className="userName">
-            <span>{props.nickname}</span>
+            <span>{props.login}</span>
             <span className="date">00:00</span>
           </div>
           <div className="last-message">

myproject/src/myProfile/chatMessages/chatMessages.css

@@ -0,0 +1,19 @@
+.loginPartner {
+  text-align: center;
+  font-size: 18px;
+  border-bottom: 1px solid;
+  padding-bottom: 15px;
+}
+
+.messagePartner {
+  padding: 15px 100px;
+  height: 85%;
+}
+
+.message {
+  height: 100%;
+}
+
+.sendMessage {
+  text-align: center;
+}

myproject/src/myProfile/chatMessages/chatMessages.js

@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import "./chatMessages.css";
+
+const ChatMessage = (props) => {
+  // debugger
+  return (
+    <>
+      <div className="loginPartner">{props.message[0].idSendUser}</div>
+      <div className="messagePartner">
+        <div className="message">jkdflgdfl/gkdf;</div>
+        <div className="sendMessage">
+          <input />
+          <button>Send</button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ChatMessage;

myproject/src/myProfile/myProfile.css

@@ -99,4 +99,5 @@
 
 .chat-messages {
   width: 100%;
+  padding-top: 15px;
 }

myproject/src/myProfile/myProfile.js

@@ -3,12 +3,18 @@ import { TeamOutlined, FormOutlined, SearchOutlined } from "@ant-design/icons";
 import "./myProfile.css";
 
 import ChatGroups from "./chatGroups/chatGroups";
+import ChatMessages from "./chatMessages/chatMessages";
 
 const MyProfile = (props) => {
   const [text, setText] = useState("");
 
-  const a = props.message.map((el) => (
-    <ChatGroups nickname={el.idSendUser} message={el.message} />
+  const chatGroups = props.message.map((el) => (
+    <ChatGroups
+      key={el.id}
+      src={el.image}
+      login={el.idSendUser}
+      message={el.message}
+    />
   ));
 
   return (
@@ -24,14 +30,20 @@ const MyProfile = (props) => {
               <FormOutlined />
             </div>
             <div className="search-input">
-              <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Поиск..."/>
+              <input
+                value={text}
+                onChange={(e) => setText(e.target.value)}
+                placeholder="Поиск..."
+              />
               <SearchOutlined />
             </div>
           </div>
-          <div className="chat-groups">{a}</div>
+          <div className="chat-groups">{chatGroups}</div>
         </div>
 
-        <div className="chat-messages"></div>
+        <div className="chat-messages">
+          <ChatMessages message={props.message} />
+        </div>
       </div>
     </div>
   );

myproject/src/signIn/actionLogin/actionLogin.js

@@ -1,70 +1,18 @@
-import { createStore, combineReducers, applyMiddleware } from "redux";
-import thunk from "redux-thunk";
+import { actionPromise } from "../../store/store";
 
-const promiseReducer = (state = {}, { type, name, status, payload, error }) => {
-  if (type === "PROMISE") {
-    return {
-      ...state,
-      [name]: {
-        status,
-        payload,
-        error,
-      },
-    };
-  }
-  return state;
-};
-
-const actionPromise = (name, promise) => {
-  const actionPending = () => ({
-    type: "PROMISE",
-    name,
-    status: "PENDING",
-    payload: null,
-    error: null,
-  });
-  const actionResolved = (payload) => ({
-    type: "PROMISE",
-    name,
-    status: "RESOLVED",
-    payload,
-    error: null,
-  });
-  const actionRejected = (error) => ({
-    type: "PROMISE",
-    name,
-    status: "REJECTED",
-    payload: null,
-    error,
-  });
-  return async (dispatch) => {
-    dispatch(actionPending());
-    try {
-      let payload = await promise;
-      dispatch(actionResolved(payload));
-      return payload;
-    } catch (error) {
-      dispatch(actionRejected(error));
-    }
-  };
-};
-
-const store = createStore(promiseReducer, applyMiddleware(thunk));
-store.subscribe(() => console.log(store.getState()));
-
-store.dispatch({
-  type: "PROMISE",
-  name: "login",
-  status: "RESOLVED",
-  payload: "hi",
-});
+// store.dispatch({
+//   type: "PROMISE",
+//   name: "login",
+//   status: "RESOLVED",
+//   payload: "hi",
+// });
 
-store.dispatch({
-  type: "PROMISE",
-  name: "chatList",
-  status: "REJECTED",
-  error: "bye",
-});
+// store.dispatch({
+//   type: "PROMISE",
+//   name: "chatList",
+//   status: "REJECTED",
+//   error: "bye",
+// });
 
 function actionToken(token) {
   return {
@@ -109,125 +57,4 @@ const actionLogin = (login, password) => {
   };
 };
 
-export {actionLogin, store}
-
-// function actionRegisterPromise(email, password, nickname) {
-//   let promise = getGQL("http://localhost:3330/graphql")(
-//     `mutation reg($email:String, $password:String, $nickname:String){
-//       createUser({email:$email, password:$password, nickname:$nickname}){ email }
-//     }`,
-//     { email, password, nickname }
-//   );
-//   return actionPromise("register", promise);
-// }
-
-// function actionRegister(email, password, nickname) {
-//   return async (dispatch) => {
-//     let user = await dispatch(actionRegisterPromise(email, password, nickname));
-//     if (user) {
-//       dispatch(actionLogin(email, password, nickname));
-//     }
-//   };
-// }
-
-// const actionTimeouts = () => {
-//   return async (dispatch) => {
-//     let result = await dispatch(actionPromise("delay1", delay(1000)));
-//     console.log(result);
-//     result = await dispatch(actionPromise("delay" + result, delay(result * 2)));
-//     console.log(result);
-//   };
-// };
-
-// store1.dispatch(actionTimeouts());
-
-// store1.dispatch(actionPromise("delay1000", delay(1000)));
-// store1.dispatch(actionPromise("delay2000", delay(2000)));
-
-// store1.dispatch(actionLogin("1", "1"));
-
-// const store = createStore((state, { type, token }) => {
-//   if (!state) return {};
-//   if (type === "LOGOUT") return { jwt: "" };
-//   if (type === "LOGIN")
-//     return {
-//       pending: true,
-//       jwt: "",
-//     };
-//   if (type === "TOKEN")
-//     return {
-//       jwt: token,
-//       data: jwtDecode(token),
-//     };
-//   return state;
-// });
-
-// function actionLogin(email, password) {
-//   getGQL("http://localhost:3330/graphql")(
-//     `query l($email:String, $password:String){
-//         login(email:$email, password:$password)
-//       }`,
-//     { email, password }
-//   ).then((data) => store.dispatch(actionToken(data.data.login)));
-//   return {
-//     type: "LOGIN",
-//   };
-// }
-
-// function actionToken(token) {
-//   return {
-//     type: "TOKEN",
-//     token,
-//   };
-// }
-
-// store.subscribe(() => console.log(store.getState()));
-// store.dispatch(actionLogin("1", "1"));
-
-// var authToken;
-
-// const getServerIn = (url) => () => {
-//   const email = document.getElementById("email").value;
-//   const password = document.getElementById("password").value;
-//   fetch(url, {
-//     method: "POST",
-//     headers: {
-//       Accept: "application/json",
-//       "Content-Type": "application/json",
-//     },
-//     body: JSON.stringify({ email: email, password: password }),
-//   })
-//     .then((res) => res.json())
-//     .then((json) => (authToken = json.token))
-//     .then(() => {
-//       console.log(authToken);
-//       if (!authToken) alert("Вы не верно ввели свои данные!");
-//       else {
-//         //   window.location.assign("/my_profile");
-//         fetch("/a", {
-//           method: "GET",
-//           headers: {
-//             Authorization:  authToken,
-//           },
-//         })
-//           .then((res) => res.json())
-//       }
-//     });
-// };
-// const getServerIn1 = getServerIn("/users/authenticate");
-
-// const eye = () => {
-//   const password = document.getElementById("password");
-//   const notSee = document.querySelector(".not-see");
-//   const see = document.querySelector(".see");
-
-//   if (password.type === "password") {
-//     password.type = "text";
-//     see.style.display = "inline-block";
-//     notSee.style.display = "none";
-//   } else {
-//     password.type = "password";
-//     notSee.style.display = "inline-block";
-//     see.style.display = "none";
-//   }
-// };
+export { actionLogin };

myproject/src/signIn/signIn.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
-import { Provider, connect } from "react-redux";
+import { connect } from "react-redux";
 import {
   UserOutlined,
   LockOutlined,
@@ -8,10 +8,25 @@ import {
   EyeInvisibleOutlined,
 } from "@ant-design/icons";
 
-import { actionLogin, store } from "./actionLogin/actionLogin";
-
+import { actionLogin } from "./actionLogin/actionLogin";
 import "./signIn.css";
 
+const loginEye = () => {
+  const password = document.getElementById("password");
+  const notSee = document.querySelector(".not-see");
+  const see = document.querySelector(".see");
+
+  if (password.type === "password") {
+    password.type = "text";
+    see.style.display = "inline-block";
+    notSee.style.display = "none";
+  } else {
+    password.type = "password";
+    notSee.style.display = "inline-block";
+    see.style.display = "none";
+  }
+};
+
 const LoginForm = (props) => {
   const [login, setLogin] = useState("");
   const [password, setPassword] = useState("");
@@ -44,10 +59,10 @@ const LoginForm = (props) => {
             type="password"
             onChange={(e) => setPassword(e.target.value)}
           />
-          <div className="not-see" onClick={props.loginEye}>
+          <div className="not-see" onClick={loginEye}>
             <EyeInvisibleOutlined />
           </div>
-          <div className="see" onClick={props.loginEye}>
+          <div className="see" onClick={loginEye}>
             <EyeOutlined />
           </div>
         </div>
@@ -74,11 +89,7 @@ const LoginForm = (props) => {
   );
 };
 
-const Login = (props) => (
-  <Provider store={store}>
-    <ConnectedLoginForm loginEye={props.loginEye} />
-  </Provider>
-);
+const Login = (props) => <ConnectedLoginForm />;
 
 const ConnectedLoginForm = connect(null, { onLogin: actionLogin })(LoginForm);
 

myproject/src/signUp/actionRegister/actionRegister.js

@@ -1,75 +1,24 @@
-import { createStore, combineReducers, applyMiddleware } from "redux";
-import thunk from "redux-thunk";
+import { actionPromise } from "../../store/store";
+import { signUpValidateRepeat } from "../signUpValidate/signUpValidate";
 
-const promiseReducer = (state = {}, { type, name, status, payload, error }) => {
-  if (type === "PROMISE") {
-    return {
-      ...state,
-      [name]: {
-        status,
-        payload,
-        error,
-      },
-    };
-  }
-  return state;
-};
-
-const actionPromise = (name, promise) => {
-  const actionPending = () => ({
-    type: "PROMISE",
-    name,
-    status: "PENDING",
-    payload: null,
-    error: null,
-  });
-  const actionResolved = (payload) => ({
-    type: "PROMISE",
-    name,
-    status: "RESOLVED",
-    payload,
-    error: null,
-  });
-  const actionRejected = (error) => ({
-    type: "PROMISE",
-    name,
-    status: "REJECTED",
-    payload: null,
-    error,
-  });
-  return async (dispatch) => {
-    dispatch(actionPending());
-    try {
-      let payload = await promise;
-      dispatch(actionResolved(payload));
-      return payload;
-    } catch (error) {
-      dispatch(actionRejected(error));
-    }
-  };
-};
-
-const store = createStore(promiseReducer, applyMiddleware(thunk));
-store.subscribe(() => console.log(store.getState()));
-
-store.dispatch({
-  type: "PROMISE",
-  name: "login",
-  status: "RESOLVED",
-  payload: "hi",
-});
+// store.dispatch({
+//   type: "PROMISE",
+//   name: "login",
+//   status: "RESOLVED",
+//   payload: "hi",
+// });
 
-store.dispatch({
-  type: "PROMISE",
-  name: "chatList",
-  status: "REJECTED",
-  error: "bye",
-});
+// store.dispatch({
+//   type: "PROMISE",
+//   name: "chatList",
+//   status: "REJECTED",
+//   error: "bye",
+// });
 
 function actionRegisterPromise(email, password, login) {
   let promise = getGQL("http://localhost:3330/graphql")(
     `mutation reg($email:String, $password:String, $login:String){
-        createUser(email:$email, password:$password, login:$login){ id } 
+        createUser(email:$email, password:$password, login:$login){ id, email, login } 
       }`,
     { email, password, login }
   );
@@ -79,9 +28,9 @@ function actionRegisterPromise(email, password, login) {
 function actionRegister(email, password, login) {
   return async (dispatch) => {
     let user = await dispatch(actionRegisterPromise(email, password, login));
-    if (user) {
+    if (user.data.createUser !== null) {
       window.location.assign("/sign_in");
-    }
+    } else signUpValidateRepeat();
   };
 }
 
@@ -96,227 +45,4 @@ const getGQL = (url, headers = {}) => (query = "", variables = {}) =>
     body: JSON.stringify({ query, variables }),
   }).then((res) => res.json());
 
-export {actionRegister, store}
-
-
-
-
-// // const getGQL = (url) => () => {
-// //   const email = document.getElementById("email").value;
-// //   const password = document.getElementById("password").value;
-// //   const nickname = document.getElementById("nickname").value;
-
-// //   fetch(url, {
-// //     method: "POST",
-// //     headers: {
-// //       Accept: "application/json",
-// //       "Content-Type": "application/json",
-// //     },
-// //     body: JSON.stringify({
-// //       email: email,
-// //       password: password,
-// //       nickname: nickname,
-// //     }),
-// //   })
-// //     .then((res) => res.json())
-// //     .then((data) => {
-// //       console.log("ok");
-// //       console.log(data);
-// //     });
-// // };
-
-// // function actionLogin(login, password) {
-// //   getGQL("http://localhost:3333/users");
-// // }
-
-// // const store = createStore((state, { type, token }) => {
-// //   if (!state) return {};
-// //   if (type === "LOGIN") return { pending: true, jwt: {} };
-// //   if (type === "LOGOUT") return { jwt: {}, data: {} };
-// //   if (type === "TOKEN") return { jwt: token, data: jwtDecode(token) };
-// //   return state;
-// // });
-
-// const promiseReducer = (state = {}, { type, name, status, payload, error }) => {
-//   if (type === "PROMISE") {
-//     return {
-//       ...state,
-//       [name]: {
-//         status,
-//         payload,
-//         error,
-//       },
-//     };
-//   }
-//   return state;
-// };
-
-// const actionPromise = (name, promise) => {
-//   const actionPending = () => ({
-//     type: "PROMISE",
-//     name,
-//     status: "PENDING",
-//     payload: null,
-//     error: null,
-//   });
-//   const actionResolved = (payload) => ({
-//     type: "PROMISE",
-//     name,
-//     status: "RESOLVED",
-//     payload,
-//     error: null,
-//   });
-//   const actionRejected = (error) => ({
-//     type: "PROMISE",
-//     name,
-//     status: "REJECTED",
-//     payload: null,
-//     error,
-//   });
-//   return async (dispatch) => {
-//     dispatch(actionPending());
-//     try {
-//       let payload = await promise;
-//       dispatch(actionResolved(payload));
-//       return payload;
-//     } catch (error) {
-//       dispatch(actionRejected(error));
-//     }
-//   };
-// };
-
-// // const delay = (ms) => new Promise((ok) => setTimeout(() => ok(ms), ms));
-
-// const store1 = createStore(promiseReducer, applyMiddleware(thunk));
-// store1.subscribe(() => console.log(store1.getState()));
-
-// store1.dispatch({
-//   type: "PROMISE",
-//   name: "login",
-//   status: "RESOLVED",
-//   payload: "hi",
-// });
-
-// store1.dispatch({
-//   type: "PROMISE",
-//   name: "chatList",
-//   status: "REJECTED",
-//   error: "bye",
-// });
-
-// // function actionToken(token) {
-// //   return {
-// //     type: "TOKEN",
-// //     token,
-// //   };
-// // }
-
-// // const actionLoginPromise = (email, password) => {
-// //   let promise = getGQL("http://localhost:3330/graphql")(
-// //     `query l($email:String, $password:String){
-// //         login(email:$email, password:$password)
-// //       }`,
-// //     { email, password }
-// //   );
-// //   return actionPromise("email", promise);
-// // };
-
-// // const actionLogin = (email, password) => {
-// //   return async (dispatch) => {
-// //     let token = await dispatch(actionLoginPromise(email, password));
-// //     if (token) {
-// //       dispatch(actionToken(token));
-// //       // window.location.assign("/my_profile")
-// //     }
-// //   };
-// // };
-
-// function actionRegisterPromise(email, password, login) {
-//   let promise = getGQL("http://localhost:3330/graphql")(
-//     `mutation reg($email:String, $password:String, $login:String){
-//       createUser(email:$email, password:$password, login:$login){ id } 
-//     }`,
-//     { email, password, login }
-//   );
-//   return actionPromise("register", promise);
-// }
-
-// function actionRegister(email, password, login) {
-//   return async (dispatch) => {
-//     let user = await dispatch(actionRegisterPromise(email, password, login));
-//     if (user) {
-//       window.location.assign("/sign_in");
-//       // dispatch(actionLogin(email, password));
-//     }
-//   };
-// }
-
-// // const actionRegister = (email, password) => {
-// //   return async (dispatch) => {
-// //     let useer = await dispatch(actionLoginPromise(email, password));
-// //     if (token) dispatch(actionToken(token));
-// //   };
-// // };
-
-// // const actionTimeouts = () => {
-// //   return async (dispatch) => {
-// //     let result = await dispatch(actionPromise("delay1", delay(1000)));
-// //     console.log(result);
-// //     result = await dispatch(actionPromise("delay" + result, delay(result * 2)));
-// //     console.log(result);
-// //   };
-// // };
-
-// // store1.dispatch(actionTimeouts());
-
-// // store1.dispatch(actionPromise("delay1000", delay(1000)));
-// // store1.dispatch(actionPromise("delay2000", delay(2000)));
-
-// // const store = createStore((state, { type, token }) => {
-// //   if (!state) return {};
-// //   if (type === "LOGOUT") return { jwt: "" };
-// //   if (type === "LOGIN")
-// //     return {
-// //       pending: true,
-// //       jwt: "",
-// //     };
-// //   if (type === "TOKEN")
-// //     return {
-// //       jwt: token,
-// //       data: jwtDecode(token),
-// //     };
-// //   return state;
-// // });
-
-// const getGQL = (url, headers = {}) => (query = "", variables = {}) =>
-//   fetch(url, {
-//     method: "POST",
-//     headers: {
-//       Accept: "application/json",
-//       "Content-Type": "application/json",
-//       ...headers,
-//     },
-//     body: JSON.stringify({ query, variables }),
-//   }).then((res) => res.json());
-
-// // function actionLogin(email, password) {
-// //   getGQL("http://localhost:3330/graphql")(
-// //     `query l($email:String, $password:String){
-// //         login(email:$email, password:$password)
-// //       }`,
-// //     { email, password }
-// //   ).then((data) => store.dispatch(actionToken(data.data.login)));
-// //   return {
-// //     type: "LOGIN",
-// //   };
-// // }
-
-// // function actionToken(token) {
-// //   return {
-// //     type: "TOKEN",
-// //     token,
-// //   };
-// // }
-
-// // store.subscribe(() => console.log(store.getState()));
-// // store1.dispatch(actionLogin("1", "1"));
+export { actionRegister };

myproject/src/signUp/signUp.css

@@ -131,6 +131,7 @@
 }
 
 .pattern-email,
+.repeat-email,
 .pattern-password {
   display: none;
   color: red;
@@ -139,6 +140,12 @@
   padding-left: 220px;
 }
 
+.repeat-email {
+  line-height: 1.3;
+  margin-bottom: -5px;
+  margin-top: -20px;
+}
+
 .pattern-password {
   padding-bottom: 20px;
 }

myproject/src/signUp/signUp.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { EyeOutlined, EyeInvisibleOutlined } from "@ant-design/icons";
-import { Provider, connect } from "react-redux";
+import { connect } from "react-redux";
 
 import {
   validateEmail,
@@ -9,9 +9,41 @@ import {
   validatePassword,
   signUpValidate,
 } from "./signUpValidate/signUpValidate";
-import {actionRegister, store} from "./actionRegister/actionRegister"
+import { actionRegister } from "./actionRegister/actionRegister";
 import "./signUp.css";
 
+const registerEye = () => {
+  const password = document.getElementById("registerPassword");
+  const notSee = document.querySelector(".not-see");
+  const see = document.querySelector(".see");
+
+  if (password.type === "password") {
+    password.type = "text";
+    see.style.display = "inline-block";
+    notSee.style.display = "none";
+  } else {
+    password.type = "password";
+    notSee.style.display = "inline-block";
+    see.style.display = "none";
+  }
+};
+
+const registerConfirmEye = () => {
+  const password = document.getElementById("confirmPassword");
+  const notSee = document.querySelector(".not-see-confirm");
+  const see = document.querySelector(".see-confirm");
+
+  if (password.type === "password") {
+    password.type = "text";
+    see.style.display = "inline-block";
+    notSee.style.display = "none";
+  } else {
+    password.type = "password";
+    notSee.style.display = "inline-block";
+    see.style.display = "none";
+  }
+};
+
 const Register1 = (props) => {
   const [registerEmail, setEmail] = useState("");
   const [registerPassword, setPassword] = useState("");
@@ -46,6 +78,13 @@ const Register1 = (props) => {
           </div>
         </div>
 
+        <div className="repeat-email">
+          <p></p>
+          <div>
+            <p>Аккаунт с такой почтой уже зарегестрирован</p>
+          </div>
+        </div>
+
         <div className="block-input">
           <span>Логин:</span>
           <input
@@ -67,10 +106,10 @@ const Register1 = (props) => {
               name="password"
               onChange={(e) => setPassword(e.target.value)}
             />
-            <div className="not-see" onClick={props.registerEye}>
+            <div className="not-see" onClick={registerEye}>
               <EyeInvisibleOutlined />
             </div>
-            <div className="see" onClick={props.registerEye}>
+            <div className="see" onClick={registerEye}>
               <EyeOutlined />
             </div>
           </div>
@@ -88,10 +127,10 @@ const Register1 = (props) => {
               name="confirmPassword"
               onChange={(e) => setConfirmPassword(e.target.value)}
             />
-            <div className="not-see-confirm" onClick={props.registerConfirmEye}>
+            <div className="not-see-confirm" onClick={registerConfirmEye}>
               <EyeInvisibleOutlined />
             </div>
-            <div className="see-confirm" onClick={props.registerConfirmEye}>
+            <div className="see-confirm" onClick={registerConfirmEye}>
               <EyeOutlined />
             </div>
           </div>
@@ -128,14 +167,7 @@ const Register1 = (props) => {
   );
 };
 
-const Register = (props) => (
-  <Provider store={store}>
-    <ConnectedRegisterForm
-      registerEye={props.registerEye}
-      registerConfirmEye={props.registerConfirmEye}
-    />
-  </Provider>
-);
+const Register = (props) => <ConnectedRegisterForm />;
 
 const ConnectedRegisterForm = connect(null, { register: actionRegister })(
   Register1

myproject/src/signUp/signUpValidate/signUpValidate.js

@@ -7,12 +7,14 @@ const validateEmail = (mail) => {
   const patternEmail = document.querySelector(".pattern-email");
   if (validateEmailPattern(mail)) {
     patternEmail.style.display = "none";
-    patternEmail.style.border = "1px solid #b4b4b4";
+    // patternEmail.style.border = "1px solid #b4b4b4";
   }
 };
 
 const borderEmailDischarge = () => {
   const registerEmail = document.getElementById("registerEmail");
+  const repeatEmail = document.querySelector(".repeat-email");
+  repeatEmail.style.display = "none";
   registerEmail.style.border = "1px solid #b4b4b4";
 };
 
@@ -49,10 +51,18 @@ const signUpValidate = (mail, pass, confirmPass, login, props) => {
   }
 };
 
+const signUpValidateRepeat = () => {
+  const repeatEmail = document.querySelector(".repeat-email");
+  const registerEmail = document.getElementById("registerEmail");
+  registerEmail.style.border = "1px solid red";
+  repeatEmail.style.display = "block";
+};
+
 export {
   validateEmail,
   borderEmailDischarge,
   borderPasswordDischarge,
   validatePassword,
   signUpValidate,
+  signUpValidateRepeat
 };

myproject/src/store/store.js

@@ -0,0 +1,61 @@
+import { createStore, applyMiddleware, compose } from "redux";
+import thunk from "redux-thunk";
+
+const promiseReducer = (state = {}, { type, name, status, payload, error }) => {
+  if (type === "PROMISE") {
+    return {
+      ...state,
+      [name]: {
+        status,
+        payload,
+        error,
+      },
+    };
+  }
+  return state;
+};
+
+const actionPromise = (name, promise) => {
+  const actionPending = () => ({
+    type: "PROMISE",
+    name,
+    status: "PENDING",
+    payload: null,
+    error: null,
+  });
+  const actionResolved = (payload) => ({
+    type: "PROMISE",
+    name,
+    status: "RESOLVED",
+    payload,
+    error: null,
+  });
+  const actionRejected = (error) => ({
+    type: "PROMISE",
+    name,
+    status: "REJECTED",
+    payload: null,
+    error,
+  });
+  return async (dispatch) => {
+    dispatch(actionPending());
+    try {
+      let payload = await promise;
+      dispatch(actionResolved(payload));
+      return payload;
+    } catch (error) {
+      dispatch(actionRejected(error));
+    }
+  };
+};
+
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const middleware = [thunk];
+
+const store = createStore(
+  promiseReducer,
+  composeEnhancers(applyMiddleware(...middleware))
+);
+store.subscribe(() => console.log(store.getState()));
+
+export {store, actionPromise}