From d04d18bf786c23b6e1b51aa2599a8f94c7f93394 Mon Sep 17 00:00:00 2001
From: fikretellek <fikretellek@icloud.com>
Date: Fri, 8 Mar 2024 22:12:50 +0000
Subject: [PATCH 01/12] added restaurant button component

---
 src/components/RestaurantButton/RestaurantButton.jsx | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 src/components/RestaurantButton/RestaurantButton.jsx

diff --git a/src/components/RestaurantButton/RestaurantButton.jsx b/src/components/RestaurantButton/RestaurantButton.jsx
new file mode 100644
index 0000000..1f64e46
--- /dev/null
+++ b/src/components/RestaurantButton/RestaurantButton.jsx
@@ -0,0 +1,3 @@
+export default function RestaurantButton({}) {
+  return <button></button>;
+}

From f48ffebba82231593da7a046324c5ec5e1826519 Mon Sep 17 00:00:00 2001
From: fikretellek <fikretellek@icloud.com>
Date: Fri, 8 Mar 2024 22:16:19 +0000
Subject: [PATCH 02/12] new button component added to restaurant component

---
 src/components/Restaurant/Restaurant.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/Restaurant/Restaurant.jsx b/src/components/Restaurant/Restaurant.jsx
index d8f9dae..685a71b 100644
--- a/src/components/Restaurant/Restaurant.jsx
+++ b/src/components/Restaurant/Restaurant.jsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import RestaurantButton from "../RestaurantButton/RestaurantButton";
 
 const Restaurant = () => {
   const [orders, setOrders] = useState(0);
@@ -12,9 +13,7 @@ const Restaurant = () => {
       <ul className="restaurant__list">
         <li className="restaurant__item">
           Orders: {orders}
-          <button className="button restaurant__button" onClick={handleAddOrder}>
-            Add
-          </button>
+          <RestaurantButton handleAddOrder={handleAddOrder} />
         </li>
       </ul>
     </section>

From c344f150cfe8debdb12d6f58a3c3a37e95369c7a Mon Sep 17 00:00:00 2001
From: fikretellek <fikretellek@icloud.com>
Date: Fri, 8 Mar 2024 22:16:44 +0000
Subject: [PATCH 03/12] restaurant button component implemented

---
 src/components/RestaurantButton/RestaurantButton.jsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/RestaurantButton/RestaurantButton.jsx b/src/components/RestaurantButton/RestaurantButton.jsx
index 1f64e46..663a53d 100644
--- a/src/components/RestaurantButton/RestaurantButton.jsx
+++ b/src/components/RestaurantButton/RestaurantButton.jsx
@@ -1,3 +1,7 @@
-export default function RestaurantButton({}) {
-  return <button></button>;
+export default function RestaurantButton({ handleAddOrder }) {
+  return (
+    <button className="button restaurant__button" onClick={handleAddOrder}>
+      Add
+    </button>
+  );
 }

From 2721af37933c1c564729c59a9fcbbecae9e1c99f Mon Sep 17 00:00:00 2001
From: fikretellek <fikretellek@icloud.com>
Date: Fri, 8 Mar 2024 22:36:46 +0000
Subject: [PATCH 04/12] order component created, li element added to component

---
 src/components/Order/Order.jsx | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 src/components/Order/Order.jsx

diff --git a/src/components/Order/Order.jsx b/src/components/Order/Order.jsx
new file mode 100644
index 0000000..5e71384
--- /dev/null
+++ b/src/components/Order/Order.jsx
@@ -0,0 +1,10 @@
+import RestaurantButton from "../RestaurantButton/RestaurantButton";
+
+export default function Order({ orders, handleAddOrder }) {
+  return (
+    <li className="restaurant__item">
+      Orders: {orders}
+      <RestaurantButton handleAddOrder={handleAddOrder} />
+    </li>
+  );
+}

From 749f401df556963fb97807b5aa1f6f0006c3c6f7 Mon Sep 17 00:00:00 2001
From: fikretellek <fikretellek@icloud.com>
Date: Fri, 8 Mar 2024 22:37:51 +0000
Subject: [PATCH 05/12] order component added to restaurant component

---
 src/components/Restaurant/Restaurant.jsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/Restaurant/Restaurant.jsx b/src/components/Restaurant/Restaurant.jsx
index 685a71b..0811c5f 100644
--- a/src/components/Restaurant/Restaurant.jsx
+++ b/src/components/Restaurant/Restaurant.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import RestaurantButton from "../RestaurantButton/RestaurantButton";
+import Order from "../Order/Order";
 
 const Restaurant = () => {
   const [orders, setOrders] = useState(0);
@@ -11,10 +11,7 @@ const Restaurant = () => {
     <section className="restaurant">
       <h3 className="restaurant__heading">Restaurant Orders</h3>
       <ul className="restaurant__list">
-        <li className="restaurant__item">
-          Orders: {orders}
-          <RestaurantButton handleAddOrder={handleAddOrder} />
-        </li>
+        <Order orders={orders} handleAddOrder={handleAddOrder} />
       </ul>
     </section>
   );

From a382a9355667fed0d1d0411c21961f3d388c41dc Mon Sep 17 00:00:00 2001
From: fikretellek <fikretellek@icloud.com>
Date: Sat, 9 Mar 2024 01:02:25 +0000
Subject: [PATCH 06/12] useState and handleAddOrder moved to order.jsx file

---
 src/components/Order/Order.jsx           | 8 +++++++-
 src/components/Restaurant/Restaurant.jsx | 8 +-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Order/Order.jsx b/src/components/Order/Order.jsx
index 5e71384..19e409a 100644
--- a/src/components/Order/Order.jsx
+++ b/src/components/Order/Order.jsx
@@ -1,6 +1,12 @@
 import RestaurantButton from "../RestaurantButton/RestaurantButton";
+import React, { useState } from "react";
+
+export default function Order() {
+  const [orders, setOrders] = useState(0);
+  const handleAddOrder = () => {
+    setOrders(orders + 1);
+  };
 
-export default function Order({ orders, handleAddOrder }) {
   return (
     <li className="restaurant__item">
       Orders: {orders}
diff --git a/src/components/Restaurant/Restaurant.jsx b/src/components/Restaurant/Restaurant.jsx
index 0811c5f..2a3a41a 100644
--- a/src/components/Restaurant/Restaurant.jsx
+++ b/src/components/Restaurant/Restaurant.jsx
@@ -1,17 +1,11 @@
-import React, { useState } from "react";
 import Order from "../Order/Order";
 
 const Restaurant = () => {
-  const [orders, setOrders] = useState(0);
-  const handleAddOrder = () => {
-    setOrders(orders + 1);
-  };
-
   return (
     <section className="restaurant">
       <h3 className="restaurant__heading">Restaurant Orders</h3>
       <ul className="restaurant__list">
-        <Order orders={orders} handleAddOrder={handleAddOrder} />
+        <Order />
       </ul>
     </section>
   );

From 90e503079be45baf1ed811902796f68921b663c2 Mon Sep 17 00:00:00 2001
From: fikretellek <fikretellek@icloud.com>
Date: Sat, 9 Mar 2024 01:14:35 +0000
Subject: [PATCH 07/12] tests added for order

---
 src/components/Order/Order.test.jsx | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 src/components/Order/Order.test.jsx

diff --git a/src/components/Order/Order.test.jsx b/src/components/Order/Order.test.jsx
new file mode 100644
index 0000000..17c17a1
--- /dev/null
+++ b/src/components/Order/Order.test.jsx
@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+import Order from "./Order";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+describe("Order", () => {
+  it("is still rendered on the page", () => {
+    render(<Order />);
+
+    const ordersText = screen.getByText("Orders: 0");
+
+    expect(ordersText).toBeInTheDocument();
+  });
+
+  it("button still increases the number of orders", () => {
+    render(<Order />);
+
+    const addButton = screen.getByText("Add");
+    fireEvent.click(addButton);
+    const updatedPizzaText = screen.getByText("Orders: 1");
+
+    expect(updatedPizzaText).toBeInTheDocument();
+  });
+});

From 921fb86c681a1e789b5c81d9b742eefa0ea69271 Mon Sep 17 00:00:00 2001
From: fikretellek <fikretellek@icloud.com>
Date: Sat, 9 Mar 2024 01:30:26 +0000
Subject: [PATCH 08/12] New order components added, ordertype props passed to
 each order components

---
 src/components/Restaurant/Restaurant.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Restaurant/Restaurant.jsx b/src/components/Restaurant/Restaurant.jsx
index 2a3a41a..5e24031 100644
--- a/src/components/Restaurant/Restaurant.jsx
+++ b/src/components/Restaurant/Restaurant.jsx
@@ -5,7 +5,9 @@ const Restaurant = () => {
     <section className="restaurant">
       <h3 className="restaurant__heading">Restaurant Orders</h3>
       <ul className="restaurant__list">
-        <Order />
+        <Order orderType="Pizzas" />
+        <Order orderType="Salads" />
+        <Order orderType="Chocolate cake" />
       </ul>
     </section>
   );

From 10a654f8f5bfe1df8b509ed32d97128097dbe931 Mon Sep 17 00:00:00 2001
From: fikretellek <fikretellek@icloud.com>
Date: Sat, 9 Mar 2024 01:31:00 +0000
Subject: [PATCH 09/12] ordertype props passed to li element

---
 src/components/Order/Order.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Order/Order.jsx b/src/components/Order/Order.jsx
index 19e409a..6ca7af2 100644
--- a/src/components/Order/Order.jsx
+++ b/src/components/Order/Order.jsx
@@ -1,7 +1,7 @@
 import RestaurantButton from "../RestaurantButton/RestaurantButton";
 import React, { useState } from "react";
 
-export default function Order() {
+export default function Order({ orderType }) {
   const [orders, setOrders] = useState(0);
   const handleAddOrder = () => {
     setOrders(orders + 1);
@@ -9,7 +9,7 @@ export default function Order() {
 
   return (
     <li className="restaurant__item">
-      Orders: {orders}
+      {orderType}: {orders}
       <RestaurantButton handleAddOrder={handleAddOrder} />
     </li>
   );

From 1c231cf02b15fb666354fcfbddbdece74fcb84f0 Mon Sep 17 00:00:00 2001
From: fikretellek <fikretellek@icloud.com>
Date: Sat, 9 Mar 2024 01:44:17 +0000
Subject: [PATCH 10/12] tests updated, test id attribute added to component

---
 src/components/Restaurant/Restaurant.test.jsx  | 18 +++++++++++-------
 .../RestaurantButton/RestaurantButton.jsx      |  2 +-
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/Restaurant/Restaurant.test.jsx b/src/components/Restaurant/Restaurant.test.jsx
index dec0ad0..91ac341 100644
--- a/src/components/Restaurant/Restaurant.test.jsx
+++ b/src/components/Restaurant/Restaurant.test.jsx
@@ -15,19 +15,23 @@ describe("Restaurant", () => {
 describe("Restaurant Component", () => {
   it("displays initial number of pizza 0", () => {
     render(<Restaurant />);
-    const pizzaText = screen.getByText("Orders: 0");
-    expect(pizzaText).toBeInTheDocument();
+    const text1 = screen.getByText("Pizzas: 0");
+    const text2 = screen.getByText("Salads: 0");
+    const text3 = screen.getByText("Chocolate cake: 0");
+
+    expect(text1, text2, text3).toBeInTheDocument();
   });
 
   it("increase number of pizzas when 'Add' button is clicked", () => {
     render(<Restaurant />);
 
-    const addButton = screen.getByText("Add");
-
-    fireEvent.click(addButton);
+    const addButtons = screen.getAllByTestId("addButton");
+    addButtons.map((addButton) => fireEvent.click(addButton));
 
-    const updatedPizzaText = screen.getByText("Orders: 1");
+    const updatedText1 = screen.getByText("Pizzas: 1");
+    const updatedText2 = screen.getByText("Salads: 1");
+    const updatedText3 = screen.getByText("Chocolate cake: 1");
 
-    expect(updatedPizzaText).toBeInTheDocument();
+    expect(updatedText1, updatedText2, updatedText3).toBeInTheDocument();
   });
 });
diff --git a/src/components/RestaurantButton/RestaurantButton.jsx b/src/components/RestaurantButton/RestaurantButton.jsx
index 663a53d..29ad4a0 100644
--- a/src/components/RestaurantButton/RestaurantButton.jsx
+++ b/src/components/RestaurantButton/RestaurantButton.jsx
@@ -1,6 +1,6 @@
 export default function RestaurantButton({ handleAddOrder }) {
   return (
-    <button className="button restaurant__button" onClick={handleAddOrder}>
+    <button data-testid="addButton" className="button restaurant__button" onClick={handleAddOrder}>
       Add
     </button>
   );

From 767ca951f7f8d0846e5144754b0a20b742f44c9c Mon Sep 17 00:00:00 2001
From: fikretellek <fikretellek@icloud.com>
Date: Sat, 9 Mar 2024 01:47:52 +0000
Subject: [PATCH 11/12] because of props order test is not useful anymore

---
 src/components/Order/Order.test.jsx | 23 -----------------------
 1 file changed, 23 deletions(-)
 delete mode 100644 src/components/Order/Order.test.jsx

diff --git a/src/components/Order/Order.test.jsx b/src/components/Order/Order.test.jsx
deleted file mode 100644
index 17c17a1..0000000
--- a/src/components/Order/Order.test.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { describe, expect, it } from "vitest";
-import Order from "./Order";
-import { render, screen, fireEvent } from "@testing-library/react";
-
-describe("Order", () => {
-  it("is still rendered on the page", () => {
-    render(<Order />);
-
-    const ordersText = screen.getByText("Orders: 0");
-
-    expect(ordersText).toBeInTheDocument();
-  });
-
-  it("button still increases the number of orders", () => {
-    render(<Order />);
-
-    const addButton = screen.getByText("Add");
-    fireEvent.click(addButton);
-    const updatedPizzaText = screen.getByText("Orders: 1");
-
-    expect(updatedPizzaText).toBeInTheDocument();
-  });
-});

From d34c97ecf26e48868fe8d23bbd7ede24ba6c24e5 Mon Sep 17 00:00:00 2001
From: fikretellek <fikretellek@icloud.com>
Date: Sat, 9 Mar 2024 01:55:18 +0000
Subject: [PATCH 12/12] styling added to order component

---
 src/components/Order/Order.jsx  |  1 +
 src/components/Order/Order.scss | 11 +++++++++++
 2 files changed, 12 insertions(+)
 create mode 100644 src/components/Order/Order.scss

diff --git a/src/components/Order/Order.jsx b/src/components/Order/Order.jsx
index 6ca7af2..9c38248 100644
--- a/src/components/Order/Order.jsx
+++ b/src/components/Order/Order.jsx
@@ -1,5 +1,6 @@
 import RestaurantButton from "../RestaurantButton/RestaurantButton";
 import React, { useState } from "react";
+import "./Order.scss";
 
 export default function Order({ orderType }) {
   const [orders, setOrders] = useState(0);
diff --git a/src/components/Order/Order.scss b/src/components/Order/Order.scss
new file mode 100644
index 0000000..2b4bc3a
--- /dev/null
+++ b/src/components/Order/Order.scss
@@ -0,0 +1,11 @@
+.restaurant__item {
+  width: 300px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  button {
+    margin-bottom: 5px;
+  }
+}