Created
August 8, 2015 01:23
-
-
Save pauldcollins/5a228773b6c93c0ba33b to your computer and use it in GitHub Desktop.
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
| 'use strict'; | |
| var React = require('react/addons'); | |
| var listStyle = { | |
| height: '300', | |
| }; | |
| var Filters = React.createClass({ | |
| handleFilterChange: function() { | |
| var value = this.refs.filterInput.getDOMNode().value; | |
| this.props.updateFilter(value); | |
| }, | |
| render: function() { | |
| return <input type="text" ref="filterInput" onChange={this.handleFilterChange} placeholder="Filter" />; | |
| } | |
| }); | |
| /** @jsx React.DOM */ | |
| var List = React.createClass({ | |
| render: function() { | |
| var content; | |
| if (this.props.items.length > 0) { | |
| var items = this.props.items.map(function(item){ | |
| return ( | |
| <li className="col-lg-3" style={listStyle}> | |
| <h2>{this.props.filename}</h2> | |
| <p><img className="img-thumbnail" src={this.props.photoLink}/></p> | |
| <p> | |
| <small>Camera model: <strong>{this.props.model}</strong></small><br/> | |
| <small>Camera make: <strong>{this.props.make}</strong></small> | |
| </p> | |
| </li> | |
| ) | |
| }); | |
| content = <ul>{items}</ul> | |
| } else { | |
| content = <p>No items matching this filter</p>; | |
| } | |
| return ( | |
| <div className="results"> | |
| <h4>Results</h4> | |
| {content} | |
| </div> | |
| ); | |
| } | |
| }); | |
| var ListContainer = React.createClass({ | |
| loadNotificationsFromServer: function() { | |
| $.ajax({ | |
| url: this.props.url, | |
| dataType: 'json', | |
| success: function(data) { | |
| this.setState({data: this.state.data.concat([data])}); | |
| clearInterval(this.interval); | |
| }.bind(this) | |
| }); | |
| }, | |
| getInitialState: function() { | |
| return { | |
| data: [], | |
| nameFilter: '' | |
| }; | |
| }, | |
| componentWillMount: function() { | |
| this.loadNotificationsFromServer(); | |
| this.interval = setInterval(this.loadNotificationsFromServer, this.props.pollInterval); | |
| }, | |
| render: function() { | |
| return ( | |
| <div> | |
| <Filters updateFilter={this.handleFilterUpdate} /> | |
| <List items={this._hasData()} /> | |
| </div> | |
| ); | |
| }, | |
| _handleFilterUpdate: function(filterValue) { | |
| this.setState({ | |
| nameFilter: filterValue | |
| }); | |
| }, | |
| _hasData: function() { | |
| var data = this.state.data.map(function(item) { | |
| return item.works.work; | |
| }); | |
| if (data.length > 0) { | |
| var imageDetails = _.map(data[0], function(result, n, key){ | |
| var image = _(result.urls.url).find({'_type': 'small'}); | |
| return { | |
| id: result.id, | |
| filename: result.filename, | |
| _type: image ? image._type : null, | |
| url: image ? image.__text : null, | |
| model: result.exif.model, | |
| make: result.exif.make | |
| }; | |
| }, []); | |
| var listItems = imageDetails.map(function(result, index){ | |
| return <List key={index} | |
| filename={result.filename} | |
| photoLink={result.url} | |
| model={result.model} | |
| make={result.make} /> | |
| }) | |
| return listItems | |
| } else return false | |
| } | |
| }); | |
| // INITIALISE PAGE | |
| var imageList= React.createClass({ | |
| render: function() { | |
| /* component composition == function componsition */ | |
| return ( | |
| <div> | |
| <ListContainer url="/scripts/works.json" pollInterval={2000}/> | |
| </div> | |
| ); | |
| } | |
| }); | |
| module.exports = imageList; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment