login error added + no internet redirect to 404 page

hipstagram/src/Actions/action_login.js

@@ -1,4 +1,5 @@
 import { actionAuthLogin } from '../Redux/auth_reducer';
+import { actionLoginNetworkError, actionLoginNetworkErrorReset } from '../Redux/network_reducer';
 import {actionPromise} from '../Redux/promise_reducer';
 
 const urlConst = '/graphql';
@@ -42,8 +43,11 @@ export const actionLogin = (login, password) => async (dispatch) => {
     )
     // console.log(result)
     if(result?.data?.login) {
+        console.log(result.data.login)
         dispatch(actionAuthLogin(result.data.login))
     } else {
         console.log("Authorization failed")
+        dispatch(actionLoginNetworkError())
+        setTimeout(() => {actionLoginNetworkErrorReset()}, 5000)
     }
 }

hipstagram/src/Content/Login/Login.js

@@ -3,23 +3,29 @@ import { connect } from 'react-redux';
 import { NavLink, useHistory } from 'react-router-dom';
 import { actionLogin } from '../../Actions/action_login';
 import LoginError from '../../Components/LoginError/LoginError';
-// import history from "../../history";
 import './Login.css';
 
-const Login = ({onLogin=null, checkLogin=false}) => {      //деструктуризация объекта
+const Login = ({ onLogin = null, checkLogin = false, promiseLoginStatus, payloadLogin, loginNetworkError }) => {      //деструктуризация объекта
 
     let history = useHistory();
 
-    if(localStorage.authToken) {
+    if (checkLogin) {
         history.push('/profile')
     }
 
-    useEffect(()=>{
-        if(checkLogin) {
-            history.push('/profile')
-        }
-    }, [checkLogin])
-    
+    if (localStorage.authToken) {
+        history.push('/profile')
+    }
+    if(loginNetworkError) {
+        history.push('/404')
+    }
+
+    // useEffect(()=>{
+    //     if(checkLogin) {
+    //         history.push('/profile')
+    //     }
+    // }, [checkLogin])
+
     const loginRef = useRef(null)
     const pasRef = useRef(null)
 
@@ -28,7 +34,7 @@ const Login = ({onLogin=null, checkLogin=false}) => {      //деструкту
 
     return (
         <div className='login-wrapper'>
-            <input value={login} placeholder="Login" ref={loginRef} onChange={(e) => setLogin(e.target.value)}></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>
@@ -39,11 +45,16 @@ const Login = ({onLogin=null, checkLogin=false}) => {      //деструкту
                 <NavLink to="/registration" >Registration</NavLink>
             </nav>
 
-            <LoginError />
+            {promiseLoginStatus ==='RESOLVED' && payloadLogin === null && <LoginError />}
         </div>
     )
 }
 
-const CLogin = connect((state) => ({checkLogin: state.auth.isLogin}), {onLogin: actionLogin})(Login)
+const CLogin = connect((state) => ({
+    checkLogin: state.auth.isLogin,
+    promiseLoginStatus: state?.promise?.Login?.status,
+    payloadLogin: state?.promise?.Login?.payload?.data?.login,
+    loginNetworkError: state?.networkError?.loginNetworkError
+}), { onLogin: actionLogin })(Login)
 
 export default CLogin;

hipstagram/src/Redux/network_reducer.js

@@ -0,0 +1,37 @@
+const LOGINNETWORKERROR = 'LOGINNETWORKERROR';
+const LOGINNETWORKERRORRESET = 'LOGINNETWORKERRORRESET';
+
+export const actionLoginNetworkError = () => {
+    return {
+        type: LOGINNETWORKERROR
+    }
+}
+
+export const actionLoginNetworkErrorReset = () => {
+    return {
+        type: LOGINNETWORKERRORRESET
+    }
+}
+
+export const networkErrorReducer = (state, action) => {
+    if(!state) {
+        return {
+            loginNetworkError: false
+        }
+    }
+    
+    switch(action.type) {
+        case LOGINNETWORKERROR: 
+            return {
+                ...state,
+                loginNetworkError: true
+            }
+        case LOGINNETWORKERRORRESET: 
+            return {
+                ...state,
+                loginNetworkError: false
+            }
+        default:
+            return state
+    }
+}

hipstagram/src/Redux/promise_reducer.js

@@ -2,6 +2,7 @@ import { createStore, combineReducers, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
 import { authReducer } from './auth_reducer';
 import history from "../history";
+import { networkErrorReducer } from './network_reducer';
 
 const LOGIN = 'LOGIN';
 const LOGOUT = 'LOGOUT';
@@ -51,7 +52,8 @@ export const actionPromise = (name, promise) => {
 
 export const store = createStore(combineReducers({
     auth: authReducer,
-    promise: promiseReducer
+    promise: promiseReducer,
+    networkError: networkErrorReducer
 }), applyMiddleware(thunk));
 
 store.subscribe(() => console.log('STORE', store.getState()))