Registration existing User error added + redirect to Profile

hipstagram/src/Actions/action_login.js

@@ -1,5 +1,5 @@
 import { actionAuthLogin } from '../Redux/auth_reducer';
-import { actionLoginNetworkError, actionLoginNetworkErrorReset } from '../Redux/network_reducer';
+import {actionLoginNetworkError, actionLoginNetworkErrorReset, actionUserError} from '../Redux/error_reducer';
 import {actionPromise} from '../Redux/promise_reducer';
 
 const urlConst = '/graphql';
@@ -44,9 +44,7 @@ export const actionLogin = (login, password) => async (dispatch) => {
     if(result?.data?.login) {
         console.log(result.data.login)
         dispatch(actionAuthLogin(result.data.login))
-    } else if(result?.data?.createUser === null) {
-        console.log('User name is exist')
-    }else {
+    } else {
         console.log("Authorization failed")
         dispatch(actionLoginNetworkError())
         setTimeout(() => {actionLoginNetworkErrorReset()}, 5000)

hipstagram/src/Actions/action_registration.js

@@ -1,4 +1,4 @@
-import {actionLoginNetworkError, actionLoginNetworkErrorReset} from '../Redux/network_reducer';
+import {actionLoginNetworkError, actionLoginNetworkErrorReset, actionUserError} from '../Redux/error_reducer';
 import {actionPromise} from '../Redux/promise_reducer';
 import {actionLogin, gql} from './action_login';
 
@@ -17,7 +17,8 @@ export const actionRegistrations = (login, password) => async (dispatch) => {
         )
     )
     if (result?.data?.createUser === null) {
-        //  такой пользователь есть
+        console.log('User name is exist')
+        dispatch(actionUserError())
     } else {
         if (result?.data?.createUser?._id) {
             console.log('Registered successfull')

hipstagram/src/Components/RegistrationError/ExistingLoginError.js

@@ -4,8 +4,8 @@ import './RegistrationError.css';
 const ExistingLoginError = () => {
     return (
         <div className='registration-error__wrapper'>
-            Login you try to add is already
-            <b> exist</b>. Please try to <b>enter</b> another one
+            Login you trying to add is already
+            <b> exists</b>. Please try to <b>enter</b> another one
         </div>
     )
 }

hipstagram/src/Content/Login/Login.css

@@ -14,22 +14,6 @@
     border-color: #3578e5;
 }
 
-/*.login-wrapper button {*/
-/*    margin-top: 15px;*/
-/*    width: 10%;*/
-/*    background: #fff;*/
-/*    padding: 10px 0;*/
-/*    border-radius: 5px;*/
-/*    border: 2px solid #3578e5;*/
-/*    color: #000000;*/
-/*}*/
-
-/*.login-wrapper button:hover {*/
-/*    color: #000000;*/
-/*    background: #efe8e8;*/
-/*    border: 2px solid greenyellow;*/
-/*}*/
-
 .login-wrapper__link {
     text-align: center;
     color: blue;

hipstagram/src/Content/Login/Login.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState} from 'react';
+import React, {useRef, useState} from 'react';
 import {connect} from 'react-redux';
 import {NavLink, useHistory} from 'react-router-dom';
 import {actionLogin} from '../../Actions/action_login';
@@ -28,40 +28,46 @@ const Login = ({onLogin = null, checkLogin = false, promiseLoginStatus, payloadL
     const [login, setLogin] = useState('')
     const [password, setPassword] = useState('')
 
+    const isLoginValid = () => {
+        if (!login || !password) return false
+        else return true
+    }
+
     const RESOLVED = 'RESOLVED'
 
     return (
-        <div className='login-wrapper'>
-            <input
-                value={login}
-                placeholder='Login'
-                ref={loginRef}
-                onChange={(e) => setLogin(e.target.value)}
-            />
-
-            <input
-                value={password}
-                placeholder='Password'
-                ref={pasRef} onChange={(e) => setPassword(e.target.value)}
-                type='password'
-            />
-
-            {/*<button onClick={() => onLogin(login, password)}>*/}
-            {/*    <b>Login</b>*/}
-            {/*</button>*/}
-
-            <Button
-                name='Login2'
-                isValid={true}
-                callback={() => onLogin(login, password)}
-            />
-
-            <nav className='login-wrapper__link'>
-                <NavLink to='/registration'>Registration</NavLink>
-            </nav>
-
-            {promiseLoginStatus === RESOLVED && payloadLogin === null && <LoginError/>}
-        </div>
+        <>
+            <div className='login-wrapper'>
+                <input
+                    value={login}
+                    placeholder='Login'
+                    ref={loginRef}
+                    onChange={(e) => setLogin(e.target.value)}
+                />
+
+                <input
+                    value={password}
+                    placeholder='Password'
+                    ref={pasRef} onChange={(e) => setPassword(e.target.value)}
+                    type='password'
+                />
+
+                <Button
+                    name='Login'
+                    isValid={isLoginValid()}
+                    callback={() => onLogin(login, password)}
+                />
+
+                <nav className='login-wrapper__link'>
+                    <NavLink to='/registration'>Registration</NavLink>
+                </nav>
+
+                {promiseLoginStatus === RESOLVED && payloadLogin === null && <LoginError/>}
+            </div>
+
+            {/*/!*{(pending1 || pending2) && gif}*!/ for registration*/}
+
+        </>
     )
 }
 
@@ -69,7 +75,7 @@ const CLogin = connect((state) => ({
     checkLogin: state.auth.isLogin,
     promiseLoginStatus: state?.promise?.Login?.status,
     payloadLogin: state?.promise?.Login?.payload?.data?.login,
-    loginNetworkError: state?.networkError?.loginNetworkError
+    loginNetworkError: state?.errors?.loginNetworkError
 }), {onLogin: actionLogin})(Login)
 
 export default CLogin;

hipstagram/src/Content/Registration/Registration.js

@@ -1,13 +1,28 @@
 import React, {useRef, useState} from 'react';
-import {NavLink} from 'react-router-dom';
+import {NavLink, useHistory} from 'react-router-dom';
 import './Registration.css';
 import ExistingLoginError from "../../Components/RegistrationError/ExistingLoginError";
 import ConfirmPasswordError from "../../Components/RegistrationError/ConfirmPasswordError";
 import {connect} from "react-redux";
 import {actionRegistrations} from "../../Actions/action_registration";
 import Button from "../../Components/Button/Button";
+import {actionUserErrorReset} from "../../Redux/error_reducer";
 
-const Registration = ({onRegistration}) => {
+const Registration = ({onRegistration, existingUser, existingUserErrorReset, checkLogin, loginNetworkError}) => {
+
+    const history = useHistory();
+
+    if (checkLogin) {
+        history.push('/profile')
+    }
+
+    if (localStorage.authToken) {
+        history.push('/profile')
+    }
+
+    if (loginNetworkError) {
+        history.push('/404')
+    }
 
     const loginRef = useRef(null)
     const pasRef = useRef(null)
@@ -39,7 +54,11 @@ const Registration = ({onRegistration}) => {
                 value={login}
                 placeholder="Login"
                 ref={loginRef}
-                onChange={(e) => setLogin(e.target.value)}/>
+                onChange={(e) => {
+                    setLogin(e.target.value);
+                    existingUserErrorReset();
+                }}
+            />
             <input
                 value={password}
                 placeholder="Password"
@@ -65,14 +84,20 @@ const Registration = ({onRegistration}) => {
                 <NavLink to="/login">Login</NavLink>
             </nav>
 
-            <ExistingLoginError/>
+            {existingUser && <ExistingLoginError/>}
             {show && <ConfirmPasswordError/>}
         </div>
     )
 }
 
-const CRegistration = connect(null, {
-    onRegistration: actionRegistrations
+const CRegistration = connect(
+    (state) => ({
+        existingUser: state?.errors?.existingUserError,
+        checkLogin: state.auth.isLogin,
+        loginNetworkError: state?.errors?.loginNetworkError
+    }), {
+    onRegistration: actionRegistrations,
+    existingUserErrorReset: actionUserErrorReset
 })(Registration)
 
 export default CRegistration

hipstagram/src/Redux/network_reducer.js

@@ -2,6 +2,8 @@ const LOGINNETWORKERROR = 'LOGINNETWORKERROR';
 const LOGINNETWORKERRORRESET = 'LOGINNETWORKERRORRESET';
 const LOGIN = 'LOGIN';
 const LOGOUT = 'LOGOUT';
+const USERERROR = 'USERERROR';
+const USERERRORRESET = 'USERERRORRESET';
 
 export const actionLoginNetworkError = () => {
     return {
@@ -15,10 +17,23 @@ export const actionLoginNetworkErrorReset = () => {
     }
 }
 
-export const networkErrorReducer = (state, action) => {
+export const actionUserError = () => {
+    return {
+        type: USERERROR
+    }
+}
+
+export const actionUserErrorReset = () => {
+    return {
+        type: USERERRORRESET
+    }
+}
+
+export const errorReducer = (state, action) => {
     if(!state) {
         return {
-            loginNetworkError: false
+            loginNetworkError: false,
+            existingUserError: false
         }
     }
     
@@ -37,6 +52,16 @@ export const networkErrorReducer = (state, action) => {
             return {};
         case LOGOUT:
             return {};
+        case USERERROR:
+            return {
+                ...state,
+                existingUserError: true
+            };
+        case USERERRORRESET:
+            return {
+                ...state,
+                existingUserError: false
+            };
         default:
             return state
     }

hipstagram/src/Redux/promise_reducer.js

@@ -2,7 +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';
+import {errorReducer} from './error_reducer';
 
 const LOGIN = 'LOGIN';
 const LOGOUT = 'LOGOUT';
@@ -55,7 +55,7 @@ export const actionPromise = (name, promise) => {
 export const store = createStore(combineReducers({
     auth: authReducer,
     promise: promiseReducer,
-    networkError: networkErrorReducer
+    errors: errorReducer
 }), applyMiddleware(thunk));
 
 store.subscribe(() => console.log('STORE', store.getState()))