React tables

This is a redo of #1502. I have done some architectural restructuring so that the base Table React component is more generalizable, and I've changed the way components get mounted onto the view (originally was using the react-rails gem, but now going a more native route). Also deleted unnecessary .rjs files (for the original tables) and partials, as well as the students' populate route in route.rb (we now populate by sending an AJAX request to the same url, just requesting it in JSON).
Ah, that makes sense.


On Thu, Jul 31, 2014 at 2:27 PM, Lawrence Wu <notifications@github.com>
wrote:

> In app/assets/javascripts/ReactComponents/table.js:
>
> > +  headerCheckboxClicked: function(event) {
> > +    var value = event.currentTarget.checked;
> > +    var new_selected_rows = null;
> > +    if (value) {
> > +      new_selected_rows = this.state.visible_rows.map(function(x){return x.id});
> > +    } else {
> > +      new_selected_rows = [];
> > +    }
> > +    this.setState({selected_rows: new_selected_rows});
> > +    this.props.onSelectedRowsChange(new_selected_rows);
> > +  },
> > +  rowCheckboxClicked: function(event) {
> > +    var value = event.currentTarget.checked;
> > +    var row_id = parseInt(event.currentTarget.parentNode.parentNode.getAttribute('id'));
> > +
> > +    var new_selected_rows = this.state.selected_rows.slice();
>
> Well you are not supposed to modify a state object directly but instead go
> through setState so React can know when to re-render. I had to copy the
> array to be able to add/remove the checked row id without interfering with
> the state object, then afterwards call setState.
>
> —
> Reply to this email directly or view it on GitHub
> <https://github.com/MarkUsProject/Markus/pull/1539/files#r15660022>.
>