pushed

package.json

@@ -3,11 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "clsx": "^1.1.1",
+    "clx": "^1.0.0",
+    "firebase": "^7.20.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3"
   },
   "scripts": {

public/index.html

@@ -10,6 +10,7 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App.css

@@ -2,37 +2,4 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,25 +1,41 @@
-import React from 'react';
-import logo from './logo.svg';
+import React, { createContext, useState } from 'react';
 import './App.css';
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route
+} from "react-router-dom";
+import Home from './components/Home/Home';
+import Login from './components/Login/Login';
+import Book from './components/Book/Book';
+import Header from './components/Header/Header';
+import PrivateRoute from './components/PrivateRoute/PrivateRoute';
+
+export const UserContext = createContext();
 
 function App() {
+  const [loggedInUser, setLoggedInUser] = useState({});
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <UserContext.Provider value={[loggedInUser, setLoggedInUser]}>
+      <p>Name: {loggedInUser.name}</p>
+      <Router>
+          <Header/>
+          <Switch>
+            <Route path="/home">
+              <Home />
+            </Route>
+            <Route path="/login">
+              <Login />
+            </Route>
+            <PrivateRoute path="/book/:bedType">
+              <Book />
+            </PrivateRoute>
+            <Route exact path="/">
+              <Home />
+            </Route>
+          </Switch>
+      </Router>
+    </UserContext.Provider>
   );
 }
 

src/components/Book/Book.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Link, useParams } from 'react-router-dom';
+
+const Book = () => {
+    const {bedType} = useParams();
+    return (
+        <div style={{textAlign: 'center'}}>
+            <h1>Let's book a {bedType} Room.</h1>
+            <p>Want a <Link to="/home">different room?</Link> </p>
+        </div>
+    );
+};
+
+export default Book;

src/components/Header/Header.css

@@ -0,0 +1,28 @@
+.header{
+    border: 4px solid black;
+    height: 300px;
+    background-position: center center;
+    background-size: 100% 100%;
+}
+.header .logo{
+    height: 50px;
+}
+.title-container{
+    color: rgba(255, 255, 255, 0.699);
+    text-align: center;
+    font-size: 2em;
+}
+.nav{
+    margin-left: 200px;
+}
+.nav li{
+    display: inline;
+    margin-left: 50px;
+
+  }
+
+  .nav a{
+    text-decoration: none;
+    color: rgba(255, 255, 255, 0.877);
+    font-weight: bold;
+  }

src/components/Header/Header.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './Header.css';
+import header from '../../images/header.png';
+import logo from '../../images/icons/logo.png';
+
+const Header = () => {
+    return (
+        <div style={{ backgroundImage: `linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(${header})` }} className="header">
+            <nav className="nav">
+                <ul>
+                    <li>
+                        <img className="logo" src={logo} alt=""/>
+                    </li>
+                    <li>
+                        <Link to="/home">Home</Link>
+                    </li>
+                    <li>
+                        <Link to="/login">Login</Link>
+                    </li>
+                    <li>
+                        <Link className="btn-book" to="/book">Book</Link>
+                    </li>
+                </ul>
+            </nav>
+            <div className="title-container">
+                <h1>Burj Al Arab</h1>
+                <h2>A global icon of Arabian luxury</h2>
+            </div>
+        </div>
+    );
+};
+
+export default Header;

src/components/Home/Home.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import Room from '../Room/Room';
+
+const Home = () => {
+    const style = {
+        display: 'flex',
+        margin: '40px',
+        justifyContent: 'space-between'
+    }
+    const rooms = [
+        {
+            title: 'Standard Single Room',
+            description: 'Standard Single Rooms are designed in open -concept living area and have many facilities.',
+            imgUrl: 'https://cdn.jumeirah.com/-/mediadh/dh/hospitality/jumeirah/offers/offer-images/burj-al-arab-presidential-suite-living-room-4-hero.jpg',
+            bed: 1,
+            capacity: 1,
+            bedType: 'Single',
+            avatar: 'S',
+            price: 119
+        },
+        {
+            title: 'Couple Power Room',
+            description: 'Superior Double Rooms are perfectly equipped for traveling couples or friends.',
+            imgUrl: 'https://cdn.jumeirah.com/-/mediadh/dh/hospitality/jumeirah/offers/offer-images/burj-al-arab-royal-suite-staircase-5-hero.jpg',
+            bed: 1,
+            capacity: 2,
+            bedType: 'Double',
+            avatar: 'D',
+            price: 149
+        },
+        {
+            title: 'Family Capacity Room',
+            description: ' Have lots of in-room facilities and are designed in open-concept living area.',
+            imgUrl: 'https://cdn.jumeirah.com/-/mediadh/dh/hospitality/jumeirah/hotels/dubai/burj-al-arab-jumeirah/room/presidential-two-bedroom-suite/burj-al-arab-presidential-suite-guest-bedroom_6-4_landscape/burj-al-arab-presidential-suite-guest-bedroom_16-9_landscape.jpg?w=2080',
+            bed: 2,
+            capacity: 4,
+            bedType: 'Family',
+            avatar: 'F',
+            price: 199
+        }
+    ]
+    return (
+        <div style={style}>
+            {
+                rooms.map(room => <Room key={room.bedType} room={room}></Room>)
+            }
+        </div>
+    );
+};
+
+export default Home;

src/components/Login/Login.js

@@ -0,0 +1,39 @@
+import React, { useContext } from 'react';
+import * as firebase from "firebase/app";
+import "firebase/auth";
+import firebaseConfig from './firebase.config';
+import {UserContext} from '../../App';
+import { useHistory, useLocation } from 'react-router-dom';
+
+const Login = () => {
+    const [loggedInUser, setLoggedInUser] = useContext(UserContext);
+    const history = useHistory();
+    const location = useLocation();
+    const { from } = location.state || { from: { pathname: "/" } };
+
+    if(firebase.apps.length === 0){
+        firebase.initializeApp(firebaseConfig);
+    }
+
+    const handleGoogleSignIn = () => {
+        var provider = new firebase.auth.GoogleAuthProvider();
+        firebase.auth().signInWithPopup(provider).then(function(result) {
+            const {displayName, email} = result.user;
+            const signedInUser = {name: displayName, email} 
+            setLoggedInUser(signedInUser);
+            history.replace(from);
+            // ...
+          }).catch(function(error) {
+            const errorMessage = error.message;
+            console.log(errorMessage);
+          });
+    }
+    return (
+        <div>
+            <h1>This is Login</h1>
+            <button onClick={handleGoogleSignIn}>Google Sign in</button>
+        </div>
+    );
+};
+
+export default Login;

src/components/Login/firebase.config.js

@@ -0,0 +1,10 @@
+const firebaseConfig = {
+    apiKey: "AIzaSyAsihSADFnF_FoZ6je8p1W9lilyqX7cHWQ",
+    authDomain: "burj-al-arab.firebaseapp.com",
+    databaseURL: "https://burj-al-arab.firebaseio.com",
+    projectId: "burj-al-arab",
+    storageBucket: "burj-al-arab.appspot.com",
+    messagingSenderId: "244522202387",
+    appId: "1:244522202387:web:f3801d0588387140e1d6e6"
+  };
+  export default firebaseConfig;

src/components/PrivateRoute/PrivateRoute.js

@@ -0,0 +1,26 @@
+import React, { useContext } from 'react';
+import { Redirect, Route } from 'react-router-dom';
+import { UserContext } from '../../App';
+
+const PrivateRoute = ({ children, ...rest }) => {
+    const [loggedInUser, setLoggedInUser] = useContext(UserContext);
+    return (
+        <Route
+            {...rest}
+            render={({ location }) =>
+                loggedInUser.email ? (
+                    children
+                ) : (
+                        <Redirect
+                            to={{
+                                pathname: "/login",
+                                state: { from: location }
+                            }}
+                        />
+                    )
+            }
+        />
+    );
+};
+
+export default PrivateRoute;