From 2a6f3f51ba2725a71d4a18096505697dacff1240 Mon Sep 17 00:00:00 2001
From: RbAvci <rb.avci@gmail.com>
Date: Tue, 5 Mar 2024 09:22:14 +0000
Subject: [PATCH 1/2] render restaurant component in App.js

---
 src/components/App/App.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
index ad25322..5f301e4 100644
--- a/src/components/App/App.jsx
+++ b/src/components/App/App.jsx
@@ -3,14 +3,14 @@ import "./App.scss";
 import AppHeader from "../AppHeader/AppHeader.jsx";
 import Card from "../Card/Card";
 import Footer from "../Footer/Footer";
-
-
+import Restaurant from "../Restaurant/Restaurant.jsx";
 
 const App = () => (
   <div className="app">
-    <AppHeader/>
+    <AppHeader />
     <Card title="Welcome to CYF Hotel" url="https://cyf-hotel.com" image="https://cyf-hotel.com/images/banner.jpg" />
     <Bookings />
+    <Restaurant />
     <Footer />
   </div>
 );

From 9274804ffdb495bbc70f87d60b99c3f26f9e353d Mon Sep 17 00:00:00 2001
From: RbAvci <rb.avci@gmail.com>
Date: Tue, 5 Mar 2024 09:38:31 +0000
Subject: [PATCH 2/2] Added new state variable 'orders' with useState Updated
 component to use 'orders' for ordering functionality Deleted the old 'pizzas'
 variable

---
 src/components/Restaurant/Restaurant.jsx      | 14 +++++++++---
 src/components/Restaurant/Restaurant.test.jsx | 22 ++++++++++++++++++-
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/components/Restaurant/Restaurant.jsx b/src/components/Restaurant/Restaurant.jsx
index 378b963..d8f9dae 100644
--- a/src/components/Restaurant/Restaurant.jsx
+++ b/src/components/Restaurant/Restaurant.jsx
@@ -1,12 +1,20 @@
+import React, { useState } from "react";
+
 const Restaurant = () => {
-  const pizzas = 0;
+  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">
         <li className="restaurant__item">
-          Pizzas: {pizzas}{" "}
-          <button className="button restaurant__button">Add</button>
+          Orders: {orders}
+          <button className="button restaurant__button" onClick={handleAddOrder}>
+            Add
+          </button>
         </li>
       </ul>
     </section>
diff --git a/src/components/Restaurant/Restaurant.test.jsx b/src/components/Restaurant/Restaurant.test.jsx
index 6bcfaf4..dec0ad0 100644
--- a/src/components/Restaurant/Restaurant.test.jsx
+++ b/src/components/Restaurant/Restaurant.test.jsx
@@ -1,6 +1,6 @@
 import Restaurant from "./Restaurant.jsx";
 import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
 
 describe("Restaurant", () => {
   it("renders an Orders heading", () => {
@@ -11,3 +11,23 @@ describe("Restaurant", () => {
     expect(titleElement).toBeInTheDocument();
   });
 });
+
+describe("Restaurant Component", () => {
+  it("displays initial number of pizza 0", () => {
+    render(<Restaurant />);
+    const pizzaText = screen.getByText("Orders: 0");
+    expect(pizzaText).toBeInTheDocument();
+  });
+
+  it("increase number of pizzas when 'Add' button is clicked", () => {
+    render(<Restaurant />);
+
+    const addButton = screen.getByText("Add");
+
+    fireEvent.click(addButton);
+
+    const updatedPizzaText = screen.getByText("Orders: 1");
+
+    expect(updatedPizzaText).toBeInTheDocument();
+  });
+});