From a4334b261ddc67bf19888a7d4eee84f5ce450e1e Mon Sep 17 00:00:00 2001 From: Yuliya110692 <122671093+Yuliya110692@users.noreply.github.com> Date: Sat, 1 Jul 2023 12:08:18 +0100 Subject: [PATCH 1/4] Lesson 1 and 2 done --- src/App.js | 15 --------------- src/App.jsx | 20 ++++++++++++++++++++ src/{Bookings.js => Bookings.jsx} | 2 +- src/Heading.jsx | 10 ++++++++++ src/{Restaurant.js => Restaurant.jsx} | 0 src/{Search.js => Search.jsx} | 3 ++- src/SearchButton.jsx | 12 ++++++++++++ src/TouristInfoCards.jsx | 19 +++++++++++++++++++ 8 files changed, 64 insertions(+), 17 deletions(-) delete mode 100644 src/App.js create mode 100644 src/App.jsx rename src/{Bookings.js => Bookings.jsx} (93%) create mode 100644 src/Heading.jsx rename src/{Restaurant.js => Restaurant.jsx} (100%) rename src/{Search.js => Search.jsx} (90%) create mode 100644 src/SearchButton.jsx create mode 100644 src/TouristInfoCards.jsx diff --git a/src/App.js b/src/App.js deleted file mode 100644 index 953c98560..000000000 --- a/src/App.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from "react"; - -import Bookings from "./Bookings"; -import "./App.css"; - -const App = () => { - return ( -
-
CYF Hotel
- -
- ); -}; - -export default App; diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 000000000..803a6aa0c --- /dev/null +++ b/src/App.jsx @@ -0,0 +1,20 @@ +import React from "react"; +import TouristInfoCards from "./TouristInfoCards"; +import Bookings from "./Bookings"; + +import "./App.css"; + +const App = () => { + return ( +
+ {/* */} +
CYF Hotel
+ + + + +
+ ); +}; + +export default App; diff --git a/src/Bookings.js b/src/Bookings.jsx similarity index 93% rename from src/Bookings.js rename to src/Bookings.jsx index e0d911b13..d57a06078 100644 --- a/src/Bookings.js +++ b/src/Bookings.jsx @@ -1,5 +1,5 @@ import React from "react"; -import Search from "./Search.js"; +import Search from "./Search"; // import SearchResults from "./SearchResults.js"; // import FakeBookings from "./data/fakeBookings.json"; diff --git a/src/Heading.jsx b/src/Heading.jsx new file mode 100644 index 000000000..15804788d --- /dev/null +++ b/src/Heading.jsx @@ -0,0 +1,10 @@ +import React from "react"; + + + +function Heading () { + + return ( + + diff --git a/src/SearchButton.jsx b/src/SearchButton.jsx new file mode 100644 index 000000000..6c32e8d8d --- /dev/null +++ b/src/SearchButton.jsx @@ -0,0 +1,12 @@ +import React from "react"; + + + +function SearchButton (){ + + return ( + + ) +} + +export default SearchButton; \ No newline at end of file diff --git a/src/TouristInfoCards.jsx b/src/TouristInfoCards.jsx new file mode 100644 index 000000000..97837a38d --- /dev/null +++ b/src/TouristInfoCards.jsx @@ -0,0 +1,19 @@ +import React from "react"; + + + +function TouristInfoCards(props) { + + return ( +
+ +
+

{props.name}

+

+ Go somewhere +
+
+ + ) +} +export default TouristInfoCards; \ No newline at end of file From 4bcb872ee989d1f06c8e86317522ddf21e4ae9cd Mon Sep 17 00:00:00 2001 From: Yuliya110692 <122671093+Yuliya110692@users.noreply.github.com> Date: Sun, 16 Jul 2023 13:16:46 +0100 Subject: [PATCH 2/4] eddit footer --- README.md | 68 --------------------- src/App.css | 26 +++++--- src/App.jsx | 27 +++++--- src/Heading.jsx | 10 --- src/TouristInfoCards.jsx | 19 ------ src/{ => component}/Bookings.jsx | 8 +-- src/component/Footer.jsx | 22 +++++++ src/component/Header.jsx | 15 +++++ src/{ => component}/Restaurant.jsx | 0 src/component/SearchResults.jsx | 45 ++++++++++++++ src/component/TouristInfoCards.jsx | 19 ++++++ src/component/data/footerData.json | 5 ++ src/{ => component/search}/Search.jsx | 0 src/{ => component/search}/SearchButton.jsx | 0 src/index.css | 19 ++++++ 15 files changed, 163 insertions(+), 120 deletions(-) delete mode 100644 src/Heading.jsx delete mode 100644 src/TouristInfoCards.jsx rename src/{ => component}/Bookings.jsx (60%) create mode 100644 src/component/Footer.jsx create mode 100644 src/component/Header.jsx rename src/{ => component}/Restaurant.jsx (100%) create mode 100644 src/component/SearchResults.jsx create mode 100644 src/component/TouristInfoCards.jsx create mode 100644 src/component/data/footerData.json rename src/{ => component/search}/Search.jsx (100%) rename src/{ => component/search}/SearchButton.jsx (100%) diff --git a/README.md b/README.md index 5711ee7f8..adeb434ad 100644 --- a/README.md +++ b/README.md @@ -1,72 +1,4 @@ -A hotel booking application in React. Homework for the [CodeYourFuture React module](https://codeyourfuture.github.io/syllabus-master/react/) -![Bookings Search page](Bookings.png) - -# Installation - -1. Follow [the instructions](https://codeyourfuture.github.io/syllabus-master/others/making-a-pull-request.html#how-to-fork-a-github-repo) to fork & clone the GitHub repo -2. Install the dependencies by running `npm install` -3. Launch the server using `npm start` -4. It should automatically open `http://localhost:3000/` in your browser - -# Exercises - -## Lesson 1 - -#### 1. Extract the search button in its own component - -**Instructions:** Extract the search ` - + ); }; export default Restaurant; + + diff --git a/src/component/SearchResults.jsx b/src/component/SearchResults.jsx index a508873d0..0e9d9ef81 100644 --- a/src/component/SearchResults.jsx +++ b/src/component/SearchResults.jsx @@ -1,7 +1,17 @@ -import React from "react"; +import React, { useState } from "react"; import moment from "moment"; +import "../index.css"; const SearchResults = ({ bookings }) => { + const [selectedRows, setSelectedRows] = useState({}); + + const handleRowClick = (bookingId) => { + setSelectedRows((prevState) => ({ + ...prevState, + [bookingId]: !prevState[bookingId] + })); + }; + return ( @@ -14,7 +24,7 @@ const SearchResults = ({ bookings }) => { - {/* New column for number of nights */} + @@ -23,8 +33,14 @@ const SearchResults = ({ bookings }) => { const checkOutDate = moment(booking.checkOutDate); const nights = checkOutDate.diff(checkInDate, "days"); + const rowClass = selectedRows[booking.id] ? "selected-row" : ""; + return ( - + handleRowClick(booking.id)} + > @@ -33,7 +49,7 @@ const SearchResults = ({ bookings }) => { - {/* Display number of nights */} + ); })} diff --git a/src/component/orders.jsx b/src/component/orders.jsx new file mode 100644 index 000000000..cccd73069 --- /dev/null +++ b/src/component/orders.jsx @@ -0,0 +1,14 @@ +import React from "react"; + +const Order = ({ orderType, count, onIncrement }) => { + return ( +
  • + {orderType}: + {count} + +
    • + ); + }; +export default Order; diff --git a/src/component/restaurant.css b/src/component/restaurant.css new file mode 100644 index 000000000..bc82ee9fd --- /dev/null +++ b/src/component/restaurant.css @@ -0,0 +1,44 @@ +/* styles.css */ + + + +.restaurant-container { + max-width: 400px; + margin: 0 auto; + padding: 20px; + border: 1px solid #fff; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + + .order-list { + list-style: none; + padding: 0; + } + + .order-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + border-bottom: 1px solid #ddd; + } + + .order-type { + font-weight: bold; + } + + .order-count { + margin-left: 10px; + font-weight: bold; + } + + .order-button { + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + padding: 5px 5px; + cursor: pointer; + } + \ No newline at end of file diff --git a/src/index.css b/src/index.css index ec1bc45a3..6557ecc29 100644 --- a/src/index.css +++ b/src/index.css @@ -43,3 +43,8 @@ body { .Footer li { margin: 0 10px; } + +.selected-row { + background-color: #f0f0f0; /* Apply your desired highlight color */ + cursor: pointer; +} \ No newline at end of file
    Room ID Check-in Date Check-out DateNightsNights
    {booking.id} {booking.title} {booking.firstName}{booking.roomId} {booking.checkInDate} {booking.checkOutDate}{nights}{nights}