levizimmerman · Natnaelh · Feb 15, 2023
diff --git a/README.md b/README.md
@@ -3,41 +3,45 @@
 https://user-images.githubusercontent.com/12231393/136546219-a49c6ea7-fd63-48b5-8906-04ce8c04a181.mp4
 
 ## Description
+
 Try to finish as much TODO's as possible. These are found within the React app codebase. When you view the `/src` folder you will find an application for users that want to create their own addressbook (also shown in the video above). But as mentioned before there are some TODO's to be completed in order to make the application work as expected.
 
 In order to start this assignment you need to:
+
 - ⬇️ Clone this repository
 - 🌲 Create a separate branch called `feat/todo-assignment`
 - 👨‍💻 Open up your preferred editor (mine is VS Code)
 - 🏃🏻‍♂️ Run `npm install` and then `npm start`
-- 🔎  Search for all `TODO:` strings within the `/src` folder and start building!
+- 🔎 Search for all `TODO:` strings within the `/src` folder and start building!
 
 > Note: You will find some Bonus TODO's. These are not mandatory for completing this assignment. Feel free to flex your programming skills 💪
 
-## TODO's 
+## TODO's
+
 Here is a list of all the TODO's to make life a bit easier:
 
 ### Styling
-- [ ] Add the 'Roboto' font from Google fonts and add it as a global CSS var called `--font-primary`.
+
+- [DONE] Add the 'Roboto' font from Google fonts and add it as a global CSS var called `--font-primary`.
 - [ ] Make application responsive. It is already for the most part, but it is not optimal for smaller screens.
-- [ ] Create separate styles for .primary and .secondary variants of the button component.
+- [DONE] Create separate styles for .primary and .secondary variants of the button component.
 
 ### React
-- [ ] Write a custom hook to set form fields in a more generic way.
+
+- [DONE] Write a custom hook to set form fields in a more generic way.
 - [ ] Fetch addresses based on houseNumber and zipCode.
-- [ ] Create generic `<Form />` component to display form rows, legend and a submit button.
-- [ ] Create an `<ErrorMessage />` component for displaying an error message.
+- [DONE] Create generic `<Form />` component to display form rows, legend and a submit button.
+- [DONE] Create an `<ErrorMessage />` component for displaying an error message.
 - [ ] Add a button to clear all form fields. Button must look different from the default primary button, see design.
-- [ ] Add conditional classNames for `primary` and `secondary` variant in `<Button />` component
+- [DONE] Add conditional classNames for `primary` and `secondary` variant in `<Button />` component
 
 ### Redux
+
 - [ ] Prevent duplicate addresses.
 - [ ] Write a state update which removes an address from the addresses array.
 
 ## Submitting assignment
+
 You can submit your assignment by creating a merge request for your `feat/todo-assignment` branch. That's it, good luck! 🚀
 
 > If any questions might arise about the assignment please contact l.zimmerman@wearetriple.com
-
-
-
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.css b/src/App.css
@@ -7,7 +7,13 @@
 * - Making the application responsive using the Mobile First principle.
 */
 
+@font-face {
+  font-family: "Roboto", sans-serif;
+  src: url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap");
+}
+
 :root {
+  --font-primary: "Roboto", sans-serif;
   --border-radius-default: 4px;
   --border-radius-xl: 15px;
   --color-accent: #cacfdd;
@@ -32,7 +38,8 @@ body {
 }
 
 main {
-  padding: 2rem;
+  padding: 0.5rem;
+  gap: 1rem;
 }
 
 small {
@@ -63,3 +70,31 @@ legend {
 .form-row {
   margin-bottom: 0.5em;
 }
+
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-spinner {
+  margin: 0 auto;
+  border: 5px solid #f3f3f3; /* Light grey */
+  border-top: 5px solid #3498db; /* Blue */
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  animation: spin 2s linear infinite;
+}
+
+
+
+@media screen and (min-width: 640px) {
+  .main {
+    padding: 3rem;
+  }
+}
diff --git a/src/App.js b/src/App.js
@@ -1,15 +1,16 @@
-import React from "react";
-
+import React, { useState } from "react";
 import Address from "./ui/components/Address/Address";
 import AddressBook from "./ui/components/AddressBook/AddressBook";
 import Button from "./ui/components/Button/Button";
-import InputText from "./ui/components/InputText/InputText";
 import Radio from "./ui/components/Radio/Radio";
 import Section from "./ui/components/Section/Section";
 import transformAddress from "./core/models/address";
 import useAddressBook from "./ui/hooks/useAddressBook";
+import useFormFields from "./ui/hooks/useFormFields";
 
 import "./App.css";
+import Form from "./ui/components/Form/Form";
+import ErrorMessage from "./ui/components/Error/Error";
 
 function App() {
   /**
@@ -20,11 +21,47 @@ function App() {
    * - Remove all individual React.useState
    * - Remove all individual onChange handlers, like handleZipCodeChange for example
    */
-  const [zipCode, setZipCode] = React.useState("");
-  const [houseNumber, setHouseNumber] = React.useState("");
-  const [firstName, setFirstName] = React.useState("");
-  const [lastName, setLastName] = React.useState("");
-  const [selectedAddress, setSelectedAddress] = React.useState("");
+  const [loading, setLoading] = useState(false);
+  const { formData, handleInputChange, resetFormFields } = useFormFields({
+    zipCode: "",
+    firstName: "",
+    lastName: "",
+    selectedAddress: "",
+    houseNumber: "",
+  });
+  const { zipCode, firstName, lastName, selectedAddress, houseNumber } =
+    formData;
+
+  const addressObj = [
+    {
+      name: "zipCode",
+      placeholder: "Zip Code",
+      handleInputChange: handleInputChange,
+      value: zipCode,
+    },
+    {
+      name: "houseNumber",
+      placeholder: "House Number",
+      handleInputChange: handleInputChange,
+      value: houseNumber,
+    },
+  ];
+
+  const nameObj = [
+    {
+      name: "firstName",
+      placeholder: "First name",
+      value: firstName,
+      handleInputChange: handleInputChange,
+    },
+    {
+      name: "lastName",
+      placeholder: "Last Name",
+      value: lastName,
+      handleInputChange: handleInputChange,
+    },
+  ];
+
   /**
    * Results states
    */
@@ -38,26 +75,50 @@ function App() {
   /**
    * Text fields onChange handlers
    */
-  const handleZipCodeChange = (e) => setZipCode(e.target.value);
-
-  const handleHouseNumberChange = (e) => setHouseNumber(e.target.value);
-
-  const handleFirstNameChange = (e) => setFirstName(e.target.value);
-
-  const handleLastNameChange = (e) => setLastName(e.target.value);
-
-  const handleSelectedAddressChange = (e) => setSelectedAddress(e.target.value);
 
   const handleAddressSubmit = async (e) => {
     e.preventDefault();
-
     /** TODO: Fetch addresses based on houseNumber and zipCode
      * - Example URL of API: http://api.postcodedata.nl/v1/postcode/?postcode=1211EP&streetnumber=60&ref=domeinnaam.nl&type=json
      * - Handle errors if they occur
      * - Handle successful response by updating the `addresses` in the state using `setAddresses`
      * - Make sure to add the houseNumber to each found address in the response using `transformAddress()` function
      * - Bonus: Add a loading state in the UI while fetching addresses
      */
+
+    fetchData(
+      `http://api.postcodedata.nl/v1/postcode/?postcode=${zipCode}}&streetnumber=${houseNumber}&ref=domeinnaam.nl&type=json`
+    );
+  };
+
+  const fetchData = (url) => {
+    setError(undefined);
+    setLoading(true);
+    try {
+      fetch(url, {
+        method: "POST",
+        body: JSON.stringify({}),
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          if (data.status === "ok") {
+            const transformedData = {
+              houseNumber: houseNumber,
+              ...data.details[0],
+            };
+            setAddresses([transformAddress(transformedData)]);
+            setLoading(false);
+          } else if (data.status === "error") {
+            console.log("ERROR:", data);
+            setError(data.errormessage);
+            setLoading(false);
+          }
+        });
+    } catch (error) {
+      console.log(error);
+      setError(error.message);
+      setLoading(false);
+    }
   };
 
   const handlePersonSubmit = (e) => {
@@ -77,6 +138,12 @@ function App() {
     addAddress({ ...foundAddress, firstName, lastName });
   };
 
+  const handleClearAllFields = () => {
+    setAddresses([]);
+    setError(null);
+    resetFormFields();
+  };
+
   return (
     <main>
       <Section>
@@ -88,71 +155,45 @@ function App() {
           </small>
         </h1>
         {/* TODO: Create generic <Form /> component to display form rows, legend and a submit button  */}
-        <form onSubmit={handleAddressSubmit}>
-          <fieldset>
-            <legend>🏠 Find an address</legend>
-            <div className="form-row">
-              <InputText
-                name="zipCode"
-                onChange={handleZipCodeChange}
-                placeholder="Zip Code"
-                value={zipCode}
-              />
-            </div>
-            <div className="form-row">
-              <InputText
-                name="houseNumber"
-                onChange={handleHouseNumberChange}
-                value={houseNumber}
-                placeholder="House number"
-              />
-            </div>
-            <Button type="submit">Find</Button>
-          </fieldset>
-        </form>
+
+        <Form
+          legend="🏠 Find an address"
+          handleSubmit={handleAddressSubmit}
+          fieldValues={addressObj}
+          buttonText="Find"
+        />
+        {loading && <div className="loading-spinner"></div>}
         {addresses.length > 0 &&
           addresses.map((address) => {
             return (
               <Radio
                 name="selectedAddress"
                 id={address.id}
                 key={address.id}
-                onChange={handleSelectedAddressChange}
+                value={selectedAddress}
+                handleInputChange={handleInputChange}
               >
                 <Address address={address} />
               </Radio>
             );
           })}
         {/* TODO: Create generic <Form /> component to display form rows, legend and a submit button  */}
         {selectedAddress && (
-          <form onSubmit={handlePersonSubmit}>
-            <fieldset>
-              <legend>✏️ Add personal info to address</legend>
-              <div className="form-row">
-                <InputText
-                  name="firstName"
-                  placeholder="First name"
-                  onChange={handleFirstNameChange}
-                  value={firstName}
-                />
-              </div>
-              <div className="form-row">
-                <InputText
-                  name="lastName"
-                  placeholder="Last name"
-                  onChange={handleLastNameChange}
-                  value={lastName}
-                />
-              </div>
-              <Button type="submit">Add to addressbook</Button>
-            </fieldset>
-          </form>
+          <Form
+            legend="✏️ Add personal info to address"
+            handleSubmit={handlePersonSubmit}
+            fieldValues={nameObj}
+            buttonText="Add to Address book"
+          />
         )}
 
         {/* TODO: Create an <ErrorMessage /> component for displaying an error message */}
-        {error && <div className="error">{error}</div>}
+        {error && <ErrorMessage error={error} />}
 
         {/* TODO: Add a button to clear all form fields. Button must look different from the default primary button, see design. */}
+        <Button variant="secondary" onClick={handleClearAllFields}>
+          Clear all fields
+        </Button>
       </Section>
 
       <Section variant="dark">

diff --git a/src/core/reducers/addressBook.js b/src/core/reducers/addressBook.js
@@ -6,10 +6,20 @@ const reducer = (state = defaultState, action) => {
   switch (action.type) {
     case "address/add":
       /** TODO: Prevent duplicate addresses */
-      return { ...state, addresses: [...state.addresses, action.payload] };
+      if (
+        !state.addresses.find((address) => address.id === action.payload.id)
+      ) {
+        return { ...state, addresses: [...state.addresses, action.payload] };
+      } else return { ...state, addresses: [...state.addresses] };
+
     case "address/remove":
       /** TODO: Write a state update which removes an address from the addresses array. */
-      return state;
+      return {
+        ...state,
+        addresses: [
+          ...state.addresses.filter((address) => address.id !== action.payload),
+        ],
+      };
     case "addresses/add": {
       return { ...state, addresses: action.payload };
     }