alinabeglarian · alinabeglarian · Sep 12, 2019 · Sep 12, 2019 · Sep 12, 2019 · Sep 12, 2019
diff --git a/public/index.html b/public/index.html
@@ -1,8 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

diff --git a/src/App.js b/src/App.js
@@ -1,11 +1,12 @@
-import React from 'react';
-import './App.css';
+import React from 'react'
+import './styling.css'
+import Form from './Form'
 
 function App() {
   return (
     <div className="App">
       <header className="App-header">
-
+        <Form />
       </header>
     </div>
   );

diff --git a/src/Form.js b/src/Form.js
@@ -0,0 +1,102 @@
+import React from 'react'
+import useFormValidation from './useFormValidation'
+import validationLogic from './validationLogic'
+
+const initialState = {
+  voorletters: "",
+  tussenvoegsel: "",
+  achternaam: "",
+  postcode: "",
+  straatnaam: "",
+  stad: "",
+  huisnummer: "",
+  email: ""
+}
+
+export default function Form(props) {
+
+  const { values, errors, isSubmitting, isLoading, handleChange, handleBlur, handleSubmit } = useFormValidation(initialState, validationLogic)
+
+  return (
+    <div className="form-container">
+      <h1>Incentronauten</h1>
+      <h1>Formulier</h1>
+      <form onSubmit={handleSubmit}>
+        <input
+          name="voorletters"
+          onChange={handleChange}
+          onBlur={handleBlur}
+          value={values.voorletters}
+          className={errors.voorletters && "error-input"}
+          placeholder="Voorletters"
+          autoComplete="off"
+        />
+        {errors.voorletters && <p className="error-text">{errors.voorletters}</p>}
+        <input
+          name="tussenvoegsel"
+          onChange={handleChange}
+          value={values.tussenvoegsel}
+          placeholder="Tussenvoegsel"
+          autoComplete="off"
+        />
+        <input
+          name="achternaam"
+          onChange={handleChange}
+          onBlur={handleBlur}
+          value={values.achternaam}
+          className={errors.achternaam && "error-input"}
+          placeholder="Achternaam"
+          autoComplete="off"
+        />
+        {errors.achternaam && <p className="error-text">{errors.achternaam}</p>}
+        <input
+          name="postcode"
+          onChange={handleChange}
+          onBlur={handleBlur}
+          value={values.postcode}
+          className={errors.postcode && "error-input"}
+          placeholder="Postcode"
+          autoComplete="off"
+        />
+        {errors.postcode && <p className="error-text">{errors.postcode}</p>}
+        <input
+          name="straatnaam"
+          readOnly
+          value={values.straatnaam}
+          placeholder={isLoading ? "Loading..." : "Straatnaam"}
+          autoComplete="off"
+        />
+        <input
+          name="stad"
+          readOnly
+          value={values.stad}
+          placeholder={isLoading ? "Loading..." : "Stad"}
+          autoComplete="off"
+        />
+        <input
+          name="huisnummer"
+          onChange={handleChange}
+          onBlur={handleBlur}
+          value={values.huisnummer}
+          className={errors.huisnummer && "error-input"}
+          placeholder="Huisnummer"
+          autoComplete="off"
+        /> 
+        {errors.huisnummer && <p className="error-text">{errors.huisnummer}</p>}
+        <input
+          name="email"
+          onChange={handleChange}
+          onBlur={handleBlur}
+          value={values.email}
+          className={errors.email && "error-input"}
+          placeholder="Email"
+          autoComplete="off"
+        />
+        {errors.email && <p className="error-text">{errors.email}</p>}
+        <div>
+          <button className="btn" disabled={isSubmitting} type="submit">Verstuur</button>
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/src/Styling.css b/src/Styling.css
@@ -0,0 +1,143 @@
+@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Josefin Sans", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.7;
+  color: #777;
+  padding: 30px;
+}
+
+@keyframes moveInLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(-100px);
+  }
+
+  80% {
+    transform: translateX(10px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(0);
+  }
+}
+
+h1 {
+  margin: 20px;
+  display: block;
+  font-size:30px;
+  font-weight: 400;
+  letter-spacing: 35px;
+  animation: moveInLeft 1s ease-out;
+}
+
+form {
+  max-width: 450px;
+	background: #FAFAFA;
+	padding: 30px;
+	margin: 50px auto;
+	box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);
+	border-radius: 10px;
+	border: 6px solid rgb(224, 121, 23);
+}
+
+input {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+  resize: vertical;
+}
+
+@keyframes errorAppearing {
+  0% {
+    opacity: 0;
+    transform: scale(1)
+  }
+  100% {
+    opacity: 1;
+    transform: (scale(1.2))
+  }
+}
+
+.error-input {
+  border: 2px solid red;
+  border-radius: 4px;
+  animation: errorAppearing ease-in 2s
+}
+
+.error-text {
+  margin: 0.25em 0 0 0;
+  padding: 0;
+  color: red;
+  font-style: bold;
+  font-size: 10px;
+  animation: errorAppearing ease-in 2s
+}
+
+@keyframes moveInBottom {
+  0% {
+    opacity: 0;
+    transform: translateY(100px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate(0px)
+  }
+}
+
+.btn {
+  text-transform: uppercase;
+  text-decoration: none;
+  padding: 15px 40px;
+  margin: 10px;
+  display: inline-block;
+  border-radius: 100px;
+  transition: all 0.2s;
+  position: relative;
+  animation: moveInBottom .5s ease-out .75s;
+  animation-fill-mode: backwards;
+  background-color: #fff;
+  color: #777;
+  outline: none;
+}
+
+.btn:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
+}
+
+.btn:active {
+  transform: translateY(-1px);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
+}
+
+.btn::after {
+  content: "";
+  display: inline-block;
+  height: 100%; 
+  width: 100%;
+  border-radius: 100px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  transition: all .4s;
+  background-color: rgb(218, 158, 102);;
+}
+
+.btn:hover::after {
+  transform: scaleX(1.5) scaleY(1.6);
+  opacity: 0;
+}
diff --git a/src/useFormValidation.js b/src/useFormValidation.js
@@ -0,0 +1,105 @@
+import React from 'react'
+
+export default function useFormValidation(initialState, validate) {
+  const [ values, setValues ] = React.useState(initialState)
+  const [ errors, setErrors ] = React.useState({})
+  const [ isSubmitting, setSubmitting ] = React.useState(false)
+  const [ isLoading, setLoading ] = React.useState(false)
+
+  React.useEffect(() => {
+    if (isSubmitting) {
+      const noErrors = Object.keys(errors).length === 0
+      if (noErrors) {
+        submitData(values)
+        setSubmitting(false)
+        alert("Formulier is verstuurd!")
+      } else {
+        setSubmitting(false)
+        setLoading(false)
+      }
+    }
+  }, [errors])
+
+  React.useEffect(() => {
+    if (values.postcode && values.huisnummer) {
+      if (!errors.postcode && !errors.huisnummer) {
+        fetchingPostalCode(values.postcode, values.huisnummer)
+        setLoading(true)
+      } else {
+        setLoading(false)
+      }
+    }
+  }, [errors])
+
+  function handleChange(event) {
+    setValues({
+      ...values, 
+      [event.target.name]: event.target.value
+    })
+  }
+
+  function handleBlur() {
+    const validationErrors = validate(values)
+    setErrors(validationErrors)
+  }
+
+  function handleSubmit(event) {
+    event.preventDefault()
+    const validationErrors = validate(values)
+    setErrors(validationErrors)
+    setSubmitting(true)
+  }
+
+  async function fetchingPostalCode(postcode, huisnummer) {
+    try {
+      const response = await fetch(`http://geodata.nationaalgeoregister.nl/locatieserver/free?fq=postcode:${postcode}&fq=huisnummer~${huisnummer}*`)
+      const data = await response.json()
+      const firstResult = await data.response.docs[0]
+      setValues({
+        ...values,
+        stad: firstResult.woonplaatsnaam,
+        straatnaam: firstResult.straatnaam
+      })
+      setLoading(false)
+    } catch(error) {
+      console.log(error)
+      return error
+    }
+  }
+
+  async function submitData(values) {
+    const settings = {
+      method: 'POST',
+      mode: 'cors',
+      body: JSON.stringify(values),
+      headers: {
+      "Content-type": "application/json; charset=UTF-8"
+      }
+    }
+    try {
+      const response = await fetch("https://enpi5jvod6cob.x.pipedream.net/", settings)
+      const data = await response.json()
+      setValues({voorletters: "",
+        tussenvoegsel: "",
+        achternaam: "",
+        postcode: "",
+        straatnaam: "",
+        stad: "",
+        huisnummer: "",
+        email: ""})
+    } catch(error) {
+      console.log(error)
+      return error
+    }
+  }
+
+  return {
+    values,
+    errors,
+    isSubmitting,
+    isLoading,
+    handleChange,
+    handleBlur,
+    handleSubmit,
+  }
+}