var injectIntl = require('react-intl').injectIntl; var omit = require('lodash.omit'); var React = require('react'); var render = require('../../lib/render.jsx'); var Api = require('../../mixins/api.jsx'); var Session = require('../../mixins/session.jsx'); var Activity = require('../../components/activity/activity.jsx'); var AdminPanel = require('../../components/adminpanel/adminpanel.jsx'); var Banner = require('../../components/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 Welcome = require('../../components/welcome/welcome.jsx'); require('./splash.scss'); var Splash = injectIntl(React.createClass({ type: 'Splash', mixins: [ Api, Session ], getInitialState: function () { return { projectCount: 'over 13 million', // gets the shared project count 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. refreshCacheStatus: 'notrequested' }; }, 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.setState({activity: []}); this.setState({news: []}); this.getProjectCount(); } if (this.shouldShowEmailConfirmation()) { window.addEventListener('message', this.onMessage); } else { window.removeEventListener('message', this.onMessage); } } }, componentDidMount: function () { this.getFeaturedGlobal(); if (this.state.session.user) { this.getActivity(); this.getFeaturedCustom(); this.getNews(); } else { this.getProjectCount(); } if (this.shouldShowEmailConfirmation()) window.addEventListener('message', this.onMessage); }, componentWillUnmount: function () { window.removeEventListener('message', this.onMessage); }, onMessage: function (e) { if (e.origin != window.location.origin) return; if (e.source != this.refs.emailConfirmationiFrame.contentWindow) return; if (e.data == 'resend-done') { this.hideEmailConfirmationModal(); } else { var data = JSON.parse(e.data); if (data['action'] === 'leave-page') { window.location.href = data['uri']; } } }, 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)); }, refreshHomepageCache: function () { this.api({ host: '', 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; }, showEmailConfirmationModal: function () { this.setState({emailConfirmationModalOpen: true}); }, hideEmailConfirmationModal: function () { this.setState({emailConfirmationModalOpen: false}); }, 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(); }); }, shouldShowWelcome: function () { if (!this.state.session.user || !this.state.session.flags.show_welcome) return false; return ( new Date(this.state.session.user.dateJoined) > new Date(new Date - 2*7*24*60*60*1000) // Two weeks ago ); }, shouldShowEmailConfirmation: function () { return ( this.state.session.user && this.state.session.flags.has_outstanding_email_confirmation && this.state.session.flags.confirm_email_banner); }, renderHomepageRows: function () { var formatMessage = this.props.intl.formatMessage; var rows = [ , ]; if (this.state.featuredGlobal.curator_top_projects && this.state.featuredGlobal.curator_top_projects.length > 4) { rows.push( ); } if (this.state.featuredGlobal.scratch_design_studio && this.state.featuredGlobal.scratch_design_studio.length > 4) { rows.push( ); } if (this.state.session.user && this.state.featuredGlobal.community_newest_projects && this.state.featuredGlobal.community_newest_projects.length > 0) { rows.push( ); } if (this.state.featuredCustom.custom_projects_by_following && this.state.featuredCustom.custom_projects_by_following.length > 0) { rows.push( ); } if (this.state.featuredCustom.custom_projects_loved_by_following && this.state.featuredCustom.custom_projects_loved_by_following.length > 0) { rows.push( ); } if (this.state.featuredCustom.custom_projects_in_studios_following && this.state.featuredCustom.custom_projects_in_studios_following.length > 0) { rows.push( ); } rows.push( , ); return rows; }, render: function () { var featured = this.renderHomepageRows(); var emailConfirmationStyle = {width: 500, height: 330, padding: 1}; var homepageCacheState = this.getHomepageRefreshStatus(); var formatMessage = this.props.intl.formatMessage; var formatHTMLMessage = this.props.intl.formatHTMLMessage; 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'}) }; return (
{this.shouldShowEmailConfirmation() ? [ Confirm your email {' '}to enable sharing.{' '} Having trouble? ,