scratch-www/src/views/splash/splash.jsx

296 lines
12 KiB
React
Raw Normal View History

2015-10-20 14:42:17 -04:00
var injectIntl = require('react-intl').injectIntl;
2015-09-02 15:08:58 -04:00
var React = require('react');
2015-10-16 15:10:17 -04:00
var render = require('../../lib/render.jsx');
2015-09-02 15:08:58 -04:00
var Api = require('../../mixins/api.jsx');
2015-09-03 22:41:27 -04:00
var Session = require('../../mixins/session.jsx');
2015-09-08 22:54:55 -04:00
var Activity = require('../../components/activity/activity.jsx');
var AdminPanel = require('../../components/adminpanel/adminpanel.jsx');
2015-09-08 18:15:02 -04:00
var Box = require('../../components/box/box.jsx');
var Button = require('../../components/forms/button.jsx');
2015-09-08 18:15:02 -04:00
var Carousel = require('../../components/carousel/carousel.jsx');
var Intro = require('../../components/intro/intro.jsx');
2015-09-02 15:08:58 -04:00
var News = require('../../components/news/news.jsx');
var Welcome = require('../../components/welcome/welcome.jsx');
2015-09-02 15:08:58 -04:00
require('./splash.scss');
2015-10-20 14:42:17 -04:00
var Splash = injectIntl(React.createClass({
2015-10-09 16:16:37 -04:00
type: 'Splash',
2015-09-02 15:08:58 -04:00
mixins: [
2015-09-03 22:41:27 -04:00
Api,
Session
2015-09-02 15:08:58 -04:00
],
getInitialState: function () {
return {
projectCount: 10569070,
2015-09-03 22:41:27 -04:00
activity: [],
news: [],
featuredCustom: {},
featuredGlobal: {}
2015-09-02 15:08:58 -04:00
};
},
componentDidUpdate: function (prevProps, prevState) {
if (this.state.session.user != prevState.session.user) {
if (this.state.session.user) {
this.getActivity();
this.getFeaturedCustom();
this.getNews();
} else {
this.setState({featuredCustom: []});
this.getProjectCount();
}
}
},
2015-09-02 15:08:58 -04:00
componentDidMount: function () {
this.getFeaturedGlobal();
if (this.state.session.user) {
this.getActivity();
this.getFeaturedCustom();
this.getNews();
} else {
this.getProjectCount();
}
2015-09-02 15:08:58 -04:00
},
getActivity: function () {
this.api({
uri: '/proxy/users/' + this.state.session.user.username + '/activity?limit=5'
}, function (err, body) {
if (!err) this.setState({'activity': body});
}.bind(this));
},
getFeaturedGlobal: function () {
this.api({
uri: '/proxy/featured'
}, function (err, body) {
if (!err) this.setState({featuredGlobal: body});
}.bind(this));
},
getFeaturedCustom: function () {
this.api({
uri: '/proxy/users/' + this.state.session.user.id + '/featured'
}, function (err, body) {
if (!err) this.setState({featuredCustom: body});
}.bind(this));
},
getNews: function () {
this.api({
uri: '/news?limit=3'
}, function (err, body) {
if (!err) this.setState({'news': body});
}.bind(this));
},
getProjectCount: function () {
this.api({
uri: '/projects/count/all'
}, function (err, body) {
if (!err) this.setState({projectCount: body.count});
}.bind(this));
},
handleDismiss: function (cue) {
this.api({
host: '',
uri: '/site-api/users/set-template-cue/',
method: 'post',
useCsrf: true,
json: {cue: cue, value: false}
}, function (err) {
if (!err) window.refreshSession();
});
},
renderHomepageRows: function () {
2015-10-20 14:42:17 -04:00
var formatMessage = this.props.intl.formatMessage;
var rows = [
2015-10-20 14:42:17 -04:00
<Box
title={formatMessage({
id: 'splash.featuredProjects',
defaultMessage: 'Featured Projects'})}
key="community_featured_projects">
<Carousel items={this.state.featuredGlobal.community_featured_projects} />
</Box>,
2015-10-20 14:42:17 -04:00
<Box
title={formatMessage({
id: 'splash.featuredStudios',
defaultMessage: 'Featured Studios'})}
key="community_featured_studios">
<Carousel items={this.state.featuredGlobal.community_featured_studios} />
</Box>
];
if (
this.state.featuredGlobal.curator_top_projects &&
this.state.featuredGlobal.curator_top_projects.length > 4) {
rows.push(
<Box
key="curator_top_projects"
title={
'Projects Curated by ' +
this.state.featuredGlobal.curator_top_projects[0].curator_name}
2015-10-20 14:42:17 -04:00
moreTitle={formatMessage({id: 'general.learnMore', defaultMessage: 'Learn More'})}
moreHref="/studios/386359/">
<Carousel items={this.state.featuredGlobal.curator_top_projects} />
</Box>
);
}
if (
this.state.featuredGlobal.scratch_design_studio &&
this.state.featuredGlobal.scratch_design_studio.length > 4) {
rows.push(
<Box
key="scratch_design_studio"
title={
2015-10-20 14:42:17 -04:00
formatMessage({
id: 'splash.scratchDesignStudioTitle',
defaultMessage: 'Scratch Design Studio' })
+ ' - ' + this.state.featuredGlobal.scratch_design_studio[0].gallery_title}
moreTitle={formatMessage({id: 'splash.visitTheStudio', defaultMessage: 'Visit the studio'})}
moreHref={'/studios/' + this.state.featuredGlobal.scratch_design_studio[0].gallery_id + '/'}>
<Carousel items={this.state.featuredGlobal.scratch_design_studio} />
</Box>
);
}
if (
this.state.session.user &&
this.state.featuredGlobal.community_newest_projects &&
this.state.featuredGlobal.community_newest_projects.length > 0) {
rows.push(
2015-10-20 14:42:17 -04:00
<Box
title={
formatMessage({
id: 'splash.recentlySharedProjects',
defaultMessage: 'Recently Shared Projects' })}
key="community_newest_projects">
<Carousel items={this.state.featuredGlobal.community_newest_projects} />
</Box>
);
}
if (
this.state.featuredCustom.custom_projects_by_following &&
this.state.featuredCustom.custom_projects_by_following.length > 0) {
rows.push(
2015-10-20 14:42:17 -04:00
<Box
title={
formatMessage({
id: 'splash.projectsByScratchersFollowing',
defaultMessage: 'Projects by Scratchers I\'m Following'})}
key="custom_projects_by_following">
<Carousel items={this.state.featuredCustom.custom_projects_by_following} />
</Box>
);
}
if (
this.state.featuredCustom.custom_projects_loved_by_following &&
this.state.featuredCustom.custom_projects_loved_by_following.length > 0) {
rows.push(
2015-10-20 14:42:17 -04:00
<Box
title={
formatMessage({
id: 'splash.projectsLovedByScratchersFollowing',
defaultMessage: 'Projects Loved by Scratchers I\'m Following'})}
key="custom_projects_loved_by_following">
<Carousel items={this.state.featuredCustom.custom_projects_loved_by_following} />
</Box>
);
}
if (
this.state.featuredCustom.custom_projects_in_studios_following &&
this.state.featuredCustom.custom_projects_in_studios_following.length > 0) {
rows.push(
2015-10-20 14:42:17 -04:00
<Box
title={
formatMessage({
id:'splash.projectsInStudiosFollowing',
defaultMessage: 'Projects in Studios I\'m Following'})}
key="custom_projects_in_studios_following">
<Carousel items={this.state.featuredCustom.custom_projects_in_studios_following} />
</Box>
);
}
rows.push(
2015-10-20 14:42:17 -04:00
<Box
title={
formatMessage({
id: 'splash.communityRemixing',
defaultMessage: 'What the Community is Remixing' })}
key="community_most_remixed_projects">
<Carousel items={this.state.featuredGlobal.community_most_remixed_projects} showRemixes={true} />
</Box>,
2015-10-20 14:42:17 -04:00
<Box
title={
formatMessage({
id: 'splash.communityLoving',
defaultMessage: 'What the Community is Loving' })}
key="community_most_loved_projects">
<Carousel items={this.state.featuredGlobal.community_most_loved_projects} showLoves={true} />
</Box>
);
return rows;
},
2015-09-02 15:08:58 -04:00
render: function () {
var featured = this.renderHomepageRows();
2015-09-02 15:08:58 -04:00
return (
2015-09-03 22:41:27 -04:00
<div className="inner">
2015-10-07 11:48:55 -04:00
{this.state.session.user ? [
2015-09-29 15:25:10 -04:00
<div key="header" className="splash-header">
{this.state.session.flags.show_welcome ? [
<Welcome key="welcome" onDismiss={this.handleDismiss.bind(this, 'welcome')}/>
] : [
<Activity key="activity" items={this.state.activity} />
]}
<News items={this.state.news} />
2015-09-21 12:35:00 -04:00
</div>
2015-09-16 14:44:26 -04:00
] : [
<Intro projectCount={this.state.projectCount} key="intro"/>
]}
{featured}
<AdminPanel>
<dt>Tools</dt>
<dd>
<ul>
<li>
<a href="/scratch_admin/tickets">Ticket Queue</a>
</li>
<li>
<a href="/scratch_admin/ip-search/">IP Search</a>
</li>
<li>
<a href="/scratch_admin/email-search/">Email Search</a>
</li>
</ul>
</dd>
<dt>Homepage Cache</dt>
<dd>
<ul className="cache-list">
<li>
<form
id="homepage-refresh-form"
method="post"
action="/scratch_admin/homepage/clear-cache/">
<div className="button-row">
<span>Refresh row data:</span>
<Button type="submit">
<span>Refresh</span>
</Button>
</div>
</form>
</li>
</ul>
</dd>
</AdminPanel>
2015-09-02 15:08:58 -04:00
</div>
);
}
2015-10-20 14:42:17 -04:00
}));
2015-09-02 15:08:58 -04:00
2015-10-16 15:10:17 -04:00
render(<Splash />, document.getElementById('view'));