From 865a2ee6e029079e0712b4a286d31555ed155e13 Mon Sep 17 00:00:00 2001 From: Kristina Date: Wed, 14 Jun 2023 20:29:34 +0100 Subject: [PATCH 1/5] lesson 1 completed --- package-lock.json | 9 +++++++ package.json | 1 + src/App.js | 12 +++++++-- src/Bookings.js | 2 +- src/Footer.js | 16 ++++++++++++ src/Header.js | 3 +++ src/Restaurant.js | 2 +- src/Search.js | 5 ++-- src/SearchButton.js | 3 +++ src/SearchResults.js | 55 +++++++++++++++++++++++++++++++++++++++++ src/TouristInfoCards.js | 52 ++++++++++++++++++++++++++++++++++++++ src/index.css | 27 ++++++++++++++++++++ 12 files changed, 181 insertions(+), 6 deletions(-) create mode 100644 src/Footer.js create mode 100644 src/Header.js create mode 100644 src/SearchButton.js create mode 100644 src/SearchResults.js create mode 100644 src/TouristInfoCards.js diff --git a/package-lock.json b/package-lock.json index 8197e6f22..94217b93a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "react-hotel", "version": "0.1.0", "dependencies": { + "moment": "^2.29.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^5.0.1" @@ -11681,6 +11682,14 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/moment": { + "version": "2.29.4", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==", + "engines": { + "node": "*" + } + }, "node_modules/mri": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz", diff --git a/package.json b/package.json index e3e1562a7..f81c28013 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "moment": "^2.29.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^5.0.1" diff --git a/src/App.js b/src/App.js index 953c98560..abef5de73 100644 --- a/src/App.js +++ b/src/App.js @@ -1,13 +1,21 @@ import React from "react"; - +import { Header } from "./Header"; import Bookings from "./Bookings"; import "./App.css"; +import TouristInfoCards from "./TouristInfoCards"; +import { SearchResults } from "./SearchResults"; +import { Footer } from "./Footer"; +import { Restaurant } from "./Restaurant"; const App = () => { return (
-
CYF Hotel
+
+ + + +
); }; diff --git a/src/Bookings.js b/src/Bookings.js index e0d911b13..7fbf679f5 100644 --- a/src/Bookings.js +++ b/src/Bookings.js @@ -4,7 +4,7 @@ import Search from "./Search.js"; // import FakeBookings from "./data/fakeBookings.json"; const Bookings = () => { - const search = searchVal => { + const search = (searchVal) => { console.info("TO DO!", searchVal); }; diff --git a/src/Footer.js b/src/Footer.js new file mode 100644 index 000000000..ff6d29273 --- /dev/null +++ b/src/Footer.js @@ -0,0 +1,16 @@ +const location = [ + "123 Fake Street, London, E1 4UD", + "hello@fakehotel.com", + "0123 456789", +]; +export function Footer() { + return ( +
+ +
+ ); +} diff --git a/src/Header.js b/src/Header.js new file mode 100644 index 000000000..46e063442 --- /dev/null +++ b/src/Header.js @@ -0,0 +1,3 @@ +export function Header() { + return
CYF Hotel
; +} diff --git a/src/Restaurant.js b/src/Restaurant.js index ecb2b43a2..86a4d498d 100644 --- a/src/Restaurant.js +++ b/src/Restaurant.js @@ -1,6 +1,6 @@ import React from "react"; -const Restaurant = () => { +export const Restaurant = () => { const pizzas = 0; return (
diff --git a/src/Search.js b/src/Search.js index 7bd5871c0..a53757c73 100644 --- a/src/Search.js +++ b/src/Search.js @@ -1,5 +1,5 @@ import React from "react"; - +import { SearchButton } from "./SearchButton"; const Search = () => { return (
@@ -17,7 +17,8 @@ const Search = () => { className="form-control" placeholder="Customer name" /> - + + {/* */}
diff --git a/src/SearchButton.js b/src/SearchButton.js new file mode 100644 index 000000000..35dd03e47 --- /dev/null +++ b/src/SearchButton.js @@ -0,0 +1,3 @@ +export const SearchButton = () => { + return ; +}; diff --git a/src/SearchResults.js b/src/SearchResults.js new file mode 100644 index 000000000..290d7d9e3 --- /dev/null +++ b/src/SearchResults.js @@ -0,0 +1,55 @@ +import fakeData from "./data/fakeBookings.json"; +import moment from "moment"; + +export function SearchResults() { + return ( +
+ + + + + + + + + + + + + + + + {fakeData.map((element) => ( + + + + + + + + + + + + + ))} + +
#titlefirstNamesurnameemailroomIdcheckInDatecheckOutDateNights
{element.id}{element.title}{element.firstName}{element.surname}{element.email}{element.roomId}{element.checkInDate}{element.checkOutDate} + {moment(element.checkOutDate).diff( + moment(element.checkInDate), + "days" + )} +
+
+ ); +} +// { +// "id": 1, +// "title": "Mr", +// "firstName": "John", +// "surname": "Doe", +// "email": "johndoe@doe.com", +// "roomId": 2, +// "checkInDate": "2017-11-21", +// "checkOutDate": "2017-11-23" +// }, diff --git a/src/TouristInfoCards.js b/src/TouristInfoCards.js new file mode 100644 index 000000000..be0541244 --- /dev/null +++ b/src/TouristInfoCards.js @@ -0,0 +1,52 @@ +const data = [ + { + image: + "https://cdn-lnp.dataweavers.io/-/media/images/london/visit/things-to-do/sightseeing/london-attractions/coca-cola-london-eye/the-london-eye-2-640x360.jpg?rev=95097c3d2aab47109d7b0e944c804d1b?mw=640&hash=EA6D4D5963997B5F368154E65A7FA187", + nameOfCity: "London", + paragraf: + "Welcome to London! Discover the best of London with Visit London, the official guide to England’s exciting capital. Find things to do in London, from iconic sightseeing spots and fun-filled days out to top restaurants, theatre and unmissable London events. If you’re not able to visit just yet, plan ahead to make the most of your next visit. ", + }, + { + image: + "https://www.nationsonline.org/gallery/UK/Manchester-Town-Hall-from-Lloyd-St.jpg", + nameOfCity: "Manchester", + paragraf: + "Manchester is the only UK city to feature in Lonely Planet's Best in Travel 2023 list and the only UK city in National Geographic's influential ‘Best of the World’ list which annually sets out 25 of the must-see places to visit around the globe.", + }, + { + image: + "https://www.safestay.com/wp-content/uploads/2019/09/The-Best-things-to-do-in-Glasgow.png", + nameOfCity: "Glasgow", + paragraf: "Glasgow is cool:D", + }, +]; + +export default function TouristInfoCards() { + return ( +
+ {data.map((element, index) => ( + + ))} +
+ ); +} + +export function Card(props) { + return ( +
+
+ +
+
+

{props.nameOfCity}

+

{props.paragraf}

+ +
+
+ ); +} diff --git a/src/index.css b/src/index.css index 4607bb217..554296ac7 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,6 @@ +* { + list-style-type: none; +} body { margin: 0; padding: 0; @@ -24,3 +27,27 @@ body { .search-row input { margin-right: 10px; } + +/*
+ +
+

{props.nameOfCity}

+

{props.paragraf}

+ +
+
*/ +.cards-conrainer { + display: flex; + justify-content: space-around; +} +.image-container, +img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.footer { + color: #e9ecef; + background-color: #3d3b3b; +} From ed50a5ab53cd4d0de651cf5fd33540d18fe1f1df Mon Sep 17 00:00:00 2001 From: Kristina Date: Fri, 23 Jun 2023 10:41:25 +0100 Subject: [PATCH 2/5] lesson 2 completed --- src/App.css | 5 +++++ src/Bookings.js | 14 ++++++++------ src/Restaurant.js | 31 ++++++++++++++++++++++++++----- src/SearchResults.js | 31 ++++++++++++++++++++----------- 4 files changed, 59 insertions(+), 22 deletions(-) diff --git a/src/App.css b/src/App.css index 05fe2d52e..e29127861 100644 --- a/src/App.css +++ b/src/App.css @@ -55,3 +55,8 @@ tr { .card { width: 18rem; } + +.selected-row { + /* border-radius: 3px solid rgb(97, 19, 243); */ + background-color: #ead8fa; +} diff --git a/src/Bookings.js b/src/Bookings.js index 7fbf679f5..2daea917d 100644 --- a/src/Bookings.js +++ b/src/Bookings.js @@ -1,17 +1,19 @@ -import React from "react"; +import React, { useState } from "react"; import Search from "./Search.js"; // import SearchResults from "./SearchResults.js"; -// import FakeBookings from "./data/fakeBookings.json"; +import FakeBookings from "./data/fakeBookings.json"; const Bookings = () => { - const search = (searchVal) => { - console.info("TO DO!", searchVal); - }; + // const search = (searchVal) => { + // console.info("TO DO!", searchVal); + // }; + + const [bookings, setBookings] = useState(FakeBookings); return (
- + {/* */}
diff --git a/src/Restaurant.js b/src/Restaurant.js index 86a4d498d..4d83d5608 100644 --- a/src/Restaurant.js +++ b/src/Restaurant.js @@ -1,17 +1,38 @@ -import React from "react"; +import React, { useState } from "react"; export const Restaurant = () => { - const pizzas = 0; return (

Restaurant Orders

    -
  • - Pizzas: {pizzas} -
    • + + +
); }; +function RestaurantButton(props) { + return ( + + ); +} + +function Order(props) { + const [orders, setOrders] = useState(0); + + function setOrdersFunction() { + setOrders(orders + 1); + } + + return ( +
  • + {props.food}: {orders} + +
    • + ); +} export default Restaurant; diff --git a/src/SearchResults.js b/src/SearchResults.js index 290d7d9e3..0fbc1bdba 100644 --- a/src/SearchResults.js +++ b/src/SearchResults.js @@ -1,7 +1,20 @@ +import { useState } from "react"; import fakeData from "./data/fakeBookings.json"; import moment from "moment"; export function SearchResults() { + const [selectedRows, setSelectedRows] = useState([]); + + const handleRowClick = (rowId) => { + if (selectedRows.includes(rowId)) { + // Row is already selected, remove it from selectedRows + setSelectedRows(selectedRows.filter((id) => id !== rowId)); + } else { + // Row is not selected, add it to selectedRows + setSelectedRows([...selectedRows, rowId]); + } + }; + return (
    @@ -20,7 +33,13 @@ export function SearchResults() { {fakeData.map((element) => ( - + handleRowClick(element.id)} + className={ + selectedRows.includes(element.id) ? "selected-row" : "" + } + key={element.id} + > @@ -43,13 +62,3 @@ export function SearchResults() { ); } -// { -// "id": 1, -// "title": "Mr", -// "firstName": "John", -// "surname": "Doe", -// "email": "johndoe@doe.com", -// "roomId": 2, -// "checkInDate": "2017-11-21", -// "checkOutDate": "2017-11-23" -// }, From 57f98a841e402e0c660eeea2492c46b74739266e Mon Sep 17 00:00:00 2001 From: Kristina Date: Tue, 27 Jun 2023 13:45:34 +0100 Subject: [PATCH 3/5] from level 16 to level 19 --- README.md | 14 ++++++++------ src/App.js | 2 -- src/App.test.js | 8 -------- src/Bookings.js | 38 +++++++++++++++++++++++++++++--------- src/Restaurant.js | 9 +++++---- src/Search.js | 28 +++++++++++++++++++++++----- src/SearchButton.js | 4 ++-- src/SearchResults.js | 5 ++--- src/index.css | 28 ++++++++++++++++++++-------- 9 files changed, 89 insertions(+), 47 deletions(-) delete mode 100644 src/App.test.js diff --git a/README.md b/README.md index 5711ee7f8..6f9dd00c7 100644 --- a/README.md +++ b/README.md @@ -158,7 +158,7 @@ A hotel booking application in React. Homework for the [CodeYourFuture React mod **Instructions:** Still in the `` component, add a `onSubmit` handler to the `
    ` tag. When the form is submitted (try clicking the search button), get the value of the state `searchInput` and pass it as a parameter to the `search` prop function that has been provided for you (the `search` prop is passed from the `` component). -**Note:** Also your submit handler should take an `event` parameter and add the line `event.preventDefault()` to prevent the browser to implicitely submit the form). +**Note:** Also your submit handler should take an `event` parameter and add the line `event.preventDefault()` to prevent the browser to implicitely submit the form. **Test:** Look in the console, you should see the text that is typed in the search input field when submitting the form. @@ -216,13 +216,13 @@ A hotel booking application in React. Homework for the [CodeYourFuture React mod **Test:** Each column in the table should be clickable to sort results in ascending or descending order. -#### 26. Validate new booking +#### 26. Validate new booking **Instructions:** Add validation to some fields from exercise 24: the first name and last name must not be empty, the email must contain exactly 1 `@` symbol, and at least one `.` symbol after the `@`; the room ID must be a number between 0 and 100. If the fields do not contain correct information when the 'Submit' button is pressed, display a red error message at the top of the page, but do not clear the text already in the field. **Test:** An invalid input displays an error message after the 'Submit' button is pressed (e.g. an email like `react@com` is invalid). A valid input shows the correct values at the bottom of the page. -**Reflection:** Validating user input is an important part of any application. Without checking the input, you might see unexpected errors when working with the data later. +**Reflection:** Validating user input is an important part of any application. Without checking the input, you might see unexpected errors when working with the data later. What do you think would happen if you were asked to remove a booking for room number '81', but the user had typed 'eightyOne' or 'EIGHTY ONE'? @@ -234,27 +234,29 @@ What do you think would happen if you were asked to remove a booking for room nu **Test:** The 'Submit' button is initially not clickable, and becomes clickable once every field has the correct input. -**Reflection:** You have used native form validations in HTML. How have you improved this feature with React? +**Reflection:** You have used native form validations in HTML. How have you improved this feature with React? As a user of this booking system, would you prefer: + - To find out you made a mistake when you submit the whole form? - To find out you made a mistake after each input? #### 28. Date picker -**Instructions:** Add the [js-datepicker](https://www.npmjs.com/package/js-datepicker) package to your project using `npm install`, and import it at the top of the file. Add different IDs to your 'check in date' and 'check out date' `` elements, then create two date pickers using `const checkInPicker = datepicker(YOUR_ID)` (where `YOUR_ID` is the ID you assigned to your check in/check out date elements). +**Instructions:** Add the [js-datepicker](https://www.npmjs.com/package/js-datepicker) package to your project using `npm install`, and import it at the top of the file. Add different IDs to your 'check in date' and 'check out date' `` elements, then create two date pickers using `const checkInPicker = datepicker(YOUR_ID)` (where `YOUR_ID` is the ID you assigned to your check in/check out date elements). **Hint:** Read the [js-datepicker usage guide](https://www.npmjs.com/package/js-datepicker#basic-usage) **Test:** The date picker appears when you click on the 'check in date' and 'check out date' input elements. -**Reflection:** Using `js-datepicker` in this exercise allows you to practice installing and working with packages in JavaScript. +**Reflection:** Using `js-datepicker` in this exercise allows you to practice installing and working with packages in JavaScript. Packages contain new functions and properties to work with that may not be available in native JavaScript/HTML. Using packages can often save time instead of writing your own functions, as you are importing code that someone else has written. However, this can have downsides; not all packages are high quality, and some may have bugs or may reduce accessibility by recreating native elements (`js-datepicker` recreates HTML's native [datepicker](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date) element). Think about some of the code you have written in this lesson - are there any packages available that might have helped you to complete the exercises? For example, exercise 26 and 27 used validation. Searching npmjs.com for '[validate](https://www.npmjs.com/search?q=validate)' shows multiple packages, such as '[validator](https://www.npmjs.com/package/validator)' and '[Validate](https://www.npmjs.com/package/Validate)'. Open both of these packages in your browser, and consider the following questions: + - Is it clear what this package does? Will it solve my specific problem better than writing my own code? - Do I trust that the code in this package is safe to run on my machine? Do other people trust this package? (Hint: look at weekly downloads, last update, dependents, and visit the repository) - Is this package accessible? Will it work on all browsers? diff --git a/src/App.js b/src/App.js index abef5de73..6566d1522 100644 --- a/src/App.js +++ b/src/App.js @@ -3,7 +3,6 @@ import { Header } from "./Header"; import Bookings from "./Bookings"; import "./App.css"; import TouristInfoCards from "./TouristInfoCards"; -import { SearchResults } from "./SearchResults"; import { Footer } from "./Footer"; import { Restaurant } from "./Restaurant"; @@ -13,7 +12,6 @@ const App = () => {
    -
    diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index c9ac3ef8f..000000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import App from "./App"; - -it("renders without crashing", () => { - const div = document.createElement("div"); - ReactDOM.render(, div); -}); diff --git a/src/Bookings.js b/src/Bookings.js index 2daea917d..667e19167 100644 --- a/src/Bookings.js +++ b/src/Bookings.js @@ -1,20 +1,40 @@ -import React, { useState } 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 "./SearchResults.js"; const Bookings = () => { - // const search = (searchVal) => { - // console.info("TO DO!", searchVal); - // }; + const [bookings, setBookings] = useState([]); - const [bookings, setBookings] = useState(FakeBookings); + const search = (searchInput) => { + const convertedVal = searchInput.toLowerCase().trim(); + const matched = bookings.filter(({ firstName, surname }) => { + return ( + firstName.toLowerCase().includes(convertedVal) || + surname.toLowerCase().includes(convertedVal) + ); + }); + setBookings(matched); + }; + + useEffect(() => { + fetchData(); + }, []); + + const fetchData = async () => { + try { + const response = await fetch("https://cyf-react.glitch.me"); + const data = await response.json(); + setBookings(data); + } catch (error) { + console.error("The ERROR is:", error); + } + }; return (
    - - {/* */} + +
    ); diff --git a/src/Restaurant.js b/src/Restaurant.js index 4d83d5608..3fbcdd5b0 100644 --- a/src/Restaurant.js +++ b/src/Restaurant.js @@ -2,9 +2,9 @@ import React, { useState } from "react"; export const Restaurant = () => { return ( -
    -

    Restaurant Orders

    -
      +
      +

      Restaurant Orders

      +
        @@ -29,8 +29,9 @@ function Order(props) { } return ( -
      • +
      • {props.food}: {orders} +
        • ); diff --git a/src/Search.js b/src/Search.js index a53757c73..591931ed4 100644 --- a/src/Search.js +++ b/src/Search.js @@ -1,6 +1,22 @@ -import React from "react"; -import { SearchButton } from "./SearchButton"; -const Search = () => { +import React, { useState } from "react"; +import SearchButton from "./SearchButton"; + +const Search = (props) => { + const [searchInput, setSearchInput] = useState(""); + + function handleSearchInput(e) { + let searchValue = e.target.value.toLowerCase().trim(); + setSearchInput(searchValue); + + console.log(searchValue); + } + + const handleSearchSubmit = (e) => { + e.preventDefault(); + props.search(searchInput); + console.log("Search for:", searchInput); + }; + return (
        @@ -8,17 +24,19 @@ const Search = () => {
        - +
        - {/* */}
        diff --git a/src/SearchButton.js b/src/SearchButton.js index 35dd03e47..598ff4a22 100644 --- a/src/SearchButton.js +++ b/src/SearchButton.js @@ -1,3 +1,3 @@ -export const SearchButton = () => { +export default function SearchButton() { return ; -}; +} diff --git a/src/SearchResults.js b/src/SearchResults.js index 0fbc1bdba..702b54b25 100644 --- a/src/SearchResults.js +++ b/src/SearchResults.js @@ -1,8 +1,7 @@ import { useState } from "react"; -import fakeData from "./data/fakeBookings.json"; import moment from "moment"; -export function SearchResults() { +export default function SearchResults(props) { const [selectedRows, setSelectedRows] = useState([]); const handleRowClick = (rowId) => { @@ -32,7 +31,7 @@ export function SearchResults() {
    - {fakeData.map((element) => ( + {props.data.map((element) => ( handleRowClick(element.id)} className={ diff --git a/src/index.css b/src/index.css index 554296ac7..af14565d6 100644 --- a/src/index.css +++ b/src/index.css @@ -28,14 +28,6 @@ body { margin-right: 10px; } -/*
    - -
    -

    {props.nameOfCity}

    -

    {props.paragraf}

    - -
    -
    */ .cards-conrainer { display: flex; justify-content: space-around; @@ -47,6 +39,26 @@ img { object-fit: cover; } +.restuarant-container { + display: flex; + flex-direction: column; + /* border: 3px solid red; */ +} + +.restaurant-header { + align-self: center; +} + +.list-of-food { + display: flex; + justify-content: space-around; + /* border: 3px solid red; */ +} + +/* .food-item { + border: 3px solid red; +} */ + .footer { color: #e9ecef; background-color: #3d3b3b; From 3ecd42b91ea3e265adacb94dfbdd07421a57e869 Mon Sep 17 00:00:00 2001 From: Kristina Date: Thu, 29 Jun 2023 20:39:52 +0100 Subject: [PATCH 4/5] level 3 --- src/Bookings.js | 8 +++---- src/CustomerProfile.js | 54 ++++++++++++++++++++++++++++++++++++++++++ src/Footer.js | 1 + src/Restaurant.js | 1 + src/Search.js | 1 - src/SearchResults.js | 40 ++++++++++++++++++++++++------- src/index.css | 1 + 7 files changed, 92 insertions(+), 14 deletions(-) create mode 100644 src/CustomerProfile.js diff --git a/src/Bookings.js b/src/Bookings.js index 667e19167..247245bfa 100644 --- a/src/Bookings.js +++ b/src/Bookings.js @@ -16,10 +16,6 @@ const Bookings = () => { setBookings(matched); }; - useEffect(() => { - fetchData(); - }, []); - const fetchData = async () => { try { const response = await fetch("https://cyf-react.glitch.me"); @@ -30,6 +26,10 @@ const Bookings = () => { } }; + useEffect(() => { + fetchData(); + }, []); + return (
    diff --git a/src/CustomerProfile.js b/src/CustomerProfile.js new file mode 100644 index 000000000..13170e8fb --- /dev/null +++ b/src/CustomerProfile.js @@ -0,0 +1,54 @@ +import React, { useEffect, useState } from "react"; + +export default function CustomerProfile({ id }) { + // console.log("CustomerProfile props:", id); + const [clientData, setClientData] = useState(null); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(false); + + const fetchClientData = async () => { + try { + setError(false); + setLoading(true); + const response = await fetch( + `https://cyf-react.glitch.me/customers/${id}` + ); + // console.log("fetchClientData response", response); + if (!response.ok) { + throw Error(); + } + const data = await response.json(); + // console.log("fetchClientData data", data); + setClientData(data); + } catch (error) { + setError(true); + } finally { + setLoading(false); + } + }; + + useEffect(() => { + if (id) { + fetchClientData(); + } + }, [id]); + + return ( + <> + {loading &&
    Loading...
    } + {error &&
    Error
    } + {clientData && !loading && !error && ( + <> +

    Customer Profile

    +

    Customer ID: {clientData.id}

    +

    + Customer Name: {clientData.firstName} {clientData.surname} +

    +

    Customer Email: {clientData.email}

    +

    Customer Phone Number: {clientData.phoneNumber}

    +

    VIP : {clientData.vip ? "Yes" : "No"}

    + + )} + + ); +} diff --git a/src/Footer.js b/src/Footer.js index ff6d29273..b1100d74b 100644 --- a/src/Footer.js +++ b/src/Footer.js @@ -3,6 +3,7 @@ const location = [ "hello@fakehotel.com", "0123 456789", ]; + export function Footer() { return (
    diff --git a/src/Restaurant.js b/src/Restaurant.js index 3fbcdd5b0..01f8f82b2 100644 --- a/src/Restaurant.js +++ b/src/Restaurant.js @@ -36,4 +36,5 @@ function Order(props) { ); } + export default Restaurant; diff --git a/src/Search.js b/src/Search.js index 591931ed4..781d87e5e 100644 --- a/src/Search.js +++ b/src/Search.js @@ -7,7 +7,6 @@ const Search = (props) => { function handleSearchInput(e) { let searchValue = e.target.value.toLowerCase().trim(); setSearchInput(searchValue); - console.log(searchValue); } diff --git a/src/SearchResults.js b/src/SearchResults.js index 702b54b25..63eb832b2 100644 --- a/src/SearchResults.js +++ b/src/SearchResults.js @@ -1,8 +1,17 @@ import { useState } from "react"; import moment from "moment"; +import CustomerProfile from "./CustomerProfile"; -export default function SearchResults(props) { +export default function SearchResults({ data }) { const [selectedRows, setSelectedRows] = useState([]); + const [selectedProfile, setSelectedProfile] = useState(null); + + const setSelectedProfileFunction = (event, id) => { + // prevent the row from being highlighted when clicking the button + event.stopPropagation(); + console.log("setSelectedProfileFunction id:", id); + setSelectedProfile(id); + }; const handleRowClick = (rowId) => { if (selectedRows.includes(rowId)) { @@ -12,6 +21,7 @@ export default function SearchResults(props) { // Row is not selected, add it to selectedRows setSelectedRows([...selectedRows, rowId]); } + // console.log("handleRowClick", selectedRows); }; return ( @@ -20,18 +30,19 @@ export default function SearchResults(props) {
    - - - - - - - + + + + + + + + - {props.data.map((element) => ( + {data.map((element) => ( handleRowClick(element.id)} className={ @@ -54,10 +65,21 @@ export default function SearchResults(props) { "days" )} + ))}
    {element.id} {element.title} {element.firstName}
    #titlefirstNamesurnameemailroomIdcheckInDatecheckOutDateTitleFirstNameSurnameEmailRoomIdCheckInDateCheckOutDate NightsProfile
    + +
    +
    ); } diff --git a/src/index.css b/src/index.css index af14565d6..78dcf1f71 100644 --- a/src/index.css +++ b/src/index.css @@ -1,6 +1,7 @@ * { list-style-type: none; } + body { margin: 0; padding: 0; From 4fe17ddeae82b1ef48f06652820298e09b37db58 Mon Sep 17 00:00:00 2001 From: Kristina Date: Fri, 11 Aug 2023 20:54:48 +0100 Subject: [PATCH 5/5] Conect react app to the server. Create form. --- package-lock.json | 338 ++++++++++++++++++++++--------------------- package.json | 1 + src/App.js | 10 +- src/Bookings.js | 27 ++-- src/Form.js | 143 ++++++++++++++++++ src/Search.js | 43 +++++- src/SearchButton.js | 3 - src/SearchResults.js | 4 +- src/index.css | 25 ++++ 9 files changed, 398 insertions(+), 196 deletions(-) create mode 100644 src/Form.js delete mode 100644 src/SearchButton.js diff --git a/package-lock.json b/package-lock.json index 94217b93a..4fa7eb2d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "react-hotel", "version": "0.1.0", "dependencies": { + "cors": "^2.8.5", "moment": "^2.29.4", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -92,9 +93,9 @@ } }, "node_modules/@babel/core/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "bin": { "semver": "bin/semver.js" } @@ -125,9 +126,9 @@ } }, "node_modules/@babel/eslint-parser/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "bin": { "semver": "bin/semver.js" } @@ -188,9 +189,9 @@ } }, "node_modules/@babel/helper-compilation-targets/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "bin": { "semver": "bin/semver.js" } @@ -248,9 +249,9 @@ } }, "node_modules/@babel/helper-define-polyfill-provider/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "bin": { "semver": "bin/semver.js" } @@ -1519,9 +1520,9 @@ } }, "node_modules/@babel/plugin-transform-runtime/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "bin": { "semver": "bin/semver.js" } @@ -1731,9 +1732,9 @@ } }, "node_modules/@babel/preset-env/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "bin": { "semver": "bin/semver.js" } @@ -2864,9 +2865,9 @@ } }, "node_modules/@jridgewell/source-map": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz", - "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==", + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz", + "integrity": "sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==", "dependencies": { "@jridgewell/gen-mapping": "^0.3.0", "@jridgewell/trace-mapping": "^0.3.9" @@ -3892,133 +3893,133 @@ } }, "node_modules/@webassemblyjs/ast": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", - "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==", + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz", + "integrity": "sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==", "dependencies": { - "@webassemblyjs/helper-numbers": "1.11.1", - "@webassemblyjs/helper-wasm-bytecode": "1.11.1" + "@webassemblyjs/helper-numbers": "1.11.6", + "@webassemblyjs/helper-wasm-bytecode": "1.11.6" } }, "node_modules/@webassemblyjs/floating-point-hex-parser": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz", - "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==" + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz", + "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==" }, "node_modules/@webassemblyjs/helper-api-error": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz", - "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==" + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz", + "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==" }, "node_modules/@webassemblyjs/helper-buffer": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz", - "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==" + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz", + "integrity": "sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==" }, "node_modules/@webassemblyjs/helper-numbers": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz", - "integrity": "sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==", + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz", + "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==", "dependencies": { - "@webassemblyjs/floating-point-hex-parser": "1.11.1", - "@webassemblyjs/helper-api-error": "1.11.1", + "@webassemblyjs/floating-point-hex-parser": "1.11.6", + "@webassemblyjs/helper-api-error": "1.11.6", "@xtuc/long": "4.2.2" } }, "node_modules/@webassemblyjs/helper-wasm-bytecode": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz", - "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==" + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz", + "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==" }, "node_modules/@webassemblyjs/helper-wasm-section": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz", - "integrity": "sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==", + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz", + "integrity": "sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==", "dependencies": { - "@webassemblyjs/ast": "1.11.1", - "@webassemblyjs/helper-buffer": "1.11.1", - "@webassemblyjs/helper-wasm-bytecode": "1.11.1", - "@webassemblyjs/wasm-gen": "1.11.1" + "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/helper-buffer": "1.11.6", + "@webassemblyjs/helper-wasm-bytecode": "1.11.6", + "@webassemblyjs/wasm-gen": "1.11.6" } }, "node_modules/@webassemblyjs/ieee754": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz", - "integrity": "sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==", + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz", + "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==", "dependencies": { "@xtuc/ieee754": "^1.2.0" } }, "node_modules/@webassemblyjs/leb128": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz", - "integrity": "sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==", + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz", + "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==", "dependencies": { "@xtuc/long": "4.2.2" } }, "node_modules/@webassemblyjs/utf8": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz", - "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==" + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz", + "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==" }, "node_modules/@webassemblyjs/wasm-edit": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz", - "integrity": "sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==", + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz", + "integrity": "sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==", "dependencies": { - "@webassemblyjs/ast": "1.11.1", - "@webassemblyjs/helper-buffer": "1.11.1", - "@webassemblyjs/helper-wasm-bytecode": "1.11.1", - "@webassemblyjs/helper-wasm-section": "1.11.1", - "@webassemblyjs/wasm-gen": "1.11.1", - "@webassemblyjs/wasm-opt": "1.11.1", - "@webassemblyjs/wasm-parser": "1.11.1", - "@webassemblyjs/wast-printer": "1.11.1" + "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/helper-buffer": "1.11.6", + "@webassemblyjs/helper-wasm-bytecode": "1.11.6", + "@webassemblyjs/helper-wasm-section": "1.11.6", + "@webassemblyjs/wasm-gen": "1.11.6", + "@webassemblyjs/wasm-opt": "1.11.6", + "@webassemblyjs/wasm-parser": "1.11.6", + "@webassemblyjs/wast-printer": "1.11.6" } }, "node_modules/@webassemblyjs/wasm-gen": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz", - "integrity": "sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==", + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz", + "integrity": "sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==", "dependencies": { - "@webassemblyjs/ast": "1.11.1", - "@webassemblyjs/helper-wasm-bytecode": "1.11.1", - "@webassemblyjs/ieee754": "1.11.1", - "@webassemblyjs/leb128": "1.11.1", - "@webassemblyjs/utf8": "1.11.1" + "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/helper-wasm-bytecode": "1.11.6", + "@webassemblyjs/ieee754": "1.11.6", + "@webassemblyjs/leb128": "1.11.6", + "@webassemblyjs/utf8": "1.11.6" } }, "node_modules/@webassemblyjs/wasm-opt": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz", - "integrity": "sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==", + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz", + "integrity": "sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==", "dependencies": { - "@webassemblyjs/ast": "1.11.1", - "@webassemblyjs/helper-buffer": "1.11.1", - "@webassemblyjs/wasm-gen": "1.11.1", - "@webassemblyjs/wasm-parser": "1.11.1" + "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/helper-buffer": "1.11.6", + "@webassemblyjs/wasm-gen": "1.11.6", + "@webassemblyjs/wasm-parser": "1.11.6" } }, "node_modules/@webassemblyjs/wasm-parser": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz", - "integrity": "sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==", + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz", + "integrity": "sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==", "dependencies": { - "@webassemblyjs/ast": "1.11.1", - "@webassemblyjs/helper-api-error": "1.11.1", - "@webassemblyjs/helper-wasm-bytecode": "1.11.1", - "@webassemblyjs/ieee754": "1.11.1", - "@webassemblyjs/leb128": "1.11.1", - "@webassemblyjs/utf8": "1.11.1" + "@webassemblyjs/ast": "1.11.6", + "@webassemblyjs/helper-api-error": "1.11.6", + "@webassemblyjs/helper-wasm-bytecode": "1.11.6", + "@webassemblyjs/ieee754": "1.11.6", + "@webassemblyjs/leb128": "1.11.6", + "@webassemblyjs/utf8": "1.11.6" } }, "node_modules/@webassemblyjs/wast-printer": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz", - "integrity": "sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==", + "version": "1.11.6", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz", + "integrity": "sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==", "dependencies": { - "@webassemblyjs/ast": "1.11.1", + "@webassemblyjs/ast": "1.11.6", "@xtuc/long": "4.2.2" } }, @@ -4081,9 +4082,9 @@ } }, "node_modules/acorn-import-assertions": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz", - "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==", + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz", + "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==", "peerDependencies": { "acorn": "^8" } @@ -4677,9 +4678,9 @@ } }, "node_modules/babel-plugin-polyfill-corejs2/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "bin": { "semver": "bin/semver.js" } @@ -5398,6 +5399,18 @@ "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==" }, + "node_modules/cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "dependencies": { + "object-assign": "^4", + "vary": "^1" + }, + "engines": { + "node": ">= 0.10" + } + }, "node_modules/cosmiconfig": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", @@ -6290,9 +6303,9 @@ } }, "node_modules/enhanced-resolve": { - "version": "5.12.0", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz", - "integrity": "sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==", + "version": "5.15.0", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz", + "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==", "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" @@ -6396,9 +6409,9 @@ } }, "node_modules/es-module-lexer": { - "version": "0.9.3", - "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz", - "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==" + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.3.0.tgz", + "integrity": "sha512-vZK7T0N2CBmBOixhmjdqx2gWVbFZ4DXZ/NyRMZVlJXPa7CyFS+/a4QQsDGDQy9ZfEzxFuNEsMLeQJnKP2p5/JA==" }, "node_modules/es-set-tostringtag": { "version": "2.0.1", @@ -6724,9 +6737,9 @@ } }, "node_modules/eslint-plugin-import/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "bin": { "semver": "bin/semver.js" } @@ -6784,9 +6797,9 @@ } }, "node_modules/eslint-plugin-jsx-a11y/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "bin": { "semver": "bin/semver.js" } @@ -6858,9 +6871,9 @@ } }, "node_modules/eslint-plugin-react/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "bin": { "semver": "bin/semver.js" } @@ -9027,9 +9040,9 @@ } }, "node_modules/istanbul-lib-instrument/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "bin": { "semver": "bin/semver.js" } @@ -11465,9 +11478,9 @@ } }, "node_modules/make-dir/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", "bin": { "semver": "bin/semver.js" } @@ -14640,9 +14653,9 @@ } }, "node_modules/schema-utils": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz", - "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz", + "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==", "dependencies": { "@types/json-schema": "^7.0.8", "ajv": "^6.12.5", @@ -14673,9 +14686,9 @@ } }, "node_modules/semver": { - "version": "7.3.8", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", - "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", "dependencies": { "lru-cache": "^6.0.0" }, @@ -15478,12 +15491,12 @@ } }, "node_modules/terser": { - "version": "5.16.5", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.5.tgz", - "integrity": "sha512-qcwfg4+RZa3YvlFh0qjifnzBHjKGNbtDo9yivMqMFDy9Q6FSaQWSB/j1xKhsoUFJIqDOM3TsN6D5xbrMrFcHbg==", + "version": "5.19.2", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.19.2.tgz", + "integrity": "sha512-qC5+dmecKJA4cpYxRa5aVkKehYsQKc+AHeKl0Oe62aYjBL8ZA33tTljktDHJSaxxMnbI5ZYw+o/S2DxxLu8OfA==", "dependencies": { - "@jridgewell/source-map": "^0.3.2", - "acorn": "^8.5.0", + "@jridgewell/source-map": "^0.3.3", + "acorn": "^8.8.2", "commander": "^2.20.0", "source-map-support": "~0.5.20" }, @@ -15495,15 +15508,15 @@ } }, "node_modules/terser-webpack-plugin": { - "version": "5.3.6", - "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.6.tgz", - "integrity": "sha512-kfLFk+PoLUQIbLmB1+PZDMRSZS99Mp+/MHqDNmMA6tOItzRt+Npe3E+fsMs5mfcM0wCtrrdU387UnV+vnSffXQ==", + "version": "5.3.9", + "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz", + "integrity": "sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==", "dependencies": { - "@jridgewell/trace-mapping": "^0.3.14", + "@jridgewell/trace-mapping": "^0.3.17", "jest-worker": "^27.4.5", "schema-utils": "^3.1.1", - "serialize-javascript": "^6.0.0", - "terser": "^5.14.1" + "serialize-javascript": "^6.0.1", + "terser": "^5.16.8" }, "engines": { "node": ">= 10.13.0" @@ -15593,9 +15606,9 @@ } }, "node_modules/tough-cookie": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.2.tgz", - "integrity": "sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==", + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz", + "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==", "dependencies": { "psl": "^1.1.33", "punycode": "^2.1.1", @@ -16011,21 +16024,21 @@ } }, "node_modules/webpack": { - "version": "5.75.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.75.0.tgz", - "integrity": "sha512-piaIaoVJlqMsPtX/+3KTTO6jfvrSYgauFVdt8cr9LTHKmcq/AMd4mhzsiP7ZF/PGRNPGA8336jldh9l2Kt2ogQ==", + "version": "5.88.2", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.88.2.tgz", + "integrity": "sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==", "dependencies": { "@types/eslint-scope": "^3.7.3", - "@types/estree": "^0.0.51", - "@webassemblyjs/ast": "1.11.1", - "@webassemblyjs/wasm-edit": "1.11.1", - "@webassemblyjs/wasm-parser": "1.11.1", + "@types/estree": "^1.0.0", + "@webassemblyjs/ast": "^1.11.5", + "@webassemblyjs/wasm-edit": "^1.11.5", + "@webassemblyjs/wasm-parser": "^1.11.5", "acorn": "^8.7.1", - "acorn-import-assertions": "^1.7.6", + "acorn-import-assertions": "^1.9.0", "browserslist": "^4.14.5", "chrome-trace-event": "^1.0.2", - "enhanced-resolve": "^5.10.0", - "es-module-lexer": "^0.9.0", + "enhanced-resolve": "^5.15.0", + "es-module-lexer": "^1.2.1", "eslint-scope": "5.1.1", "events": "^3.2.0", "glob-to-regexp": "^0.4.1", @@ -16034,9 +16047,9 @@ "loader-runner": "^4.2.0", "mime-types": "^2.1.27", "neo-async": "^2.6.2", - "schema-utils": "^3.1.0", + "schema-utils": "^3.2.0", "tapable": "^2.1.1", - "terser-webpack-plugin": "^5.1.3", + "terser-webpack-plugin": "^5.3.7", "watchpack": "^2.4.0", "webpack-sources": "^3.2.3" }, @@ -16293,11 +16306,6 @@ "node": ">=10.13.0" } }, - "node_modules/webpack/node_modules/@types/estree": { - "version": "0.0.51", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz", - "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==" - }, "node_modules/webpack/node_modules/eslint-scope": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", @@ -16444,9 +16452,9 @@ } }, "node_modules/word-wrap": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", - "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==", + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz", + "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==", "engines": { "node": ">=0.10.0" } diff --git a/package.json b/package.json index f81c28013..1467a9066 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "cors": "^2.8.5", "moment": "^2.29.4", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/src/App.js b/src/App.js index 6566d1522..986fff36e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,17 +1,25 @@ import React from "react"; +import { useState } from "react"; import { Header } from "./Header"; import Bookings from "./Bookings"; +import Form from "./Form"; import "./App.css"; import TouristInfoCards from "./TouristInfoCards"; import { Footer } from "./Footer"; import { Restaurant } from "./Restaurant"; const App = () => { + const [refreshMessages, setRefreshMessages] = useState(false); + return (
    - + +
    diff --git a/src/Bookings.js b/src/Bookings.js index 247245bfa..a66504838 100644 --- a/src/Bookings.js +++ b/src/Bookings.js @@ -2,39 +2,32 @@ import React, { useState, useEffect } from "react"; import Search from "./Search.js"; import SearchResults from "./SearchResults.js"; -const Bookings = () => { +const Bookings = ({ setRefreshMessages, refreshMessages }) => { const [bookings, setBookings] = useState([]); - const search = (searchInput) => { - const convertedVal = searchInput.toLowerCase().trim(); - const matched = bookings.filter(({ firstName, surname }) => { - return ( - firstName.toLowerCase().includes(convertedVal) || - surname.toLowerCase().includes(convertedVal) - ); - }); - setBookings(matched); - }; + //http://localhost:4000/bookings const fetchData = async () => { try { - const response = await fetch("https://cyf-react.glitch.me"); + const response = await fetch("http://localhost:4000/bookings"); const data = await response.json(); + console.log("fetchData in bookings", data); + setBookings(data); } catch (error) { - console.error("The ERROR is:", error); + console.error("The ERROR occured in fetchData:", error); } }; useEffect(() => { - fetchData(); - }, []); + fetchData(setBookings); + }, [refreshMessages]); return (
    - - + +
    ); diff --git a/src/Form.js b/src/Form.js new file mode 100644 index 000000000..08cfe3e13 --- /dev/null +++ b/src/Form.js @@ -0,0 +1,143 @@ +import { useState } from "react"; + +export default function Form({ setRefreshMessages }) { + const [formData, setFormData] = useState({ + title: "", + firstName: "", + surname: "", + email: "", + roomId: "", + checkInDate: "", + checkOutDate: "", + }); + + const [isSubmitting, setIsSubmitting] = useState(false); + async function handleSubmit(event) { + event.preventDefault(); + + // const formData = new FormData(event.target); + + // const newData = { + // from: formData.get("from"), + // text: formData.get("text"), + // }; + // console.log("handleSubmit newData:", newData); + //http://localhost:4000/bookings + try { + setIsSubmitting(true); + + const response = await fetch("http://localhost:4000/bookings", { + method: "POST", + headers: { + "Content-Type": "application/json", // Set the content type to JSON + }, + body: JSON.stringify(formData), + }); + console.log("handleSubmit response:", response); + + const json = await response.json(); + console.log("handleSubmit json:", json); + + event.target.reset(); + + setRefreshMessages((prevRefreshMessages) => !prevRefreshMessages); + } catch (error) { + console.log("handleSubmit error:", error); + } finally { + setIsSubmitting(false); + } + } + + const handleInputChange = (event) => { + const { name, value } = event.target; + setFormData((prevData) => ({ + ...prevData, + [name]: value, + })); + }; + + return ( +
    + +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    + +
    + + +
    +
    + + +
    + + +
    + ); +} diff --git a/src/Search.js b/src/Search.js index 781d87e5e..18c5c38c8 100644 --- a/src/Search.js +++ b/src/Search.js @@ -1,21 +1,48 @@ import React, { useState } from "react"; -import SearchButton from "./SearchButton"; -const Search = (props) => { +const Search = ({ bookings, setBookings, setRefreshMessages }) => { const [searchInput, setSearchInput] = useState(""); + // function searchBooking() { + // const convertedVal = searchInput.toLowerCase().trim(); + // console.log(convertedVal); + // const matched = bookings.filter(({ firstName, surname }) => { + // firstName.toLowerCase().includes(convertedVal) || + // surname.toLowerCase().includes(convertedVal); + // }); + // console.log(matched); + // setBookings(matched); + // } + function handleSearchInput(e) { let searchValue = e.target.value.toLowerCase().trim(); setSearchInput(searchValue); console.log(searchValue); } - const handleSearchSubmit = (e) => { - e.preventDefault(); - props.search(searchInput); - console.log("Search for:", searchInput); - }; + // const handleSearchSubmit = (e) => { + // e.preventDefault(); + // searchBooking(); + // console.log("Search for:", searchInput); + // }; + + function handleSearchSubmit(event) { + event.preventDefault(); + const convertedVal = searchInput.toLowerCase().trim(); + console.log(convertedVal); + + const matched = bookings.filter(({ firstName, surname }) => { + firstName.toLowerCase().includes(convertedVal) || + surname.toLowerCase().includes(convertedVal); + }); + console.log(matched); + setBookings(matched); + event.target.reset(); + setRefreshMessages((prevRefreshMessages) => !prevRefreshMessages); + + setIsSubmitting(false); + } return (
    @@ -35,7 +62,7 @@ const Search = (props) => { placeholder="Customer name" label="Search" /> - +
    diff --git a/src/SearchButton.js b/src/SearchButton.js deleted file mode 100644 index 598ff4a22..000000000 --- a/src/SearchButton.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function SearchButton() { - return ; -} diff --git a/src/SearchResults.js b/src/SearchResults.js index 63eb832b2..15cd13b56 100644 --- a/src/SearchResults.js +++ b/src/SearchResults.js @@ -2,7 +2,7 @@ import { useState } from "react"; import moment from "moment"; import CustomerProfile from "./CustomerProfile"; -export default function SearchResults({ data }) { +export default function SearchResults({ bookings }) { const [selectedRows, setSelectedRows] = useState([]); const [selectedProfile, setSelectedProfile] = useState(null); @@ -42,7 +42,7 @@ export default function SearchResults({ data }) { - {data.map((element) => ( + {bookings.map((element) => ( handleRowClick(element.id)} className={ diff --git a/src/index.css b/src/index.css index 78dcf1f71..316933f46 100644 --- a/src/index.css +++ b/src/index.css @@ -40,6 +40,31 @@ img { object-fit: cover; } +/*FORM*/ +.div-for-form { + display: flex; + justify-content: center; + padding: 20px; +} + +.form-conrainer { + display: grid; + grid-column: auto auto; + background-color: hwb(240 93% 0%); + width: 400px; + border-radius: 25px; + box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, + rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; + padding: 20px 40px; + row-gap: 15px; +} + +.form-fild { + display: grid; +} + +/**/ + .restuarant-container { display: flex; flex-direction: column;