Rob Cable Rob Cable - 4 months ago 8
CSS Question

REACT: Edit existing selected images in a slideshow

I am working on a slideshow app and am using viewerJS for the plug in. I have the ability to create slideshows and save all selected images. However, now I am working on the ability to go back and edit each individual slideshows. I would like to be able to remove or add images from the slideshow. Here is the code for that frame below:

var CreateUpdateShowComponent = React.createClass({
getInitialState: function(){
return {
momentCollection: [],
moment: [],
'slideshow': new SlideShow()
};
},
componentWillMount: function(){
var self = this;
var momentCollection = new MomentCollection();
var slideshow = this.state.slideshow;

momentCollection.fetch().done(function(){
self.setState({'momentCollection': momentCollection})

if(self.props.slideshowId){
slideshow.set('id', self.props.slideshowId);

slideshow.fetch().done(function(){
var slideshowIds = slideshow.get("moments").map(function(moment){return moment.id})
momentCollection.determineMomentSelectedState(slideshowIds)
console.log("momentCollection is ", momentCollection);
self.setState({
'slideshow': slideshow,
'title': slideshow.get('title'),
'description': slideshow.get('description'),
});

});
}
});

},
handleChange: function(moment){
var self = this;
console.log("moment is",moment);
var isSelected = moment.get('selected');
moment.set("selected", !isSelected);
// re-render here
},
handleTitleChange: function(e){
this.setState({'title': e.target.value});
},
handleDescriptionChange: function(e){
// var slideshow = slideshow.get('description')
this.setState({'description': e.target.value});
},
handleSave: function(){
var self = this;
/ Build an array of the selected image ids
var selectedMoments = _.pluck(this.state.momentCollection.where({selected: true}), 'id');
console.log(this.state.description);
// Create new slideshow
var slideshow = this.state.slideshow;
slideshow.set({
'title': this.state.title,
'description': this.state.description,
'moment_ids': selectedMoments,
});

slideshow.save().then(function(resp){
self.props.router.navigate('slide', {trigger: true});
slideshow.fetch();
console.log(slideshow);
})
},
handleSelectedState: function(moment, e){
moment.set("selected", !moment.get("selected"))
this.forceUpdate();
},

render: function(){
console.log(this.state.slideshow);
var self = this;

var momentListDisplay = this.state.momentCollection.map(function(moment, index){
return (
<li className={"image-thumb col-xs-2 " + (moment.get('selected') ? 'active' : '')} data-moment-id={moment.get("id")} onClick={function(){ self.handleSelectedState(moment) }} key={index}>
<label className="image-holder" htmlFor={index}>
<div className="select-indicator">
<div className={moment.get("selected") ? "active-indicator active" : "active-indicator"}></div>
</div>
<img className={moment.get("selected") ? "slideshow-image selected" : "slideshow-image"} width={moment.getThumbWidth()} height={moment.getThumbHeight()} src={moment.get("dropbox_path")}></img>
</label>
</li>
)
});

Answer

Your code is very messy. To be able to add or delete a slide, you must create a handler for these actions and, in the handler, edit the state, like this:

addSlide: function(slide, id, etc..) {
    this.setState(your_new_state); 
}

Then just call addSlide with the correct params that you need to create a slide. You can "attach" the addSlide handler to a HTML button.

Remember to always use the this.setState() React method, because this method will update the HTML view.