Created
March 14, 2018 10:33
-
-
Save jonleopard/454f055588167e17884ca8e355d9fbf7 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/titila
This file contains 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
| <script src="https://fb.me/react-15.1.0.js"></script> | |
| <script src="https://fb.me/react-dom-15.1.0.js"></script> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <script id="jsbin-javascript"> | |
| 'use strict'; | |
| Object.defineProperty(exports, '__esModule', { | |
| value: true | |
| }); | |
| var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); | |
| var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; | |
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | |
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } | |
| function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
| var _react = require('react'); | |
| var _react2 = _interopRequireDefault(_react); | |
| var _SearchInput = require('./SearchInput'); | |
| var _SearchInput2 = _interopRequireDefault(_SearchInput); | |
| var _rebass = require('rebass'); | |
| var API_URL = 'https://api.wunderground.com/api/2d50e8d7d184fe13/astronomy/q/France/Paris.json'; | |
| var CitySearch = (function (_React$Component) { | |
| _inherits(CitySearch, _React$Component); | |
| function CitySearch() { | |
| _classCallCheck(this, CitySearch); | |
| _get(Object.getPrototypeOf(CitySearch.prototype), 'constructor', this).apply(this, arguments); | |
| this.state = { | |
| error: null, | |
| isLoaded: false, | |
| moonData: [] | |
| }; | |
| } | |
| _createClass(CitySearch, [{ | |
| key: 'componentDidMount', | |
| value: function componentDidMount() { | |
| var _this = this; | |
| fetch(API_URL).then(function (res) { | |
| return res.json(); | |
| }).then(function (result) { | |
| _this.setState({ | |
| isLoaded: true, | |
| moonData: result.moonData | |
| }); | |
| }, function (error) { | |
| _this.setState({ | |
| isLoaded: true, | |
| error: error | |
| }); | |
| }); | |
| } | |
| }, { | |
| key: 'render', | |
| value: function render() { | |
| var _state = this.state; | |
| var error = _state.error; | |
| var isLoaded = _state.isLoaded; | |
| var moonData = _state.moonData; | |
| if (error) { | |
| return _react2['default'].createElement( | |
| 'div', | |
| null, | |
| 'Error: ', | |
| error.message | |
| ); | |
| } else if (!isLoaded) { | |
| return _react2['default'].createElement( | |
| 'div', | |
| null, | |
| 'Loading...' | |
| ); | |
| } else { | |
| return _react2['default'].createElement( | |
| 'ul', | |
| null, | |
| moonData.map(function (moon) { | |
| return _react2['default'].createElement( | |
| 'li', | |
| { key: moon.percentIlluminated }, | |
| moon.phaseofMoon, | |
| ' ', | |
| moon.ageOfMoon | |
| ); | |
| }) | |
| ); | |
| } | |
| } | |
| }]); | |
| return CitySearch; | |
| })(_react2['default'].Component); | |
| exports['default'] = CitySearch; | |
| module.exports = exports['default']; | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">import React from 'react'; | |
| import SearchInput from './SearchInput'; | |
| import { Container } from 'rebass'; | |
| const API_URL = | |
| 'https://api.wunderground.com/api/2d50e8d7d184fe13/astronomy/q/France/Paris.json'; | |
| class CitySearch extends React.Component { | |
| state = { | |
| error: null, | |
| isLoaded: false, | |
| moonData: [], | |
| }; | |
| componentDidMount() { | |
| fetch(API_URL) | |
| .then(res => res.json()) | |
| .then( | |
| result => { | |
| this.setState({ | |
| isLoaded: true, | |
| moonData: result.moonData, | |
| }); | |
| }, | |
| error => { | |
| this.setState({ | |
| isLoaded: true, | |
| error, | |
| }); | |
| } | |
| ); | |
| } | |
| render() { | |
| const { error, isLoaded, moonData } = this.state; | |
| if (error) { | |
| return <div>Error: {error.message}</div>; | |
| } else if (!isLoaded) { | |
| return <div>Loading...</div>; | |
| } else { | |
| return ( | |
| <ul> | |
| {moonData.map(moon => ( | |
| <li key={moon.percentIlluminated}> | |
| {moon.phaseofMoon} {moon.ageOfMoon} | |
| </li> | |
| ))} | |
| </ul> | |
| ); | |
| } | |
| } | |
| } | |
| export default CitySearch; | |
| </script></body> | |
| </html> |
This file contains 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'; | |
| Object.defineProperty(exports, '__esModule', { | |
| value: true | |
| }); | |
| var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); | |
| var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; | |
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } | |
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } | |
| function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
| var _react = require('react'); | |
| var _react2 = _interopRequireDefault(_react); | |
| var _SearchInput = require('./SearchInput'); | |
| var _SearchInput2 = _interopRequireDefault(_SearchInput); | |
| var _rebass = require('rebass'); | |
| var API_URL = 'https://api.wunderground.com/api/2d50e8d7d184fe13/astronomy/q/France/Paris.json'; | |
| var CitySearch = (function (_React$Component) { | |
| _inherits(CitySearch, _React$Component); | |
| function CitySearch() { | |
| _classCallCheck(this, CitySearch); | |
| _get(Object.getPrototypeOf(CitySearch.prototype), 'constructor', this).apply(this, arguments); | |
| this.state = { | |
| error: null, | |
| isLoaded: false, | |
| moonData: [] | |
| }; | |
| } | |
| _createClass(CitySearch, [{ | |
| key: 'componentDidMount', | |
| value: function componentDidMount() { | |
| var _this = this; | |
| fetch(API_URL).then(function (res) { | |
| return res.json(); | |
| }).then(function (result) { | |
| _this.setState({ | |
| isLoaded: true, | |
| moonData: result.moonData | |
| }); | |
| }, function (error) { | |
| _this.setState({ | |
| isLoaded: true, | |
| error: error | |
| }); | |
| }); | |
| } | |
| }, { | |
| key: 'render', | |
| value: function render() { | |
| var _state = this.state; | |
| var error = _state.error; | |
| var isLoaded = _state.isLoaded; | |
| var moonData = _state.moonData; | |
| if (error) { | |
| return _react2['default'].createElement( | |
| 'div', | |
| null, | |
| 'Error: ', | |
| error.message | |
| ); | |
| } else if (!isLoaded) { | |
| return _react2['default'].createElement( | |
| 'div', | |
| null, | |
| 'Loading...' | |
| ); | |
| } else { | |
| return _react2['default'].createElement( | |
| 'ul', | |
| null, | |
| moonData.map(function (moon) { | |
| return _react2['default'].createElement( | |
| 'li', | |
| { key: moon.percentIlluminated }, | |
| moon.phaseofMoon, | |
| ' ', | |
| moon.ageOfMoon | |
| ); | |
| }) | |
| ); | |
| } | |
| } | |
| }]); | |
| return CitySearch; | |
| })(_react2['default'].Component); | |
| exports['default'] = CitySearch; | |
| module.exports = exports['default']; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment