oroce/index.html

## index.html
<!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>

## index.js
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')
  );
}

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "react-dom": "15.4.2",
    "react": "15.4.2",
    "undefined": "v4.5.0"
  }
}
	<!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"
	}
	}