London10_Afsha_Hossain_cyf-hotel-react_React_Week1 #600

Afsha10 · 2023-06-20T13:10:34Z

No description provided.

Followed these Instructions: Extracted the search <button> from the src/Search.js file to be its own separate component. Named it SearchButton. Imported and used this new component in src/Search.js. Tested: The search button still being render on the page.

…n file inside the component folder Extracted the <header> from the src/App.js file to be its own separate component called Heading. Made sure that I import and render the <Heading /> component within src/App.js. In the Heading component, render the hotel's logo in an <img> (I found my own image URL). Adjusted the CSS by editing src/App.css to make your Heading looks better. Tested: The header displayed with a logo on the page.

In src/App.js, above the <Bookings /> component, added a new component called TouristInfoCards which shows 3 cards. A card is a common user interface pattern with an image at the top and some related text underneath. The cards links to peoplemakeglasgow.com, visitmanchester.com and visitlondon.com. The cards contains the name of the city and an image of the city.

Created a <Footer /> component which is rendered at the bottom of the page. Passed the following array as a prop to this component: ["123 Fake Street, London, E1 4UD", "[email protected]", "0123 456789"]. Inside the component, used the data we passed as a prop to render a <ul> list with each item of the array displayed as a <li>. Tested: The footer rendered at the bottom of the page with each address property displayed as a list item.

Created a <SearchResults /> component that shows hotel bookings in a <table> element. Each booking have an id, title, first name, surname, email, room id, check in date and check out date. The bookings that are displayed are hardcoded. We made up data in the <SearchResults /> component to show in the table. Then showed <SearchResults /> component within the <Bookings /> component that is provided. I've split out our components into small well-named components, similar to the method used in exercise 1.

Instead of using hard-coded data in the <SearchResults /> component, I loaded data from the src/data/fakeBookings.json file in the <Bookings /> component and passed it as a prop to <SearchResults />. All the bookings in src/data/fakeBookings.json are now be displayed in my table. Hint: Look in the <Bookings /> component for how to import data from a JSON file. Tested: All the bookings in the file src/data/fakeBookings.json are displayed in my table.

Added another column to my <SearchResults /> table which shows the number of nights a guest is staying. Tried installing the moment.js library (by installing it with npm install moment --save) and using the .diff() method to compare dates. Tested: Each booking in my table and showed the number of nights in a separate column. For example, Mr John Doe has a booking for 2 nights.

Within the src/App.js file, rendered the <Restaurant /> component (that is provided for us in src/Restaurant.js) underneath the <Bookings /> component. Test:ed The restaurant orders is rendered on the page and centred the component using css.

Previously, the number of pizzas a guest can order was static and set to 0, even if they click on the 'Add' button. So I changed that in the following to let a guest add more pizzas to their order. First, I declared a new state variable orders along with the function to set the orders state setOrders. The initial value of the orders state should be 0. I used the new orders variable instead of the pizzas variable (that I can now delete). I used the React function useState to create a state variable. I imported the function at the top with import React, {useState} from "react";. Verified the number of ordered pizzas it still 0 on the screen and did a bit of styling with CSS to make it look better.

In the <Restaurant /> component, I created a new function named orderOne. The orderOne function doesn't take any parameters. I used the setOrders function to increment the orders state variable by 1. Then, added an onClick handler to the Add <button> that calls the orderOne function when it's being clicked. Tested: Click on the Add button a few times and verify that the number of pizzas increases accordingly and it did. :)

(Corrected the name of the previous function we created to orderOne from odederOne.) Extracted the <button> currently in the <Restaurant /> component to a new component named RestaurantButton. Passed the orderOne function as a prop to the <RestaurantButton /> component and used this prop in the onClick handler. Tested: Clicking the button still increments the number of pizzas.

Extracted the <li> containing "Pizzas" from the <Restaurant /> component to a new component named Order. Also, moved the declaration of the orders state and the orderOne function from the <Restaurant /> component to the new <Order /> component. Used the <Order /> component in the <ul> list of the <Restaurant /> component. Tested: Made sure the pizza order is still rendered on the page and that clicking on the "Add" button still increments the number of orders.

Paseds a new prop named orderType to the <Order /> component with the value "Pizzas". Then rendered the orderType prop instead of "Pizzas" in the <Order /> component. Made sure that "Pizzas" is still displayed on the screen. In the <ul> list of the <Restaurant /> component, rendered 2 others <Order /> components but this time pass different values for the orderType prop: "Salads" and "Chocolate cake". Test: For each order, the number of items are incremented independently. I am able to explain what is happening. ;)

In the <Bookings /> component, declared a new state bookings with the corresponding setter function setBookings to hold the FakeBookings data. Instead of passing FakeBookings directly to the <SearchResults /> component, passed the new bookings state variable. The new bookings state is initialised with the FakeBookings variable. Checked that the bookings are still rendered correctly in the page.

kwebster77 · 2023-06-24T13:35:57Z

src/App.js

      <Bookings />
+      <Restaurant />
+      <Footer address = {address}/>


Nice organization and adding all the components into the app.js

kwebster77 · 2023-06-24T13:39:56Z

src/index.css

+/* making space between logo and h1 */
+header > img {
+  margin-right: 2rem;
+}


Is there a reason to have this in the index.css? Remember for index.css this would be to change the whole project.

kwebster77 · 2023-06-24T13:43:20Z

src/components/Order.jsx

+    setOrders((orders) => orders + 1);
+  };
+  return (
+    <li>


so because this is all wrapped in
you are having your ordertype/ orders and your button on the same line. Is this how you would like it to look?

kwebster77 · 2023-06-24T13:44:53Z

src/components/Footer.jsx

+      <footer className="footer">
+        <ul className="footer-ul">
+          {props.address.map((element, index) => {
+            return <li className="footer-list" key={index}>{element}</li>;


nice use of map! this looks very good

kwebster77 · 2023-06-24T13:46:34Z

src/Restaurant.js


 const Restaurant = () => {
-  const pizzas = 0;


How are you looking to implement the restaurant component? Looks like for right now you are only getting the header and the ordertypes
should this be a separate component? Or will you be adding additional functionality in the restaurant component?

kwebster77 · 2023-06-24T13:47:21Z

src/Bookings.js


 const Bookings = () => {
+  const [bookings, setBookings] = useState(FakeBookings);
  const search = searchVal => {
    console.info("TO DO!", searchVal);


Looking forward to seeing how you will implement this!

kwebster77 · 2023-06-24T13:49:43Z

src/components/RestaurantButton.css

Love that you have the restaurantbutton css in its own file! Very clean and easy to read :)

kwebster77 · 2023-06-24T13:50:09Z

src/components/RestaurantButton.jsx

+import "./RestaurantButton.css";
+const RestaurantButton = ({ orderOne }) => {
+  return (
+    <button className="btn btn-primary" onClick={orderOne}>


The button looks good! Time to add the reset button ;)

kwebster77 · 2023-06-24T13:50:48Z

src/components/SearchButton.jsx

+
+const SearchButton = () => {
+  return <button className="btn btn-primary">Search</button>;
+};


Search button is nicely implemented! Looks like you still need to work on the search functionality though :)

kwebster77 · 2023-06-24T13:51:29Z

src/components/SearchResults.jsx

+const SearchResults = (props) => {
+    return (
+      <table className="table table-bordered">
+        <thead>


Got to love bootstrap! The table looks good and very well formatted. Good work!

kwebster77 · 2023-06-24T13:54:23Z

src/components/SearchResults.jsx

+          {props.results.map((result, index) => {
+            const a = moment(result.checkOutDate);
+            const b = moment(result.checkInDate);
+            const days = a.diff(b, "days"); // 1


Really good implementation for the days

good job creating the two consts and using diff

kwebster77 · 2023-06-24T13:55:08Z

src/components/TouristInfoCards.jsx

@@ -0,0 +1,75 @@
+import React from "react";
+
+const TouristInfoCards = () => {


Good job pulling this out into its own component

kwebster77

Hi Afsha!

Really nice work on this PR for week1. I think you have done a very good job of pulling out the individual components into their own files. I can also see that have done a good job on some of your functions such as the addOne function and calculating the number of days.

A few things I would recommend for your next steps:

It looks like the search function have not been implemented yet for searching your results
It looks like the reset button could also be implemented

Overall, I think you did a great job and I can see how far you have gotten for week1! Keep up the good work on the next few. Also just want to say how great your commit messages are. They are so easy to follow!

Let me know if you have any questions 👍

Within the <SearchResults /> component or its child components, added an onClick handler to each row in the table (on the <tr> element). When clicked, the row is "selected" and highlighted with a different colour. When clicked again, the row is unselected and the coloured highlighting is removed. We need to get more than one rows highlighted.

Tried a different way to solve exercise 15 using SearchResultsOther.js file

Instead of getting the existing bookings from the file data/fakeBookings.json, we got and load the bookings from a remote API. In the <Bookings /> component, we used the React function useEffect to console.log() some text only when the page first renders on the screen. We verified that when we refreshed the page, the text appears once in the console. Then, in the useEffect function, use the fetch() function to get data from https://cyf-react.glitch.me. Hints: - Replaced FakeBookings in the bookings state and initialised it with [] (because we haven't fetched any results yet!) - After calling the fetch() function, we used .then() to handle the response. Tried looking at your Pokemon app that you worked on in class for an example - When the response came back, use setBookings to update the results Test: Verified the customers data are still displayed correctly in the table.

We have implemented the functionality to search for a customer name given the text typed into the customer name field. In the src/Search.js file, we declared a new state variable named searchInput with the corresponding setter function setSearchInput (hint: use the React function useState). The initial value of the searchInput variable can be an empty string. We added a value property to the <input> tag that is set to the new searchInput state variable. Then we created a new function handleSearchInput taking an event parameter. This function should use the setSearchInput function to update the state variable searchInput with what the user typed in the input field. Finally, add a onChange prop to the <input> tag that is set to the function handleSearchInput. Use console.log() to output the value received in the handleSearchInput function. Hint: Use event.target.value to get the input value. Test: In the developer console, check that everything you type in the search input is printed successively for each new character you enter.

We have implemented the functionality to search for a customer name given the text typed into the customer name field. In the src/Search.js file, we declared a new state variable named searchInput with the corresponding setter function setSearchInput (hint: use the React function useState). The initial value of the searchInput variable is an empty string. We added a value property to the <input> tag that is set to the new searchInput state variable. Then we created a new function handleSearchInput taking an event parameter. This function used the setSearchInput function to update the state variable searchInput with what the user typed in the input field. Finally, added an onChange prop to the <input> tag that is set to the function handleSearchInput. Used console.log() to output the value received in the handleSearchInput function. Hint: We used event.target.value to get the input value. Test: In the developer console, checked that everything we type in the search input is printed successively for each new character we entered.

Still in the <Search /> component, we added an onSubmit handler to the <form> tag. When the form is submitted (tried clicking the search button), got the value of the state searchInput and passed it as a parameter to the search prop function that had been provided for us (the search prop is passed from the <Bookings /> component). Note: Also our submit handler should take an event parameter and add the line event.preventDefault() to prevent the browser to implicitly submit the form). Test: Looked in the console, we should see the text that is typed in the search input field when submitting the form.

…esults.jsx Still in the <Bookings /> component, we implement the search method. It must use the searchVal variable (that we just passed from the <Search /> component) to filter the search results. The filter function should return bookings where firstName or surname match searchVal. Once filtered, we use the setBookings function to update the results rendered in <SearchResults />. Test: Verified that when you enter an existing first name or surname and submit the form, the results are filtered accordingly in the customers table.

Added a new column in the table of the <SearchResults /> component and displayed a <button> for each row. The text of the button should read "Show profile". Then, created a new <CustomerProfile /> component. This component is rendered next to the table in the <SearchResults /> component. This component receives one prop id. When clicking on a "Show profile" button for a given row, the component <CustomerProfile /> displays the text "Customer Profile", where the id of the selected customer is. Initially, the <CustomerProfile /> component doesn't show anything. Hint: We need to record the selected customer id after clicking on a "Show profile" button. In which component do we think this state should be defined? Tested: When first showing the page, no customer profile is displayed. When clicking the first "Show profile" button of the table, the text "Customer 1 profile" appears. When clicking the second "Show profile" button of the table, the text "Customer 2 profile" appears instead.

When a "Show profile" button is clicked in the table, we fetch the corresponding customer profile from https://cyf-react.glitch.me/customers/<ID> in the <CustomerProfile /> component. A customer profile should show the customer ID, their email, if they are VIP and their phone number in a list. Hint: We need to use useEffect and the correct dependency array. We'll need to fetch customers data from the API every time a "Show profile" button is clicked and render it accordingly.

We remember in Lesson 2, we fetched the bookings from a remote API. Now we are showing a loading state in <Bookings /> while the data from the server is being fetched. To test this, we try loading data from https://cyf-react.glitch.me/delayed, which has a 5 second delay before returning the data. We will need to use another state to record when our application is loading data (this can be a boolean) and display a loading message whenever the application is loading data. Hint: We try looking at our Pokemon app that we worked on as an example. Tested: A message inviting the user to wait should be displayed on the screen until bookings data is rendered on the screen. When bookings are rendered, the loading message should be hidden.

Finally, display an error message in <Bookings /> if there is an HTTP error when fetching data from the server. To test this, try loading data from https://cyf-react.glitch.me/error, which will return a 500 HTTP error. Hint: Try looking at your Pokemon app that you worked on in class for an example. Test: When loading bookings data from the /error endpoint, an error message should be displayed on the screen.

sonarcloud · 2023-07-20T18:46:04Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information

sonarcloud · 2023-09-07T23:36:11Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information

Afsha10 added 16 commits June 16, 2023 00:26

Minor change to exercise 2

596a65c

8. Rendered the Restaurant component

eb88f7b

Within the src/App.js file, rendered the <Restaurant /> component (that is provided for us in src/Restaurant.js) underneath the <Bookings /> component. Test:ed The restaurant orders is rendered on the page and centred the component using css.

Minor styling changes to restaurantButton component

819f1d2

kwebster77 reviewed Jun 24, 2023

View reviewed changes

src/App.js

<Bookings />

<Restaurant />

<Footer address = {address}/>

Copy link

kwebster77 Jun 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice organization and adding all the components into the app.js

kwebster77 reviewed Jun 24, 2023

View reviewed changes

src/components/RestaurantButton.css Outdated

Copy link

kwebster77 Jun 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love that you have the restaurantbutton css in its own file! Very clean and easy to read :)

kwebster77 reviewed Jun 24, 2023

View reviewed changes

kwebster77 added the reviewed A volunteer has reviewed this PR label Jun 24, 2023

kwebster77 self-assigned this Jun 24, 2023

Afsha10 added 8 commits June 25, 2023 11:24

Able to highlight and unhighlight multiple rows by clicking other rows

da55007

Exercise 15

ef63070

Tried a different way to solve exercise 15 using SearchResultsOther.js file

Merge branch 'master' of https://github.com/Afsha10/cyf-hotel-react

60e6aa3

Afsha10 force-pushed the master branch from 7fb6fa4 to fad13df Compare July 9, 2023 16:22

Afsha10 force-pushed the master branch 5 times, most recently from af77f29 to 1ec8550 Compare July 11, 2023 10:56

Afsha10 force-pushed the master branch from 1ec8550 to e03521f Compare July 11, 2023 11:46

Afsha10 added 2 commits July 11, 2023 12:49

Afsha10 force-pushed the master branch 2 times, most recently from f5408c8 to 244ee93 Compare July 20, 2023 17:35

Afsha10 force-pushed the master branch from 244ee93 to defc909 Compare July 20, 2023 18:45

Changed styling

efd9702

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

London10_Afsha_Hossain_cyf-hotel-react_React_Week1 #600

London10_Afsha_Hossain_cyf-hotel-react_React_Week1 #600

Afsha10 commented Jun 20, 2023

kwebster77 Jun 24, 2023

kwebster77 Jun 24, 2023

kwebster77 Jun 24, 2023

kwebster77 Jun 24, 2023

kwebster77 Jun 24, 2023

kwebster77 Jun 24, 2023

kwebster77 Jun 24, 2023

kwebster77 Jun 24, 2023

kwebster77 Jun 24, 2023

kwebster77 Jun 24, 2023

kwebster77 Jun 24, 2023

kwebster77 Jun 24, 2023

kwebster77 left a comment

sonarcloud bot commented Jul 20, 2023

sonarcloud bot commented Sep 7, 2023

		@@ -0,0 +1,75 @@
		import React from "react";

		const TouristInfoCards = () => {

London10_Afsha_Hossain_cyf-hotel-react_React_Week1 #600

Are you sure you want to change the base?

London10_Afsha_Hossain_cyf-hotel-react_React_Week1 #600

Conversation

Afsha10 commented Jun 20, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kwebster77 left a comment

Choose a reason for hiding this comment

sonarcloud bot commented Jul 20, 2023

sonarcloud bot commented Sep 7, 2023