RandomGist React

by Shaun Ellis

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

JavaScript 1.7

var RandomPrezi = React.createClass({
  render: function() {
    return (
      <div>
        <a href={this.props.id}>{this.props.label}</a>
      </div>
    );
  }
});

var RefreshablePreziList = React.createClass({
  getInitialState: function() {
    return {
      presentations: [],
      selected: 'https://tabula.space/collections/manifests',
      endpoints: [
        	{
            'label': 'Tabula.Space',
            'value': 'https://tabula.space/collections/manifests'
          },
          {
            'label': 'IIIF Fixtures',
            'value': 'https://jsonblob.com/api/jsonBlob/56b8cd6de4b01190df4d94eb'
          }
        ]
    }
  },

  handleLabel: function(label) {
  	if($.isArray(label)){
    	return label.value[0];
    } else {
    	return label;
    }
  },

  fetchPrezis: function(selected) {
  	console.log(selected)
    $.get(selected, function(result) {
      var presentation = result[Math.round(Math.random() * result.length)]
      //console.log(presentation)
      
      this.state.presentations.push({id: presentation['@id'], label: this.handleLabel(presentation.label)})
      this.setState({
        presentations: this.state.presentations
      });
    }.bind(this));
  },
  
  generateRandomPrezis: function() {        
    [1,2,3].map(function() {
      this.fetchPrezis(this.state.selected);
    }.bind(this));
  },
  
  componentDidMount: function() {
    this.generateRandomPrezis();
  },
 
  onEndpointChange(event) {
    this.setState({selected: event.target.value})
    //console.log(event.target.value)
    this.generateRandomPrezis();
  },
  
  handleClick: function(e) {
    e.preventDefault();
    this.setState({presentations: []})
    this.generateRandomPrezis();
  },

  render: function() {
    var presentations = this.state.presentations.map(function(presentation) {
      return <RandomPrezi key={presentation.id} label={presentation.label} id={presentation.id} />
    });
    
    return (
      <div>
        <button...