SHARE
TWEET

Untitled

a guest Oct 17th, 2019 97 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import './AddVenue.css';
  3. import config from '../config';
  4. import ApiContext from '../ApiContext';
  5. import {getToken} from '../Services/auth-service';
  6.  
  7. class AddVenue extends Component {
  8.     static defaultProps = {
  9.         history: {
  10.             push: () => { }
  11.           },
  12.         match: {
  13.             params: {}
  14.         }
  15.     }
  16.  
  17.     static contextType = ApiContext;
  18.  
  19.     constructor (props) {
  20.         super(props);
  21.         this.proInput = React.createRef();
  22.         this.conInput = React.createRef();
  23.     }
  24.    
  25.     state = {
  26.         pros: [],
  27.         cons: []
  28.     }
  29.  
  30.     handleSubmit = e => {
  31.         e.preventDefault()
  32.         const { venue_name, venue_website, venue_price, venue_rating, venue_capacity } = e.target
  33.         const newVenue = {
  34.             venue_name: venue_name.value,
  35.             venue_website: venue_website.value,
  36.             venue_price: venue_price.value,
  37.             venue_rating: venue_rating.value,
  38.             venue_capacity: venue_capacity.value,
  39.             venue_pros: this.state.pros,
  40.             venue_cons:this.state.cons,
  41.             user_id: this.context.currentUser.id
  42.         }
  43.         fetch(`${config.API_ENDPOINT}/venues`, {
  44.             method: 'POST',
  45.             body: JSON.stringify(newVenue),
  46.             headers: {
  47.               'content-type': 'application/json',
  48.               'authorization': `Bearer ${config.API_KEY}`,
  49.               'token': getToken().token,
  50.               'user_email': getToken().user_email
  51.             },
  52.           })
  53.           .then(res => {
  54.             if (!res.ok){
  55.               return res.json().then(error => Promise.reject(error))
  56.             }
  57.             return res.json()
  58.           })
  59.           .then((venue) => {
  60.             this.context.addVenue(venue)
  61.             this.props.history.push('/venue-list')
  62.           })
  63.           .catch(error => {
  64.             console.error(error)
  65.             this.setState({ error })
  66.           })
  67.     }
  68.  
  69.     handleAddPro = e => {
  70.         let pros = this.state.pros
  71.         pros.push(this.proInput.current.value)
  72.         this.setState({pros})
  73.     }
  74.  
  75.     handleAddCon = e => {
  76.         let cons = this.state.cons
  77.         cons.push(this.conInput.current.value)
  78.         this.setState({cons})
  79.     }
  80.  
  81.     handleDeletePro = i => {
  82.         let pros=this.state.pros
  83.         pros.splice(i, 1)
  84.         this.setState({pros})
  85.     }
  86.  
  87.     handleDeleteCon = i => {
  88.         let cons=this.state.cons
  89.         cons.splice(i, 1)
  90.         this.setState({cons})
  91.     }
  92.  
  93.     render() {
  94.         return(
  95.             <main role="main">
  96.                 <header>
  97.                     <h1>New Venue</h1>
  98.                 </header>
  99.                 <section>
  100.                     <form id="record-venue" onSubmit={this.handleSubmit}>
  101.                     <div className="form-section">
  102.                         <label htmlFor="venue_name">Name</label>
  103.                         <input type="text" name="venue_name" required></input>
  104.                     </div>
  105.                     <div className="form-section">
  106.                         <label htmlFor="venue_website">Venue website</label>
  107.                         <input type="text" name="venue_website" required></input>
  108.                     </div>
  109.                     <div className="form-section">
  110.                         <label htmlFor="venue_price">Price</label>
  111.                         <input type="number" name="venue_price" placeholder="$5000"></input>
  112.                     </div>
  113.                     <div className="form-section">
  114.                         <label htmlFor="venue_rating">Overall Rating</label>
  115.                         <input type="text" name="venue_rating" required></input>
  116.                     </div>
  117.                     <div className="form-section">
  118.                         <label htmlFor="venue_capacity">Capacity</label>
  119.                         <input type="number" name="venue_capacity" placeholder="200"></input>
  120.                     </div>
  121.                     <div className="form-section">
  122.                         <label htmlFor="venue_pros">Pros</label>
  123.                         <input ref={this.proInput} type="text" name="venue_pros"></input>
  124.                         <button type='button' onClick={this.handleAddPro}> Add </button>
  125.                     </div>
  126.                     <div>
  127.                         {this.state.pros.map((p, i) => {
  128.                             return (<div key={i}>
  129.                                 {p}
  130.                                 <button type='button' onClick={() => this.handleDeletePro(i)}>&times;</button>
  131.                             </div>)
  132.                         })}
  133.                     </div>
  134.                     <div className="form-section">
  135.                         <label htmlFor="venue_cons">Cons</label>
  136.                         <input ref={this.conInput} type="text" name="venue_cons"></input>
  137.                         <button type='button' onClick={this.handleAddCon}> Add </button>
  138.                     </div>
  139.                     <div>
  140.                         {this.state.cons.map((c, i) => {
  141.                             return (<div key={i}>
  142.                                 {c}
  143.                                 <button type='button' onClick={() => this.handleDeleteCon(i)}>&times;</button>
  144.                             </div>)
  145.                         })}
  146.                     </div>
  147.  
  148.                     <button type='submit'>Add Venue</button>
  149.                     </form>
  150.                 </section>
  151.             </main>
  152.         )
  153.     }
  154.  
  155. }
  156.  
  157. export default AddVenue;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top