Login connect to server

hipstagram/src/Actions/action_login.js

@@ -1,3 +1,4 @@
+import { actionAuthLogin } from '../Redux/auth_reducer';
 import {actionPromise, store} from '../Redux/promise_reducer';
 
 const urlConst = '/graphql';
@@ -16,15 +17,33 @@ const getGQL = (url) => (query, variables = {}) => {
 
 export const gql = getGQL(urlConst);
 
-export const actionLogin = async (login, password) => {
-    store.dispatch(actionPromise('Login', gql(`query Login($loginStr: String!, $passwordStr: String!){
+// export const actionLogin = async (login, password) => {
+//     store.dispatch(actionPromise('Login', gql(`query Login($loginStr: String!, $passwordStr: String!){
+//                 login(login: $loginStr, password: $passwordStr)
+//             }`, 
+//             {
+//                 "loginStr": "Pocu46",
+//                 "passwordStr": "a190689"
+//             })
+//         )
+//     )
+//     // console.log(resLogin)
+// }
+export const actionLogin = (login, password) => async (dispatch) => {
+    console.log(login, password)
+    let result = await dispatch(actionPromise('Login', gql(`query Login($loginStr: String!, $passwordStr: String!){
                 login(login: $loginStr, password: $passwordStr)
             }`, 
             {
-                "loginStr": "Pocu46",
-                "passwordStr": "a190689"
+                "loginStr": login,
+                "passwordStr": password
             })
         )
     )
-    // console.log(resLogin)
+    // console.log(result)
+    if(result?.data?.login) {
+        dispatch(actionAuthLogin(result.data.login))
+    } else {
+        alert("Authorization failed")
+    }
 }

hipstagram/src/Content/Login/Login.js

@@ -1,15 +1,25 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
+import { connect } from 'react-redux';
 import { NavLink } from 'react-router-dom';
 import { actionLogin } from '../../Actions/action_login';
 import './Login.css';
 
-const Login = () => {
+const Login = ({onLogin=null}) => {          //деструктуризация объекта
+
+    const loginRef = useRef(null)
+    const pasRef = useRef(null)
+
+    const [login, setLogin] = useState("")
+    const [password, setPassword] = useState("")
+
     return (
         <div className='login-wrapper'>
-            <input placeholder="Login"></input>
-            <input placeholder="Password"></input>
+            <input value={login} placeholder="Login" ref={loginRef} onChange={(e) => setLogin(e.target.value)}></input>     
+            {/* зачем нужен value? */}
+            {/* <input placeholder="Login" ref={loginRef} onChange={(e) => setLogin(e.target.value)}></input> */}
+            <input value={password} placeholder="Password" ref={pasRef} onChange={(e) => setPassword(e.target.value)} type="password"></input>
 
-            <button onClick={actionLogin}>Login</button>
+            <button onClick={() => onLogin(login, password)}>Login</button>
 
             <nav>
                 <NavLink to="/registration" >Registration</NavLink>
@@ -18,4 +28,6 @@ const Login = () => {
     )
 }
 
-export default Login;
+const CLogin = connect(null, {onLogin: actionLogin})(Login)
+
+export default CLogin;

hipstagram/src/Redux/auth_reducer.js

@@ -3,7 +3,15 @@ import jwt_decode from "jwt-decode";
 const LOGIN = 'LOGIN';
 const LOGOUT = 'LOGOUT';
 
+export const actionAuthLogin = (jwt) => {
+    return {
+        type: LOGIN,
+        jwt
+    }
+}
+
 export const authReducer = (state, action) => {
+    console.log('ACTION: ', action)
     if(!state) {
         if(!localStorage.authToken) {
             return {}

hipstagram/src/Redux/promise_reducer.js

@@ -52,4 +52,4 @@ export const store = createStore(combineReducers({
     promise: promiseReducer
 }), applyMiddleware(thunk));
 
-store.subscribe(() => console.log('+++', store.getState()))
+store.subscribe(() => console.log('STORE', store.getState()))

hipstagram/src/index.js

@@ -4,11 +4,16 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
 import { BrowserRouter } from "react-router-dom";
+import { Provider } from "react-redux";
+import { store } from "./Redux/promise_reducer";
 
 ReactDOM.render(
-    <BrowserRouter>
-        <App />
-    </BrowserRouter>,
+        <BrowserRouter>
+        <Provider store={store}>
+            <App />
+            </Provider>
+        </BrowserRouter>,
+
     document.getElementById("root")
 );