Created
November 16, 2015 20:08
-
-
Save folivi/163688f8f4d3c1ea9907 to your computer and use it in GitHub Desktop.
ReactJs render issue
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var includes =function(arr, val){ | |
return(arr.indexOf(val) !== -1); | |
}; | |
var AroundMe = React.createClass({ | |
getInitialState: function(){ | |
return({ | |
dances: [], | |
events: this.props.events, | |
user_coords: {}, | |
}) | |
}, | |
componentDidMount: function(){ | |
$.get('/dances.json', function(response){ | |
this.setState( | |
{ | |
dances: response.dances | |
} | |
); | |
}.bind(this)); | |
}, | |
update_events: function(data){ | |
this.setState({events: data}); | |
}, | |
filter_by_geolocation: function(){ | |
var vm = this; | |
if (navigator.geolocation) { | |
navigator.geolocation.getCurrentPosition(function(position){ | |
vm.setState({user_coords: {longitude: position.coords.longitude, latitude: position.coords.latitude}}, function() { | |
$.ajax({ | |
url: "/aroundme.json", | |
datatype: 'JSON', | |
data: vm.state.user_coords, | |
method: 'GET' | |
}).done(function(response){ | |
vm.update_events(response.aroundme); | |
}.bind(vm)); | |
}); | |
}); | |
} else { | |
console.log("geo not supported") | |
} | |
}, | |
render: function() { | |
return( | |
<div> | |
{this.state.events.length} | |
<span> || </span> | |
{this.state.user_coords.longitude} | |
<button onClick={this.filter_by_geolocation} className='btn btn-danger'>Locate me</button> | |
<EventsList events={this.state.events} /> | |
</div> | |
); | |
} | |
}); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var EventsList = React.createClass({ | |
getInitialState: function(){ | |
return({ | |
events: [] | |
}) | |
}, | |
filterList: function(event){ | |
document.cookie = "search_text=" + event.target.value.toLowerCase(); | |
var updatedList = this.state.initialeEvents; | |
updatedList = updatedList.filter(function(item){ | |
// | |
if(!item.description) item.description = ""; | |
return item.name.toLowerCase().search(event.target.value.toLowerCase()) !== -1 || item.description.toLowerCase().search( event.target.value.toLowerCase()) !== -1 ; | |
}); | |
this.setState({ | |
events: updatedList | |
}); | |
}, | |
componentDidMount: function(){ | |
this.setState( | |
{ | |
events: this.props.events, | |
initialeEvents: this.props.events | |
} | |
) | |
}, | |
render: function() { | |
console.log("called render eventlist with" + this.state.events.length) | |
return( | |
<div className='container'> | |
<div className='row'> | |
<div className='col-md-6 col-sm-12 col-md-offset-3'> | |
<input type="text" className='form-control' placeholder='filter by event name, dance type or artist name' onChange={this.filterList} /> | |
</div> | |
</div> | |
<hr className="spacer-30" /> | |
<div className='row'> | |
<div className='container'> | |
{ | |
this.state.events.map(function(event){ | |
return( | |
<div className="col-lg-6" key={event.id}> | |
<div className="thumbnail style2 team-member event-thumbnail"> | |
<div className="img-box" data-path={event.image_url}> | |
<img src={event.image.url} /> | |
</div> | |
<div className="caption"> | |
<a href= {'/events/' + event.slug}><b>{event.name}</b></a> | |
<div className="post-meta"> | |
<span className="post-category"></span><span className="post-date">{new Date(event.start_time).toLocaleString()}</span> | |
</div> | |
<div> | |
<span>{event.city}, {event.country_code}</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
) | |
}) | |
} | |
</div> | |
</div> | |
</div> | |
); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment