import React, { useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { NavLink } from "react-router-dom"; import { Alert, Button, Form, FormGroup, Input, Label, Modal, ModalBody, ModalHeader, } from "reactstrap"; import { CLEAR_ERROR_REQUEST, LOGIN_REQUEST } from "../../redux/types";
const LoginModal = () => { const [modal, setModal] = useState(false); const [localMsg, setLocalMsg] = useState(""); const [form, setValues] = useState({ email: "", password: "", }); const dispatch = useDispatch(); const { errorMsg } = useSelector((state) => state.auth); useEffect(() => { try { setLocalMsg(errorMsg); } catch (e) { console.log(e); } }, [errorMsg]);
const handleToggle = () => { dispatch({ type: CLEAR_ERROR_REQUEST, }); setModal(!modal); };
const onChange = (e) => { setValues({ ...form, [e.target.name]: e.target.value, }); };
const onSubmit = (e) => { e.preventDefault(); const { email, password } = form; const user = { email, password }; console.log(user);
dispatch({ type: LOGIN_REQUEST, data: user, }); };
return ( <div> <NavLink onClick={handleToggle} href="#"> Login </NavLink> <Modal isOpen={modal} toggle={handleToggle}> <ModalHeader toggle={handleToggle}>Login</ModalHeader> <ModalBody> {localMsg ? <Alert color="danger">{localMsg}</Alert> : null} <Form> <FormGroup> <Label for="email">Email</Label> <Input type="email" name="email" id="email" placeholder="Email" onChange={onChange} /> <Label for="passowrd">Passowrd</Label> <Input type="passowrd" name="passowrd" id="passowrd" placeholder="Passowrd" onChange={onChange} /> <Button color="dark" style={{ marginTop: "2rem" }} block /> </FormGroup> </Form> </ModalBody> </Modal> </div> ); };
export default LoginModal;
|