import React, { Component } from 'react';
import styles from './meetups.css';
import meetup_banner from '../../assets/images/scin_imgs/topbanner.jpg';
import Header from '../../containers/Header';
class MeetUps extends Component {
constructor(props){
super(props);
this.state={
meetUpId: 0,
meetups:[]
};
this.handleClick = this.handleClick.bind(this);
}
componentDidMount(){
this.getMeetups()
}
handleClick(id) {
this.setState({
meetUpId: id
});
}
getMeetups(){
fetch('http://206.189.130.109:8000/api/v1/meetups/')
.then(res => res.json())
.then(data => this.setState({meetups:data.results}))
}
handleSubmit = event => {
event.preventDefault();
//console.log(this.state)
fetch('http://206.189.130.109:8000/api/v1/meetups/rsvp/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
"id":this.state.meetups.id,
"meetup_type": "meetup",
"status": true,
"meetup": 1,
"user": 2
}),
}).then(rsvp => {
console.log(rsvp);
// alert(rsvp.message)
}).catch(err => err);
}
render() {
// console.log(this.state.meetups)
return (
<div id={styles.meetups_body}>
<Header/>
<div><img src={meetup_banner} className={styles.meet_bg} alt="meetups"></img> </div>
<div className="col-md-12">
<div className="row">
{this.state.meetups.map((meetup)=>
<div className="col-md-4" key={meetup.id}>
<div className={styles.card} style={{ marginBottom: '20px' }}>
<img className="card-img-top" src={meetup.image_url} alt="Card" style={{ width: '100%' }} />
<div align="center"> <button type="button" className="btn" id={styles.free}>{meetup.cost}</button> </div>
<form onSubmit={this.handleSubmit}><div align="center" > <button key={meetup.id} type="submit" onClick={() => this.handleClick(meetup.id)} className="btn" id={styles.rsvp_button} >{this.state.meetUpId == meetup.id ? 'GOING' : 'RSVP'}. </button> </div></form>
<div className="card-body" style={{padding:'10px'}}>
<div className="col=md-12">
<div className="row">
<div className="col-md-3" align="center">
<h4 style={{ color: '#8cc63f', fontWeight: '600' }}>{meetup.meetup_date}</h4><br />
</div>
<div className="col-md-9">
<h5 className="card-title" style={{fontWeight:'600'}}>{meetup.title}</h5>
<h6>{meetup.time}</h6> <br />
<h6>{meetup.venue}</h6>
<p className="card-text" dangerouslySetInnerHTML={{__html:meetup.content}} id={styles.meetup_content} style={{ textOverflow:'elipsis', width:'100%', whiteSpace:'nowrap',overflow:'hidden' }}></p>
<a href={`MeetupsDetail/${meetup.id}`} className="btn" id={styles.btn_outline_warning}>Learn More</a> <br />
</div>
</div>
</div>
<div className="meetup_footer" >
<p >{meetup.hash_tag} </p>
{/* <i className="fas fa-share-alt " id={styles.share_icon} style={{ float: 'right' }}></i> */}
</div>
</div>
</div>
</div>
)}
</div>
</div>
</div>
)
}
}
export default MeetUps;