From 341a70e7c8d451fa8c627786434cb5f617fd2f26 Mon Sep 17 00:00:00 2001
From: HFO4 <912394456@qq.com>
Date: Sat, 23 Nov 2019 16:40:19 +0800
Subject: [PATCH] Modify: use react-hooks in LoginForm

---
 src/component/Login/LoginForm.js | 149 +++++++++++++------------------
 src/index.js                     |   2 +-
 2 files changed, 64 insertions(+), 87 deletions(-)

diff --git a/src/component/Login/LoginForm.js b/src/component/Login/LoginForm.js
index b58720f..37a050c 100644
--- a/src/component/Login/LoginForm.js
+++ b/src/component/Login/LoginForm.js
@@ -1,9 +1,10 @@
-import React, { Component } from 'react'
-import { connect } from 'react-redux'
+import React,{ useCallback,useState,useEffect} from 'react'
+import { useDispatch,useSelector  } from 'react-redux'
 import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
+import { makeStyles } from "@material-ui/core";
 import { toggleSnackbar, } from "../../actions/index"
 import Placeholder from "../placeholder/captcha"
-import {withRouter} from  'react-router-dom'
+import {useHistory} from  'react-router-dom'
 import API from "../../middleware/Api"
 import Auth from "../../middleware/Auth"
 import {
@@ -19,7 +20,7 @@ import {
     Typography,
 } from '@material-ui/core';
 
-const styles = theme => ({
+const useStyles = makeStyles(theme => ({
     layout: {
         width: 'auto',
         marginTop: '110px',
@@ -62,60 +63,54 @@ const styles = theme => ({
     captchaPlaceholder:{
         width:200,
     },
-})
-const mapStateToProps = state => {
-    return {
-        loginCaptcha: state.siteConfig.loginCaptcha,
-        title: state.siteConfig.title,
-        regCaptcha: state.siteConfig.regCaptcha,
-        forgetCaptcha: state.siteConfig.forgetCaptcha,
-        emailActive: state.siteConfig.emailActive,
-        QQLogin: state.siteConfig.QQLogin,
-    }
-}
+}));
 
-const mapDispatchToProps = dispatch => {
-    return {
-        toggleSnackbar: (vertical, horizontal, msg, color) => {
-            dispatch(toggleSnackbar(vertical, horizontal, msg, color))
-        },
-    }
-}
 
-class LoginFormCompoment extends Component {
+function LoginForm (){
 
-    state={
-        email:"",
-        pwd:"",
-        captcha:"",
-        loading:false,
-        captchaData:null,
-    }
+    const [email, setEmail] = useState("");
+    const [pwd, setPwd] = useState("");
+    const [captcha, setCaptcha] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [captchaData, setCaptchaData] = useState(null);
 
-    refreshCaptcha = ()=>{
+    const loginCaptcha = useSelector(state => state.siteConfig.loginCaptcha)
+    const title=  useSelector(state => state.siteConfig.title)
+    const regCaptcha=  useSelector(state => state.siteConfig.regCaptcha)
+    const forgetCaptcha=  useSelector(state => state.siteConfig.forgetCaptcha)
+    const emailActive=  useSelector(state => state.siteConfig.emailActive)
+    const QQLogin=  useSelector(state => state.siteConfig.QQLogin)
+
+    const dispatch = useDispatch()
+    const ToggleSnackbar = useCallback(
+        (vertical, horizontal, msg, color) => dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
+        [dispatch]
+    )
+
+    let history = useHistory();
+
+    const classes = useStyles();
+
+    const refreshCaptcha = ()=>{
         API.get("/Captcha").then((response) =>{
-            this.setState({
-                captchaData:response.data,
-            });
+            setCaptchaData(response.data)
         }).catch((error)=> {
-            this.props.toggleSnackbar("top", "right", "无法加载验证码：" + error.message, "error");
+            ToggleSnackbar("top", "right", "无法加载验证码：" + error.message, "error");
         });
         
     }
 
-    componentDidMount = ()=>{
-        this.refreshCaptcha()
-    }
+    useEffect(() => {
+        refreshCaptcha()
+    },[])
 
-    login = e=>{
+    const login = e=>{
         e.preventDefault();
-        this.setState({
-            loading:true,
-        });
+        setLoading(true);
         API.post('/User/Session',{
-            userName:this.state.email,
-            Password:this.state.pwd,
-            captchaCode:this.state.captcha,
+            userName:email,
+            Password:pwd,
+            captchaCode:captcha,
         }).then( (response)=> {
             // console.log(response);
             // if(response.data.code!=="200"){
@@ -129,33 +124,19 @@ class LoginFormCompoment extends Component {
             //         this.refreshCaptcha();
             //     }
             // }else{
-                this.setState({
-                    loading:false,
-                });
+                setLoading(false)
                 Auth.authenticate(response.data);
-                this.props.history.push('/Home')
-                this.props.toggleSnackbar("top","right","登录成功","success");
+                history.push('/Home');
+                ToggleSnackbar("top","right","登录成功","success");
             // }
         })
         .catch((error) =>{
-            this.setState({
-                loading:false,
-            });
-            this.props.toggleSnackbar("top","right",error.message,"warning");    
-            this.refreshCaptcha(); 
+            setLoading(false)
+            ToggleSnackbar("top","right",error.message,"warning");    
+            refreshCaptcha(); 
         });
     }
 
-    handleChange = name => event => {
-        this.setState({ [name]: event.target.value });
-    };
-    
-
-    render() {
-        console.log(this.props.location);
-        const { classes } = this.props;
-
-
         return (
             <div className={classes.layout}>
                 <Paper className={classes.paper}>
@@ -163,55 +144,55 @@ class LoginFormCompoment extends Component {
                         <LockOutlinedIcon />
                     </Avatar>
                     <Typography component="h1" variant="h5">
-                        登录{this.props.title}
+                        登录{title}
                     </Typography>
-                    <form className={classes.form} onSubmit={this.login}>
+                    <form className={classes.form} onSubmit={login}>
                         <FormControl margin="normal" required fullWidth>
                             <InputLabel htmlFor="email">电子邮箱</InputLabel>
                             <Input 
                             id="email" 
                             type="email" 
                             name="email" 
-                            onChange={this.handleChange("email")} 
+                            onChange={e => setEmail(e.target.value)} 
                             autoComplete
-                            value={this.state.email}
+                            value={email}
                             autoFocus />
                         </FormControl>
                         <FormControl margin="normal" required fullWidth>
                             <InputLabel htmlFor="password">密码</InputLabel>
                             <Input 
                             name="password" 
-                            onChange={this.handleChange("pwd")} 
+                            onChange={e => setPwd(e.target.value)} 
                             type="password" 
                             id="password" 
-                            value={this.state.pwd}
+                            value={pwd}
                             autoComplete />
                         </FormControl>
-                        {this.props.loginCaptcha&&
+                        {loginCaptcha&&
                         <div className={classes.captchaContainer}>
                             <FormControl margin="normal" required fullWidth>
                                 <InputLabel htmlFor="captcha">验证码</InputLabel>
                                 <Input 
                                 name="captcha" 
-                                onChange={this.handleChange("captcha")} 
+                                onChange={e => setCaptcha(e.target.value)} 
                                 type="text" 
                                 id="captcha" 
-                                value={this.state.captcha}
+                                value={captcha}
                                 autoComplete />
                                
                             </FormControl> <div>
-                                {this.state.captchaData ===null && <div className={classes.captchaPlaceholder}><Placeholder/></div>}
-                                {this.state.captchaData !==null && <img src={this.state.captchaData} alt="captcha" onClick={this.refreshCaptcha}></img>}
+                                {captchaData ===null && <div className={classes.captchaPlaceholder}><Placeholder/></div>}
+                                {captchaData !==null && <img src={captchaData} alt="captcha" onClick={refreshCaptcha}></img>}
                             </div>
                         </div>
                         }
-                        {this.props.QQLogin&&
+                        {QQLogin&&
                             <div>
                                 <Button
                                     type="submit"
                                     variant="contained"
                                     color="primary"
-                                    disabled={this.state.loading}
+                                    disabled={loading}
                                     className={classes.submit}
                                 >
                                     登录
@@ -220,7 +201,7 @@ class LoginFormCompoment extends Component {
                                     variant="contained"
                                     color="secondary"
                                     style={{marginLeft:"10px"}}
-                                    disabled={this.state.loading}
+                                    disabled={loading}
                                     className={classes.submit}
                                     onClick={()=>window.location.href="/Member/QQLogin"}
                                 >
@@ -228,13 +209,13 @@ class LoginFormCompoment extends Component {
                                 </Button>
                             </div>
                         }
-                        {!this.props.QQLogin&&
+                        {!QQLogin&&
                             <Button
                             type="submit"
                             fullWidth
                             variant="contained"
                             color="primary"
-                            disabled={this.state.loading}
+                            disabled={loading}
                             className={classes.submit}
                         >
                             登录
@@ -257,13 +238,9 @@ class LoginFormCompoment extends Component {
                 </Paper>
             </div>
         );
-    }
+    
 
 }
 
-const LoginForm = connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(withStyles(styles)(withRouter(LoginFormCompoment)))
 
 export default LoginForm
diff --git a/src/index.js b/src/index.js
index 1222176..4eb332a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -28,7 +28,7 @@ const defaultStatus = InitSiteConfig({
         refresh:true,
     },
     viewUpdate:{
-        open:true,
+        open:false,
         explorerViewMethod: "icon",
         sortMethod:"timePos",
         contextType:"none",