Last active
February 28, 2017 12:51
-
-
Save oroce/fe2f2680955f118613dc7e9f1f6d0d20 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
| <!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> |
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
| 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') | |
| ); | |
| } |
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
| { | |
| "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