Featurebookingstate

package.json

@@ -14,6 +14,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "dayjs": "^1.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/components/App/App.jsx

@@ -1,12 +1,31 @@
 import Bookings from "@/components/Bookings/Bookings.jsx";
 import "./App.scss";
+import Footer from "../Footer/Footer";
+import Deck from "../Deck/Deck";
+import AppHeader from "../AppHeader/AppHeader";
+import Restaurant from "../Restaurant/Restaurant";
 
 const App = () => (
   <div className="app">
-    <header className="app__header">
-      <h1 className="app__heading">CYF Hotel</h1>
-    </header>
+    <div className="header">
+      <header className="app__header">
+        <h1 className="app__heading">CYF Hotel</h1>
+      </header>
+      <AppHeader />
+    </div>
     <Bookings />
+    <Restaurant />
+
+    <Deck />
+
+    <Footer
+      details={[
+        "123 Fake Street, London, E1 4UD",
+        "hello@fakehotel.com",
+        "0123 456789",
+      ]}
+      className="footer"
+    />
   </div>
 );
 

src/components/App/App.scss

@@ -1,8 +1,27 @@
-.app {
-}
 .app {
   display: grid;
+  grid-template-rows: auto 1fr auto; /* Set up three rows - header, content, footer */
   max-width: var(--space--container);
   margin: auto;
   padding: var(--space--gap);
+  min-height: 100vh; /* Ensure the container takes at least the full height of the viewport */
+}
+
+.app__header {
+  background-color: var(--color--paper);
+  padding: var(--space--m);
+}
+
+.app__heading {
+  margin: 0;
+  margin-top: 30%;
+}
+
+.restaurant {
+  margin-bottom: 20px;
+}
+
+.footer {
+  background-color: var(--color--paper);
+  padding: var(--space--m);
 }

src/components/AppHeader/AppHeader.jsx

@@ -1,6 +1,4 @@
-// import Logo from "@/assets/spa-logo.png";
-// import "./AppHeader.scss";
-// const AppHeader = () => (
-// what goes in here? there is no content in the AppHeader component
-// );
-// export default AppHeader;
+import Logo from "@/assets/spa-logo.png";
+import "./AppHeader.scss";
+const AppHeader = () => <img className="LogoImg" src={Logo}></img>;
+export default AppHeader;

src/components/AppHeader/AppHeader.scss

@@ -7,3 +7,16 @@
     max-width: 100px;
   }
 }
+
+.header {
+  margin-right: 35%;
+  margin-left: 35%;
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-evenly;
+}
+
+.LogoImg {
+  height: 150px;
+  width: 150px;
+}

src/components/Bookings/Bookings.jsx

@@ -1,16 +1,23 @@
+import React, { useState } from 'react';
 import Search from "@/components/Search/Search";
+import SearchResult from "../SearchResult/SearchResult";
+import FakeBookings from '@/data/fakeBookings.json';
+
 // import SearchResults from "@/componentsSearchResults.js";
 // import FakeBookings from "@/data/fakeBookings.json";
 
 const Bookings = () => {
+
+  const [bookings, setBookings] = useSatet(FakeBookings);
+
   const search = (searchVal) => {
     console.info("TO DO!", searchVal);
   };
 
   return (
     <main className="bookings">
       <Search search={search} />
-      {/* <SearchResults results={FakeBookings} /> */}
+      <SearchResult bookings={bookings} />
     </main>
   );
 };

src/components/Bookings/Bookings.test.jsx

@@ -1,11 +1,11 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
-import Bookings from "./Bookings.jsx";
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Bookings from './Bookings.jsx';
 
-describe("Bookings Component", () => {
-  it("renders a main element", () => {
+describe('Bookings Component', () => {
+  it('renders a main element', () => {
     render(<Bookings />);
-    const mainElement = screen.getByRole("main");
+    const mainElement = screen.getByRole('main');
     expect(mainElement).toBeInTheDocument();
   });
 });

src/components/Card/Card.jsx

@@ -1,9 +1,18 @@
-// import "./Card.scss";
+import React from "react";
+import "./Card.scss";
 
-// const Card = ({ title, url, image }) => {
-//   return (
+const Card = (props) => {
+  const { title, url, image } = props;
+  return (
+    <div className="card">
+      <h2>{title}</h2>
+      <img src={image} alt={title} />
 
-//   );
-// };
+      <a href={url}> {title}</a>
 
-// export default Card;
+
+    </div>
+  );
+};
+
+export default Card;

src/components/Deck/Deck.jsx

@@ -1,11 +1,20 @@
-// import Card from "@/components/Card/Card";
-// import "./Deck.scss";
-// import cardsData from "@/data/fakeCards.json";
+import Card from "@/components/Card/Card";
+import "./Deck.scss";
+import cardsData from "@/data/fakeCards.json";
 
-// const Deck = () => {
-// you will need to map over the cardsData array and render a Card component for each card object
-// how will you pass props to the Card component?
+const Deck = (props) => {
+  return (
+    <div className="deck">
+      {cardsData.map((city, index) => (
+        <Card
+          key={index}
+          title={city.title}
+          url={city.url}
+          image={city.image}
+        />
+      ))}
+    </div>
+  );
+};
 
-// };
-
-// export default Deck;
+export default Deck;

src/components/Footer/Footer.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import "./Footer.scss"
+
+export default function Footer(props) {
+  return (
+    <>
+      <footer>
+        <ul>
+          {props.details.map((detail, id) => (
+            <li key={id}>{detail}</li>
+          ))}
+        </ul>
+      </footer>
+    </>
+  );
+}

src/components/Footer/Footer.scss

@@ -0,0 +1,5 @@
+.footer {
+  margin-top: auto;
+  background-color: var(--color--paper);
+  padding: var(--space--m);
+}

src/components/Restaurant/Restaurant.jsx

@@ -1,16 +1,25 @@
-const Restaurant = () => {
-  const pizzas = 0;
+import { useState } from "react";
+
+function Restaurant() {
+  const [pizzas, setPizzas] = useState(0);
+
+  function buttonAdd() {
+    setPizzas(pizzas + 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>
+          <button className="button restaurant__button" onClick={buttonAdd}>
+            Add
+          </button>
         </li>
       </ul>
     </section>
   );
-};
+}
 
 export default Restaurant;

src/components/Search/Search.jsx

@@ -1,4 +1,5 @@
 import "./Search.scss";
+import SearchButton from "../SearchButton/SearchButton";
 
 const Search = () => (
   <section className="search">
@@ -15,7 +16,7 @@ const Search = () => (
         className="search__input"
         placeholder="Customer name"
       />
-      <button className="button search__button">Search</button>
+      <SearchButton />
     </form>
   </section>
 );

src/components/SearchButton/SearchButton.jsx

@@ -1 +1,7 @@
+import React from "react";
 
+const SearchButton = () => {
+  return <button className="button search__button">Search</button>;
+};
+
+export default SearchButton;

src/components/SearchResult/SearchResult.jsx

@@ -0,0 +1,42 @@
+import "./SearchResult.scss";
+import FakeBookings from "@/data/fakeBookings.json";
+import TableBody from "./TableBody";
+import TableHead from "./TableHead";
+import dayjs from "dayjs";
+
+const Bookings = FakeBookings;
+function SearchResult() {
+  return (
+    <table>
+      <thead>
+        <TableHead />
+      </thead>
+      <tbody>
+        {Bookings.map((book) => {
+          const stayNightsTotal = dayjs(book.checkOutDate).diff(
+            dayjs(book.checkInDate),
+            "day"
+          );
+          return (
+            <>
+              <TableBody
+                key={book.id}
+                id={book.id}
+                title={book.title}
+                firstName={book.firstName}
+                surName={book.surname}
+                email={book.email}
+                roomId={book.roomId}
+                checkInDate={book.checkInDate}
+                checkOutDate={book.checkOutDate}
+                stayNights={stayNightsTotal}
+              />
+            </>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
+export default SearchResult;
+console.log(SearchResult());

src/components/SearchResult/SearchResult.scss

@@ -0,0 +1,19 @@
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+thead {
+  background-color: #f2f2f2;
+}
+
+th,
+td {
+  padding: 8px;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+}
+
+th {
+  font-weight: bold;
+}

src/components/SearchResult/TableBody.jsx

@@ -0,0 +1,33 @@
+// import FakeBookings from "@/data/fakeBookings.json";
+
+function TableBody(props) {
+  let {
+    id,
+    title,
+    name,
+    firstName,
+    surName,
+    email,
+    roomId,
+    checkInDate,
+    checkOutDate,
+    stayNights,
+  } = props;
+  return (
+    <>
+      <tr key={id}>
+        <td>{id}</td>
+        <td>{title}</td>
+        <td>{firstName}</td>
+        <td>{surName}</td>
+        <td>{email}</td>
+        <td>{roomId}</td>
+        <td>{checkInDate}</td>
+        <td>{checkOutDate}</td>
+        <td>{stayNights}</td>
+      </tr>
+    </>
+  );
+}
+
+export default TableBody;