Skip to content

Commit 1c11907

Browse files
ikayzikayz
authored
Merge pull request #78 from NumanAnees/feature/Alert
Basic form validation and success / error alerts added
2 parents 91e88d7 + 1e5706f commit 1c11907

File tree

5 files changed

+152
-56
lines changed

5 files changed

+152
-56
lines changed

‎src/components/AddJournal.js‎

Lines changed: 50 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
/* eslint-disable no-alert */
22
import { React, useState } from 'react';
33
import { Row, Col, Form, Button } from 'react-bootstrap';
4+
import { showSuccessMessage, showErrorMessage } from "../helpers/alerts"
5+
import { JournalValidation } from '../helpers/validate';
46

57
function AddJournal() {
68
const [title, setTitle] = useState('');
@@ -13,10 +15,28 @@ function AddJournal() {
1315
const [lastYear, setLastYear] = useState('');
1416
const [policyType, setPolicyType] = useState('');
1517
const [domain, setDomain] = useState('');
18+
const [success,setSuccess] = useState("");
19+
const [error,setError]=useState("");
1620

21+
const emptyFields=()=>{
22+
setTitle("");
23+
setUrl("");
24+
setIssn("");
25+
setRating("");
26+
setDate("");
27+
setPolicyTitle("");
28+
setFirstYear("");
29+
setLastYear("");
30+
setPolicyType("");
31+
setDomain("");
32+
}
1733
const handleSubmit = (e) => {
1834
e.preventDefault();
19-
35+
setSuccess("");
36+
setError("");
37+
const check = JournalValidation(title, url, issn, rating, policyTitle, firstYear,
38+
lastYear, policyType, domain, date)
39+
if(check){
2040
const policies = {
2141
title: policyTitle,
2242
first_year: firstYear,
@@ -25,37 +45,55 @@ function AddJournal() {
2545
};
2646
const journal = { title, url, issn, rating, date, policies, domain };
2747

48+
try{
49+
window.scrollTo(0,0);
2850
fetch('https://journal-policy-tracker.herokuapp.com/api/journals', {
2951
method: 'POST',
3052
headers: { 'Content-Type': 'application/json' },
3153
body: JSON.stringify(journal),
32-
}).then(() => {
33-
alert('Journal added successfully!');
34-
});
54+
})
55+
emptyFields();
56+
setSuccess("Journal Added Successfuly")
57+
}
58+
catch(err)
59+
{
60+
setError("Cannot Add Journal")
61+
}
62+
}
63+
else{
64+
window.scrollTo(0,0);
65+
setError("Invalid Input")
66+
}
67+
3568
};
3669

3770
return (
3871
<Row>
3972
<Col className='m-auto'>
4073
<Form className='login-form responsive' onSubmit={handleSubmit}>
4174
<Form.Group className='mb-3' controlId='formBasicTitle'>
75+
{success && showSuccessMessage(success)}
76+
{error && showErrorMessage(error)}
4277
<Form.Label>Title</Form.Label>
4378
<Form.Control
4479
type='text'
4580
placeholder='Journal title'
4681
onChange={(e) => setTitle(e.target.value)}
82+
value={title}
4783
/>
4884
</Form.Group>
4985
<Form.Group className='mb-3' controlId='formBasicUrl'>
5086
<Form.Label>URL</Form.Label>
51-
<Form.Control type='text' placeholder='URL' onChange={(e) => setUrl(e.target.value)} />
87+
<Form.Control type='text' placeholder='URL'
88+
onChange={(e) => setUrl(e.target.value)} value={url} />
5289
</Form.Group>
5390
<Form.Group className='mb-3' controlId='formBasicIssn'>
5491
<Form.Label>ISSN</Form.Label>
5592
<Form.Control
5693
type='text'
5794
placeholder='ISSN'
5895
onChange={(e) => setIssn(e.target.value)}
96+
value={issn}
5997
/>
6098
</Form.Group>
6199
<Form.Group className='mb-3' controlId='formBasicRating'>
@@ -64,6 +102,7 @@ function AddJournal() {
64102
type='text'
65103
placeholder='Rating'
66104
onChange={(e) => setRating(e.target.value)}
105+
value={rating}
67106
/>
68107
</Form.Group>
69108
<Form.Group className='mb-3' controlId='formBasicDate'>
@@ -72,6 +111,7 @@ function AddJournal() {
72111
type='date'
73112
placeholder='Date'
74113
onChange={(e) => setDate(e.target.value)}
114+
value={date}
75115
/>
76116
</Form.Group>
77117
<Form.Group className='mb-3' controlId='formBasicPolicies'>
@@ -80,21 +120,25 @@ function AddJournal() {
80120
type='text'
81121
placeholder='Policy Title'
82122
onChange={(e) => setPolicyTitle(e.target.value)}
123+
value={policyTitle}
83124
/>
84125
<Form.Control
85126
type='text'
86127
placeholder='First Year'
87128
onChange={(e) => setFirstYear(e.target.value)}
129+
value={firstYear}
88130
/>
89131
<Form.Control
90132
type='text'
91133
placeholder='Last Year'
92134
onChange={(e) => setLastYear(e.target.value)}
135+
value={lastYear}
93136
/>
94137
<Form.Control
95138
type='text'
96139
placeholder='Type'
97140
onChange={(e) => setPolicyType(e.target.value)}
141+
value={policyType}
98142
/>
99143
</Form.Group>
100144
<Form.Group className='mb-3' controlId='formBasicDomain'>
@@ -103,6 +147,7 @@ function AddJournal() {
103147
type='text'
104148
placeholder='Domain'
105149
onChange={(e) => setDomain(e.target.value)}
150+
value={domain}
106151
/>
107152
</Form.Group>
108153
<Button variant='primary' type='submit'>

‎src/helpers/alerts.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import React from 'react';
2+
3+
export const showSuccessMessage = success => <div className="alert alert-success">{success}</div>;
4+
export const showErrorMessage = error => <div className="alert alert-danger">{error}</div>;

‎src/helpers/validate.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/* eslint-disable-next-line max-len */
2+
// ----------------------------------Journal Validation------------------------------
3+
4+
export const JournalValidation = (title, url, issn, rating, policyTitle,
5+
firstYear, lastYear, policyType, domain, date) =>{
6+
if(title.length<3 || url.length < 5 || issn.length<1 || rating.length<1 ||
7+
date.length<1 || policyTitle.length<1 || firstYear.length<1 || lastYear.length<1 ||
8+
policyType.length<1 || domain.length<1 || !date){
9+
10+
return false
11+
12+
}
13+
14+
return true;
15+
16+
}
17+
18+
// ----------------------------------Signup Validation------------------------------
19+
20+
export const SignupValidation = ({username,email,password}) => {
21+
if(username<1||email<1||password<1)
22+
{
23+
return false;
24+
}
25+
return true;
26+
}
27+
28+
// ----------------------------------Login Validation------------------------------
29+
30+
export const LoginValidation = ({email,password}) => {
31+
if(email<1||password<1)
32+
{
33+
return false;
34+
}
35+
return true;
36+
}

‎src/pages/Login.js‎

Lines changed: 39 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -4,74 +4,67 @@
44
/* eslint-disable react/destructuring-assignment */
55
/* eslint-disable react/no-unused-state */
66
/* eslint-disable react/state-in-constructor */
7-
import React from 'react';
7+
import { React, useState } from 'react';
88
import '../styles/Login.css';
99
import { Col, Row, Form, Button } from 'react-bootstrap';
10+
import { showSuccessMessage,showErrorMessage } from '../helpers/alerts';
11+
import { LoginValidation } from '../helpers/validate';
1012

11-
class Login extends React.Component {
12-
state = {
13-
email: '',
14-
password: '',
15-
accessToken: '',
16-
};
13+
function Login() {
14+
const [details, setDetails] = useState({
15+
email: '',
16+
password: '',
17+
accessToken: '',
18+
});
19+
const [success,setSuccess] = useState("");
20+
const [error,setError]=useState("");
1721

18-
handleLogin = (e) => {
22+
23+
const handleLogin = (e) => {
1924
e.preventDefault();
20-
fetch('https://journal-policy-tracker.herokuapp.com/users/login', {
25+
setSuccess("");
26+
setError("");
27+
const check = LoginValidation(details);
28+
if(check){
29+
try{
30+
const response = fetch('https://journal-policy-tracker.herokuapp.com/users/login', {
2131
method: 'POST',
22-
mode: 'CORS',
32+
mode: 'cors',
2333
headers: {
2434
'Content-Type': 'application/json',
2535
},
2636
body: JSON.stringify({
27-
email: this.state.email,
28-
password: this.state.password,
37+
details
2938
}),
3039
})
31-
.then((response) => response.json())
32-
.then((res) => {
33-
alert('Login successful');
34-
// The response is expected to be in the form:
35-
// {
36-
// message: "Login Successful!"
37-
// token: "",
38-
// }
40+
// const res = response.json();
41+
// setDetails({ ...details,accessToken: res.token })
42+
setSuccess("Login Successful")
3943

40-
this.setState({
41-
accessToken: res.token,
42-
});
43-
})
44-
.catch((error) => {
44+
}
45+
catch(err){
4546
// console.log(error);
46-
});
47-
};
48-
49-
handleEmailChange = (e) => {
50-
this.setState({
51-
email: e.target.value,
52-
});
53-
};
54-
55-
handlePasswordChange = (e) => {
56-
this.setState({
57-
password: e.target.value,
58-
});
47+
setError("Invalid Credentials")
48+
}
49+
}else{
50+
setError("Invalid Input")
51+
}
5952
};
60-
61-
render() {
6253
return (
6354
<Row className='login-padding'>
6455
<Col md={4} />
6556
<Col md={4}>
66-
<Form className='login-form'>
57+
<Form className='login-form' onSubmit={handleLogin}>
6758
<Form.Group className='mb-3' controlId='formBasicEmail'>
59+
{success && showSuccessMessage(success)}
60+
{error && showErrorMessage(error)}
6861
<Form.Label>Email</Form.Label>
6962
<Form.Control
7063
type='email'
7164
placeholder='Enter email'
7265
name='email'
73-
value={this.state.email}
74-
onChange={this.handleEmailChange}
66+
value={details.email}
67+
onChange={(e) => setDetails({ ...details, email: e.target.value })}
7568
/>
7669
<Form.Text className='text-muted'>
7770
We'll never share your email with anyone else.
@@ -84,22 +77,21 @@ class Login extends React.Component {
8477
type='password'
8578
placeholder='Password'
8679
name='password'
87-
value={this.state.password}
88-
onChange={this.handlePasswordChange}
80+
value={details.password}
81+
onChange={(e) => setDetails({ ...details, password: e.target.value })}
8982
/>
9083
</Form.Group>
9184
<Form.Group className='mb-3' controlId='formBasicCheckbox'>
9285
<Form.Check type='checkbox' label='Remember me' />
9386
</Form.Group>
94-
<Button variant='primary' onClick={this.handleLogin} type='submit'>
87+
<Button variant='primary' type='submit'>
9588
Login
9689
</Button>
9790
</Form>
9891
</Col>
9992
<Col md={4} />
10093
</Row>
10194
);
102-
}
10395
}
10496

10597
export default Login;

‎src/pages/SignUp.js‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
/* eslint-disable react/function-component-definition */
22
import { React, useState } from 'react';
33
import { Row, Col, Form, Button } from 'react-bootstrap';
4+
import { showSuccessMessage,showErrorMessage } from '../helpers/alerts';
5+
import { SignupValidation } from '../helpers/validate';
46
import "../styles/Signup.css"
57

68
const SignUp = () => {
@@ -9,17 +11,32 @@ const SignUp = () => {
911
email: '',
1012
password: '',
1113
});
14+
const [success,setSuccess] = useState("");
15+
const [error,setError]=useState("");
1216

1317
const handleSubmit = (e) => {
1418
e.preventDefault();
15-
fetch('https://journal-policy-tracker.herokuapp.com/users/register', {
19+
setSuccess("");
20+
setError("");
21+
const check = SignupValidation(details);
22+
if(check){
23+
try{
24+
fetch('https://journal-policy-tracker.herokuapp.com/users/register', {
1625
method: 'POST',
1726
headers: { 'Content-Type': 'application/json' },
1827
body: JSON.stringify(details),
19-
}).then(() => {
20-
// console.log('Sign up was successful');
28+
})
29+
setSuccess("Signup Successful")
30+
setTimeout(()=>{
2131
window.location.href = '/login';
22-
});
32+
},800)
33+
}catch(err){
34+
setError("Signup Failed")
35+
}
36+
}
37+
else{
38+
setError("Invalid Input")
39+
}
2340
};
2441

2542
return (
@@ -28,6 +45,8 @@ const SignUp = () => {
2845
<Col md={4}>
2946
<Form className='login-form' onSubmit={handleSubmit}>
3047
<Form.Group className='mb-3' controlId='formBasicUsername'>
48+
{success && showSuccessMessage(success)}
49+
{error && showErrorMessage(error)}
3150
<Form.Label>Username</Form.Label>
3251
<Form.Control
3352
type='text'

0 commit comments

Comments
 (0)