finished to do list

README.md

@@ -18,21 +18,21 @@ In order to start this assignment you need to:
 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`.
-- [ ] 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.
+- [x] Add the 'Roboto' font from Google fonts and add it as a global CSS var called `--font-primary`.
+- [x] Make application responsive. It is already for the most part, but it is not optimal for smaller screens.
+- [x] 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.
-- [ ] 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.
-- [ ] 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
+- [x] Fetch addresses based on houseNumber and zipCode.
+- [x] Create generic `<Form />` component to display form rows, legend and a submit button.
+- [x] Create an `<ErrorMessage />` component for displaying an error message.
+- [x] Add a button to clear all form fields. Button must look different from the default primary button, see design.
+- [x] 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.
+- [x] Prevent duplicate addresses.
+- [x] 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! 🚀

src/App.css

@@ -1,11 +1,4 @@
-/**
-* 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.
-*/
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 
 :root {
   --border-radius-default: 4px;
@@ -18,6 +11,7 @@
   --color-text-light: #72787d;
   --width-input: 20rem;
   --width-content: 30rem;
+  --font-primary: "Roboto", sans-serif;
 }
 
 * {
@@ -55,11 +49,6 @@ legend {
   color: var(--color-text-light);
 }
 
-.error {
-  color: red;
-  padding: 0.5em 0;
-}
-
 .form-row {
   margin-bottom: 0.5em;
 }

src/App.js

@@ -7,24 +7,24 @@ 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 Form from "./ui/components/Form";
+
+import useForm from "./ui/hooks/useForm";
 import useAddressBook from "./ui/hooks/useAddressBook";
 
 import "./App.css";
+import ErrorMessage from "./ui/components/ErrorMessage";
 
 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 [information, informationChange, resetForm] = useForm({
+    zipCode: "",
+    houseNumber: "",
+    firstName: "",
+    lastName: "",
+    selectedAddress: "",
+  });
+  const [loading, setLoading] = React.useState(false);
+
   /**
    * Results states
    */
@@ -35,46 +35,57 @@ function App() {
    */
   const { addAddress } = 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 onClearHandler = () => {
+    resetForm();
+    setAddresses([]);
+  };
 
   const handleAddressSubmit = async (e) => {
     e.preventDefault();
+    setLoading(true);
 
-    /** 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
-     */
+    if (!information.zipCode || !information.houseNumber) {
+      setError("Please fill in the required fields");
+      return;
+    }
+
+    const response = await fetch(
+      `http://api.postcodedata.nl/v1/postcode/?postcode=${information.zipCode}&streetnumber=${information.houseNumber}&ref=domeinnaam.nl&type=json`
+    );
+    const data = await response.json();
+    if (data.status === "error") {
+      setError(
+        "Could not find the address. Have you entered the right information?"
+      );
+      setLoading(false);
+      return;
+    }
+    const transformedAddresses = data.details.map((address) =>
+      transformAddress({ ...address, houseNumber: information.houseNumber })
+    );
+    setAddresses(transformedAddresses);
+    setLoading(false);
   };
 
   const handlePersonSubmit = (e) => {
     e.preventDefault();
 
-    if (!selectedAddress || !addresses.length) {
+    if (!information.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 === information.selectedAddress
     );
 
-    addAddress({ ...foundAddress, firstName, lastName });
+    addAddress({
+      ...foundAddress,
+      firstName: information.firstName,
+      lastName: information.lastName,
+    });
   };
 
   return (
@@ -87,72 +98,71 @@ 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"}
+          buttonTitle="Find"
+          onButtonClick={handleAddressSubmit}
+        >
+          <div className="form-row">
+            <InputText
+              name="zipCode"
+              onChange={informationChange}
+              placeholder="Zip Code"
+              value={information.zipCode}
+            />
+          </div>
+          <div className="form-row">
+            <InputText
+              name="houseNumber"
+              onChange={informationChange}
+              value={information.houseNumber}
+              placeholder="House number"
+            />
+          </div>
+        </Form>
+        {loading && <p>Loading...</p>}
         {addresses.length > 0 &&
           addresses.map((address) => {
             return (
               <Radio
                 name="selectedAddress"
                 id={address.id}
                 key={address.id}
-                onChange={handleSelectedAddressChange}
+                onChange={informationChange}
               >
                 <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>
+        {information.selectedAddress && (
+          <Form
+            legend="✏️ Add personal info to address"
+            buttonTitle="Add to addressbook"
+            onButtonClick={handlePersonSubmit}
+          >
+            <div className="form-row">
+              <InputText
+                name="firstName"
+                placeholder="First name"
+                onChange={informationChange}
+                value={information.firstName}
+              />
+            </div>
+            <div className="form-row">
+              <InputText
+                name="lastName"
+                placeholder="Last name"
+                onChange={informationChange}
+                value={information.lastName}
+              />
+            </div>
+          </Form>
         )}
+        {error && <ErrorMessage>{error}</ErrorMessage>}
 
-        {/* TODO: Create an <ErrorMessage /> component for displaying an error message */}
-        {error && <div className="error">{error}</div>}
-
-        {/* TODO: Add a button to clear all form fields. Button must look different from the default primary button, see design. */}
+        <Button onClick={onClearHandler} variant="secondary">
+          Clear all fields
+        </Button>
       </Section>
 
       <Section variant="dark">

src/core/reducers/addressBook.js

@@ -5,14 +5,27 @@ const defaultState = {
 const reducer = (state = defaultState, action) => {
   switch (action.type) {
     case "address/add":
-      /** TODO: Prevent duplicate addresses */
+      const duplicate = state.addresses.find((address) => {
+        return (
+          address.houseNumber === action.payload.houseNumber &&
+          address.street === action.payload.street
+        );
+      });
+      if (duplicate) {
+        return state;
+      }
       return { ...state, addresses: [...state.addresses, action.payload] };
+
     case "address/remove":
-      /** TODO: Write a state update which removes an address from the addresses array. */
-      return state;
+      const filteredAddresses = state.addresses.filter(
+        (address) => address.id !== action.payload
+      );
+      return { ...state, addresses: filteredAddresses };
+
     case "addresses/add": {
       return { ...state, addresses: action.payload };
     }
+
     default:
       return state;
   }

src/ui/components/AddressBook/AddressBook.js

@@ -19,7 +19,10 @@ const AddressBook = () => {
 
   return (
     <section className={$.addressBook}>
-      <h2>📓 Address book ({addresses.length})</h2>
+      <div>
+        <h2>📓 Address book</h2>
+        <h3>Total Addresses: {addresses.length}</h3>
+      </div>
       {!loading && (
         <>
           {addresses.length === 0 && <p>No addresses found, try add one 😉</p>}

src/ui/components/AddressBook/AddressBook.module.css

@@ -6,12 +6,12 @@
 
 .remove {
   --color-brand: var(--color-accent);
-  margin-left: auto;
 }
 
 .item {
-  align-items: center;
   display: flex;
+  flex-direction: column;
+  align-items: flex-start;
   gap: 1rem;
 }
 
@@ -22,3 +22,14 @@
 .item h3 {
   margin: 0 0 0.5em;
 }
+
+@media (min-width: 425px) {
+  .item {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .remove {
+    margin-left: auto;
+  }
+}

src/ui/components/Button/Button.js

@@ -11,10 +11,12 @@ const Button = ({
 }) => {
   return (
     <button
-      // TODO: Add conditional classNames
-      // - Must have a condition to set the '.primary' className
-      // - Must have a condition to set the '.secondary' className
-      className={$.button}
+      className={[
+        cx($.button, {
+          [$.primary]: variant === "primary",
+          [$.secondary]: variant === "secondary",
+        }),
+      ]}
       type={type}
       onClick={onClick}
     >