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;
|
