Feat/todo assignment

package.json

@@ -3,17 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "classnames": "^2.3.1",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "classnames": "^2.3.2",
     "localforage": "^1.10.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-redux": "^7.2.5",
-    "react-scripts": "4.0.3",
-    "redux": "^4.1.1",
-    "web-vitals": "^1.0.1"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^9.2.0",
+    "react-scripts": "5.0.1",
+    "redux": "^5.0.0",
+    "web-vitals": "^3.4.0"
   },
   "scripts": {
     "start": "react-scripts start",

public/index.html

@@ -15,6 +15,13 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
+      rel="stylesheet"
+    />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.css

@@ -2,7 +2,6 @@
 * New stuff
 */
 
-/* TODO: Add the 'Roboto' font from Google fonts and add it as a global CSS var called `--font-primary` */
 /* TODO: Make application responsive. It is already for the most part, but it is not optimal for smaller screens.
 * - Making the application responsive using the Mobile First principle.
 */
@@ -16,6 +15,7 @@
   --color-brand: #413ef7;
   --color-text: #141925;
   --color-text-light: #72787d;
+  --font-primary: "Roboto", sans-serif;
   --width-input: 20rem;
   --width-content: 30rem;
 }
@@ -41,25 +41,7 @@ small {
   color: var(--color-text-light);
 }
 
-fieldset {
-  border: none;
-  border-bottom: 1px solid var(--color-accent);
-  border-top: 1px solid var(--color-accent);
-  margin: 2rem 0;
-  max-width: var(--width-input);
-  padding: 1rem 0;
-  width: 100%;
-}
-
-legend {
-  color: var(--color-text-light);
-}
-
 .error {
   color: red;
   padding: 0.5em 0;
 }
-
-.form-row {
-  margin-bottom: 0.5em;
-}

src/App.js

@@ -1,80 +1,114 @@
 import React from "react";
 
+import transformAddress from "./core/models/address";
 import Address from "./ui/components/Address/Address";
 import AddressBook from "./ui/components/AddressBook/AddressBook";
+import Alert from "./ui/components/Alert/Alert";
 import Button from "./ui/components/Button/Button";
+import Form from "./ui/components/Form/Form";
 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";
 
 function App() {
   /**
    * Form fields states
-   * TODO: Write a custom hook to set form fields in a more generic way:
-   * - Hook must expose an onChange handler to be used by all <InputText /> and <Radio /> components
-   * - Hook must expose all text form field values, like so: { zipCode: '', houseNumber: '', ...etc }
-   * - 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 { formFields, setFormFields } = useFormFields();
+
   /**
    * Results states
    */
   const [error, setError] = React.useState(undefined);
+  const [isLoading, setIsLoading] = React.useState(false);
   const [addresses, setAddresses] = React.useState([]);
+
   /**
    * Redux actions
    */
-  const { addAddress } = useAddressBook();
+  const {
+    addAddress,
+    error: retrieveAddressError,
+    setError: setRetrieveError,
+  } = useAddressBook();
 
   /**
    * 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
-     */
+    setIsLoading(true);
+    setError(undefined);
+    setRetrieveError(undefined);
+    setAddresses([]);
+
+    // Reset all form fields except zipCode and houseNumber
+    setFormFields({
+      ...formFields,
+      firstName: "",
+      lastName: "",
+      selectedAddress: "",
+    });
+
+    const url = `http://api.postcodedata.nl/v1/postcode/?postcode=${formFields.zipCode}&streetnumber=${formFields.houseNumber}&ref=domeinnaam.nl&type=json`;
+
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error(`Response status: ${response.status}`);
+      }
+
+      const { details: addresses } = await response.json();
+
+      const transformedAddresses = addresses.map((address) =>
+        transformAddress({
+          ...address,
+          houseNumber: formFields.houseNumber,
+        })
+      );
+      setAddresses(transformedAddresses);
+    } catch (error) {
+      setError("Failed to fetch addresses. Please try again.");
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   const handlePersonSubmit = (e) => {
     e.preventDefault();
 
-    if (!selectedAddress || !addresses.length) {
+    if (!formFields.selectedAddress || !addresses.length) {
       setError(
         "No address selected, try to select an address or find one if you haven't"
       );
       return;
     }
 
     const foundAddress = addresses.find(
-      (address) => address.id === selectedAddress
+      (address) => address.id === formFields.selectedAddress
     );
 
-    addAddress({ ...foundAddress, firstName, lastName });
+    addAddress({
+      ...foundAddress,
+      firstName: formFields.firstName,
+      lastName: formFields.lastName,
+    });
+  };
+
+  const clearAllFields = () => {
+    setFormFields({
+      ...formFields,
+      firstName: "",
+      lastName: "",
+      selectedAddress: "",
+      zipCode: "",
+      houseNumber: "",
+    });
+    setAddresses([]);
   };
 
   return (
@@ -87,72 +121,92 @@ function App() {
             Enter an address by zipcode add personal info and done! 👏
           </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"
+          onSubmit={handleAddressSubmit}
+          buttonText="Find"
+        >
+          <div className="form-row">
+            <InputText
+              name="zipCode"
+              onChange={(e) =>
+                setFormFields({ ...formFields, zipCode: e.target.value })
+              }
+              placeholder="Zip Code"
+              value={formFields.zipCode}
+            />
+          </div>
+          <div className="form-row">
+            <InputText
+              name="houseNumber"
+              onChange={(e) =>
+                setFormFields({ ...formFields, houseNumber: e.target.value })
+              }
+              value={formFields.houseNumber}
+              placeholder="House number"
+            />
+          </div>
+        </Form>
+
+        {isLoading && <Alert severity="info">Searching for addresses...</Alert>}
+
         {addresses.length > 0 &&
           addresses.map((address) => {
             return (
               <Radio
                 name="selectedAddress"
                 id={address.id}
                 key={address.id}
-                onChange={handleSelectedAddressChange}
+                onChange={(e) =>
+                  setFormFields({
+                    ...formFields,
+                    selectedAddress: e.target.value,
+                  })
+                }
               >
                 <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>
+
+        {formFields.selectedAddress && (
+          <Form
+            legend="✏️ Add personal info to address"
+            onSubmit={handlePersonSubmit}
+            buttonText="Add to addressbook"
+          >
+            <div className="form-row">
+              <InputText
+                name="firstName"
+                placeholder="First name"
+                onChange={(e) =>
+                  setFormFields({ ...formFields, firstName: e.target.value })
+                }
+                value={formFields.firstName}
+              />
+            </div>
+            <div className="form-row">
+              <InputText
+                name="lastName"
+                placeholder="Last name"
+                onChange={(e) =>
+                  setFormFields({ ...formFields, lastName: e.target.value })
+                }
+                value={formFields.lastName}
+              />
+            </div>
+          </Form>
         )}
 
-        {/* TODO: Create an <ErrorMessage /> component for displaying an error message */}
-        {error && <div className="error">{error}</div>}
+        <Button variant="secondary" onClick={clearAllFields}>
+          Clear all fields
+        </Button>
 
-        {/* TODO: Add a button to clear all form fields. Button must look different from the default primary button, see design. */}
+        {error && <Alert severity="error">{error}</Alert>}
+
+        {retrieveAddressError && (
+          <Alert severity="error">{retrieveAddressError}</Alert>
+        )}
       </Section>
 
       <Section variant="dark">