Skip to content

Instantly share code, notes, and snippets.

@oroce

oroce/index.html

Last active Feb 28, 2017
Embed
What would you like to do?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ESNextbin Sketch</title>
<!-- put additional styles and scripts here -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- put markup and other contents here -->
<div id="container"></div>
</body>
</html>
import { parse } from 'querystring'
import ReactDOM from 'react-dom';
import React from 'react';
const search = window.top.location.search.slice(1);
const accessToken = parse(search).code;
const proxy = 'https://4e895a09.ngrok.io/';
const profiles = proxy + 'api.bufferapp.com/1/profiles.json?access_token=';
const sentUpdates = (profileId) => {
return `${proxy}api.bufferapp.com/1/profiles/${profileId}/updates/sent.json?access_token=${accessToken}`;
};
const pendingUpdates = (profileId) => {
return `${proxy}api.bufferapp.com/1/profiles/${profileId}/updates/pending.json?access_token=${accessToken}`;
};
let socialProfiles = [];
fetch(profiles + accessToken)
.then(resp => resp.json())
.then(json => {
console.log(json);
socialProfiles = json;
render(socialProfiles);
json.forEach((profile, i) => {
fetch(sentUpdates(profile._id))
.then(resp => resp.json())
.then(json => {
socialProfiles[i].sent = json.updates;
render(socialProfiles);
});
fetch(sentUpdates(profile._id))
.then(resp => resp.json())
.then(json => {
socialProfiles[i].pending = json.updates;
render(socialProfiles);
});
});
});
const SocialPost = React.createClass({
render() {
return (
<tr>
<td dangerouslySetInnerHTML={ {__html: this.props.text} } />
<td>{this.props.day}</td>
<td>{this.props.time}</td>
</tr>
);
}
});
const SocialProfile = React.createClass({
render() {
const {
sent = [],
pending = [],
avatar_https,
formatted_service,
formatted_username
} = this.props;
let sentRows;
let pendingRows;
if (sent.length === 0) {
sentRows = (
<tr>
<td colSpan={3}>No updates have been sent</td>
</tr>
);
} else {
sentRows = sent.map(row => {
return <SocialPost
key={ `social-post-${row.id}` }
text={ row.text_formatted }
day={ row.day }
time={ row.due_time }
/>
});
}
if (pending.length === 0) {
pendingRows = (
<tr>
<td colSpan={3}>No updates are in pending</td>
</tr>
);
} else {
pendingRows = pending.map(row => {
return <SocialPost
key={ `social-post-${row.id}` }
text={ row.text_formatted }
day={ row.day }
time={ row.due_time }
/>
});
}
return (
<div className="social-profile">
<div className="media">
<div className="media-left">
<img className="media-object" src={avatar_https} alt={formatted_username} />
</div>
<div className="media-body">
<h4 className="media-heading">{formatted_username}</h4>
{formatted_service}
</div>
</div>
<table className="table">
<caption>Pending updates</caption>
<thead>
<tr>
<th>text</th>
<th>day</th>
<th>due time</th>
</tr>
</thead>
<tbody>
{ pendingRows }
</tbody>
</table>
<hr />
<table className="table">
<caption>Sent updates</caption>
<thead>
<tr>
<th>text</th>
<th>day</th>
<th>due time</th>
</tr>
</thead>
<tbody>
{ sentRows }
</tbody>
</table>
</div>
);
}
});
const App = React.createClass({
render() {
const profiles = this.props.profiles.map(profile => {
return (
<div>
<SocialProfile {...profile} />
<hr />
</div>
);
});
return (
<div>
{ profiles }
</div>
);
}
});
function render(profiles) {
ReactDOM.render(
<App profiles={ profiles } />,
document.getElementById('container')
);
}
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"react-dom": "15.4.2",
"react": "15.4.2",
"undefined": "v4.5.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment