Блог

loginPage.js ——

 import React from 'react';
import loginstyles from './loginpage.module.css';
import { connect } from 'react-redux';
import { LOGIN } from '../messageStore/actions';
import SectionLoader from '../../components/login/SectionLoader';
import * as SectionGetter from '../../components/login/SectionGetter';
import ClientSocket from '../../socket/ClientSocket';

const loginPage = props => {

    //Pop up window that a user can use to login
    const socket = ClientSocket.getSocket();

    const [loginData, setLoginData] = React.useState({ //Temporary login info before confirmed and push into Redux
        email: '',
        pass: '',
    });

    const [loginState, setloginState] = React.useState(SectionGetter.GET_EMAILSECTION(''));

    const [sentData, setSentData] = React.useState(false);


    const changeLogin = event => { //Changes the temporary login info the user entered
        const name = event.target.name;
        const value = event.target.value;

        setLoginData({
            ...loginData,
            [name]: value
        });
    }

    const validateInfo = () => {
        if(loginData.email != "") {
            if(loginData.pass != "") {
                return true;
            } else {
                setloginState(SectionGetter.GET_PASSWORDSECTION('Please enter your password'));
                return false;
            }
        } else {
            setloginState(SectionGetter.GET_EMAILSECTION('Please enter your email'));
            return false;
        }
    }

    function loginIntoApp() {
        if(!sentData) {
            if(validateInfo()) {
                setloginState(SectionGetter.GET_LOADINGSECTION);
                setSentData(true);
                sendLoginRequest();
            }
        }
    }

    function sendLoginRequest() {
            socket.emit('LOGIN', {
                email: loginData.email,
                pass: loginData.pass
            });
            socket.on('LOGIN_RESULT', data => {   
                if(data.result === 'SUCCESS') {
                    props.dispatch(LOGIN(data.username, loginData.email, loginData.pass));
                    props.dispatch({ type: 'LOGIN_EXIT', payload: null} );
                } else {
                    setloginState(SectionGetter.GET_WRONGDETAILS_SECTION(''));
                }
                setSentData(false);
            });
    }

    const onNextSection = () => {
        if(loginState.type === SectionGetter.PASSWORD) {
            loginIntoApp();
            return;
        }
        setloginState(SectionGetter.nextSection(loginState));
    }

    const exit = () => {
        props.dispatch({ type: 'LOGIN_EXIT', payload: null });
    }

    return (
        /*<div className={loginstyles.loginArea}>
            <form className={loginstyles.loginform}>
                <div className={loginstyles.logincomponent}>
                    <label><div className={loginstyles.descriptiontext}>Email: </div>
                    <input type="text" className={loginstyles.loginform_textarea} />
                    </label><br />
                </div>
                
                <div className={loginstyles.logincomponent}>
                    <label><div className={loginstyles.descriptiontext}>pass: </div>
                    <input type="pass" className={loginstyles.loginform_textarea} />
                    </label><br />
                </div>

                <div className={loginstyles.logincomponent}>
                    <label>
                        Remember me <input type="checkbox" name="remember" className={loginstyles.loginform_remember} />
                    </label>
                </div>
                
                <div className={loginstyles.logincomponent} id={loginstyles.login}>
                    <button type="submit" className={loginstyles.loginform_submit}>Login</button>
                </div>
            </form>
        </div>*/
        <div className={loginstyles.loginArea}>
            <input type="image" src="/exit.svg" border="0" alt="Submit" onClick={exit} className={loginstyles.exit_image}/>
            <SectionLoader section={loginState.section} onNextSection={onNextSection.bind(this)} changeLogin={changeLogin.bind(this)} error={loginState.error} login={loginIntoApp.bind(this)}/>
        </div>
        
    );
}

const mapStateToProps = state => {
    return {
        email: state.loginDetails.email,
        password: state.loginDetails.password
    };
}


export default connect(mapStateToProps)(loginPage);
  

index.js —-

 function Home(props) {


  const setLoginState = state => {
    console.log(state);
    if(state) {
      props.dispatch({ type: 'LOGIN_ACTIVE', payload: null });
    } else {
      props.dispatch({ type: 'LOGIN_INACTIVE', payload: null });
    }
  }


  return (
    <div>
      <Head>
          <title>AXSHS Live</title>
      </Head>
      {props.loginActive === true ? 
        <LoginPage/>
        : 
        null
      }
      <div className={props.loginActive === true ? homepage.app_loginactive : homepage.app}>
        
        <div className={homepage.home}>
          
          <Navbar username={props.details.username} loginState={setLoginState}/>
          
          <Grid />
          
        </div>
      </div>
      
    </div>
  );
}

const mapStateToProps = state => {
  return {
    details: state.loginDetails,
    loginActive: state.loginActive
  }
}

export default connect(mapStateToProps)(Home);
  

Каков правильный способ реализации функции очистки React useEffect при использовании сокета.ввод-вывод и сокращение. Я не уверен, вызывает ли обновление состояния реакции мой сокет или функцию redux connect.