Skip to content

Instantly share code, notes, and snippets.

@w3aran
Forked from anonymous/index.html
Created January 19, 2017 03:32
Show Gist options
  • Save w3aran/8cda86c44c120ceebfb1ac615eba2a6a to your computer and use it in GitHub Desktop.
Save w3aran/8cda86c44c120ceebfb1ac615eba2a6a to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/nuneled
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.1/fetch.min.js"></script>
<div id="app"></div>
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<script id="jsbin-javascript">
'use strict';
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(_x3, _x4, _x5) { var _again = true; _function: while (_again) { var object = _x3, property = _x4, receiver = _x5; 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 { _x3 = parent; _x4 = property; _x5 = 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 _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 FETCH_COMMENTS_URL = 'https://jsonplaceholder.typicode.com/comments';
var fetchComments = function fetchComments() {
var url = arguments.length <= 0 || arguments[0] === undefined ? FETCH_COMMENTS_URL : arguments[0];
return fetch(url).then(function (response) {
return response.ok ? response.json() : Promise.reject(response);
})['catch'](function (error) {
console.log("Error in fetching comments", error);
return [];
});
};
var CommentListContainer = (function (_React$Component) {
_inherits(CommentListContainer, _React$Component);
function CommentListContainer() {
_classCallCheck(this, CommentListContainer);
_get(Object.getPrototypeOf(CommentListContainer.prototype), 'constructor', this).call(this);
this.state = this.initialState();
this.updateState = this.updateState.bind(this);
}
_createClass(CommentListContainer, [{
key: 'initialState',
value: function initialState() {
return {
comments: [],
isFetched: false
};
}
}, {
key: 'updateState',
value: function updateState() {
var comments = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0];
this.setState({
comments: comments,
isFetched: true
});
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
fetchComments().then(this.updateState);
}
}, {
key: 'render',
value: function render() {
console.log(this.state.comments);
return !this.state.isFetched ? React.createElement(LoadingView, null) : React.createElement(CommentListView, { comments: this.state.comments });
}
}]);
return CommentListContainer;
})(React.Component);
var LoadingView = function LoadingView() {
return React.createElement(
'div',
null,
'Loading...'
);
};
var CommentListView = function CommentListView(_ref) {
var comments = _ref.comments;
return !comments.length ? React.createElement(NoCommentsFound, null) : React.createElement(
'ul',
null,
comments.map(function (comment) {
return React.createElement(
'li',
{ key: comment.id },
comment.body,
'—',
comment.name
);
})
);
};
CommentListView.defaultProps = {
comments: []
};
CommentListView.propTypes = {
comments: React.PropTypes.array
};
var NoCommentsFound = function NoCommentsFound() {
return React.createElement(
'div',
null,
'No comments found'
);
};
var App = function App() {
return React.createElement(CommentListContainer, null);
};
ReactDOM.render(React.createElement(App, null), document.getElementById('app'));
</script>
<script id="jsbin-source-javascript" type="text/javascript">const FETCH_COMMENTS_URL = 'https://jsonplaceholder.typicode.com/comments';
const fetchComments = (url = FETCH_COMMENTS_URL) => (
fetch(url)
.then(response => response.ok ? response.json() : Promise.reject(response))
.catch(error => {
console.log("Error in fetching comments", error);
return [];
})
);
class CommentListContainer extends React.Component {
constructor() {
super();
this.state = this.initialState();
this.updateState = this.updateState.bind(this);
}
initialState() {
return {
comments: [],
isFetched: false
}
}
updateState(comments = []) {
this.setState({
comments,
isFetched: true
})
}
componentDidMount() {
fetchComments().then(this.updateState)
}
render() {
console.log(this.state.comments);
return (
!this.state.isFetched ? <LoadingView /> : (
<CommentListView comments={this.state.comments} />
)
);
}
}
const LoadingView = () => (
<div>Loading...</div>
);
const CommentListView = ({ comments }) => (
!comments.length ? <NoCommentsFound /> : (
<ul>
{
comments.map((comment) => (
<li key={comment.id}>
{comment.body}—{comment.name}
</li>
))
}
</ul>
)
);
CommentListView.defaultProps = {
comments: []
}
CommentListView.propTypes = {
comments: React.PropTypes.array
}
const NoCommentsFound = () => (
<div>No comments found</div>
);
const App = () => (
<CommentListContainer />
);
ReactDOM.render(<App />, document.getElementById('app'));</script></body>
</html>
'use strict';
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(_x3, _x4, _x5) { var _again = true; _function: while (_again) { var object = _x3, property = _x4, receiver = _x5; 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 { _x3 = parent; _x4 = property; _x5 = 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 _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 FETCH_COMMENTS_URL = 'https://jsonplaceholder.typicode.com/comments';
var fetchComments = function fetchComments() {
var url = arguments.length <= 0 || arguments[0] === undefined ? FETCH_COMMENTS_URL : arguments[0];
return fetch(url).then(function (response) {
return response.ok ? response.json() : Promise.reject(response);
})['catch'](function (error) {
console.log("Error in fetching comments", error);
return [];
});
};
var CommentListContainer = (function (_React$Component) {
_inherits(CommentListContainer, _React$Component);
function CommentListContainer() {
_classCallCheck(this, CommentListContainer);
_get(Object.getPrototypeOf(CommentListContainer.prototype), 'constructor', this).call(this);
this.state = this.initialState();
this.updateState = this.updateState.bind(this);
}
_createClass(CommentListContainer, [{
key: 'initialState',
value: function initialState() {
return {
comments: [],
isFetched: false
};
}
}, {
key: 'updateState',
value: function updateState() {
var comments = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0];
this.setState({
comments: comments,
isFetched: true
});
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
fetchComments().then(this.updateState);
}
}, {
key: 'render',
value: function render() {
console.log(this.state.comments);
return !this.state.isFetched ? React.createElement(LoadingView, null) : React.createElement(CommentListView, { comments: this.state.comments });
}
}]);
return CommentListContainer;
})(React.Component);
var LoadingView = function LoadingView() {
return React.createElement(
'div',
null,
'Loading...'
);
};
var CommentListView = function CommentListView(_ref) {
var comments = _ref.comments;
return !comments.length ? React.createElement(NoCommentsFound, null) : React.createElement(
'ul',
null,
comments.map(function (comment) {
return React.createElement(
'li',
{ key: comment.id },
comment.body,
'—',
comment.name
);
})
);
};
CommentListView.defaultProps = {
comments: []
};
CommentListView.propTypes = {
comments: React.PropTypes.array
};
var NoCommentsFound = function NoCommentsFound() {
return React.createElement(
'div',
null,
'No comments found'
);
};
var App = function App() {
return React.createElement(CommentListContainer, null);
};
ReactDOM.render(React.createElement(App, null), document.getElementById('app'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment