mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-02-17 00:21:20 -05:00
Activity with current friends-activity format
This updates `activity.jsx` to handle the current `friends-activity` format (which is a bit hacky atm), and uses `FormattedRelative` to handle relative timestamps
This commit is contained in:
Matthew Taylor
parent
03b3ae8375
commit
22e8ceca5e
3 changed files with 94 additions and 68 deletions
|
|
@ -1,57 +1,66 @@
|
|||
[
|
||||
{
|
||||
"id": 5,
|
||||
"author": {
|
||||
"id": "lynxkitten101",
|
||||
"username": "lynxkitten101",
|
||||
"avatar": "https://cdn2.scratch.mit.edu/get_image/user/10122882_32x32.png?v=1438781835.82"
|
||||
},
|
||||
"stamp": "2015-09-08T19:40:00Z",
|
||||
"message": "became a curator of A bit of everything",
|
||||
"url": "/studios/1511220/"
|
||||
},
|
||||
"obj_id": 82475328,
|
||||
"datetime_created": "2015-10-20T15:13:36",
|
||||
"actor": {
|
||||
"username": "ceebee",
|
||||
"pk": 2755634,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/users/avatars/275/5634.png",
|
||||
"admin": true
|
||||
},
|
||||
"pk": 186757838,
|
||||
"message": "\nfavorited\n <a href=\"/projects/82475328/\">miner man</a>",
|
||||
"extra_data": {
|
||||
"project_title": "miner man"
|
||||
},
|
||||
"type": 3
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"author": {
|
||||
"id": "sheep_tester",
|
||||
"username": "Sheep_tester",
|
||||
"avatar": "https://cdn2.scratch.mit.edu/get_image/user/3290075_32x32.png?v=1439575340.77"
|
||||
},
|
||||
"stamp": "2015-09-08T03:20:00Z",
|
||||
"message": "became a curator of To All My Great Followers & People",
|
||||
"url": "/studios/1511360/"
|
||||
},
|
||||
"obj_id": 82475328,
|
||||
"datetime_created": "2015-10-20T15:13:36",
|
||||
"actor": {
|
||||
"username": "ceebee",
|
||||
"pk": 2755634,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/users/avatars/275/5634.png",
|
||||
"admin": true
|
||||
},
|
||||
"pk": 186757836,
|
||||
"message": "\nloved\n <a href=\"/projects/82475328/\">miner man</a>",
|
||||
"extra_data": {
|
||||
"project_title": "miner man"
|
||||
},
|
||||
"type": 2
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"author": {
|
||||
"id": "-vexvorlo-",
|
||||
"username": "-VexVorlo-",
|
||||
"avatar": "https://cdn2.scratch.mit.edu/get_image/user/10930092_32x32.png?v=1439735067.99"
|
||||
},
|
||||
"stamp": "2015-09-01T03:20:00Z",
|
||||
"message": "loved Virtual Chicken Coop",
|
||||
"url": "/projects/73311484/"
|
||||
},
|
||||
"obj_id": 82475328,
|
||||
"datetime_created": "2015-10-20T15:12:39",
|
||||
"actor": {
|
||||
"username": "speakvisually",
|
||||
"pk": 3484484,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/users/avatars/348/4484.png",
|
||||
"admin": true
|
||||
},
|
||||
"pk": 186757510,
|
||||
"message": "\nfavorited\n <a href=\"/projects/82475328/\">miner man</a>",
|
||||
"extra_data": {
|
||||
"project_title": "miner man"
|
||||
},
|
||||
"type": 3
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"author": {
|
||||
"id": "-vexvorlo-",
|
||||
"username": "-VexVorlo-",
|
||||
"avatar": "https://cdn2.scratch.mit.edu/get_image/user/10930092_32x32.png?v=1439735067.99"
|
||||
},
|
||||
"stamp": "2015-08-22T02:00:00Z",
|
||||
"message": "loved Bread bread bread..",
|
||||
"url": "/projects/75677832/"
|
||||
},
|
||||
{
|
||||
"id": 1,
|
||||
"author": {
|
||||
"id": "getbent",
|
||||
"username": "getbent",
|
||||
"avatar": "https://cdn2.scratch.mit.edu/get_image/user/676422_32x32.png?v=1436728562.25"
|
||||
},
|
||||
"stamp": "2014-09-08T00:00:00Z",
|
||||
"message": "loved Is ______ An Instrurment?",
|
||||
"url": "/projects/75347968/"
|
||||
"obj_id": 82475328,
|
||||
"datetime_created": "2015-10-20T15:12:37",
|
||||
"actor": {
|
||||
"username": "speakvisually",
|
||||
"pk": 3484484,
|
||||
"thumbnail_url": "//cdn.scratch.mit.edu/static/site/users/avatars/348/4484.png",
|
||||
"admin": true
|
||||
},
|
||||
"pk": 186757500,
|
||||
"message": "\nloved\n <a href=\"/projects/82475328/\">miner man</a>",
|
||||
"extra_data": {
|
||||
"project_title": "miner man"
|
||||
},
|
||||
"type": 2
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
var React = require('react');
|
||||
var ReactIntl = require('react-intl');
|
||||
var defineMessages = ReactIntl.defineMessages;
|
||||
var FormattedRelative = ReactIntl.FormattedRelative;
|
||||
var injectIntl = ReactIntl.injectIntl;
|
||||
|
||||
var Box = require('../box/box.jsx');
|
||||
var Format = require('../../lib/format.js');
|
||||
|
||||
require('./activity.scss');
|
||||
|
||||
|
|
@ -34,12 +34,21 @@ var Activity = React.createClass({
|
|||
|
||||
<ul>
|
||||
{this.props.items.map(function (item) {
|
||||
var actorProfileUrl = '/users/' + item.actor.username + '/';
|
||||
var actionDate = new Date(item.datetime_created + 'Z');
|
||||
var activityMessageHTML = '<a href=' + actorProfileUrl + '>' +
|
||||
item.actor.username + '</a>' + item.message;
|
||||
|
||||
return (
|
||||
<li key={item.id}>
|
||||
<a href={item.url}>
|
||||
<img src={item.author.avatar} width="34" height="34" />
|
||||
<p>{item.author.username} {item.message}</p>
|
||||
<p><span className="stamp">{Format.date(item.stamp)}</span></p>
|
||||
<li key={item.pk}>
|
||||
<a href={actorProfileUrl}>
|
||||
<img src={item.actor.thumbnail_url} width="34" height="34" />
|
||||
<p dangerouslySetInnerHTML={{__html: activityMessageHTML}}></p>
|
||||
<p>
|
||||
<span className="stamp">
|
||||
<FormattedRelative value={actionDate} />
|
||||
</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -28,6 +28,19 @@ var Splash = React.createClass({
|
|||
featured: require('./featured.json')
|
||||
};
|
||||
},
|
||||
componentDidUpdate: function (prevProps, prevState) {
|
||||
if (this.state.session.user != prevState.session.user && this.state.session.user) {
|
||||
this.getNews();
|
||||
this.getActivity();
|
||||
}
|
||||
},
|
||||
componentDidMount: function () {
|
||||
if (this.state.session.user) {
|
||||
this.getNews();
|
||||
this.getActivity();
|
||||
}
|
||||
// @todo API request for Featured
|
||||
},
|
||||
getNews: function () {
|
||||
this.api({
|
||||
uri: '/news?limit=3'
|
||||
|
|
@ -35,24 +48,19 @@ var Splash = React.createClass({
|
|||
if (!err) this.setState({'news': body});
|
||||
}.bind(this));
|
||||
},
|
||||
componentDidUpdate: function (prevProps, prevState) {
|
||||
if (this.state.session.user != prevState.session.user && this.state.session.user) {
|
||||
this.getNews();
|
||||
}
|
||||
},
|
||||
componentDidMount: function () {
|
||||
if (this.state.session.user) {
|
||||
this.getNews();
|
||||
}
|
||||
// @todo API request for Activity
|
||||
// @todo API request for Featured
|
||||
getActivity: function () {
|
||||
this.api({
|
||||
uri: '/proxy/users/' + this.state.session.user.username + '/activity?max=5'
|
||||
}, function (err, body) {
|
||||
if (!err) this.setState({'activity': body});
|
||||
}.bind(this));
|
||||
},
|
||||
render: function () {
|
||||
return (
|
||||
<div className="inner">
|
||||
{this.state.session.user ? [
|
||||
<div key="header" className="splash-header">
|
||||
<Activity />
|
||||
<Activity items={this.state.activity} />
|
||||
<News items={this.state.news} />
|
||||
</div>
|
||||
] : [
|
||||
|
|
|
|||
Loading…
Reference in a new issue