add page functionality

kivi-cars/src/containers/EmailPage.js

@@ -1,31 +1,74 @@
+import {useContext, useState, useEffect} from 'react';
+import { DataContext } from './DataContext';
 import './css/EmailPage.css'
 import Header from '../components/Header/Header';
 import ButtonsToolbar from '../components/ButtonsToolbar/ButtonsToolbar';
 import StandardBtn from '../components/Button/StandardBtn';
+import TitleBtn from '../components/Button/TitleBtn';
+import { Link } from 'react-router-dom';
 
 
 function EmailPage(props) {
+
+    const {filtersData, setFiltersData} = props.data
+    const [error, setError] = useState(false)
+
+
+    const [state, setState] = useState({
+        email: "",
+        confirmEmail: ""
+    })
+
     const header = "SLANJE OBAVJEŠTENJA";
-    var title1 = 'Odmah';
-    var title2 = 'Dnevno';
-    var title3 = 'ZAVRŠI';
+    let title1 = 'Odmah';
+    let title2 = 'Dnevno';
+    let title3 = 'ZAVRŠI';
+    let errmsg = 'Email does not match!';
+    let filter = 'Slanje'
+
+
+    const emailCheck = (e, ec) => {
+        if(e !== "" && e === ec){
+            setError(false)
+            setFiltersData(prevData => ({
+                ...prevData,
+                "email": state.email
+            }))
+            return error
+        }else {
+            setError(true)
+            return error
+        }
+    }
+
+    const updateInput = (event) => {
+        setState(prevState => ({
+            ...prevState,
+            [event.target.name]: event.target.value
+        }))
+    }
+
+    useEffect(() => {
+        emailCheck(state.email, state.confirmEmail)
+    }, [state])
 
     return ( 
         <div>
             <Header header={header}/>
-            <ButtonsToolbar/>
-            <div>
+            <ButtonsToolbar routes={props.routes}/>
+            <div className="info">
                 <h2 className='h2'>Slanje obavještenja</h2>
             </div>
             <div className='buttons-container'>
-                <StandardBtn title={title1}/>
-                <StandardBtn title={title2}/>
+                <StandardBtn data={{filtersData, setFiltersData, filter}} title={title1}/>
+                <StandardBtn data={{filtersData, setFiltersData, filter}} title={title2}/>
             </div>
             <div className='form'>
                 <form method="POST" id="form-email">
                     <div className='email-div'>
-                        <input id="email" name='email' placeholder='vas.email@mail.com' required size='250'/>
-                        <input id="confirmEmail" name='confirmEmail' placeholder='potvrdite.email@mail.com' required size='250'/>
+                        <input type="email" id="email" name='email' placeholder='vas.email@mail.com' required size='250' onChange={updateInput} />
+                        <input type="email" id="confirmEmail" name='confirmEmail' placeholder='potvrdite.email@mail.com' required size='250' onChange={updateInput} />
+                        <p style={{color: "red"}} >{error ? errmsg : null}</p>
                     </div>
 
                 </form>
@@ -36,7 +79,11 @@ function EmailPage(props) {
                 </h3>
             </div>
             <div>
-                <StandardBtn title={title3}/>
+                {error ? (<TitleBtn title={title3} /> ) : (
+                <Link to="/congrats">
+                    <TitleBtn title={title3} />    
+                </Link>
+                )}      
             </div>
         </div>