import React, { useState, useEffect } from 'react'; import { InputGroup, FormControl, Container, Row, Col, } from 'react-bootstrap'; import PlaceholderImage from './placeholder_venue.png'; import BtnComponent from '../Button'; import './style.css'; import VenueCard from '../VenueCard'; import axios from 'axios'; import { Redirect } from 'react-router'; var qs = require('qs'); const VenuesPageComponent = (props) => { const eventId = props.eventId; const getAccessToken = props.getAccessToken; const [venues, setVenues] = useState([]); const [loading, setLoading] = useState(false); const [search, setSearch] = useState('Convention'); const [nextUrl, setNextUrl] = useState(''); const [venueAdded, setVenueAdded] = useState(false); // When user hits enter while still in text input focus, trigger venue search const onKeyPress = (event) => { if (event.charCode === 13) { searchVenues(); } }; // When user clicks search button, trigger venue search const handleFormSubmit = (event) => { event.preventDefault(); searchVenues(); }; // Method to call venue search API endpoint const searchVenues = async () => { // Do not allow the user to search for a venue if the search text input is empty. if (!search) { alert('Please enter a venue name to search.'); return; } setLoading(true); const token = await getAccessToken(); var config = { method: 'get', url: `/api/venue/search?name=${search}`, headers: { Authorization: `Bearer ${token}` }, }; await axios(config) .then(function (res) { setLoading(false); setVenues(res.data); }) .catch(function (error) { setLoading(false); console.log(error); }); }; useEffect(() => { searchVenues(); }, []); const saveVenue = async (name, address, url) => { // getting access token for the site const token = await getAccessToken(); var data = qs.stringify({ name: name, address: address, url: url, photo: 'test photo', eventId: eventId, }); var config = { method: 'post', url: '/api/venue', headers: { 'Content-Type': 'application/x-www-form-urlencoded', Authorization: `Bearer ${token}`, }, data: data, }; axios(config) .then(function (response) { setNextUrl(`/events/`); setVenueAdded(true); }) .catch(function (error) { console.log(error); }); }; return ( // Components venue search functionality <Container className="pt-5 mb-5"> {venueAdded && <Redirect to={nextUrl} />} <h3 className="title-style mb-5">Search for Venues</h3> <Row className="d-flex flex-column flex-md-row vertical-align"> <Col className="col-sm-12 col-lg-6"> <InputGroup className="p5 mb-3 vertical-align"> <InputGroup.Prepend> <InputGroup.Text>Search by venue name</InputGroup.Text> </InputGroup.Prepend> <FormControl aria-label="Default" aria-describedby="inputGroup-sizing-default" onKeyPress={onKeyPress} value={search} onChange={(e) => setSearch(e.target.value)} /> </InputGroup> </Col> <Col className="col-sm-12 col-lg-6 mb-3"> <BtnComponent name="Search" onClick={handleFormSubmit} /> </Col> </Row> <br></br> {/* Venue card components */} <div className="d-sm-block d-md-flex flex-md-wrap justify-content-start my-3"> {loading ? ( <Col className="col-6 mb-3"> <h4 className="title-style">Loading...</h4> </Col> ) : ( venues.map((venue, i) => ( <Col className="col-md-6 col-sm-12 mb-3" key={`venue-${i}`} id={`venue-${i}`} > <VenueCard img={PlaceholderImage} // img={ // venue.photo === 'Sorry, no photo available' // ? PlaceholderImage // : venue.photo // } name={venue.name} address={venue.address} url={venue.url} username={'wedding team'} onClick={() => { saveVenue(venue.name, venue.address, venue.url); }} /> </Col> )) )} </div> </Container> ); }; export default VenuesPageComponent;