|
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') |
|
); |
|
} |
