Skip to content
This repository has been archived by the owner on Feb 9, 2024. It is now read-only.

React-Ebrahim Beiati-Asl cyf-hotel #539

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

React-Ebrahim Beiati-Asl cyf-hotel #539

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5852c13
React
ebrahimbeiati Feb 27, 2023
2cf737a
editing
ebrahimbeiati Mar 2, 2023
50cd66a
react hotel
ebrahimbeiati Mar 9, 2023
d23bf39
update hotel react
ebrahimbeiati Mar 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
93 changes: 56 additions & 37 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,77 @@
.App {
text-align: left;
text-align: center;
}

.App-logo {
/* animation: App-logo-spin infinite 20s linear; */
height: 80px;
width: 80px;
}

.App-header {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;

background-color: #222;
height: 50px;
padding: 20px;
padding-left: 10px;
color: white;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
padding-top: 20px;
text-align: center;
}

.App-title {
font-size: 1.5em;
.headerContainer {
display: flex;
align-items: center;
}
.logo {
fill: rgb(55, 59, 55);
width: 50px;
height: 50px;
margin-right: 10px;
padding: 5px;
margin-left: 10px;
filter: invert(1);
}

.App-content {
padding-top: 20px;
font-size: large;
.cardContainer {
display: flex;
justify-content: center;
gap: 20px;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
.card {
width: 18rem;
display: flex;
flex-direction: column;
padding: 10px;
width: 40vh;
}
.search {
padding: 5px 0 20px 0;
.card-img-top {
object-fit: cover;
width: 100%;
height: 100%;
}

tr {
color: #5b5757;
.order-type {
display: flex;
gap: 20px;
margin-top: 0;
margin-bottom: 1rem;
flex-direction: row;
justify-content: space-between;
align-items: center;
}

.results {
padding-top: 15px;
footer ul {
display: flex;
justify-content: space-around;
list-style-type: none;
padding: 20px 0 5px 0;
}

.footer {
padding-top: 20px;
text-align: center;
table .thead-dark th {
color: #767171;
background-color: #212529;
border-color: #32383e;
margin-left: 15%;
}

.card {
width: 18rem;
}
.selected-colour {
background-color: rgb(55, 53, 53);
}
16 changes: 6 additions & 10 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,21 @@ import React from "react";
import Heading from "./Heading";
import Bookings from "./Bookings";
import TouristInfoCards from "./TouristInfoCards";
import Restaurant from "./Restaurant"
import SearchResults from "./SearchResults";
import Footer from "./Footer";
import Restaurant from "./Restaurant";
import "./App.css";
import Order from "./Order";

const App = () => {

return (
<div className="App">
<header className="header">CYF Hotel</header>
<header className="App-header"></header>
<Heading />
<Bookings />
<TouristInfoCards />
<Restaurant/>
<SearchResults />
<Order/>
<Bookings />
<Restaurant />
<Footer />
</div>
);
};
export default App();

export default App;
46 changes: 41 additions & 5 deletions src/Bookings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,54 @@
import React from "react";
import Search from "./Search.js";
import SearchResults from "./SearchResults.js";
import React, { useEffect, useState } from "react";
import Search from "./Search";
import SearchResults from "./SearchResults";
import CustomerProfile from "./CustomerProfile";
import FakeBookings from "./data/fakeBookings.json";
Copy link
Member

Choose a reason for hiding this comment

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

Small stylistic thing, PascalCase is often reserved for React components, with normal JS variables being camelCase - you're importing a JSON file here so this should be camelCase as it is not a React component (it can look confusing as people will assume FakeBookings is a React component). This should be import fakeBookings from "./data/fakeBookings.json"


const Bookings = () => {
useEffect(() => {
console.log("Fetching Information be patient ... ");
fetch("https://cyf-react.glitch.me")
.then((response) => response.json())
.then((data) => setBookings(data))
.catch((err) => {
console.log(err);
});
}, []);

const [bookings, setBookings] = useState([]);
const [showList, setShowList] = useState(true);
Copy link
Member

Choose a reason for hiding this comment

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

Usually you'd put all the useStates above the useEffects, though that's just a stylistic thing


const search = (searchVal) => {
console.info("TO DO!", searchVal);
const filterBookings = bookings.filter((booking) => {
booking.firstName.toLowerCase().includes(searchVal.toLowerCase()) ||
booking.lastName.toLowerCase().includes(searchVal.toLowerCase());
});
setBookings(filterBookings);
setShowList(searchVal.length == 0);
};

return (
<div className="App-content">
<div className="container">
<Search search={search} />
<SearchResults bookings={FakeBookings} />
<SearchResults results={showList ? bookings : filterBookings} />

{/* { <table className="table">}
<thead className="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Title</th>
<th scope="col">FirstName</th>
<th scope="col">SureName</th>
<th scope="col">Email</th>
<th scope="col">Room ID</th>
<th scope="col">Check in</th>
<th scope="col">Check out</th>
<th scope="col">Nights</th>
</tr>
</thead>
<SearchResults results={bookings} />
</table> */}
</div>
</div>
);
Expand Down
35 changes: 35 additions & 0 deletions src/CustomerProfile.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React, { useState, useEffect } from "react";

const CustomerProfile = (props) => {
const [customerData, setCustomerData] = useState("");

useEffect(() => {
fetch(`https://cyf-react.glitch.me/customers/${props.id}`)
.then((res) => res.json())
.then((data) => setCustomerData(data));
}, [props.id]);
Comment on lines +4 to +10
Copy link
Member

Choose a reason for hiding this comment

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

This could definitely be a good use for a custom hook, have a go at making one! :) (Don't worry, this is beyond what is expected)


return (
<div className="customer-profile-container">
<h3>Customer Profile</h3>
<p>
Customer ID: <span>{customerData.id}</span>
</p>
<p>
Customer Name:{" "}
<span>
{customerData.title} {customerData.firstName} {customerData.surname}
</span>
Customer Email: <span>{customerData.email}</span>
</p>
<p>
Customer Phone Number: <span>{customerData.phoneNumber}</span>
</p>
<p>
VIP : <span>{customerData.vip ? "Yes" : "No"}</span>
</p>
</div>
);
};

export default CustomerProfile;
9 changes: 4 additions & 5 deletions src/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import React from "react";

const props = [
"123 Fake Street, London, E1 4UD",
"[email protected]",
"0123 456789"
"123 Fake Street, London, E1 4UD",
"[email protected]",
"0123 456789",
];


const Footer = () => {
return (
<footer>
<ul className="footer-contact">
<ul>
{props.map((props) => (
Copy link
Member

Choose a reason for hiding this comment

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

The variable name props is reserved for the argument passed to all React components (e.g. const Footer = (props) => {...}. Try not to call other variables props except for that one specific case, as it can be confusing. In this case, if you want to have default arguments for your props, you could use this syntax:

const Footer = (props = {address: "123 Fake Street", email: "[email protected]", phoneNumber: "0123 456789"}) => {...}

or

const defaultProps =  {address: "123 Fake Street", email: "[email protected]", phoneNumber: "0123 456789"};

const Footer = (props = defaultProps) => {...}

<li key={props}>{props}</li>
))}
Expand Down
14 changes: 8 additions & 6 deletions src/Heading.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import React from "react";

const Heading = () => {
Copy link
Member

Choose a reason for hiding this comment

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

Perfect!

return (
<header className="App-header">
<div className="App-header">
<img
className="App-logo"
src="https://images.freeimages.com/images/previews/09e/moon-art-1641879.png"
alt=""
className="logo"
src="https://www.svgrepo.com/show/288092/hotel.svg"
alt="Hotel Logo"
/>
CYF Hotel
</header>
<header style={{fontSize:"29px", fontFamily:"cursive", boxShadow:"revert",border:"3px solid white" , padding:"2px"}}>CYF Hotel</header>
</div>
);
};

export default Heading;
8 changes: 8 additions & 0 deletions src/Nights.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import moment from "moment";

export const numberOfNight = ({ checkInDate, checkOutDate }) => {
const checkIn = moment(checkInDate);
const checkOut = moment(checkOutDate);
const nights = checkOut.diff(checkIn, "days");
return nights;
};
Comment on lines +3 to +8
Copy link
Member

Choose a reason for hiding this comment

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

Because you're not returning any jsx (this isn't a react component), this should just be a regular .js file instead of a .jsx file

20 changes: 10 additions & 10 deletions src/Order.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
import React, { useState } from "react";
import RestaurantButton from "./RestaurantButton";
import { RestaurantButton } from "./RestaurantButton";

const Order = (props) => {
const Order = ({ orderType }) => {
const [orders, setOrders] = useState(0);

function orderOne() {
const orderOne = () => {
setOrders(orders + 1);
}

};
return (
<li className="list-group-item">
{props.orderType} :{" "}
<span className="badge badge-primary badge-pill">{orders}</span>{" "}
<RestaurantButton orderOne={orderOne} />
</li>
<ul>
<li>
{orderType}: {orders}
<RestaurantButton onClick={orderOne} />
</li>
</ul>
);
};

Expand Down
16 changes: 7 additions & 9 deletions src/Restaurant.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
import React from "react";
import Order from "./Order";

const Restaurant = () => {
const pizzas = 0;
return (
<div>
<h3>Restaurant Orders</h3>

<ul className="list">
<Order orderType="Pizza" />
<Order orderType="Salads" />
<Order orderType="Chocolate cake" />
</ul>

<ul className="order-type">
<Order orderType="Pizza" />
<Order orderType="Cesar-Salad" />
<Order orderType="Chocolate cake" />
<Order orderType="Ice-Cream"/>
Comment on lines +8 to +11
Copy link
Member

Choose a reason for hiding this comment

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

You could instead create an array of order types const orders = ["Pizza", "Cesar sald", "Ice cream"] and {orders.map(order => <Order orderType={order} />)} to save some repetition

</ul>
</div>
);
};
Expand Down
Loading