LONDON_10 || SAIM KORKMAZ || HOTEL REACT APP

package.json

@@ -2,7 +2,9 @@
   "name": "react-hotel",
   "version": "0.1.0",
   "private": true,
+  "proxy": "https://hotel-db-zeta.vercel.app",
   "dependencies": {
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1"

src/App.css

@@ -55,3 +55,66 @@ tr {
 .card {
   width: 18rem;
 }
+
+/* My changes */
+
+.App-header img{
+  width: 25px;
+}
+
+table{
+  border-bottom: 1px solid rgb(194, 194, 195);
+}
+
+.new-booking{
+  border: 0.5px solid rgb(184, 183, 183);
+  padding: 25px;
+}
+.new-booking button{
+  background-color: rgb(215, 213, 74);
+}
+.highlighted0{
+  background-color: red;
+}
+.highlighted1{
+  background-color: red;
+}
+.highlighted2{
+  background-color: rgb(64, 0, 255);
+}
+.highlighted3{
+  background-color: red;
+}
+.highlighted4{
+  background-color: red;
+}
+.highlighted5{
+  background-color: red;
+}
+.highlighted6{
+  background-color: red;
+}
+.highlighted7{
+  background-color: red;
+}
+.highlighted8{
+  background-color: red;
+}
+.highlighted9{
+  background-color: red;
+}
+.highlighted10{
+  background-color: red;
+}
+.highlighted{
+  background-color: red;
+}
+.highlighted{
+  background-color: red;
+}
+.highlighted{
+  background-color: red;
+}
+.highlighted{
+  background-color: red;
+}

src/App.js

@@ -2,12 +2,24 @@ import React from "react";
 
 import Bookings from "./Bookings";
 import "./App.css";
+import Heading from "./components/Heading";
+import TouristInfoCards from "./components/TouristInfoCards";
+import Footer from "./components/Footer";
+import Restaurant from "./Restaurant"
 
 const App = () => {
+    const footerInfo = [
+      "123 Fake Street, London, E1 4UD",
+      "hello@fakehotel.com",
+      "0123 456789",
+    ];
   return (
     <div className="App">
-      <header className="App-header">CYF Hotel</header>
+      <Heading />
+      <TouristInfoCards />
       <Bookings />
+      <Restaurant />
+      <Footer footerInfo={footerInfo} />
     </div>
   );
 };

src/Bookings.js

@@ -1,18 +1,114 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Search from "./Search.js";
-// import SearchResults from "./SearchResults.js";
-// import FakeBookings from "./data/fakeBookings.json";
+import SearchResults from "./components/SearchResults.jsx";
 
 const Bookings = () => {
-  const search = searchVal => {
+  const [bookings, setBookings] = useState([]);
+  const [error, setError] = useState(null);
+  const [newBooking, setNewBooking] = useState({
+    title: "",
+    firstName: "",
+    surname: "",
+    email: "",
+    roomId: "",
+    checkInDate: "",
+    checkOutDate: "",
+  });
+
+  useEffect(() => {
+    fetch("https://hotel-db-zeta.vercel.app")
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error("Error fetching bookings data");
+        }
+        return res.json();
+      })
+      .then((data) => {
+        console.log("data::: ", data)
+        setBookings(data);
+      })
+      .catch((error) => {
+        setError(error.message);
+      });
+  }, []);
+
+  const search = (searchVal) => {
     console.info("TO DO!", searchVal);
+    setBookings(
+      bookings.filter((row) => {
+        return (
+          row.firstName.includes(searchVal) || row.surname.includes(searchVal)
+        );
+      })
+    );
+  };
+
+
+  const handleChange = (e) => {
+    setNewBooking({ ...newBooking, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setBookings((bookings) => [...bookings, newBooking]);
   };
 
   return (
     <div className="App-content">
       <div className="container">
         <Search search={search} />
-        {/* <SearchResults results={FakeBookings} /> */}
+{/*         {error ? (
+          <p className="error-message">{error}</p>
+        ) : (
+          <SearchResults results={bookings} />
+        )} */}
+        <SearchResults results={bookings} />
+        <form className="new-booking">
+          <h4>Add a New Booking</h4>
+          <input
+            placeholder="Title"
+            name="title"
+            value={newBooking.title}
+            onChange={handleChange}
+          ></input>
+          <input
+            placeholder="First Name"
+            name="firstName"
+            value={newBooking.firstName}
+            onChange={handleChange}
+          ></input>
+          <input
+            placeholder="Surname"
+            name="surname"
+            value={newBooking.surname}
+            onChange={handleChange}
+          ></input>
+          <input
+            placeholder="Email"
+            name="email"
+            value={newBooking.email}
+            onChange={handleChange}
+          ></input>
+          <input
+            placeholder="Room Id"
+            name="roomId"
+            value={newBooking.roomId}
+            onChange={handleChange}
+          ></input>
+          <input
+            placeholder="Check In Date"
+            name="checkInDate"
+            value={newBooking.checkInDate}
+            onChange={handleChange}
+          ></input>
+          <input
+            placeholder="Check Out Date"
+            name="checkOutDate"
+            value={newBooking.checkOutDate}
+            onChange={handleChange}
+          ></input>
+          <button onClick={handleSubmit}>Submit</button>
+        </form>
       </div>
     </div>
   );

src/Restaurant.js

@@ -1,14 +1,14 @@
 import React from "react";
+import Order from "./components/Order";
 
 const Restaurant = () => {
-  const pizzas = 0;
   return (
-    <div>
+    <div style={{ marginTop: '120px' }}>
       <h3>Restaurant Orders</h3>
       <ul>
-        <li>
-          Pizzas: {pizzas} <button className="btn btn-primary">Add</button>
-        </li>
+        <Order orderType="Pizza" />
+        <Order orderType="Kebab" />
+        <Order orderType="Baklava" />
       </ul>
     </div>
   );

src/Search.js

@@ -1,23 +1,38 @@
-import React from "react";
+import React, { useState } from "react";
+import SearchButton from "./components/SearchButton";
+
+const Search = (props) => {
+  const [searchInput, setSearchInput] = useState("");
+
+  const handleSearchInput = (event) => {
+    setSearchInput(event.target.value);
+    console.log(searchInput);
+  };
+
+  const submitHandler = (event) => {
+    event.preventDefault();
+    props.search(searchInput);
+  } 
 
-const Search = () => {
   return (
     <div className="search">
       <div className="page-header">
         <h4 className="text-left">Search Bookings</h4>
       </div>
       <div className="row search-wrapper">
         <div className="col">
-          <form className="form-group search-box">
+          <form className="form-group search-box" onSubmit={submitHandler}>
             <label htmlFor="customerName">Customer name</label>
             <div className="search-row">
               <input
                 type="text"
                 id="customerName"
                 className="form-control"
                 placeholder="Customer name"
+                value={searchInput}
+                onChange={handleSearchInput}
               />
-              <button className="btn btn-primary">Search</button>
+              <SearchButton />
             </div>
           </form>
         </div>

src/components/AddBookingForm.jsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+
+const AddBookingForm = ({ onAddBooking }) => {
+    const [newBooking, setNewBooking] = useState({
+        title: '',
+        firstName: '',
+        surname: '',
+        email: '',
+        roomId: '',
+        checkInDate: '',
+        checkOutDate: '',
+    });
+
+    const handleChange = (e) => {
+        setNewBooking({ ...newBooking, [e.target.name]: e.target.value });
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        try {
+            const response = await fetch('http://localhost:3001/bookings', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(newBooking),
+            });
+            const data = await response.json();
+            onAddBooking(data); // Update the bookings state with the new data
+            setNewBooking({
+                title: '',
+                firstName: '',
+                surname: '',
+                email: '',
+                roomId: '',
+                checkInDate: '',
+                checkOutDate: '',
+            });
+        } catch (error) {
+            console.error('Error adding booking:', error);
+        }
+    };
+
+    return (
+        <form className="new-booking" onSubmit={handleSubmit}>
+            {/* Input fields for booking data */}
+            {/* Submit button */}
+        </form>
+    );
+};
+
+export default AddBookingForm;

src/components/CustomerProfile.jsx

@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from "react";
+
+const CustomerProfile = ({ id }) => {
+  const [customerInfo, setCustomerInfo] = useState("");
+  useEffect(() => {
+    fetch(`https://hotel-db-zeta.vercel.app/${id}`)
+      .then((res) => {
+        return res.json();
+      })
+      .then((data) => {
+        console.log(data.rows[0])
+        setCustomerInfo(data.rows[0]);
+      });
+  }, [id]);
+  return (
+    <div>
+      <h3>Customer {id} profile</h3>
+      <ul>
+        <li>Customer Email: {customerInfo.email}</li>
+        <li>VIP: {customerInfo.vip ? "Yes" : "No"}</li>
+        <li>Phone: {customerInfo.phoneNumber}</li>
+      </ul>
+    </div>
+  );
+};
+
+export default CustomerProfile;