Merge pull request #78 from NumanAnees/feature/Alert

Basic form validation and success / error alerts added

Author: ikayz

src/components/AddJournal.js

@@ -1,6 +1,8 @@
 /* eslint-disable no-alert */
 import { React, useState } from 'react';
 import { Row, Col, Form, Button } from 'react-bootstrap';
+import { showSuccessMessage, showErrorMessage } from "../helpers/alerts"
+import { JournalValidation } from '../helpers/validate';
 
 function AddJournal() {
   const [title, setTitle] = useState('');
@@ -13,10 +15,28 @@ function AddJournal() {
   const [lastYear, setLastYear] = useState('');
   const [policyType, setPolicyType] = useState('');
   const [domain, setDomain] = useState('');
+  const [success,setSuccess] = useState("");
+  const [error,setError]=useState("");
 
+  const emptyFields=()=>{
+    setTitle("");
+    setUrl("");
+    setIssn("");
+    setRating("");
+    setDate("");
+    setPolicyTitle("");
+    setFirstYear("");
+    setLastYear("");
+    setPolicyType("");
+    setDomain("");
+  }
   const handleSubmit = (e) => {
     e.preventDefault();
-
+    setSuccess("");
+    setError("");
+    const check = JournalValidation(title, url, issn, rating, policyTitle, firstYear,
+                                lastYear, policyType, domain, date)
+    if(check){
     const policies = {
       title: policyTitle,
       first_year: firstYear,
@@ -25,37 +45,55 @@ function AddJournal() {
     };
     const journal = { title, url, issn, rating, date, policies, domain };
 
+    try{
+    window.scrollTo(0,0);
     fetch('https://journal-policy-tracker.herokuapp.com/api/journals', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(journal),
-    }).then(() => {
-      alert('Journal added successfully!');
-    });
+    })
+    emptyFields();
+    setSuccess("Journal Added Successfuly")
+    }
+    catch(err)
+    {
+      setError("Cannot Add Journal")
+    }
+  }
+  else{
+    window.scrollTo(0,0);
+    setError("Invalid Input")
+  }
+   
   };
 
   return (
     <Row>
       <Col className='m-auto'>
         <Form className='login-form responsive' onSubmit={handleSubmit}>
           <Form.Group className='mb-3' controlId='formBasicTitle'>
+            {success && showSuccessMessage(success)}
+            {error && showErrorMessage(error)}
             <Form.Label>Title</Form.Label>
             <Form.Control
               type='text'
               placeholder='Journal title'
               onChange={(e) => setTitle(e.target.value)}
+              value={title}
             />
           </Form.Group>
           <Form.Group className='mb-3' controlId='formBasicUrl'>
             <Form.Label>URL</Form.Label>
-            <Form.Control type='text' placeholder='URL' onChange={(e) => setUrl(e.target.value)} />
+            <Form.Control type='text' placeholder='URL' 
+            onChange={(e) => setUrl(e.target.value)} value={url} />
           </Form.Group>
           <Form.Group className='mb-3' controlId='formBasicIssn'>
             <Form.Label>ISSN</Form.Label>
             <Form.Control
               type='text'
               placeholder='ISSN'
               onChange={(e) => setIssn(e.target.value)}
+              value={issn}
             />
           </Form.Group>
           <Form.Group className='mb-3' controlId='formBasicRating'>
@@ -64,6 +102,7 @@ function AddJournal() {
               type='text'
               placeholder='Rating'
               onChange={(e) => setRating(e.target.value)}
+              value={rating}
             />
           </Form.Group>
           <Form.Group className='mb-3' controlId='formBasicDate'>
@@ -72,6 +111,7 @@ function AddJournal() {
               type='date'
               placeholder='Date'
               onChange={(e) => setDate(e.target.value)}
+              value={date}
             />
           </Form.Group>
           <Form.Group className='mb-3' controlId='formBasicPolicies'>
@@ -80,21 +120,25 @@ function AddJournal() {
               type='text'
               placeholder='Policy Title'
               onChange={(e) => setPolicyTitle(e.target.value)}
+              value={policyTitle}
             />
             <Form.Control
               type='text'
               placeholder='First Year'
               onChange={(e) => setFirstYear(e.target.value)}
+              value={firstYear}
             />
             <Form.Control
               type='text'
               placeholder='Last Year'
               onChange={(e) => setLastYear(e.target.value)}
+              value={lastYear}
             />
             <Form.Control
               type='text'
               placeholder='Type'
               onChange={(e) => setPolicyType(e.target.value)}
+              value={policyType}
             />
           </Form.Group>
           <Form.Group className='mb-3' controlId='formBasicDomain'>
@@ -103,6 +147,7 @@ function AddJournal() {
               type='text'
               placeholder='Domain'
               onChange={(e) => setDomain(e.target.value)}
+              value={domain}
             />
           </Form.Group>
           <Button variant='primary' type='submit'>

src/helpers/alerts.js

@@ -0,0 +1,4 @@
+import React from 'react';
+
+export const showSuccessMessage = success => <div className="alert alert-success">{success}</div>;
+export const showErrorMessage = error => <div className="alert alert-danger">{error}</div>;

src/helpers/validate.js

@@ -0,0 +1,36 @@
+/* eslint-disable-next-line max-len */
+// ----------------------------------Journal Validation------------------------------
+
+export const JournalValidation = (title, url, issn, rating, policyTitle, 
+firstYear, lastYear, policyType, domain, date) =>{
+    if(title.length<3 || url.length < 5 || issn.length<1 || rating.length<1 || 
+     date.length<1 || policyTitle.length<1 || firstYear.length<1 || lastYear.length<1 ||
+     policyType.length<1 || domain.length<1 || !date){
+
+        return false
+
+    }
+
+    return true; 
+
+}
+
+// ----------------------------------Signup Validation------------------------------
+
+export const SignupValidation = ({username,email,password}) => {
+    if(username<1||email<1||password<1)
+    {
+        return false;
+    }
+    return true;
+}
+
+// ----------------------------------Login Validation------------------------------
+
+export const LoginValidation = ({email,password}) => {
+    if(email<1||password<1)
+    {
+        return false;
+    }
+    return true;
+}

src/pages/Login.js

@@ -4,74 +4,67 @@
 /* eslint-disable react/destructuring-assignment */
 /* eslint-disable react/no-unused-state */
 /* eslint-disable react/state-in-constructor */
-import React from 'react';
+import { React, useState } from 'react';
 import '../styles/Login.css';
 import { Col, Row, Form, Button } from 'react-bootstrap';
+import { showSuccessMessage,showErrorMessage } from '../helpers/alerts';
+import { LoginValidation } from '../helpers/validate';
 
-class Login extends React.Component {
-  state = {
-    email: '',
-    password: '',
-    accessToken: '',
-  };
+function Login() {
+  const [details, setDetails] = useState({
+      email: '',
+      password: '',
+      accessToken: '',
+  });
+  const [success,setSuccess] = useState("");
+  const [error,setError]=useState("");
 
-  handleLogin = (e) => {
+  
+  const handleLogin = (e) => {
     e.preventDefault();
-    fetch('https://journal-policy-tracker.herokuapp.com/users/login', {
+    setSuccess("");
+    setError("");
+    const check = LoginValidation(details);
+    if(check){
+    try{
+     const response =  fetch('https://journal-policy-tracker.herokuapp.com/users/login', {
       method: 'POST',
-      mode: 'CORS',
+      mode: 'cors',
       headers: {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({
-        email: this.state.email,
-        password: this.state.password,
+        details
       }),
     })
-      .then((response) => response.json())
-      .then((res) => {
-        alert('Login successful');
-        // The response is expected to be in the form:
-        // {
-        // message: "Login Successful!"
-        // token: "",
-        // }
+    // const res = response.json();
+    // setDetails({ ...details,accessToken: res.token }) 
+    setSuccess("Login Successful")  
 
-        this.setState({
-          accessToken: res.token,
-        });
-      })
-      .catch((error) => {
+    }
+    catch(err){
         // console.log(error);
-      });
-  };
-
-  handleEmailChange = (e) => {
-    this.setState({
-      email: e.target.value,
-    });
-  };
-
-  handlePasswordChange = (e) => {
-    this.setState({
-      password: e.target.value,
-    });
+        setError("Invalid Credentials")
+    }
+  }else{
+    setError("Invalid Input")
+  }
   };
-
-  render() {
     return (
       <Row className='login-padding'>
         <Col md={4} />
         <Col md={4}>
-          <Form className='login-form'>
+          <Form className='login-form' onSubmit={handleLogin}>
             <Form.Group className='mb-3' controlId='formBasicEmail'>
+             {success && showSuccessMessage(success)}
+             {error && showErrorMessage(error)}
               <Form.Label>Email</Form.Label>
               <Form.Control
                 type='email'
                 placeholder='Enter email'
                 name='email'
-                value={this.state.email}
-                onChange={this.handleEmailChange}
+                value={details.email}
+                onChange={(e) => setDetails({ ...details, email: e.target.value })}
               />
               <Form.Text className='text-muted'>
                 We'll never share your email with anyone else.
@@ -84,22 +77,21 @@ class Login extends React.Component {
                 type='password'
                 placeholder='Password'
                 name='password'
-                value={this.state.password}
-                onChange={this.handlePasswordChange}
+                value={details.password}
+                onChange={(e) => setDetails({ ...details, password: e.target.value })}
               />
             </Form.Group>
             <Form.Group className='mb-3' controlId='formBasicCheckbox'>
               <Form.Check type='checkbox' label='Remember me' />
             </Form.Group>
-            <Button variant='primary' onClick={this.handleLogin} type='submit'>
+            <Button variant='primary' type='submit'>
               Login
             </Button>
           </Form>
         </Col>
         <Col md={4} />
       </Row>
     );
-  }
 }
 
 export default Login;

src/pages/SignUp.js

@@ -1,6 +1,8 @@
 /* eslint-disable react/function-component-definition */
 import { React, useState } from 'react';
 import { Row, Col, Form, Button } from 'react-bootstrap';
+import { showSuccessMessage,showErrorMessage } from '../helpers/alerts';
+import { SignupValidation } from '../helpers/validate';
 import "../styles/Signup.css"
 
 const SignUp = () => {
@@ -9,17 +11,32 @@ const SignUp = () => {
     email: '',
     password: '',
   });
+  const [success,setSuccess] = useState("");
+  const [error,setError]=useState("");
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    fetch('https://journal-policy-tracker.herokuapp.com/users/register', {
+    setSuccess("");
+    setError("");
+    const check = SignupValidation(details);
+    if(check){
+    try{
+      fetch('https://journal-policy-tracker.herokuapp.com/users/register', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(details),
-    }).then(() => {
-      // console.log('Sign up was successful');
+    })
+    setSuccess("Signup Successful")
+    setTimeout(()=>{
       window.location.href = '/login';
-    });
+    },800)
+    }catch(err){
+      setError("Signup Failed")
+    }
+  }
+  else{
+    setError("Invalid Input")
+  }
   };
 
   return (
@@ -28,6 +45,8 @@ const SignUp = () => {
       <Col md={4}>
         <Form className='login-form' onSubmit={handleSubmit}>
           <Form.Group className='mb-3' controlId='formBasicUsername'>
+             {success && showSuccessMessage(success)}
+             {error && showErrorMessage(error)}
             <Form.Label>Username</Form.Label>
             <Form.Control
               type='text'