comments deleted from components

hipstagram/package-lock.json

@@ -9486,6 +9486,11 @@
         "object.assign": "^4.1.2"
       }
     },
+    "jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -12552,6 +12557,11 @@
         "symbol-observable": "^1.2.0"
       }
     },
+    "redux-thunk": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz",
+      "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw=="
+    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",

hipstagram/package.json

@@ -6,12 +6,14 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.6.3",
+    "jwt-decode": "^3.1.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2",
     "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0",
     "web-vitals": "^1.1.0"
   },
   "scripts": {
@@ -37,5 +39,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "proxy": "http://hipstagram.asmer.fs.a-level.com.ua/"
 }

hipstagram/src/Actions/action_login.js

@@ -0,0 +1,30 @@
+import {actionPromise, store} from '../Redux/promise_reducer';
+
+const urlConst = '/graphql';
+
+const getGQL = (url) => (query, variables = {}) => {
+    return fetch(url, {
+        method: "POST",
+        headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+            ...(localStorage.authToken ? { Authorization: `Bearer ${localStorage.authToken}` } : {}),
+        },
+        body: JSON.stringify({ query, variables }),
+    }).then((res) => res.json());
+};
+
+export const gql = getGQL(urlConst);
+
+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)
+}

hipstagram/src/Content/Login/Login.css

@@ -22,4 +22,5 @@
     text-align: center;
     color: blue;
     margin: 15px;
+    text-decoration: none;
 }

hipstagram/src/Content/Login/Login.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
+import { actionLogin } from '../../Actions/action_login';
 import './Login.css';
 
 const Login = () => {
@@ -8,7 +9,7 @@ const Login = () => {
             <input placeholder="Login"></input>
             <input placeholder="Password"></input>
 
-            <button>Login</button>
+            <button onClick={actionLogin}>Login</button>
 
             <nav>
                 <NavLink to="/registration" >Registration</NavLink>

hipstagram/src/Content/Registration/Registration.css

@@ -22,4 +22,5 @@
     text-align: center;
     color: blue;
     margin: 15px;
+    text-decoration: none;
 }

hipstagram/src/Redux/auth_reducer.js

@@ -3,7 +3,7 @@ import jwt_decode from "jwt-decode";
 const LOGIN = 'LOGIN';
 const LOGOUT = 'LOGOUT';
 
-const authReducer = (state, action) => {
+export const authReducer = (state, action) => {
     if(!state) {
         if(!localStorage.authToken) {
             return {}
@@ -16,20 +16,20 @@ const authReducer = (state, action) => {
             action.jwt = localStorage.authToken
         }
     }
-    if(action.type === LOGIN) {
-        localStorage.authToken = action.jwt;
-        return {
-            id: jwt_decode(action.jwt).sub.id, 
-            login: jwt_decode(action.jwt).sub.login,
-            isLogin: true,
-            token: action.jwt
-        }
-    }
-    if(action.type === LOGOUT) {
-        localStorage.removeItem('authToken');
-        return {};
+    
+    switch(action.type) {
+        case LOGIN: 
+            localStorage.authToken = action.jwt;
+            return {
+                id: jwt_decode(action.jwt).sub.id, 
+                login: jwt_decode(action.jwt).sub.login,
+                isLogin: true,
+                token: action.jwt
+            }
+            case LOGOUT:
+                localStorage.removeItem('authToken');
+                return {};
+            default:
+                return state
     }
-    return state
-}
-
-export default authReducer;
+}

hipstagram/src/Redux/promise_reducer.js

@@ -1,6 +1,6 @@
 import { createStore, combineReducers, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
-import authReducer from './auth_reducer';
+import { authReducer } from './auth_reducer';
 
 const LOGIN = 'LOGIN';
 const LOGOUT = 'LOGOUT';
@@ -9,21 +9,7 @@ const PENDING = 'PENDING';
 const RESOLVED = 'RESOLVED';
 const REJECTED = 'REJECTED';
  
-const promiseReducer = (state, action) => {
-//     if (action.type === LOGIN || action.type === LOGOUT) {
-//         return {}
-//     }
-//     if (action.type === PROMISE) {
-//         return{
-//             ...state,
-//             [action.name]: {
-//                 status: action.status, 
-//                 payload: (action.status === PENDING && state[action.name] && state[action.name].payload) || action.payload, // зачем эта проверка?
-//                 error: action.error
-//             }
-//         }
-//     }
-// return state
+const promiseReducer = (state={}, action) => {
     switch(action.type) {
         case LOGIN:
             return {};
@@ -43,7 +29,7 @@ const promiseReducer = (state, action) => {
     }
 }
 
-const actionPromise = (name, promise) => {
+export 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 })
@@ -64,4 +50,6 @@ const actionPromise = (name, promise) => {
 export const store = createStore(combineReducers({
     auth: authReducer,
     promise: promiseReducer
-}), applyMiddleware(thunk));
+}), applyMiddleware(thunk));
+
+store.subscribe(() => console.log('+++', store.getState()))

hipstagram/src/index.js

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