2016-03-18 11:51:22 -04:00
|
|
|
var connect = require('react-redux').connect;
|
2015-10-20 14:42:17 -04:00
|
|
|
var injectIntl = require('react-intl').injectIntl;
|
2015-10-25 11:58:12 -04:00
|
|
|
var omit = require('lodash.omit');
|
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
|
|
|
|
2016-05-19 16:55:25 -04:00
|
|
|
var sessionActions = require('../../redux/session.js');
|
2016-03-18 11:51:22 -04:00
|
|
|
|
2015-09-02 15:08:58 -04:00
|
|
|
var Api = require('../../mixins/api.jsx');
|
2015-09-03 22:41:27 -04:00
|
|
|
|
2016-04-21 18:13:21 -04:00
|
|
|
var Activity = require('../../components/activity/activity.jsx');
|
|
|
|
var AdminPanel = require('../../components/adminpanel/adminpanel.jsx');
|
2016-05-11 18:44:35 -04:00
|
|
|
var CNBanner = require('../../components/cn-banner/cn-banner.jsx');
|
2016-04-21 18:13:21 -04:00
|
|
|
var DropdownBanner = require('../../components/dropdown-banner/banner.jsx');
|
|
|
|
var Box = require('../../components/box/box.jsx');
|
|
|
|
var Button = require('../../components/forms/button.jsx');
|
|
|
|
var Carousel = require('../../components/carousel/carousel.jsx');
|
|
|
|
var Intro = require('../../components/intro/intro.jsx');
|
|
|
|
var Modal = require('../../components/modal/modal.jsx');
|
|
|
|
var News = require('../../components/news/news.jsx');
|
|
|
|
var Page = require('../../components/page/www/page.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: [
|
2016-03-18 11:51:22 -04:00
|
|
|
Api
|
2015-09-02 15:08:58 -04:00
|
|
|
],
|
|
|
|
getInitialState: function () {
|
|
|
|
return {
|
2016-04-22 14:11:25 -04:00
|
|
|
projectCount: 14000000, // gets the shared project count
|
2016-01-14 10:25:03 -05:00
|
|
|
activity: [], // recent social actions taken by users someone is following
|
|
|
|
news: [], // gets news posts from the scratch Tumblr
|
|
|
|
featuredCustom: {}, // custom homepage rows, such as "Projects by Scratchers I'm Following"
|
|
|
|
featuredGlobal: {}, // global homepage rows, such as "Featured Projects"
|
|
|
|
showEmailConfirmationModal: false, // flag that determines whether to show banner to request email conf.
|
2015-10-28 08:57:05 -04:00
|
|
|
refreshCacheStatus: 'notrequested'
|
2015-09-02 15:08:58 -04:00
|
|
|
};
|
|
|
|
},
|
2016-03-18 11:51:22 -04:00
|
|
|
getDefaultProps: function () {
|
|
|
|
return {
|
|
|
|
session: {}
|
2016-03-18 12:40:30 -04:00
|
|
|
};
|
2016-03-18 11:51:22 -04:00
|
|
|
},
|
2016-03-18 12:40:30 -04:00
|
|
|
componentDidUpdate: function (prevProps) {
|
2016-06-01 17:22:11 -04:00
|
|
|
if (this.props.session.session.user != prevProps.session.session.user) {
|
|
|
|
if (this.props.session.session.user) {
|
2015-10-20 13:18:57 -04:00
|
|
|
this.getActivity();
|
2015-10-21 15:12:41 -04:00
|
|
|
this.getFeaturedCustom();
|
2015-10-20 13:18:57 -04:00
|
|
|
this.getNews();
|
|
|
|
} else {
|
|
|
|
this.setState({featuredCustom: []});
|
2015-10-24 14:52:11 -04:00
|
|
|
this.setState({activity: []});
|
|
|
|
this.setState({news: []});
|
2015-10-21 14:12:34 -04:00
|
|
|
this.getProjectCount();
|
2015-10-25 12:05:52 -04:00
|
|
|
}
|
|
|
|
if (this.shouldShowEmailConfirmation()) {
|
|
|
|
window.addEventListener('message', this.onMessage);
|
|
|
|
} else {
|
2015-10-23 19:02:00 -04:00
|
|
|
window.removeEventListener('message', this.onMessage);
|
2015-10-20 13:18:57 -04:00
|
|
|
}
|
2015-10-07 16:23:08 -04:00
|
|
|
}
|
|
|
|
},
|
2015-09-02 15:08:58 -04:00
|
|
|
componentDidMount: function () {
|
2015-10-21 15:12:41 -04:00
|
|
|
this.getFeaturedGlobal();
|
2016-06-01 17:22:11 -04:00
|
|
|
if (this.props.session.session.user) {
|
2015-10-20 12:25:30 -04:00
|
|
|
this.getActivity();
|
2015-10-21 15:12:41 -04:00
|
|
|
this.getFeaturedCustom();
|
2015-10-20 13:18:57 -04:00
|
|
|
this.getNews();
|
2015-10-21 14:12:34 -04:00
|
|
|
} else {
|
|
|
|
this.getProjectCount();
|
2015-10-07 16:23:08 -04:00
|
|
|
}
|
2015-10-25 12:05:52 -04:00
|
|
|
if (this.shouldShowEmailConfirmation()) window.addEventListener('message', this.onMessage);
|
2015-09-02 15:08:58 -04:00
|
|
|
},
|
2015-10-23 19:02:00 -04:00
|
|
|
componentWillUnmount: function () {
|
|
|
|
window.removeEventListener('message', this.onMessage);
|
|
|
|
},
|
|
|
|
onMessage: function (e) {
|
|
|
|
if (e.origin != window.location.origin) return;
|
2015-10-25 12:06:34 -04:00
|
|
|
if (e.source != this.refs.emailConfirmationiFrame.contentWindow) return;
|
2015-10-23 19:02:00 -04:00
|
|
|
if (e.data == 'resend-done') {
|
|
|
|
this.hideEmailConfirmationModal();
|
|
|
|
} else {
|
|
|
|
var data = JSON.parse(e.data);
|
|
|
|
if (data['action'] === 'leave-page') {
|
|
|
|
window.location.href = data['uri'];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
2015-10-21 15:12:41 -04:00
|
|
|
getActivity: function () {
|
2015-10-20 12:25:30 -04:00
|
|
|
this.api({
|
2016-06-01 17:22:11 -04:00
|
|
|
uri: '/proxy/users/' + this.props.session.session.user.username + '/activity?limit=5'
|
2015-10-20 12:25:30 -04:00
|
|
|
}, function (err, body) {
|
2015-10-23 19:02:00 -04:00
|
|
|
if (!err) this.setState({activity: body});
|
2015-10-20 12:25:30 -04:00
|
|
|
}.bind(this));
|
|
|
|
},
|
2015-10-21 15:12:41 -04:00
|
|
|
getFeaturedGlobal: function () {
|
2015-10-20 12:25:30 -04:00
|
|
|
this.api({
|
2015-10-21 15:12:41 -04:00
|
|
|
uri: '/proxy/featured'
|
2015-10-20 12:25:30 -04:00
|
|
|
}, function (err, body) {
|
2015-10-21 15:12:41 -04:00
|
|
|
if (!err) this.setState({featuredGlobal: body});
|
|
|
|
}.bind(this));
|
|
|
|
},
|
|
|
|
getFeaturedCustom: function () {
|
|
|
|
this.api({
|
2016-06-01 17:22:11 -04:00
|
|
|
uri: '/proxy/users/' + this.props.session.session.user.id + '/featured'
|
2015-10-21 15:12:41 -04:00
|
|
|
}, function (err, body) {
|
|
|
|
if (!err) this.setState({featuredCustom: body});
|
|
|
|
}.bind(this));
|
|
|
|
},
|
2016-06-09 17:33:49 -04:00
|
|
|
shuffleArray: function (arr) {
|
2016-06-09 17:22:31 -04:00
|
|
|
var i, j = 0;
|
|
|
|
var temp = null;
|
2016-06-09 17:33:49 -04:00
|
|
|
if (arr) {
|
|
|
|
var tempArray = arr.slice(0);
|
|
|
|
} else {
|
|
|
|
return arr;
|
|
|
|
}
|
2016-06-09 17:22:31 -04:00
|
|
|
|
2016-06-09 17:33:49 -04:00
|
|
|
for (i = arr.length - 1; i > 0; i -= 1) {
|
2016-06-09 17:22:31 -04:00
|
|
|
j = Math.floor(Math.random() * (i + 1));
|
|
|
|
temp = tempArray[i];
|
|
|
|
tempArray[i] = tempArray[j];
|
|
|
|
tempArray[j] = temp;
|
|
|
|
}
|
|
|
|
return tempArray;
|
|
|
|
},
|
2015-10-21 15:12:41 -04:00
|
|
|
getNews: function () {
|
|
|
|
this.api({
|
|
|
|
uri: '/news?limit=3'
|
|
|
|
}, function (err, body) {
|
2015-10-23 19:02:00 -04:00
|
|
|
if (!err) this.setState({news: body});
|
2015-10-20 12:25:30 -04:00
|
|
|
}.bind(this));
|
|
|
|
},
|
2015-10-21 14:12:34 -04:00
|
|
|
getProjectCount: function () {
|
|
|
|
this.api({
|
|
|
|
uri: '/projects/count/all'
|
|
|
|
}, function (err, body) {
|
|
|
|
if (!err) this.setState({projectCount: body.count});
|
|
|
|
}.bind(this));
|
|
|
|
},
|
2015-10-28 08:57:05 -04:00
|
|
|
refreshHomepageCache: function () {
|
|
|
|
this.api({
|
2015-10-30 09:14:49 -04:00
|
|
|
host: '',
|
2015-10-28 08:57:05 -04:00
|
|
|
uri: '/scratch_admin/homepage/clear-cache/',
|
|
|
|
method: 'post',
|
|
|
|
useCsrf: true
|
|
|
|
}, function (err, body) {
|
|
|
|
if (err) return this.setState({refreshCacheStatus: 'fail'});
|
|
|
|
if (!body.success) return this.setState({refreshCacheStatus: 'inprogress'});
|
|
|
|
return this.setState({refreshCacheStatus: 'pass'});
|
|
|
|
}.bind(this));
|
|
|
|
},
|
|
|
|
getHomepageRefreshStatus: function () {
|
|
|
|
var status = {
|
|
|
|
status: this.state.refreshCacheStatus,
|
|
|
|
disabled: false,
|
|
|
|
content: 'Refresh'
|
|
|
|
};
|
|
|
|
if (this.state.refreshCacheStatus === 'inprogress') {
|
|
|
|
status.disabled = true;
|
|
|
|
status.content = 'In Progress';
|
|
|
|
} else if (this.state.refreshCacheStatus === 'pass') {
|
|
|
|
status.disabled = true;
|
|
|
|
status.content = 'Requested';
|
|
|
|
} else if (this.state.refreshCacheStatus == 'fail') {
|
|
|
|
status.disabled = false;
|
|
|
|
status.content = 'Error';
|
|
|
|
}
|
|
|
|
return status;
|
|
|
|
},
|
2015-10-22 18:40:04 -04:00
|
|
|
showEmailConfirmationModal: function () {
|
2015-10-23 19:02:00 -04:00
|
|
|
this.setState({emailConfirmationModalOpen: true});
|
2015-10-22 18:40:04 -04:00
|
|
|
},
|
|
|
|
hideEmailConfirmationModal: function () {
|
2015-10-23 19:02:00 -04:00
|
|
|
this.setState({emailConfirmationModalOpen: false});
|
2015-10-22 18:40:04 -04:00
|
|
|
},
|
2015-10-22 17:17:27 -04:00
|
|
|
handleDismiss: function (cue) {
|
|
|
|
this.api({
|
|
|
|
host: '',
|
|
|
|
uri: '/site-api/users/set-template-cue/',
|
|
|
|
method: 'post',
|
|
|
|
useCsrf: true,
|
|
|
|
json: {cue: cue, value: false}
|
|
|
|
}, function (err) {
|
2016-05-19 16:55:25 -04:00
|
|
|
if (!err) this.props.dispatch(sessionActions.refreshSession());
|
2015-10-22 17:17:27 -04:00
|
|
|
});
|
2015-10-22 12:21:47 -04:00
|
|
|
},
|
2015-10-24 12:05:18 -04:00
|
|
|
shouldShowWelcome: function () {
|
2016-06-01 17:22:11 -04:00
|
|
|
if (!this.props.session.session.user || !this.props.session.session.flags.show_welcome) return false;
|
2015-10-24 12:05:18 -04:00
|
|
|
return (
|
2016-06-01 17:22:11 -04:00
|
|
|
new Date(this.props.session.session.user.dateJoined) >
|
2015-10-24 12:05:18 -04:00
|
|
|
new Date(new Date - 2*7*24*60*60*1000) // Two weeks ago
|
|
|
|
);
|
|
|
|
},
|
2015-10-25 12:05:52 -04:00
|
|
|
shouldShowEmailConfirmation: function () {
|
|
|
|
return (
|
2016-06-01 17:22:11 -04:00
|
|
|
this.props.session.session.user && this.props.session.session.flags.has_outstanding_email_confirmation &&
|
|
|
|
this.props.session.session.flags.confirm_email_banner);
|
2015-10-25 12:05:52 -04:00
|
|
|
},
|
2015-10-20 13:18:57 -04:00
|
|
|
renderHomepageRows: function () {
|
2015-10-20 14:42:17 -04:00
|
|
|
var formatMessage = this.props.intl.formatMessage;
|
2015-10-23 10:07:50 -04:00
|
|
|
|
2015-10-20 13:18:57 -04:00
|
|
|
var rows = [
|
2015-10-20 14:42:17 -04:00
|
|
|
<Box
|
|
|
|
title={formatMessage({
|
|
|
|
id: 'splash.featuredProjects',
|
|
|
|
defaultMessage: 'Featured Projects'})}
|
|
|
|
key="community_featured_projects">
|
2015-10-20 13:18:57 -04:00
|
|
|
<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">
|
2015-10-23 10:07:50 -04:00
|
|
|
<Carousel items={this.state.featuredGlobal.community_featured_studios}
|
|
|
|
settings={{slidesToShow: 4, slidesToScroll: 4, lazyLoad: false}} />
|
2015-10-20 13:18:57 -04:00
|
|
|
</Box>
|
|
|
|
];
|
|
|
|
|
2015-10-21 16:49:50 -04:00
|
|
|
if (this.state.featuredGlobal.curator_top_projects &&
|
|
|
|
this.state.featuredGlobal.curator_top_projects.length > 4) {
|
2016-05-31 16:37:42 -04:00
|
|
|
|
2015-10-20 13:18:57 -04:00
|
|
|
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'})}
|
2015-10-20 13:18:57 -04:00
|
|
|
moreHref="/studios/386359/">
|
2015-10-21 16:49:50 -04:00
|
|
|
<Carousel
|
2015-10-23 10:07:50 -04:00
|
|
|
items={this.state.featuredGlobal.curator_top_projects} />
|
2015-10-20 13:18:57 -04:00
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2015-10-21 16:49:50 -04:00
|
|
|
if (this.state.featuredGlobal.scratch_design_studio &&
|
|
|
|
this.state.featuredGlobal.scratch_design_studio.length > 4) {
|
2016-05-31 16:37:42 -04:00
|
|
|
|
2015-10-20 13:18:57 -04:00
|
|
|
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'})}
|
2015-10-20 13:18:57 -04:00
|
|
|
moreHref={'/studios/' + this.state.featuredGlobal.scratch_design_studio[0].gallery_id + '/'}>
|
2015-10-21 16:49:50 -04:00
|
|
|
<Carousel
|
2015-10-23 10:07:50 -04:00
|
|
|
items={this.state.featuredGlobal.scratch_design_studio} />
|
2015-10-20 13:18:57 -04:00
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-06-01 17:22:11 -04:00
|
|
|
if (this.props.session.session.user &&
|
2015-10-21 16:49:50 -04:00
|
|
|
this.state.featuredGlobal.community_newest_projects &&
|
|
|
|
this.state.featuredGlobal.community_newest_projects.length > 0) {
|
2016-05-31 16:37:42 -04:00
|
|
|
|
2015-10-20 13:18:57 -04:00
|
|
|
rows.push(
|
2015-10-20 14:42:17 -04:00
|
|
|
<Box
|
|
|
|
title={
|
|
|
|
formatMessage({
|
|
|
|
id: 'splash.recentlySharedProjects',
|
|
|
|
defaultMessage: 'Recently Shared Projects' })}
|
|
|
|
key="community_newest_projects">
|
2015-10-21 16:49:50 -04:00
|
|
|
<Carousel
|
2015-10-23 10:07:50 -04:00
|
|
|
items={this.state.featuredGlobal.community_newest_projects} />
|
2015-10-20 13:18:57 -04:00
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2015-10-21 16:49:50 -04:00
|
|
|
if (this.state.featuredCustom.custom_projects_by_following &&
|
|
|
|
this.state.featuredCustom.custom_projects_by_following.length > 0) {
|
2016-05-31 16:37:42 -04:00
|
|
|
|
2015-10-20 13:18:57 -04:00
|
|
|
rows.push(
|
2015-10-21 16:49:50 -04:00
|
|
|
<Box title={
|
2015-10-20 14:42:17 -04:00
|
|
|
formatMessage({
|
|
|
|
id: 'splash.projectsByScratchersFollowing',
|
|
|
|
defaultMessage: 'Projects by Scratchers I\'m Following'})}
|
2015-10-21 16:49:50 -04:00
|
|
|
key="custom_projects_by_following">
|
2016-05-31 16:37:42 -04:00
|
|
|
|
2015-10-20 13:18:57 -04:00
|
|
|
<Carousel items={this.state.featuredCustom.custom_projects_by_following} />
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
}
|
2015-10-21 16:49:50 -04:00
|
|
|
if (this.state.featuredCustom.custom_projects_loved_by_following &&
|
|
|
|
this.state.featuredCustom.custom_projects_loved_by_following.length > 0) {
|
|
|
|
|
2015-10-20 13:18:57 -04:00
|
|
|
rows.push(
|
2015-10-21 16:49:50 -04:00
|
|
|
<Box title={
|
2015-10-20 14:42:17 -04:00
|
|
|
formatMessage({
|
|
|
|
id: 'splash.projectsLovedByScratchersFollowing',
|
|
|
|
defaultMessage: 'Projects Loved by Scratchers I\'m Following'})}
|
2015-10-21 16:49:50 -04:00
|
|
|
key="custom_projects_loved_by_following">
|
2016-05-31 16:37:42 -04:00
|
|
|
|
2015-10-20 13:18:57 -04:00
|
|
|
<Carousel items={this.state.featuredCustom.custom_projects_loved_by_following} />
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2015-10-21 16:49:50 -04:00
|
|
|
if (this.state.featuredCustom.custom_projects_in_studios_following &&
|
|
|
|
this.state.featuredCustom.custom_projects_in_studios_following.length > 0) {
|
2016-05-31 16:37:42 -04:00
|
|
|
|
2015-10-20 13:18:57 -04:00
|
|
|
rows.push(
|
2015-10-21 16:49:50 -04:00
|
|
|
<Box title={
|
2015-10-20 14:42:17 -04:00
|
|
|
formatMessage({
|
|
|
|
id:'splash.projectsInStudiosFollowing',
|
|
|
|
defaultMessage: 'Projects in Studios I\'m Following'})}
|
2015-10-21 16:49:50 -04:00
|
|
|
key="custom_projects_in_studios_following">
|
2016-05-31 16:37:42 -04:00
|
|
|
|
2015-10-20 13:18:57 -04:00
|
|
|
<Carousel items={this.state.featuredCustom.custom_projects_in_studios_following} />
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
rows.push(
|
2015-10-21 16:49:50 -04:00
|
|
|
<Box title={
|
2015-10-20 14:42:17 -04:00
|
|
|
formatMessage({
|
|
|
|
id: 'splash.communityRemixing',
|
|
|
|
defaultMessage: 'What the Community is Remixing' })}
|
2015-10-21 16:49:50 -04:00
|
|
|
key="community_most_remixed_projects">
|
2016-05-31 16:37:42 -04:00
|
|
|
|
2016-06-09 17:22:31 -04:00
|
|
|
<Carousel items={this.shuffleArray(this.state.featuredGlobal.community_most_remixed_projects)}
|
|
|
|
showRemixes={true} />
|
2015-10-20 13:18:57 -04:00
|
|
|
</Box>,
|
2015-10-21 16:49:50 -04:00
|
|
|
<Box title={
|
2015-10-20 14:42:17 -04:00
|
|
|
formatMessage({
|
|
|
|
id: 'splash.communityLoving',
|
|
|
|
defaultMessage: 'What the Community is Loving' })}
|
2015-10-21 16:49:50 -04:00
|
|
|
key="community_most_loved_projects">
|
2016-05-31 16:37:42 -04:00
|
|
|
|
2016-06-09 17:22:31 -04:00
|
|
|
<Carousel items={this.shuffleArray(this.state.featuredGlobal.community_most_loved_projects)}
|
|
|
|
showLoves={true} />
|
2015-10-20 13:18:57 -04:00
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
|
|
|
|
return rows;
|
|
|
|
},
|
2015-09-02 15:08:58 -04:00
|
|
|
render: function () {
|
2015-10-20 13:18:57 -04:00
|
|
|
var featured = this.renderHomepageRows();
|
2015-10-25 11:58:12 -04:00
|
|
|
var emailConfirmationStyle = {width: 500, height: 330, padding: 1};
|
2015-10-28 08:57:05 -04:00
|
|
|
var homepageCacheState = this.getHomepageRefreshStatus();
|
2016-01-07 09:57:34 -05:00
|
|
|
|
2016-01-07 11:02:14 -05:00
|
|
|
var formatHTMLMessage = this.props.intl.formatHTMLMessage;
|
2016-03-22 11:00:37 -04:00
|
|
|
var formatNumber = this.props.intl.formatNumber;
|
|
|
|
var formatMessage = this.props.intl.formatMessage;
|
2016-01-07 11:02:14 -05:00
|
|
|
var messages = {
|
|
|
|
'general.viewAll': formatMessage({id: 'general.viewAll'}),
|
|
|
|
'news.scratchNews': formatMessage({id: 'news.scratchNews'}),
|
|
|
|
'welcome.welcomeToScratch': formatMessage({id: 'welcome.welcomeToScratch'}),
|
|
|
|
'welcome.learn': formatMessage({id: 'welcome.learn'}),
|
|
|
|
'welcome.tryOut': formatMessage({id: 'welcome.tryOut'}),
|
|
|
|
'welcome.connect': formatMessage({id: 'welcome.connect'}),
|
|
|
|
'intro.aboutScratch': formatMessage({id: 'intro.aboutScratch'}),
|
|
|
|
'intro.forEducators': formatMessage({id: 'intro.forEducators'}),
|
|
|
|
'intro.forParents': formatMessage({id: 'intro.forParents'}),
|
|
|
|
'intro.joinScratch': formatMessage({id: 'intro.joinScratch'}),
|
|
|
|
'intro.seeExamples': formatMessage({id: 'intro.seeExamples'}),
|
|
|
|
'intro.tagLine': formatHTMLMessage({id: 'intro.tagLine'}),
|
|
|
|
'intro.tryItOut': formatMessage({id: 'intro.tryItOut'})
|
|
|
|
};
|
2016-03-22 11:00:37 -04:00
|
|
|
if (this.state.projectCount === this.getInitialState().projectCount) {
|
|
|
|
messages['intro.description'] = formatHTMLMessage({id: 'intro.defaultDescription'});
|
|
|
|
} else {
|
|
|
|
var count = formatNumber(this.state.projectCount);
|
|
|
|
messages['intro.description'] = formatHTMLMessage({id: 'intro.description'}, {value: count});
|
|
|
|
}
|
2016-01-07 09:57:34 -05:00
|
|
|
|
2015-09-02 15:08:58 -04:00
|
|
|
return (
|
2015-10-22 17:19:31 -04:00
|
|
|
<div className="splash">
|
2015-10-25 12:05:52 -04:00
|
|
|
{this.shouldShowEmailConfirmation() ? [
|
2016-04-07 17:47:00 -04:00
|
|
|
<DropdownBanner key="confirmedEmail"
|
2015-10-22 17:19:31 -04:00
|
|
|
className="warning"
|
|
|
|
onRequestDismiss={this.handleDismiss.bind(this, 'confirmed_email')}>
|
2015-10-22 18:40:04 -04:00
|
|
|
<a href="#" onClick={this.showEmailConfirmationModal}>Confirm your email</a>
|
2015-10-23 19:02:00 -04:00
|
|
|
{' '}to enable sharing.{' '}
|
2015-10-22 17:19:31 -04:00
|
|
|
<a href="/info/faq/#accounts">Having trouble?</a>
|
2016-04-07 17:47:00 -04:00
|
|
|
</DropdownBanner>,
|
2015-10-22 18:40:04 -04:00
|
|
|
<Modal key="emailConfirmationModal"
|
2015-10-23 19:02:00 -04:00
|
|
|
isOpen={this.state.emailConfirmationModalOpen}
|
2015-10-22 18:40:04 -04:00
|
|
|
onRequestClose={this.hideEmailConfirmationModal}
|
2015-10-25 11:58:12 -04:00
|
|
|
style={{content: emailConfirmationStyle}}>
|
2015-10-25 12:06:34 -04:00
|
|
|
<iframe ref="emailConfirmationiFrame"
|
|
|
|
src="/accounts/email_resend_standalone/"
|
|
|
|
{...omit(emailConfirmationStyle, 'padding')} />
|
2015-10-22 18:40:04 -04:00
|
|
|
</Modal>
|
2015-10-22 17:19:31 -04:00
|
|
|
] : []}
|
2016-05-11 18:44:35 -04:00
|
|
|
<CNBanner />
|
2015-10-22 17:19:31 -04:00
|
|
|
<div key="inner" className="inner">
|
2016-06-01 16:14:58 -04:00
|
|
|
{this.props.session.status === sessionActions.Status.FETCHED ? (
|
2016-06-01 17:22:11 -04:00
|
|
|
this.props.session.session.user ? [
|
2016-05-31 16:37:42 -04:00
|
|
|
<div key="header" className="splash-header">
|
|
|
|
{this.shouldShowWelcome() ? [
|
|
|
|
<Welcome key="welcome"
|
|
|
|
onDismiss={this.handleDismiss.bind(this, 'welcome')}
|
|
|
|
messages={messages} />
|
|
|
|
] : [
|
|
|
|
<Activity key="activity" items={this.state.activity} />
|
|
|
|
]}
|
|
|
|
<News items={this.state.news} messages={messages} />
|
|
|
|
</div>
|
|
|
|
] : [
|
|
|
|
<Intro projectCount={this.state.projectCount} messages={messages} key="intro"/>
|
2016-06-01 10:49:59 -04:00
|
|
|
]) : []
|
2016-05-31 16:37:42 -04:00
|
|
|
}
|
2015-10-20 13:18:57 -04:00
|
|
|
|
2015-10-22 17:19:31 -04:00
|
|
|
{featured}
|
2015-10-20 13:18:57 -04:00
|
|
|
|
2015-10-22 17:19:31 -04:00
|
|
|
<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>
|
2015-10-28 08:57:05 -04:00
|
|
|
<div className="button-row">
|
|
|
|
<span>Refresh row data:</span>
|
|
|
|
<Button onClick={this.refreshHomepageCache}
|
|
|
|
className={homepageCacheState.status}
|
2015-10-30 09:14:49 -04:00
|
|
|
disabled={homepageCacheState.disabled}>
|
2015-10-28 08:57:05 -04:00
|
|
|
<span>{homepageCacheState.content}</span>
|
|
|
|
</Button>
|
|
|
|
</div>
|
2015-10-22 17:19:31 -04:00
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</dd>
|
|
|
|
</AdminPanel>
|
|
|
|
</div>
|
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
|
|
|
|
2016-03-18 11:51:22 -04:00
|
|
|
var mapStateToProps = function (state) {
|
|
|
|
return {
|
|
|
|
session: state.session
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
var ConnectedSplash = connect(mapStateToProps)(Splash);
|
|
|
|
|
|
|
|
render(<Page><ConnectedSplash /></Page>, document.getElementById('app'));
|