<repo_name>Toushiat96/travel-lover<file_sep>/src/Components/Login/Login.js
import React, { useContext, useState } 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';
import Header from '../Header/Header';
import { Form } from 'react-bootstrap';
import { FormGroup } from '@material-ui/core';

const Login = () => {
    const [loggedInUser, setLoggedInUser] = useContext(UserContext);
    const [newUser, setNewUser] = useState(false);
    const history = useHistory();
    const location = useLocation();
    const { from } = location.state || { from: { pathname: "/" } };

    if (firebase.apps.length === 0) {
        firebase.initializeApp(firebaseConfig);
    }
    const handleBlur = (event) => {
        let isFieldValid = true;
        if (event.target.name === 'email') {
            isFieldValid = /\S+@\S+\.\S+/.test(event.target.value); ////regular expression /\S+@\S+\.\S+/ diye email validation
        }
        if (event.target.name === 'password') {
            const isPasswordValid = event.target.value.length > 6;
            const passwordHasNumber = /\d{1}/.test(event.target.value); //regular expression /\d{1}/ diye pass validation
            //console.log(isPasswordValid && passwordHasNumber);
            isFieldValid = (isPasswordValid && passwordHasNumber);
        }
        if (isFieldValid) {
            const newUserInfo = { ...loggedInUser };
            newUserInfo[event.target.name] = event.target.value;
            setLoggedInUser(newUserInfo);
        }

    }
    const handleSubmit = (event) => {
       
        if (newUser && loggedInUser.email && loggedInUser.password){
            //console.log("submitting");
            firebase.auth().createUserWithEmailAndPassword(loggedInUser.email, loggedInUser.password)
            .then(res =>{
                console.log(res);
                const {displayName, email} = res.user;
                const emailUser = {name: displayName, email: email};
              //const newUserInfo = {...loggedInUser};
            //    newUserInfo.error = '';
            //    newUserInfo.success = true;
               setLoggedInUser(emailUser);
               updateUserName(loggedInUser.name);
            //     const signedInUser = {
            //    // isSignedIn: 'true',
            //     name: displayName,
            //     email: email
            //   };
             
             history.replace(from);
              
            })
            .catch(error => {
              // Handle Errors here.
              const newUserInfo = {...loggedInUser};
               newUserInfo.error = error.message;
               newUserInfo.success = false;
              setLoggedInUser(newUserInfo);
              // ...
            });
        }

            if (!newUser && loggedInUser.email && loggedInUser.password){
                //console.log("submitting");
                firebase.auth().signInWithEmailAndPassword(loggedInUser.email, loggedInUser.password)
                .then(res =>{
                    const {displayName, email} = res.user;
                    const emailUser = {name: displayName, email: email};
                //   const newUserInfo = {...loggedInUser};
                //    newUserInfo.error = '';
                //    newUserInfo.success = true;
                   setLoggedInUser(emailUser);
                   updateUserName(loggedInUser.name);
            //     const signedInUser = {
            //        // isSignedIn: 'true',
            //         name: res.user.displayName,
            //         email: res.user.email
            //   };
            //     setLoggedInUser(signedInUser);
                history.replace(from);
                  
                  
                })
                .catch(error => {
                  // Handle Errors here.
                  const newUserInfo = {...loggedInUser};
                   newUserInfo.error = error.message;
                   newUserInfo.success = false;
                  setLoggedInUser(newUserInfo);
                  // ...
                });
            }
         
       event.preventDefault();
      
       
        }




const updateUserName = name => {
    const user = firebase.auth().currentUser;

    user.updateProfile({
      displayName: name
    }).then(function() {
      // Update successful.
    }).catch(function(error) {
      // An error happened.
    });
   } 



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);
    });
}
const handleFaceBookSignIn = () => {
    var fbprovider = new firebase.auth.FacebookAuthProvider();
    firebase.auth().signInWithPopup(fbprovider).then(function (result) {
        const { displayName, email } = result.user;
        const signedInuser = { displayName, email }
        setLoggedInUser(signedInuser);
        console.log(signedInuser);
        history.replace(from);
        // ...
    }).catch(function (error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        // ...
    });

}
return (
    <div>
        <div className="homeimage">
            <div>
                <Header></Header>

            </div>


            <div className="container">
                <div className="row justify-content-center" style={{ marginTop: '90px', marginLeft: '290px', backgroundColor: 'white', border: '1px solid white', borderRadius: '20px', height: '440px', width: '500px' }}>
                    <div col-md-8>
                        <Form onSubmit={handleSubmit} style={{ width: '250px', color: 'gray' }}>

                            <Form.Group>
                                <Form.Check type="checkbox" onClick={() => setNewUser(!newUser)} label="Click for Sign up" />
                            </Form.Group>

                            <FormGroup>
                                {newUser && <Form.Control type="name" name="name" className="form-control" onBlur={handleBlur} placeholder="Your name" required />}
                            </FormGroup>

                            <FormGroup>
                                <Form.Label>Email address</Form.Label>
                                <Form.Control type="email" name="email" onBlur={handleBlur} placeholder="Username or Email" required />
                            </FormGroup>

                            <FormGroup>
                                <Form.Label>Password</Form.Label>
                                <Form.Control type="password" name="password" onBlur={handleBlur} placeholder="<PASSWORD>" required />
                            </FormGroup>
                            <br />

                            <input style={{ marginLeft: '75px', fontWeight: 'border', backgroundColor: '#ffc107' }} value="Submit" type="submit" />



                        </Form>

                        <br />
                        <button onClick={handleGoogleSignIn} style={{ borderRadius: '10px', marginLeft: '15px' }} >
                            Continue With Google
                  </button>
                        <br />
                        <br />
                        <button onClick={handleFaceBookSignIn} style={{ borderRadius: '10px', marginLeft: '15px' }}>

                            Continue With Facebook
                   </button>




                    </div>
                </div>
            </div>


        </div>

    </div>

);
};

export default Login;<file_sep>/src/Components/Destination/Destination.js
import React from 'react';
import { useParams } from 'react-router-dom';
import Header from '../Header/Header';
import fakedata from '../../fakedata/index'

const Destination = () => {

    const { destinationid } = useParams();
    const hotelinformation = fakedata.find(data => data.id === destinationid)
    const { title, picture1, picture2, picture3,name1,name2,name3 } = hotelinformation;
    console.log(hotelinformation);
    return (
        <div>
            <div className="homeimage">

                <Header></Header>

                <div className="container">
                    <div className="row d-flex align-items-center">
                        <div className="col-md-7">
                            <div style={{ color: 'white' }}>
                                <p>252 stays Apr 13-17 3 guests</p>
                                <h4>{title}</h4>
                            </div>
                            {/* First room information */}
                            <div className="d-flex">

                                <div>
                                    <img style={{ width: '200px',height:'130px' }} src={picture1} alt="" />
                                </div>

                                <div className="apartment" style={{ marginLeft: "35px" }}>
                                    <h3 style={{ color: "white" }}>{name1} </h3>
                                    <p style={{ color: "white" }}>
                                        4 guests 2 bedrooms 2 beds 2 baths <br />
                                            Wifi Air conditioning Kitchen <br />
                                            Cancellation fexibility availiable <br />
                                        <span > 4.9 (20) &nbsp;&nbsp; $52/ night &nbsp;&nbsp; $167 total</span>
                                    </p>
                                </div>
                            </div>
                            {/* second room information */}
                            <div className="d-flex">

                                <div>
                                    <img style={{ width: '200px',height:'130px' }} src={picture2} alt="" />
                                </div>

                                <div className="apartment" style={{ marginLeft: "35px" }}>
                                    <h3 style={{ color: "white" }}>{name2} </h3>
                                    <p style={{ color: "white" }}>
                                        4 guests 2 bedrooms 2 beds 2 baths <br />
                                            Wifi Air conditioning Kitchen <br />
                                            Cancellation fexibility availiable <br />
                                        <span > 4.9 (20) &nbsp;&nbsp; $52/ night &nbsp;&nbsp; $167 total</span>
                                    </p>
                                </div>
                            </div>
                            {/*Third room information  */}
                            <div className="d-flex">

                                <div>
                                    <img style={{ width: '200px',height:'130px' }} src={picture3} alt="" />
                                </div>

                                <div className="apartment" style={{ marginLeft: "35px" }}>
                                    <h3 style={{ color: "white" }}>{name3} </h3>
                                    <p style={{ color: "white" }}>
                                        4 guests 2 bedrooms 2 beds 2 baths <br />
                                            Wifi Air conditioning Kitchen <br />
                                            Cancellation fexibility availiable <br />
                                        <span > 4.9 (20) &nbsp;&nbsp; $52/ night &nbsp;&nbsp; $167 total</span>
                                    </p>
                                </div>
                            </div>


                        </div>
                        <div className="col-md-5">
                            <iframe
                                src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d2766243.7879151287!2d89.97055095426357!3d24.142547837459787!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sbd!4v1600294700894!5m2!1sen!2sbd"
                                width="470px" height="500px" frameborder="0" style={{ border: '0' }} allowfullscreen="" aria-hidden="false" tabindex="0">
                            </iframe>
                        </div>

                    </div>

                </div>
            </div>

        </div>
    );
};

export default Destination;<file_sep>/src/Components/Book/Book.js
import React from 'react';
import { Button, Form } from 'react-bootstrap';
import { Link, useHistory, useParams } from 'react-router-dom';
import fakedata from '../../fakedata/index'
import Header from '../Header/Header';

const Book = () => {
    const history = useHistory();
    const handleclick = (id) => {
        const url = `/destination/${id}`;
        history.push(url)

    }
    const { bookid } = useParams();
    const bookData = fakedata.find(data => data.id === bookid)
    const { name, id, description, origin, destination } = bookData;
    return (
        <div className="homeimage">

            <div>
                <Header></Header>

            </div>
            <div className="container">
                <div className="row" style={{ color: 'white', marginTop: '100px' }}>
                    <div className="col-md-6">
                        <h1 >
                            {name}
                        </h1>
                        <br />
                        {description}
                    </div>


                    <div className="col-md-6 bg-white" style={{ border: '1px solid white', borderRadius: '5px' }}>

                        <Form>
                            <Form.Group>
                                <Form.Label style={{ color: 'gray' }}>Origin</Form.Label>
                                <Form.Control type="text" placeholder={origin} disabled />
                            </Form.Group>

                            <Form.Group >
                                <Form.Label style={{ color: 'gray' }}>Destination</Form.Label>
                                <Form.Control type="text" placeholder={destination} disabled />
                            </Form.Group>
                            <Form.Group >
                                <div className="d-flex justify-content-between">
                                    <div>
                                        <Form.Label style={{ color: 'gray' }}>From</Form.Label>
                                        <Form.Control type="date" placeholder={destination} />
                                    </div>
                                    <div>
                                        <Form.Label style={{ color: 'gray' }}>To</Form.Label>
                                        <Form.Control type="date" placeholder={destination} />
                                    </div>

                                </div>

                            </Form.Group>

                        </Form>
                        <div className="d-flex justify-content-center">
                            {/* <Link to ={`/destination/${id}`}>Confirm Now</Link> */}
                            <Button onClick={() => handleclick(id)} variant="warning"> Confirm Now </Button>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    );
};

export default Book;<file_sep>/src/Components/Header/Header.js
import React, { useContext } from 'react';
import { Button, Form, FormControl, Nav, Navbar } from 'react-bootstrap';
import { UserContext } from '../../App';
import Logo from '../../Image/Logo.png'
import './Header.css'

const Header = () => {
    const [loggedInUser, setLoggedInUser] = useContext(UserContext);
    return (
        <div>
            <Navbar bg="none">
                <Navbar.Brand href="#home" style={{ marginLeft: '140px' }}>

                    <img style={{ width: '100px', color: 'white', filter: 'contrast(0%) brightness(500%)' }}
                        src={Logo}

                        alt="React Bootstrap logo"
                    />
                </Navbar.Brand >

                <Form inline style={{ marginLeft: '70px', weight: '70px' }}>
                    <FormControl type="text" placeholder="Search Your  Destination" className="mr-sm-2" />

                </Form>
                <Nav className="nav" >
                    <Nav.Link to="/news" style={{ marginLeft: '45px', color: 'white', fontWeight: '600', fontFamily: 'Montserrat' }} href="#home">News</Nav.Link>
                    <Nav.Link to="/destination" style={{ marginLeft: '50px', color: 'white', fontWeight: '600', fontFamily: 'Montserrat' }} href="#features">Destination</Nav.Link>
                    <Nav.Link to="/blog" style={{ marginLeft: '50px', color: 'white', fontWeight: '600', fontFamily: 'Montserrat' }} href="#pricing">Blog</Nav.Link>
                    <Nav.Link to="/contact" style={{ marginLeft: '50px', color: 'white', fontWeight: '600', fontFamily: 'Montserrat' }} href="#features">Contact</Nav.Link>
                    <li>
                   
                    <Button style={{ marginLeft: '50px', width: '80px', height: '40px', borderRadius: '10px', fontWeight: '600' }} href="/login" variant="warning" >
                    Login </Button>
                    </li>
                </Nav>
            </Navbar>
        </div>
    );
};

export default Header;<file_sep>/README.md
## Travel Lover
Features of this project :

 1. Any Travel lover person can book his/her choice place which is shown in homepage
 
 2. To book  hotel or any place he/she first should be logged using gmail.
 3. He can see how many hotels there are in that place through this application

[Live Site](https://travel-lover-fe8f6.web.app/home) [github](https://github.com/Toushiat96/travel-lover)
<file_sep>/src/Components/Home/Home.js
import React from 'react';
import Header from '../Header/Header';
import HomeInformation from '../HomeInformation/HomeInformation';
import fakedata  from '../../fakedata/index';
import './Home.css'

const Home = () => {
    return (
        <div className="homeimage">
        <div>
        <Header></Header>
        </div>
        <div  className="carousel">
        
            {
            
            fakedata.map( data => <HomeInformation data ={data}></HomeInformation>)
            
            }
            </div>
        </div>
    );
};

export default Home;<file_sep>/src/Components/HomeInformation/HomeInformation.js
import { Card, CardActionArea, CardActions, CardContent, CardMedia, makeStyles, Typography } from '@material-ui/core';
import React from 'react';
import { Button, Carousel } from 'react-bootstrap';
import { Link, useHistory } from 'react-router-dom';
import './HomeInformation.css'


const useStyles = makeStyles({
    root: {
      maxWidth: 345,
    },
    media: {
      height: 140,
    },
  });
  
const HomeInformation = (props) => {
  const {img,id,name,description} = props.data;
  const classes = useStyles();
  const history = useHistory();
  const handleclick = (id) =>{
  const url = `/book/${id}`;
  history.push(url)
  
  }
    return (
        
        <Card className={classes.root } className="card-container">
        <CardActionArea>
          <CardMedia
            className={classes.media}
            image={img}
            title="Contemplative Reptile"
          />
          <CardActions>
          {/* <Link to={`/book/${id}`}>Booking Now</Link> */}
          
          <Button onClick={ () => handleclick(id) } variant="warning"> Booking Now </Button>
          </CardActions>
          <CardContent>
            <Typography gutterBottom variant="h5" component="h2">
              {name}
            </Typography>
           
            <Typography variant="body2" color="textSecondary" component="p">
              {description}
            </Typography>
          </CardContent>
        </CardActionArea>
        
      </Card>
        
    );
};

export default HomeInformation;<file_sep>/src/fakedata/index.js
var data =
    [
        {
           
            img: 'https://i.ibb.co/yYB6hBc/Rectangle-1.png',
            picture1:"https://i.ibb.co/sV8fFLD/Rectangle-26.png",
            picture2:"https://i.ibb.co/x6y14Mf/Rectangle-27.png",
            picture3:"https://i.ibb.co/cDFKfd5/Rectangle-28.png",
            name1:"Hotel Sea Crown",
            name2 :"Sayeman Beach Resort",
            name3:"Prime Park Hotel",
            title:"Stay in Sajekvely",
            id:'1',
            origin: 'Dhaka',
            destination: "Cox's Bazar",
            name:"<NAME>",
            description:"Cox's Bazar sea beach is the longest sea beach in the world, 120 km long, having no 2nd instance. The wavy water of Bay of Bengal touches the beach throughout this 120 km.For Bangladeshi's it doesn't get much better than Cox's Bazar, the country's most popular beach town than the other one 'Kuakata beach town. It's sort of a Cancun of the east. It's choc-a-bloc with massive well-architectured concrete structures, affluent 5 & 3 star hotels, catering largely to the country's elite and overseas tourists. The beach is only a bit crowded in tourist season, October to March, especially near the hotel-motel zone, but remains virgin during the rest of the year, April to September, when it's better to take a trip there.",
            
        },
        {
           img:'https://i.ibb.co/RTkdXyX/Sreemongol.png',
           picture1:"https://i.ibb.co/WFsdjWW/sreemangal-inn.jpg",
           picture2:"https://i.ibb.co/TqMr2KX/1.jpg",
           picture3:"https://i.ibb.co/F73JscJ/images.jpg",
           name1:"Sreemangal Inn Hotel & Restaurant",
           name2:"Sreemangal Resort",
           name3:"<NAME>",
           title:"Stay in Sreemangal",
           id:'2',
           origin: 'Dhaka',
           destination: 'Sreemangal',
           name:"SREEMANGAL",
           description:"It is said the name Sreemangal (or Srimangal) is named after <NAME> and <NAME>; two brothers who settled on the banks of the Hail Haor. A copper plate of Raja Marundanath from the 11th century was found in Kalapur. During an excavation at Lamua, an ancient statue of Ananta Narayan was dug out. In 1454, the Nirmai Shiva Bari was built and still stands today. Srimangal thana was established in 1912. The central town later became a pourashava in 1935. In 1963, two peasants were killed by police officers which kicked off the Balishira peasant riots."
        },
        {
            img:'https://i.ibb.co/f9wQGRK/sundorbon.png',
            picture1:"https://i.ibb.co/1sh3Rh7/sd-1.jpg",
            picture2:"https://i.ibb.co/ZW7b39r/imag-1.jpg",
            picture3:"https://i.ibb.co/X8Jn29x/download.jpg",
            name1:"Royal Sundarban Wild Resort",
            name2:"Sundarban Royal Eco Resort",
            name3:"Sunderban Tiger Camp- Wildlife Resort",
            title:"Stay in Sundarban",
            id:'3',
            origin: 'Dhaka',
            destination: 'Sundarban',
            name:"SUNDARBANS",
            description:"The Sundarbans is a mangrove area in the delta formed by the confluence of the Ganges, Brahmaputra and Meghna Rivers in the Bay of Bengal. It spans from the Hooghly River in India's state of West Bengal to the Baleswar River in Bangladesh. It comprises closed and open mangrove forests, agriculturally used land, mudflats and barren land, and is intersected by multiple tidal streams and channels. Four protected areas in the Sundarbans are enlisted as UNESCO World Heritage Sites, viz. Sundarbans National Park, Sundarbans West, Sundarbans South and Sundarbans East Wildlife Sanctuaries."
        },
        {
            img:'https://i.ibb.co/dmNqGhs/Sajek.png',
            picture1:"https://i.ibb.co/c6s3fHh/sah.jpg",
            picture2:"https://i.ibb.co/gSSVqxH/sajek1.jpg",
            picture3:"https://i.ibb.co/H7J9BXf/sajek2.jpg",
            name1:"<NAME>",
            name2:"<NAME>, S<NAME>",
            name3:"<NAME> Sajek",
            title:"Stay in Sajekvely",
            id:'4',
            origin: 'Dhaka',
            destination: 'Sajekvely',
            name:"SAJEKVELY",
            description:"The name of Sajek Valley came from the Sajek River that originates from Karnafuli river. The Sajek river works as a border between Bangladesh and India.Sajek is a union located in the north of Chittagong Hill Tracts. It's under Baghaichori Upazila in Rangamati hill district, it is situated 67 kilometres (42 mi) north-east from Khagrachhari town and 95 kilometres (59 mi) north from Rangamati city. The border of Bangladesh and Mizoram of India is 8 kilometres (5.0 mi) east from Sajek"
        }
        

    ];
export default data;