diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index 43777946d..000000000
--- a/.babelrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "presets": ["es2015", "react"],
-}
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 000000000..9cadb556a
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,29 @@
+{
+ "parser": "babel-eslint",
+ "rules": {
+ "curly": [2, "multi-line"],
+ "eol-last": [2],
+ "indent": [2, 4],
+ "linebreak-style": [2, "unix"],
+ "max-len": [2, 120, 4, {"ignoreUrls": true}],
+ "no-trailing-spaces": [2, { "skipBlankLines": true }],
+ "no-unused-vars": [2, {"args": "after-used", "varsIgnorePattern": "^_"}],
+ "quotes": [2, "single"],
+ "semi": [2, "always"],
+ "space-before-function-paren": [2, "always"],
+ "strict": [2, "never"]
+ },
+ "env": {
+ "browser": true,
+ "es6": true,
+ "node": true
+ },
+ "globals": {
+ "formatMessage": true
+ },
+ "plugins": [
+ "react",
+ "json"
+ ],
+ "extends": "eslint:recommended"
+}
diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index 36ff570d9..000000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
- extends: ['scratch', 'scratch/node']
-};
diff --git a/.tx/config b/.tx/config
index d36892ba7..2e63e88f3 100644
--- a/.tx/config
+++ b/.tx/config
@@ -133,9 +133,3 @@ file_filter = localizations/conference-index/<lang>.json
source_file = src/views/conference/2018/index/l10n.json
source_lang = en
type = KEYVALUEJSON
-
-[scratch-website.preview-faq-l10njson]
-file_filter = localizations/preview-faq/<lang>.json
-source_file = src/views/preview-faq/l10n.json
-source_lang = en
-type = KEYVALUEJSON
\ No newline at end of file
diff --git a/Makefile b/Makefile
index abe7f3a72..65a57a3ac 100644
--- a/Makefile
+++ b/Makefile
@@ -55,7 +55,7 @@ test:
@make tap
lint:
- $(ESLINT) . --ext .js,.jsx
+ $(ESLINT) . --ext .js,.jsx,.json
$(SASSLINT) ./src/*.scss
$(SASSLINT) ./src/**/*.scss
diff --git a/bin/configure-fastly.js b/bin/configure-fastly.js
index a935b906e..edb7196ad 100644
--- a/bin/configure-fastly.js
+++ b/bin/configure-fastly.js
@@ -3,7 +3,7 @@ var defaults = require('lodash.defaults');
var fastlyConfig = require('./lib/fastly-config-methods');
const languages = require('../languages.json');
-var routeJson = require('../src/routes.json');
+var route_json = require('../src/routes.json');
const FASTLY_SERVICE_ID = process.env.FASTLY_SERVICE_ID || '';
const S3_BUCKET_NAME = process.env.S3_BUCKET_NAME || '';
@@ -15,10 +15,10 @@ var extraAppRoutes = [
// TODO: Should this be added for every route?
'/\\?',
// View html
- '/[^/]*.html$'
+ '/[^\/]*\.html$'
];
-var routes = routeJson.map(function (route) {
+var routes = route_json.map(function (route) {
return defaults({}, {pattern: fastlyConfig.expressPatternToRegex(route.pattern)}, route);
});
@@ -28,9 +28,9 @@ async.auto({
if (err) return cb(err);
// Validate latest version before continuing
if (response.active || response.locked) {
- fastly.cloneVersion(response.number, function (e, resp) {
- if (e) return cb('Failed to clone latest version: ' + e);
- cb(null, resp.number);
+ fastly.cloneVersion(response.number, function (err, response) {
+ if (err) return cb('Failed to clone latest version: ' + err);
+ cb(null, response.number);
});
} else {
cb(null, response.number);
@@ -46,11 +46,11 @@ async.auto({
var recvCondition = '' +
'if (' + notPassStatement + ') {\n' +
' set req.backend = F_s3;\n' +
- ' set req.http.host = "' + S3_BUCKET_NAME + '";\n' +
+ ' set req.http.host = \"' + S3_BUCKET_NAME + '\";\n' +
'} else {\n' +
' if (!req.http.Fastly-FF) {\n' +
' if (req.http.X-Forwarded-For) {\n' +
- ' set req.http.Fastly-Temp-XFF = req.http.X-Forwarded-For ", " client.ip;\n' +
+ ' set req.http.Fastly-Temp-XFF = req.http.X-Forwarded-For \", \" client.ip;\n' +
' } else {\n' +
' set req.http.Fastly-Temp-XFF = client.ip;\n' +
' }\n' +
@@ -171,19 +171,20 @@ async.auto({
if (err) return cb(err);
cb(null, headers);
});
- }]
-}, function (err, results) {
- if (err) throw new Error(err);
- if (process.env.FASTLY_ACTIVATE_CHANGES) {
- fastly.activateVersion(results.version, function (e, resp) {
- if (err) throw new Error(e);
- process.stdout.write('Successfully configured and activated version ' + resp.number + '\n');
- if (process.env.FASTLY_PURGE_ALL) {
- fastly.purgeAll(FASTLY_SERVICE_ID, function (error) {
- if (error) throw new Error(error);
- process.stdout.write('Purged all.\n');
- });
- }
- });
+ }]},
+ function (err, results) {
+ if (err) throw new Error(err);
+ if (process.env.FASTLY_ACTIVATE_CHANGES) {
+ fastly.activateVersion(results.version, function (err, response) {
+ if (err) throw new Error(err);
+ process.stdout.write('Successfully configured and activated version ' + response.number + '\n');
+ if (process.env.FASTLY_PURGE_ALL) {
+ fastly.purgeAll(FASTLY_SERVICE_ID, function (err) {
+ if (err) throw new Error(err);
+ process.stdout.write('Purged all.\n');
+ });
+ }
+ });
+ }
}
-});
+);
diff --git a/bin/lib/fastly-config-methods.js b/bin/lib/fastly-config-methods.js
index d6a8c973d..750b1893b 100644
--- a/bin/lib/fastly-config-methods.js
+++ b/bin/lib/fastly-config-methods.js
@@ -24,9 +24,9 @@ var FastlyConfigMethods = {
*/
getViewPaths: function (routes) {
return routes.reduce(function (paths, route) {
- var p = route.routeAlias || route.pattern;
- if (paths.indexOf(p) === -1) {
- paths.push(p);
+ var path = route.routeAlias || route.pattern;
+ if (paths.indexOf(path) === -1) {
+ paths.push(path);
}
return paths;
}, []);
@@ -39,7 +39,7 @@ var FastlyConfigMethods = {
* 2. /path/:arg([regex]) – :arg is removed, leaving just /path/([regex])
*/
expressPatternToRegex: function (pattern) {
- pattern = pattern.replace(/(:\w+)(\([^)]+\))/gi, '$2');
+ pattern = pattern.replace(/(:\w+)(\([^\)]+\))/gi, '$2');
return pattern.replace(/(:\w+)/gi, '.+?');
},
@@ -84,7 +84,7 @@ var FastlyConfigMethods = {
return 'redirects/' + route.pattern;
},
- /*
+ /**
* Returns custom vcl configuration as a string that sets the varnish
* Time to Live (TTL) for responses that come from s3.
*
diff --git a/bin/lib/fastly-extended.js b/bin/lib/fastly-extended.js
index 0e4467221..3ec9fd7e3 100644
--- a/bin/lib/fastly-extended.js
+++ b/bin/lib/fastly-extended.js
@@ -19,8 +19,8 @@ module.exports = function (apiKey, serviceId) {
*
* @return {string}
*/
- fastly.getFastlyAPIPrefix = function (servId, version) {
- return '/service/' + encodeURIComponent(servId) + '/version/' + version;
+ fastly.getFastlyAPIPrefix = function (serviceId, version) {
+ return '/service/' + encodeURIComponent(serviceId) + '/version/' + version;
};
/*
@@ -32,15 +32,15 @@ module.exports = function (apiKey, serviceId) {
if (!this.serviceId) {
return cb('Failed to get latest version. No serviceId configured');
}
- var url = '/service/' + encodeURIComponent(this.serviceId) + '/version';
+ var url = '/service/'+ encodeURIComponent(this.serviceId) +'/version';
this.request('GET', url, function (err, versions) {
if (err) {
return cb('Failed to fetch versions: ' + err);
}
- var latestVersion = versions.reduce(function (lateVersion, version) {
- if (!lateVersion) return version;
- if (version.number > lateVersion.number) return version;
- return lateVersion;
+ var latestVersion = versions.reduce(function (latestVersion, version) {
+ if (!latestVersion) return version;
+ if (version.number > latestVersion.number) return version;
+ return latestVersion;
});
return cb(null, latestVersion);
});
@@ -63,16 +63,16 @@ module.exports = function (apiKey, serviceId) {
var postUrl = this.getFastlyAPIPrefix(this.serviceId, version) + '/condition';
return this.request('PUT', putUrl, condition, function (err, response) {
if (err && err.statusCode === 404) {
- this.request('POST', postUrl, condition, function (e, resp) {
- if (e) {
- return cb('Failed while inserting condition "' + condition.statement + '": ' + e);
+ this.request('POST', postUrl, condition, function (err, response) {
+ if (err) {
+ return cb('Failed while inserting condition \"' + condition.statement + '\": ' + err);
}
- return cb(null, resp);
+ return cb(null, response);
});
return;
}
if (err) {
- return cb('Failed to update condition "' + condition.statement + '": ' + err);
+ return cb('Failed to update condition \"' + condition.statement + '\": ' + err);
}
return cb(null, response);
}.bind(this));
@@ -95,11 +95,11 @@ module.exports = function (apiKey, serviceId) {
var postUrl = this.getFastlyAPIPrefix(this.serviceId, version) + '/header';
return this.request('PUT', putUrl, header, function (err, response) {
if (err && err.statusCode === 404) {
- this.request('POST', postUrl, header, function (e, resp) {
- if (e) {
- return cb('Failed to insert header: ' + e);
+ this.request('POST', postUrl, header, function (err, response) {
+ if (err) {
+ return cb('Failed to insert header: ' + err);
}
- return cb(null, resp);
+ return cb(null, response);
});
return;
}
@@ -127,11 +127,11 @@ module.exports = function (apiKey, serviceId) {
var postUrl = this.getFastlyAPIPrefix(this.serviceId, version) + '/response_object';
return this.request('PUT', putUrl, responseObj, function (err, response) {
if (err && err.statusCode === 404) {
- this.request('POST', postUrl, responseObj, function (e, resp) {
- if (e) {
- return cb('Failed to insert response object: ' + e);
+ this.request('POST', postUrl, responseObj, function (err, response) {
+ if (err) {
+ return cb('Failed to insert response object: ' + err);
}
- return cb(null, resp);
+ return cb(null, response);
});
return;
}
@@ -166,7 +166,7 @@ module.exports = function (apiKey, serviceId) {
this.request('PUT', url, cb);
};
- /*
+ /**
* Upsert a custom vcl file. Attempts a PUT, and falls back
* to POST if not there already.
*
@@ -186,16 +186,16 @@ module.exports = function (apiKey, serviceId) {
return this.request('PUT', url, content, function (err, response) {
if (err && err.statusCode === 404) {
content.name = name;
- this.request('POST', postUrl, content, function (e, resp) {
- if (e) {
- return cb('Failed while adding custom vcl "' + name + '": ' + e);
+ this.request('POST', postUrl, content, function (err, response) {
+ if (err) {
+ return cb('Failed while adding custom vcl \"' + name + '\": ' + err);
}
- return cb(null, resp);
+ return cb(null, response);
});
return;
}
if (err) {
- return cb('Failed to update custom vcl "' + name + '": ' + err);
+ return cb('Failed to update custom vcl \"' + name + '\": ' + err);
}
return cb(null, response);
}.bind(this));
diff --git a/dev-server/handler.js b/dev-server/handler.js
index 339ceff5c..43c12857d 100644
--- a/dev-server/handler.js
+++ b/dev-server/handler.js
@@ -1,12 +1,10 @@
-/*
+/**
* Constructor
*/
-const Handler = function (route) {
+function Handler (route) {
// Handle redirects
if (route.redirect) {
- return (req, res) => {
- res.redirect(route.redirect);
- };
+ return (req, res) => { res.redirect(route.redirect); };
}
var url = '/' + route.name + '.html';
@@ -14,9 +12,9 @@ const Handler = function (route) {
req.url = url;
next();
};
-};
+}
-/*
+/**
* Export a new instance
*/
module.exports = function (route) {
diff --git a/package.json b/package.json
index 9e9ec7fa4..68fec9862 100644
--- a/package.json
+++ b/package.json
@@ -33,27 +33,24 @@
"devDependencies": {
"async": "1.5.2",
"autoprefixer": "6.3.6",
- "babel-cli": "6.26.0",
- "babel-core": "6.23.1",
- "babel-eslint": "8.0.2",
- "babel-loader": "7.1.0",
- "babel-preset-es2015": "6.22.0",
- "babel-preset-react": "6.22.0",
+ "babel-core": "6.10.4",
+ "babel-eslint": "5.0.4",
+ "babel-loader": "6.2.4",
+ "babel-preset-es2015": "6.9.0",
+ "babel-preset-react": "6.11.1",
"cheerio": "1.0.0-rc.2",
- "classnames": "2.2.5",
+ "classnames": "2.1.3",
"cookie": "0.2.2",
"copy-webpack-plugin": "0.2.0",
- "create-react-class": "15.6.2",
"css-loader": "0.23.1",
- "eslint": "4.7.1",
- "eslint-config-scratch": "5.0.0",
+ "eslint": "1.3.1",
"eslint-plugin-json": "1.2.0",
- "eslint-plugin-react": "7.4.0",
+ "eslint-plugin-react": "3.3.1",
"exenv": "1.2.0",
"fastly": "1.2.1",
"file-loader": "0.8.4",
- "formsy-react": "0.19.5",
- "formsy-react-components": "0.11.1",
+ "formsy-react": "0.18.0",
+ "formsy-react-components": "0.7.1",
"git-bundle-sha": "0.0.2",
"glob": "5.0.15",
"google-libphonenumber": "1.0.21",
@@ -62,7 +59,6 @@
"json-loader": "0.5.2",
"json2po-stream": "1.0.3",
"keymirror": "0.1.1",
- "lodash.bindall": "4.4.0",
"lodash.clone": "3.0.3",
"lodash.defaultsdeep": "3.10.0",
"lodash.isarray": "3.0.4",
@@ -74,22 +70,21 @@
"node-sass": "4.6.1",
"pako": "0.2.8",
"po2icu": "0.0.2",
- "postcss-loader": "2.0.10",
- "prop-types": "15.6.0",
+ "postcss-loader": "0.8.2",
"raven-js": "3.0.4",
- "react": "15.5.4",
- "react-dom": "15.5.4",
+ "react": "15.1.0",
+ "react-dom": "15.0.1",
"react-intl": "2.1.2",
- "react-modal": "3.1.11",
- "react-onclickoutside": "6.7.1",
+ "react-modal": "1.5.2",
+ "react-onclickoutside": "4.1.1",
"react-redux": "4.4.5",
- "react-responsive": "3.0.0",
+ "react-responsive": "1.1.4",
"react-slick": "0.12.2",
- "react-telephone-input": "3.8.6",
+ "react-telephone-input": "3.4.5",
"redux": "3.5.2",
"redux-thunk": "2.0.1",
"sass-lint": "1.5.1",
- "sass-loader": "6.0.6",
+ "sass-loader": "2.0.1",
"scratchr2_translations": "git://github.com/LLK/scratchr2_translations.git#master",
"slick-carousel": "1.5.8",
"source-map-support": "0.3.2",
@@ -97,8 +92,8 @@
"tap": "7.1.2",
"url-loader": "0.5.6",
"watch": "0.16.0",
- "webpack": "2.7.0",
- "webpack-dev-middleware": "2.0.4",
+ "webpack": "1.12.14",
+ "webpack-dev-middleware": "1.2.0",
"xhr": "2.2.0"
},
"nyc": {
diff --git a/src/.eslintrc.js b/src/.eslintrc.js
deleted file mode 100644
index 0abd74d67..000000000
--- a/src/.eslintrc.js
+++ /dev/null
@@ -1,10 +0,0 @@
-module.exports = {
- root: true,
- extends: ['scratch', 'scratch/es6', 'scratch/react'],
- env: {
- browser: true
- },
- globals: {
- process: true
- }
-};
diff --git a/src/components/accordion/accordion.jsx b/src/components/accordion/accordion.jsx
index 431705395..e6e921a7b 100644
--- a/src/components/accordion/accordion.jsx
+++ b/src/components/accordion/accordion.jsx
@@ -1,35 +1,33 @@
-const bindAll = require('lodash.bindall');
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var React = require('react');
require('./accordion.scss');
-class Accordion extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleClick'
- ]);
- this.state = {
+var Accordion = React.createClass({
+ type: 'Accordion',
+ getDefaultProps: function () {
+ return {
+ titleAs: 'div',
+ contentAs: 'div'
+ };
+ },
+ getInitialState: function () {
+ return {
isOpen: false
};
- }
- handleClick (e) {
- e.preventDefault();
+ },
+ toggleContent: function () {
this.setState({isOpen: !this.state.isOpen});
- }
- render () {
- const classes = classNames({
- content: true,
- open: this.state.isOpen
+ },
+ render: function () {
+ var classes = classNames({
+ 'content': true,
+ 'open': this.state.isOpen
});
return (
<div className="accordion">
- <this.props.titleAs
- className="title"
- onClick={this.handleClick}
- >
+ <this.props.titleAs className="title"
+ onClick={this.toggleContent}>
{this.props.title}
</this.props.titleAs>
<this.props.contentAs className={classes}>
@@ -38,16 +36,6 @@ class Accordion extends React.Component {
</div>
);
}
-}
-
-Accordion.propTypes = {
- content: PropTypes.node,
- title: PropTypes.string
-};
-
-Accordion.defaultProps = {
- contentAs: 'div',
- titleAs: 'div'
-};
+});
module.exports = Accordion;
diff --git a/src/components/adminpanel/adminpanel.jsx b/src/components/adminpanel/adminpanel.jsx
index 4d9ac9e79..222258176 100644
--- a/src/components/adminpanel/adminpanel.jsx
+++ b/src/components/adminpanel/adminpanel.jsx
@@ -1,39 +1,37 @@
-const bindAll = require('lodash.bindall');
-const connect = require('react-redux').connect;
-const PropTypes = require('prop-types');
-const React = require('react');
+var React = require('react');
+var connect = require('react-redux').connect;
-const Button = require('../forms/button.jsx');
+var Button = require('../forms/button.jsx');
require('./adminpanel.scss');
-class AdminPanel extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleToggleVisibility'
- ]);
- this.state = {
+var AdminPanel = React.createClass({
+ type: 'AdminPanel',
+ getInitialState: function () {
+ return {
showPanel: false
};
- }
- handleToggleVisibility (e) {
+ },
+ handleToggleVisibility: function (e) {
e.preventDefault();
this.setState({showPanel: !this.state.showPanel});
- }
- render () {
- if (!this.props.isAdmin) return false;
+ },
+ render: function () {
+ // make sure user is present before checking if they're an admin. Don't show anything if user not an admin.
+ var showAdmin = false;
+ if (this.props.session.session.user) {
+ showAdmin = this.props.session.session.permissions.admin;
+ }
+
+ if (!showAdmin) return false;
if (this.state.showPanel) {
return (
- <div
- className="visible"
- id="admin-panel"
- >
+ <div id="admin-panel" className="visible">
<span
className="toggle"
- onClick={this.handleToggleVisibility}
- >
+ onClick={this.handleToggleVisibility}>
+
x
</span>
<div className="admin-header">
@@ -46,15 +44,8 @@ class AdminPanel extends React.Component {
<dd>
<ul className="cache-list">
<li>
- <form
- action="/scratch_admin/page/clear-anon-cache/"
- method="post"
- >
- <input
- name="path"
- type="hidden"
- value="/"
- />
+ <form method="post" action="/scratch_admin/page/clear-anon-cache/">
+ <input type="hidden" name="path" value="/" />
<div className="button-row">
<span>For anonymous users:</span>
<Button type="submit">
@@ -62,39 +53,34 @@ class AdminPanel extends React.Component {
</Button>
</div>
</form>
- </li>
+ </li>
</ul>
</dd>
</dl>
</div>
</div>
);
+ } else {
+ return (
+ <div id="admin-panel" className="hidden">
+ <span
+ className="toggle"
+ onClick={this.handleToggleVisibility}>
+
+ >
+ </span>
+ </div>
+ );
}
- return (
- <div
- className="hidden"
- id="admin-panel"
- >
- <span
- className="toggle"
- onClick={this.handleToggleVisibility}
- >
- >
- </span>
- </div>
- );
}
-}
-
-AdminPanel.propTypes = {
- children: PropTypes.node,
- isAdmin: PropTypes.bool
-};
-
-const mapStateToProps = state => ({
- isAdmin: state.permissions.admin
});
-const ConnectedAdminPanel = connect(mapStateToProps)(AdminPanel);
+var mapStateToProps = function (state) {
+ return {
+ session: state.session
+ };
+};
+
+var ConnectedAdminPanel = connect(mapStateToProps)(AdminPanel);
module.exports = ConnectedAdminPanel;
diff --git a/src/components/avatar/avatar.jsx b/src/components/avatar/avatar.jsx
index 566b97199..5830e5ffb 100644
--- a/src/components/avatar/avatar.jsx
+++ b/src/components/avatar/avatar.jsx
@@ -1,22 +1,23 @@
-const classNames = require('classnames');
-const omit = require('lodash.omit');
-const PropTypes = require('prop-types');
-const React = require('react');
+var React = require('react');
+var classNames = require('classnames');
-const Avatar = props => (
- <img
- className={classNames('avatar', props.className)}
- {...omit(props, ['className'])}
- />
-);
-
-Avatar.propTypes = {
- className: PropTypes.string,
- src: PropTypes.string
-};
-
-Avatar.defaultProps = {
- src: '//cdn2.scratch.mit.edu/get_image/user/2584924_24x24.png?v=1438702210.96'
-};
+var Avatar = React.createClass({
+ type: 'Avatar',
+ propTypes: {
+ src: React.PropTypes.string
+ },
+ getDefaultProps: function () {
+ return {
+ src: '//cdn2.scratch.mit.edu/get_image/user/2584924_24x24.png?v=1438702210.96'
+ };
+ },
+ render: function () {
+ var classes = classNames(
+ 'avatar',
+ this.props.className
+ );
+ return <img {... this.props} className={classes} />;
+ }
+});
module.exports = Avatar;
diff --git a/src/components/box/box.jsx b/src/components/box/box.jsx
index 832e27ea4..543bc15a2 100644
--- a/src/components/box/box.jsx
+++ b/src/components/box/box.jsx
@@ -1,38 +1,40 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var React = require('react');
require('./box.scss');
-const Box = props => (
- <div className={classNames('box', props.className)}>
- <div className="box-header">
- <h4>{props.title}</h4>
- <h5>{props.subtitle}</h5>
- <p>
- <a
- href={props.moreHref}
- {...props.moreProps}
- >
- {props.moreTitle}
- </a>
- </p>
- </div>
+var Box = React.createClass({
+ type: 'Box',
+ propTypes: {
+ title: React.PropTypes.string.isRequired,
+ subtitle: React.PropTypes.string,
+ moreTitle: React.PropTypes.string,
+ moreHref: React.PropTypes.string,
+ moreProps: React.PropTypes.object
+ },
+ render: function () {
+ var classes = classNames(
+ 'box',
+ this.props.className
+ );
+ return (
+ <div className={classes}>
+ <div className="box-header">
+ <h4>{this.props.title}</h4>
+ <h5>{this.props.subtitle}</h5>
+ <p>
+ <a href={this.props.moreHref} {...this.props.moreProps}>
+ {this.props.moreTitle}
+ </a>
+ </p>
+ </div>
- <div className="box-content">
- {props.children}
- </div>
- </div>
-);
-
-Box.propTypes = {
- children: PropTypes.node,
- className: PropTypes.string,
- moreHref: PropTypes.string,
- moreProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
- moreTitle: PropTypes.string,
- subtitle: PropTypes.string,
- title: PropTypes.string.isRequired
-};
+ <div className="box-content">
+ {this.props.children}
+ </div>
+ </div>
+ );
+ }
+});
module.exports = Box;
diff --git a/src/components/card/card.jsx b/src/components/card/card.jsx
index 37f6dc13c..5ac22fae1 100644
--- a/src/components/card/card.jsx
+++ b/src/components/card/card.jsx
@@ -1,18 +1,17 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var React = require('react');
require('./card.scss');
-const Card = props => (
- <div className={classNames(['card', props.className])}>
- {props.children}
- </div>
-);
-
-Card.propTypes = {
- children: PropTypes.node,
- className: PropTypes.string
-};
+var Card = React.createClass({
+ displayName: 'Card',
+ render: function () {
+ return (
+ <div className={classNames(['card', this.props.className])}>
+ {this.props.children}
+ </div>
+ );
+ }
+});
module.exports = Card;
diff --git a/src/components/carousel/carousel.jsx b/src/components/carousel/carousel.jsx
index 5438d414f..46e01fa1a 100644
--- a/src/components/carousel/carousel.jsx
+++ b/src/components/carousel/carousel.jsx
@@ -1,115 +1,95 @@
-const classNames = require('classnames');
-const defaults = require('lodash.defaults');
-const PropTypes = require('prop-types');
-const React = require('react');
-const Slider = require('react-slick');
+var classNames = require('classnames');
+var defaults = require('lodash.defaults');
+var React = require('react');
+var Slider = require('react-slick');
-const Thumbnail = require('../thumbnail/thumbnail.jsx');
+var Thumbnail = require('../thumbnail/thumbnail.jsx');
-const frameless = require('../../lib/frameless.js');
+var frameless = require('../../lib/frameless.js');
require('slick-carousel/slick/slick.scss');
require('slick-carousel/slick/slick-theme.scss');
require('./carousel.scss');
-const Carousel = props => {
- defaults(props.settings, {
- centerMode: false,
- dots: false,
- infinite: false,
- lazyLoad: true,
- slidesToShow: 5,
- slidesToScroll: 5,
- variableWidth: true,
- responsive: [
- {
- breakpoint: frameless.mobile,
- settings: {
+/**
+ * Displays content in horizontal scrolling box. Example usage: splash page rows.
+ */
+var Carousel = React.createClass({
+ type: 'Carousel',
+ propTypes: {
+ items: React.PropTypes.array
+ },
+ getDefaultProps: function () {
+ return {
+ items: require('./carousel.json'),
+ showRemixes: false,
+ showLoves: false,
+ type: 'project'
+ };
+ },
+ render: function () {
+ var settings = this.props.settings || {};
+ defaults(settings, {
+ centerMode: false,
+ dots: false,
+ infinite: false,
+ lazyLoad: true,
+ slidesToShow: 5,
+ slidesToScroll: 5,
+ variableWidth: true,
+ responsive: [
+ {breakpoint: frameless.mobile, settings: {
arrows: true,
slidesToScroll: 1,
slidesToShow: 1,
centerMode: true
- }
- },
- {
- breakpoint: frameless.tablet,
- settings: {
+ }},
+ {breakpoint: frameless.tablet, settings: {
slidesToScroll: 2,
slidesToShow: 2
- }
- },
- {
- breakpoint: frameless.desktop,
- settings: {
+ }},
+ {breakpoint: frameless.desktop, settings: {
slidesToScroll: 4,
slidesToShow: 4
- }
- }
- ]
- });
- const arrows = props.items.length > props.settings.slidesToShow;
- return (
- <Slider
- arrows={arrows}
- className={classNames('carousel', props.className)}
- {... props.settings}
- >
- {props.items.map(item => {
- let href = '';
- switch (props.type) {
- case 'gallery':
- href = `/studios/${item.id}/`;
- break;
- case 'project':
- href = `/projects/${item.id}/`;
- break;
- default:
- href = `/${item.type}/${item.id}/`;
- }
+ }}
+ ]
+ });
+ var arrows = this.props.items.length > settings.slidesToShow;
+ var classes = classNames(
+ 'carousel',
+ this.props.className
+ );
+ return (
+ <Slider className={classes} arrows={arrows} {... settings}>
+ {this.props.items.map(function (item) {
+ var href = '';
+ switch (this.props.type) {
+ case 'gallery':
+ href = '/studios/' + item.id + '/';
+ break;
+ case 'project':
+ href = '/projects/' + item.id + '/';
+ break;
+ default:
+ href = '/' + item.type + '/' + item.id + '/';
+ }
- return (
- <Thumbnail
- creator={item.author.username}
- href={href}
- key={[props.type, item.id].join('.')}
- loves={item.stats.loves}
- remixes={item.stats.remixes}
- showLoves={props.showLoves}
- showRemixes={props.showRemixes}
- src={item.image}
- title={item.title}
- type={props.type}
- />
- );
- })}
- </Slider>
- );
-};
-
-Carousel.propTypes = {
- className: PropTypes.string,
- items: PropTypes.arrayOf(PropTypes.any),
- settings: PropTypes.shape({
- centerMode: PropTypes.bool,
- dots: PropTypes.bool,
- infinite: PropTypes.bool,
- lazyLoad: PropTypes.bool,
- slidesToShow: PropTypes.number,
- slidesToScroll: PropTypes.number,
- variableWidth: PropTypes.bool,
- responsive: PropTypes.array
- }),
- showLoves: PropTypes.bool,
- showRemixes: PropTypes.bool,
- type: PropTypes.string
-};
-
-Carousel.defaultProps = {
- items: require('./carousel.json'),
- settings: {},
- showRemixes: false,
- showLoves: false,
- type: 'project'
-};
+ return (
+ <Thumbnail key={[this.key, item.id].join('.')}
+ showLoves={this.props.showLoves}
+ showRemixes={this.props.showRemixes}
+ type={this.props.type}
+ href={href}
+ title={item.title}
+ src={item.image}
+ creator={item.author.username}
+ remixes={item.stats.remixes}
+ loves={item.stats.loves} />
+ );
+ }.bind(this))}
+ </Slider>
+ );
+ }
+});
module.exports = Carousel;
diff --git a/src/components/carousel/legacy-carousel.jsx b/src/components/carousel/legacy-carousel.jsx
index d5ab1dbf8..36efb5cbf 100644
--- a/src/components/carousel/legacy-carousel.jsx
+++ b/src/components/carousel/legacy-carousel.jsx
@@ -1,118 +1,97 @@
// This component handles json returned via proxy from a django server,
// or directly from a django server, and the model structure that system
// has.
-const classNames = require('classnames');
-const defaults = require('lodash.defaults');
-const PropTypes = require('prop-types');
-const React = require('react');
-const Slider = require('react-slick');
+var classNames = require('classnames');
+var defaults = require('lodash.defaults');
+var React = require('react');
+var Slider = require('react-slick');
-const Thumbnail = require('../thumbnail/thumbnail.jsx');
+var Thumbnail = require('../thumbnail/thumbnail.jsx');
-const frameless = require('../../lib/frameless.js');
+var frameless = require('../../lib/frameless.js');
require('slick-carousel/slick/slick.scss');
require('slick-carousel/slick/slick-theme.scss');
require('./carousel.scss');
-const Carousel = props => {
- defaults(props.settings, {
- centerMode: false,
- dots: false,
- infinite: false,
- lazyLoad: true,
- slidesToShow: 5,
- slidesToScroll: 5,
- variableWidth: true,
- responsive: [
- {
- breakpoint: frameless.mobile,
- settings: {
+/**
+ * Displays content in horizontal scrolling box. Example usage: splash page rows.
+ */
+var LegacyCarousel = React.createClass({
+ type: 'LegacyCarousel',
+ propTypes: {
+ items: React.PropTypes.array
+ },
+ getDefaultProps: function () {
+ return {
+ items: require('./carousel.json'),
+ showRemixes: false,
+ showLoves: false
+ };
+ },
+ render: function () {
+ var settings = this.props.settings || {};
+ defaults(settings, {
+ centerMode: false,
+ dots: false,
+ infinite: false,
+ lazyLoad: true,
+ slidesToShow: 5,
+ slidesToScroll: 5,
+ variableWidth: true,
+ responsive: [
+ {breakpoint: frameless.mobile, settings: {
arrows: true,
slidesToScroll: 1,
slidesToShow: 1,
centerMode: true
- }
- },
- {
- breakpoint: frameless.tablet,
- settings: {
+ }},
+ {breakpoint: frameless.tablet, settings: {
slidesToScroll: 2,
slidesToShow: 2
- }
- },
- {
- breakpoint: frameless.desktop,
- settings: {
+ }},
+ {breakpoint: frameless.desktop, settings: {
slidesToScroll: 4,
slidesToShow: 4
- }
- }
- ]
- });
- const arrows = props.items.length > props.settings.slidesToShow;
- return (
- <Slider
- arrows={arrows}
- className={classNames('carousel', props.className)}
- {... props.settings}
- >
- {props.items.map(item => {
- let href = '';
- switch (item.type) {
- case 'gallery':
- href = `/studios/${item.id}/`;
- break;
- case 'project':
- href = `/projects/${item.id}/`;
- break;
- default:
- href = `/${item.type}/${item.id}/`;
- }
+ }}
+ ]
+ });
+ var arrows = this.props.items.length > settings.slidesToShow;
+ var classes = classNames(
+ 'carousel',
+ this.props.className
+ );
+ return (
+ <Slider className={classes} arrows={arrows} {... settings}>
+ {this.props.items.map(function (item) {
+ var href = '';
+ switch (item.type) {
+ case 'gallery':
+ href = '/studios/' + item.id + '/';
+ break;
+ case 'project':
+ href = '/projects/' + item.id + '/';
+ break;
+ default:
+ href = '/' + item.type + '/' + item.id + '/';
+ }
- return (
- <Thumbnail
- creator={item.creator}
- href={href}
- key={[props.type, item.id].join('.')}
- loves={item.love_count}
- remixes={item.remixers_count}
- showLoves={props.showLoves}
- showRemixes={props.showRemixes}
- src={item.thumbnail_url}
- title={item.title}
- type={item.type}
- />
- );
- })}
- </Slider>
- );
-};
+ return (
+ <Thumbnail key={[this.key, item.id].join('.')}
+ showLoves={this.props.showLoves}
+ showRemixes={this.props.showRemixes}
+ type={item.type}
+ href={href}
+ title={item.title}
+ src={item.thumbnail_url}
+ creator={item.creator}
+ remixes={item.remixers_count}
+ loves={item.love_count} />
+ );
+ }.bind(this))}
+ </Slider>
+ );
+ }
+});
-Carousel.propTypes = {
- className: PropTypes.string,
- items: PropTypes.arrayOf(PropTypes.any),
- settings: PropTypes.shape({
- centerMode: PropTypes.bool,
- dots: PropTypes.bool,
- infinite: PropTypes.bool,
- lazyLoad: PropTypes.bool,
- slidesToShow: PropTypes.number,
- slidesToScroll: PropTypes.number,
- variableWidth: PropTypes.bool,
- responsive: PropTypes.array
- }),
- showLoves: PropTypes.bool,
- showRemixes: PropTypes.bool,
- type: PropTypes.string
-};
-
-Carousel.defaultProps = {
- items: require('./carousel.json'),
- settings: {},
- showRemixes: false,
- showLoves: false,
- type: 'project'
-};
-
-module.exports = Carousel;
+module.exports = LegacyCarousel;
diff --git a/src/components/comment/comment.jsx b/src/components/comment/comment.jsx
index 5edaeb51d..4a324799a 100644
--- a/src/components/comment/comment.jsx
+++ b/src/components/comment/comment.jsx
@@ -1,33 +1,34 @@
-const classNames = require('classnames');
-const FormattedRelative = require('react-intl').FormattedRelative;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var FormattedRelative = require('react-intl').FormattedRelative;
+var React = require('react');
-const EmojiText = require('../emoji-text/emoji-text.jsx');
+var EmojiText = require('../emoji-text/emoji-text.jsx');
require('./comment.scss');
-const CommentText = props => (
- <div className={classNames('comment-text', props.className)}>
- <EmojiText
- className="mod-comment"
- text={props.comment}
- />
- {typeof props.datetimeCreated === 'undefined' ? [] : [
- <p
- className="comment-text-timestamp"
- key="comment-text-timestamp"
- >
- <FormattedRelative value={new Date(props.datetimeCreated)} />
- </p>
- ]}
- </div>
-);
-
-CommentText.propTypes = {
- className: PropTypes.string,
- comment: PropTypes.string.isRequired,
- datetimeCreated: PropTypes.string
-};
+var CommentText = React.createClass({
+ type: 'CommentText',
+ propTypes: {
+ comment: React.PropTypes.string.isRequired,
+ datetimeCreated: React.PropTypes.string,
+ className: React.PropTypes.string
+ },
+ render: function () {
+ var classes = classNames(
+ 'comment-text',
+ this.props.class
+ );
+ return (
+ <div className={classes}>
+ <EmojiText className="mod-comment" text={this.props.comment} />
+ {typeof this.props.datetimeCreated !== 'undefined' ? [
+ <p className="comment-text-timestamp">
+ <FormattedRelative value={new Date(this.props.datetimeCreated)} />
+ </p>
+ ] : []}
+ </div>
+ );
+ }
+});
module.exports = CommentText;
diff --git a/src/components/deck/deck.jsx b/src/components/deck/deck.jsx
index 7d150a7e8..5d929c68a 100644
--- a/src/components/deck/deck.jsx
+++ b/src/components/deck/deck.jsx
@@ -1,29 +1,22 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var React = require('react');
require('./deck.scss');
-const Deck = props => (
- <div className={classNames(['deck', props.className])}>
- <div className="inner">
- <a
- aria-label="Scratch"
- href="/"
- >
- <img
- className="logo"
- src="/images/logo_sm.png"
- />
- </a>
- {props.children}
- </div>
- </div>
-);
-
-Deck.propTypes = {
- children: PropTypes.node,
- className: PropTypes.string
-};
+var Deck = React.createClass({
+ displayName: 'Deck',
+ render: function () {
+ return (
+ <div className={classNames(['deck', this.props.className])}>
+ <div className="inner">
+ <a href="/" aria-label="Scratch">
+ <img className="logo" src="/images/logo_sm.png" />
+ </a>
+ {this.props.children}
+ </div>
+ </div>
+ );
+ }
+});
module.exports = Deck;
diff --git a/src/components/dropdown-banner/banner.jsx b/src/components/dropdown-banner/banner.jsx
index fa912f49e..e9808228e 100644
--- a/src/components/dropdown-banner/banner.jsx
+++ b/src/components/dropdown-banner/banner.jsx
@@ -1,29 +1,33 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var React = require('react');
require('./banner.scss');
-const Banner = props => (
- <div className={classNames('banner', props.className)}>
- <div className="inner">
- {props.children}
- {props.onRequestDismiss ? [
- <a
- className="close"
- href="#"
- key="close"
- onClick={props.onRequestDismiss}
- >x</a>
- ] : []}
- </div>
- </div>
-);
-
-Banner.propTypes = {
- children: PropTypes.node,
- className: PropTypes.string,
- onRequestDismiss: PropTypes.func
-};
+/**
+ * Container for messages displayed below the nav bar that can be dismissed
+ * (See: email not confirmed banner)
+ */
+var Banner = React.createClass({
+ type: 'Banner',
+ propTypes: {
+ onRequestDismiss: React.PropTypes.func
+ },
+ render: function () {
+ var classes = classNames(
+ 'banner',
+ this.props.className
+ );
+ return (
+ <div className={classes}>
+ <div className="inner">
+ {this.props.children}
+ {this.props.onRequestDismiss ? [
+ <a className="close" key="close" href="#" onClick={this.props.onRequestDismiss}>x</a>
+ ] : []}
+ </div>
+ </div>
+ );
+ }
+});
module.exports = Banner;
diff --git a/src/components/dropdown/dropdown.jsx b/src/components/dropdown/dropdown.jsx
index 095194856..83990264b 100644
--- a/src/components/dropdown/dropdown.jsx
+++ b/src/components/dropdown/dropdown.jsx
@@ -1,46 +1,40 @@
-const bindAll = require('lodash.bindall');
-const classNames = require('classnames');
-const onClickOutside = require('react-onclickoutside').default;
-const PropTypes = require('prop-types');
-const React = require('react');
+var React = require('react');
+var classNames = require('classnames');
require('./dropdown.scss');
-class Dropdown extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleClickOutside'
- ]);
- }
- handleClickOutside () {
+var Dropdown = React.createClass({
+ type: 'Dropdown',
+ mixins: [
+ require('react-onclickoutside')
+ ],
+ propTypes: {
+ onRequestClose: React.PropTypes.func,
+ isOpen: React.PropTypes.bool
+ },
+ getDefaultProps: function () {
+ return {
+ as: 'div',
+ isOpen: false
+ };
+ },
+ handleClickOutside: function () {
if (this.props.isOpen) {
this.props.onRequestClose();
}
- }
- render () {
+ },
+ render: function () {
+ var classes = classNames(
+ 'dropdown',
+ this.props.className,
+ {open: this.props.isOpen}
+ );
return (
- <this.props.as
- className={classNames('dropdown', this.props.className, {
- open: this.props.isOpen
- })}
- >
+ <this.props.as className={classes}>
{this.props.children}
</this.props.as>
);
}
-}
+});
-Dropdown.propTypes = {
- children: PropTypes.node,
- className: PropTypes.string,
- isOpen: PropTypes.bool,
- onRequestClose: PropTypes.func.isRequired
-};
-
-Dropdown.defaultProps = {
- as: 'div',
- isOpen: false
-};
-
-module.exports = onClickOutside(Dropdown);
+module.exports = Dropdown;
diff --git a/src/components/dropdown/dropdown.scss b/src/components/dropdown/dropdown.scss
index 6aea2f067..66af291ef 100644
--- a/src/components/dropdown/dropdown.scss
+++ b/src/components/dropdown/dropdown.scss
@@ -24,12 +24,8 @@
}
a {
- &:link,
- &:visited,
- &:active {
- background-color: transparent;
- color: $type-white;
- }
+ background-color: transparent;
+ color: $type-white;
}
input {
diff --git a/src/components/emoji-text/emoji-text.jsx b/src/components/emoji-text/emoji-text.jsx
index ee4c00a52..c6f382260 100644
--- a/src/components/emoji-text/emoji-text.jsx
+++ b/src/components/emoji-text/emoji-text.jsx
@@ -1,25 +1,33 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var React = require('react');
require('./emoji-text.scss');
-const EmojiText = props => (
- <props.as
- className={classNames('emoji-text', props.className)}
- dangerouslySetInnerHTML={{ // eslint-disable-line react/no-danger
- __html: props.text
- }}
- />
-);
-
-EmojiText.propTypes = {
- className: PropTypes.string,
- text: PropTypes.string.isRequired
-};
-
-EmojiText.defaultProps = {
- as: 'p'
-};
+var EmojiText = React.createClass({
+ type: 'EmojiText',
+ propTyes: {
+ text: React.PropTypes.string.isRequired,
+ className: React.PropTypes.string
+ },
+ getDefaultProps: function () {
+ return {
+ as: 'p'
+ };
+ },
+ render: function () {
+ var classes = classNames(
+ 'emoji-text',
+ this.props.className
+ );
+ return (
+ <this.props.as
+ className={classes}
+ dangerouslySetInnerHTML={{
+ __html: this.props.text
+ }}
+ />
+ );
+ }
+});
module.exports = EmojiText;
diff --git a/src/components/flex-row/flex-row.jsx b/src/components/flex-row/flex-row.jsx
index 4dc8582c6..4a2deb36e 100644
--- a/src/components/flex-row/flex-row.jsx
+++ b/src/components/flex-row/flex-row.jsx
@@ -1,22 +1,26 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var React = require('react');
require('./flex-row.scss');
-const FlexRow = props => (
- <props.as className={classNames('flex-row', props.className)}>
- {props.children}
- </props.as>
-);
-
-FlexRow.propTypes = {
- children: PropTypes.node,
- className: PropTypes.string
-};
-
-FlexRow.defaultProps = {
- as: 'div'
-};
+var FlexRow = React.createClass({
+ type: 'FlexRow',
+ getDefaultProps: function () {
+ return {
+ as: 'div'
+ };
+ },
+ render: function () {
+ var classes = classNames(
+ 'flex-row',
+ this.props.className
+ );
+ return (
+ <this.props.as className={classes}>
+ {this.props.children}
+ </this.props.as>
+ );
+ }
+});
module.exports = FlexRow;
diff --git a/src/components/footer/conference/2016/footer.jsx b/src/components/footer/conference/2016/footer.jsx
index 76207f6af..b342e59fd 100644
--- a/src/components/footer/conference/2016/footer.jsx
+++ b/src/components/footer/conference/2016/footer.jsx
@@ -1,152 +1,125 @@
-const React = require('react');
+var React = require('react');
-const FlexRow = require('../../../flex-row/flex-row.jsx');
-const FooterBox = require('../../container/footer.jsx');
+var FlexRow = require('../../../flex-row/flex-row.jsx');
+var FooterBox = require('../../container/footer.jsx');
require('../footer.scss');
-const ConferenceFooter = () => (
- <FooterBox>
- <div className="collaborators">
- <h4>Sponsors</h4>
- <FlexRow as="ul">
- <li className="odl">
- <a href="https://odl.mit.edu/">
- <img
- alt="MIT Office of Digital Learning"
- src="/images/conference/footer/mit-odl.png"
- />
- </a>
- </li>
- <li className="intel">
- <a href="http://www.intel.com/content/www/us/en/homepage.html">
- <img
- alt="Intel"
- src="/images/conference/footer/intel.png"
- />
- </a>
- </li>
- <li className="lego">
- <a href="http://www.legofoundation.com/">
- <img
- alt="LEGO Foundation"
- src="/images/conference/footer/lego-foundation.png"
- />
- </a>
- </li>
- <li className="google">
- <a href="http://www.google.com/">
- <img
- alt="Google"
- src="/images/conference/footer/google.png"
- />
- </a>
- </li>
- <li className="siegel">
- <a href="http://www.siegelendowment.org/">
- <img
- alt="Siegel Family Endowment"
- src="/images/conference/footer/siegel-endowment.png"
- />
- </a>
- </li>
- <li className="nostarch">
- <a href="https://www.nostarch.com/">
- <img
- alt="No Starch Press"
- src="/images/conference/footer/no-starch.png"
- />
- </a>
- </li>
- <li className="scratchfoundation">
- <a href="http://www.scratchfoundation.org/">
- <img
- alt="Scratch Foundation"
- src="/images/conference/footer/scratch-foundation.png"
- />
- </a>
- </li>
- </FlexRow>
- </div>
- <FlexRow className="scratch-links">
- <div className="family">
- <h4>Scratch Family</h4>
- <FlexRow>
- <FlexRow
- as="ul"
- className="column"
- >
- <li>
- <a href="https://scratch.mit.edu">Scratch</a>
- </li>
- <li>
- <a href="http://www.scratchjr.org/">ScratchJr</a>
- </li>
- </FlexRow>
- <FlexRow
- as="ul"
- className="column"
- >
- <li>
- <a href="http://www.scratchfoundation.org/">Scratch Foundation</a>
- </li>
- <li>
- <a href="http://scratched.gse.harvard.edu/">ScratchEd</a>
- </li>
- </FlexRow>
- <FlexRow
- as="ul"
- className="column"
- >
- <li>
- <a href="http://day.scratch.mit.edu">Scratch Day</a>
- </li>
- </FlexRow>
- </FlexRow>
- <p className="legal">
- Scratch is a project of the Lifelong Kindergarten Group at the MIT Media Lab.
- </p>
- </div>
- <div className="media">
- <div className="contact-us">
- <h4>Contact</h4>
- <p>
- <a href="mailto:help@scratch.mit.edu">
- Email Us
- </a>
- </p>
- </div>
- <div className="social">
+var ConferenceFooter = React.createClass({
+ type: 'ConferenceFooter',
+ render: function () {
+ return (
+ <FooterBox>
+ <div className="collaborators">
+ <h4>Sponsors</h4>
<FlexRow as="ul">
- <li>
- <a href="//www.twitter.com/scratch">
- <img
- alt="scratch twitter"
- src="/images/conference/footer/twitter.png"
- />
+ <li className="odl">
+ <a href="https://odl.mit.edu/">
+ <img src="/images/conference/footer/mit-odl.png"
+ alt="MIT Office of Digital Learning" />
</a>
</li>
- <li>
- <a href="//www.facebook.com/scratchteam">
- <img
- alt="scratch facebook"
- src="/images/conference/footer/facebook.png"
- />
+ <li className="intel">
+ <a href="http://www.intel.com/content/www/us/en/homepage.html">
+ <img src="/images/conference/footer/intel.png"
+ alt="Intel" />
</a>
</li>
- <li>
- <a href="http://medium.com/scratchfoundation-blog">
- <img
- alt="scratch foundation blog"
- src="/images/conference/footer/medium.png"
- />
+ <li className="lego">
+ <a href="http://www.legofoundation.com/">
+ <img src="/images/conference/footer/lego-foundation.png"
+ alt="LEGO Foundation" />
+ </a>
+ </li>
+ <li className="google">
+ <a href="http://www.google.com/">
+ <img src="/images/conference/footer/google.png"
+ alt="Google" />
+ </a>
+ </li>
+ <li className="siegel">
+ <a href="http://www.siegelendowment.org/">
+ <img src="/images/conference/footer/siegel-endowment.png"
+ alt="Siegel Family Endowment" />
+ </a>
+ </li>
+ <li className="nostarch">
+ <a href="https://www.nostarch.com/">
+ <img src="/images/conference/footer/no-starch.png"
+ alt="No Starch Press" />
+ </a>
+ </li>
+ <li className="scratchfoundation">
+ <a href="http://www.scratchfoundation.org/">
+ <img src="/images/conference/footer/scratch-foundation.png"
+ alt="Scratch Foundation" />
</a>
</li>
</FlexRow>
</div>
- </div>
- </FlexRow>
- </FooterBox>
-);
+ <FlexRow className="scratch-links">
+ <div className="family">
+ <h4>Scratch Family</h4>
+ <FlexRow>
+ <FlexRow as="ul" className="column">
+ <li>
+ <a href="https://scratch.mit.edu" target="_blank">Scratch</a>
+ </li>
+ <li>
+ <a href="http://www.scratchjr.org/" target="_blank">ScratchJr</a>
+ </li>
+ </FlexRow>
+ <FlexRow as="ul" className="column">
+ <li>
+ <a href="http://www.scratchfoundation.org/" target="_blank">Scratch Foundation</a>
+ </li>
+ <li>
+ <a href="http://scratched.gse.harvard.edu/" target="_blank">ScratchEd</a>
+ </li>
+ </FlexRow>
+ <FlexRow as="ul" className="column">
+ <li>
+ <a href="http://day.scratch.mit.edu" target="_blank">Scratch Day</a>
+ </li>
+ </FlexRow>
+ </FlexRow>
+ <p className="legal">
+ Scratch is a project of the Lifelong Kindergarten Group at the MIT Media Lab.
+ </p>
+ </div>
+ <div className="media">
+ <div className="contact-us">
+ <h4>Contact</h4>
+ <p>
+ <a href="mailto:help@scratch.mit.edu" target="_blank">
+ Email Us
+ </a>
+ </p>
+ </div>
+ <div className="social">
+ <FlexRow as="ul">
+ <li>
+ <a href="//www.twitter.com/scratch" target="_blank">
+ <img src="/images/conference/footer/twitter.png" alt="scratch twitter" />
+ </a>
+ </li>
+ <li>
+ <a href="//www.facebook.com/scratchteam" target="_blank">
+ <img src="/images/conference/footer/facebook.png" alt="scratch facebook" />
+ </a>
+ </li>
+ <li>
+ <a href="http://medium.com/scratchfoundation-blog" target="_blank">
+ <img src="/images/conference/footer/medium.png" alt="scratch foundation blog" />
+ </a>
+ </li>
+ </FlexRow>
+ </div>
+ </div>
+ </FlexRow>
+ </FooterBox>
+ );
+ }
+});
module.exports = ConferenceFooter;
diff --git a/src/components/footer/conference/2017/footer.jsx b/src/components/footer/conference/2017/footer.jsx
index d026ce7ee..ebd11f36d 100644
--- a/src/components/footer/conference/2017/footer.jsx
+++ b/src/components/footer/conference/2017/footer.jsx
@@ -1,100 +1,84 @@
-const injectIntl = require('react-intl').injectIntl;
-const intlShape = require('react-intl').intlShape;
-const FormattedMessage = require('react-intl').FormattedMessage;
-const React = require('react');
+var React = require('react');
+var ReactIntl = require('react-intl');
-const FlexRow = require('../../../flex-row/flex-row.jsx');
-const FooterBox = require('../../container/footer.jsx');
-const LanguageChooser = require('../../../languagechooser/languagechooser.jsx');
+var injectIntl = ReactIntl.injectIntl;
+var FormattedMessage = ReactIntl.FormattedMessage;
+
+var FlexRow = require('../../../flex-row/flex-row.jsx');
+var FooterBox = require('../../container/footer.jsx');
+var LanguageChooser = require('../../../languagechooser/languagechooser.jsx');
require('../footer.scss');
-const ConferenceFooter = props => (
- <FooterBox>
- <FlexRow className="scratch-links">
- <div className="family">
- <h4><FormattedMessage id="footer.scratchFamily" /></h4>
- <FlexRow>
- <FlexRow
- as="ul"
- className="column"
- >
- <li>
- <a href="https://scratch.mit.edu">Scratch</a>
- </li>
- <li>
- <a href="http://www.scratchjr.org/">ScratchJr</a>
- </li>
- </FlexRow>
- <FlexRow
- as="ul"
- className="column"
- >
- <li>
- <a href="http://www.scratchfoundation.org/">Scratch Foundation</a>
- </li>
- <li>
- <a href="http://scratched.gse.harvard.edu/">ScratchEd</a>
- </li>
- </FlexRow>
- <FlexRow
- as="ul"
- className="column"
- >
- <li>
- <a href="http://day.scratch.mit.edu">Scratch Day</a>
- </li>
- </FlexRow>
+var ConferenceFooter = React.createClass({
+ type: 'ConferenceFooter',
+ render: function () {
+ return (
+ <FooterBox>
+ <FlexRow className="scratch-links">
+ <div className="family">
+ <h4><FormattedMessage id='footer.scratchFamily' /></h4>
+ <FlexRow>
+ <FlexRow as="ul" className="column">
+ <li>
+ <a href="https://scratch.mit.edu" target="_blank">Scratch</a>
+ </li>
+ <li>
+ <a href="http://www.scratchjr.org/" target="_blank">ScratchJr</a>
+ </li>
+ </FlexRow>
+ <FlexRow as="ul" className="column">
+ <li>
+ <a href="http://www.scratchfoundation.org/" target="_blank">Scratch Foundation</a>
+ </li>
+ <li>
+ <a href="http://scratched.gse.harvard.edu/" target="_blank">ScratchEd</a>
+ </li>
+ </FlexRow>
+ <FlexRow as="ul" className="column">
+ <li>
+ <a href="http://day.scratch.mit.edu" target="_blank">Scratch Day</a>
+ </li>
+ </FlexRow>
+ </FlexRow>
+ <p className="legal">
+ <FormattedMessage id='general.copyright' />
+ </p>
+ </div>
+ <div className="media">
+ <div className="contact-us">
+ <h4>Contact</h4>
+ <p>
+ <a href="mailto:help@scratch.mit.edu" target="_blank">
+ Email Us
+ </a>
+ </p>
+ </div>
+ <div className="social">
+ <FlexRow as="ul">
+ <li>
+ <a href="//www.twitter.com/scratch" target="_blank">
+ <img src="/images/conference/footer/twitter.png" alt="scratch twitter" />
+ </a>
+ </li>
+ <li>
+ <a href="//www.facebook.com/scratchteam" target="_blank">
+ <img src="/images/conference/footer/facebook.png" alt="scratch facebook" />
+ </a>
+ </li>
+ <li>
+ <a href="http://medium.com/scratchfoundation-blog" target="_blank">
+ <img src="/images/conference/footer/medium.png" alt="scratch foundation blog" />
+ </a>
+ </li>
+ </FlexRow>
+ </div>
+ </div>
</FlexRow>
- <p className="legal">
- <FormattedMessage id="general.copyright" />
- </p>
- </div>
- <div className="media">
- <div className="contact-us">
- <h4>Contact</h4>
- <p>
- <a href="mailto:help@scratch.mit.edu">
- Email Us
- </a>
- </p>
- </div>
- <div className="social">
- <FlexRow as="ul">
- <li>
- <a href="//www.twitter.com/scratch">
- <img
- alt="scratch twitter"
- src="/images/conference/footer/twitter.png"
- />
- </a>
- </li>
- <li>
- <a href="//www.facebook.com/scratchteam">
- <img
- alt="scratch facebook"
- src="/images/conference/footer/facebook.png"
- />
- </a>
- </li>
- <li>
- <a href="http://medium.com/scratchfoundation-blog">
- <img
- alt="scratch foundation blog"
- src="/images/conference/footer/medium.png"
- />
- </a>
- </li>
- </FlexRow>
- </div>
- </div>
- </FlexRow>
- <LanguageChooser locale={props.intl.locale} />
- </FooterBox>
-);
-
-ConferenceFooter.propTypes = {
- intl: intlShape
-};
+ <LanguageChooser locale={this.props.intl.locale} />
+ </FooterBox>
+ );
+ }
+});
module.exports = injectIntl(ConferenceFooter);
diff --git a/src/components/footer/conference/2018/footer.jsx b/src/components/footer/conference/2018/footer.jsx
index 1a08cc823..06daa2e92 100644
--- a/src/components/footer/conference/2018/footer.jsx
+++ b/src/components/footer/conference/2018/footer.jsx
@@ -1,146 +1,84 @@
-const FormattedMessage = require('react-intl').FormattedMessage;
-const injectIntl = require('react-intl').injectIntl;
-const intlShape = require('react-intl').intlShape;
-const React = require('react');
+var React = require('react');
+var ReactIntl = require('react-intl');
-const FlexRow = require('../../../flex-row/flex-row.jsx');
-const FooterBox = require('../../container/footer.jsx');
-const LanguageChooser = require('../../../languagechooser/languagechooser.jsx');
+var injectIntl = ReactIntl.injectIntl;
+var FormattedMessage = ReactIntl.FormattedMessage;
+
+var FlexRow = require('../../../flex-row/flex-row.jsx');
+var FooterBox = require('../../container/footer.jsx');
+var LanguageChooser = require('../../../languagechooser/languagechooser.jsx');
require('../footer.scss');
-const ConferenceFooter = props => (
- <FooterBox>
- <FlexRow className="scratch-links">
- <div className="family">
- <h4><FormattedMessage id="footer.scratchFamily" /></h4>
- <FlexRow>
- <FlexRow
- as="ul"
- className="column"
- >
- <li>
- <a
- href="https://scratch.mit.edu"
- rel="noopener noreferrer"
- target="_blank"
- >
- Scratch
- </a>
- </li>
- <li>
- <a
- href="http://www.scratchjr.org/"
- rel="noopener noreferrer"
- target="_blank"
- >
- ScratchJr
- </a>
- </li>
- </FlexRow>
- <FlexRow
- as="ul"
- className="column"
- >
- <li>
- <a
- href="http://www.scratchfoundation.org/"
- rel="noopener noreferrer"
- target="_blank"
- >
- Scratch Foundation
- </a>
- </li>
- <li>
- <a
- href="http://scratched.gse.harvard.edu/"
- rel="noopener noreferrer"
- target="_blank"
- >
- ScratchEd
- </a>
- </li>
- </FlexRow>
- <FlexRow
- as="ul"
- className="column"
- >
- <li>
- <a
- href="http://day.scratch.mit.edu"
- rel="noopener noreferrer"
- target="_blank"
- >
- Scratch Day
- </a>
- </li>
- </FlexRow>
+var ConferenceFooter = React.createClass({
+ type: 'ConferenceFooter',
+ render: function () {
+ return (
+ <FooterBox>
+ <FlexRow className="scratch-links">
+ <div className="family">
+ <h4><FormattedMessage id='footer.scratchFamily' /></h4>
+ <FlexRow>
+ <FlexRow as="ul" className="column">
+ <li>
+ <a href="https://scratch.mit.edu" target="_blank">Scratch</a>
+ </li>
+ <li>
+ <a href="http://www.scratchjr.org/" target="_blank">ScratchJr</a>
+ </li>
+ </FlexRow>
+ <FlexRow as="ul" className="column">
+ <li>
+ <a href="http://www.scratchfoundation.org/" target="_blank">Scratch Foundation</a>
+ </li>
+ <li>
+ <a href="http://scratched.gse.harvard.edu/" target="_blank">ScratchEd</a>
+ </li>
+ </FlexRow>
+ <FlexRow as="ul" className="column">
+ <li>
+ <a href="http://day.scratch.mit.edu" target="_blank">Scratch Day</a>
+ </li>
+ </FlexRow>
+ </FlexRow>
+ <p className="legal">
+ <FormattedMessage id='general.copyright' />
+ </p>
+ </div>
+ <div className="media">
+ <div className="contact-us">
+ <h4>Contact</h4>
+ <p>
+ <a href="mailto:conference@scratch.mit.edu" target="_blank">
+ Email Us
+ </a>
+ </p>
+ </div>
+ <div className="social">
+ <FlexRow as="ul">
+ <li>
+ <a href="//www.twitter.com/scratch" target="_blank">
+ <img src="/images/conference/footer/twitter.png" alt="scratch twitter" />
+ </a>
+ </li>
+ <li>
+ <a href="//www.facebook.com/scratchteam" target="_blank">
+ <img src="/images/conference/footer/facebook.png" alt="scratch facebook" />
+ </a>
+ </li>
+ <li>
+ <a href="http://medium.com/scratchfoundation-blog" target="_blank">
+ <img src="/images/conference/footer/medium.png" alt="scratch foundation blog" />
+ </a>
+ </li>
+ </FlexRow>
+ </div>
+ </div>
</FlexRow>
- <p className="legal">
- <FormattedMessage id="general.copyright" />
- </p>
- </div>
- <div className="media">
- <div className="contact-us">
- <h4>Contact</h4>
- <p>
- <a
- href="mailto:conference@scratch.mit.edu"
- rel="noopener noreferrer"
- target="_blank"
- >
- Email Us
- </a>
- </p>
- </div>
- <div className="social">
- <FlexRow as="ul">
- <li>
- <a
- href="//www.twitter.com/scratch"
- rel="noopener noreferrer"
- target="_blank"
- >
- <img
- alt="scratch twitter"
- src="/images/conference/footer/twitter.png"
- />
- </a>
- </li>
- <li>
- <a
- href="//www.facebook.com/scratchteam"
- rel="noopener noreferrer"
- target="_blank"
- >
- <img
- alt="scratch facebook"
- src="/images/conference/footer/facebook.png"
- />
- </a>
- </li>
- <li>
- <a
- href="http://medium.com/scratchfoundation-blog"
- rel="noopener noreferrer"
- target="_blank"
- >
- <img
- alt="scratch foundation blog"
- src="/images/conference/footer/medium.png"
- />
- </a>
- </li>
- </FlexRow>
- </div>
- </div>
- </FlexRow>
- <LanguageChooser locale={props.intl.locale} />
- </FooterBox>
-);
-
-ConferenceFooter.propTypes = {
- intl: intlShape
-};
+ <LanguageChooser locale={this.props.intl.locale} />
+ </FooterBox>
+ );
+ }
+});
module.exports = injectIntl(ConferenceFooter);
diff --git a/src/components/footer/container/footer.jsx b/src/components/footer/container/footer.jsx
index f629e9f39..53f7eba59 100644
--- a/src/components/footer/container/footer.jsx
+++ b/src/components/footer/container/footer.jsx
@@ -1,16 +1,16 @@
-const PropTypes = require('prop-types');
-const React = require('react');
+var React = require('react');
require('./footer.scss');
-const FooterBox = props => (
- <div className="inner">
- {props.children}
- </div>
-);
-
-FooterBox.propTypes = {
- children: PropTypes.node
-};
+var FooterBox = React.createClass({
+ type: 'FooterBox',
+ render: function () {
+ return (
+ <div className="inner">
+ {this.props.children}
+ </div>
+ );
+ }
+});
module.exports = FooterBox;
diff --git a/src/components/footer/www/footer.jsx b/src/components/footer/www/footer.jsx
index e983b4f8b..0cfaa46cd 100644
--- a/src/components/footer/www/footer.jsx
+++ b/src/components/footer/www/footer.jsx
@@ -1,225 +1,226 @@
-const FormattedMessage = require('react-intl').FormattedMessage;
-const injectIntl = require('react-intl').injectIntl;
-const intlShape = require('react-intl').intlShape;
-const MediaQuery = require('react-responsive').default;
-const React = require('react');
+var React = require('react');
+var ReactIntl = require('react-intl');
+var FormattedMessage = ReactIntl.FormattedMessage;
+var injectIntl = ReactIntl.injectIntl;
-const FooterBox = require('../container/footer.jsx');
-const LanguageChooser = require('../../languagechooser/languagechooser.jsx');
+var FooterBox = require('../container/footer.jsx');
+var LanguageChooser = require('../../languagechooser/languagechooser.jsx');
-const frameless = require('../../../lib/frameless');
+var MediaQuery = require('react-responsive');
+var frameless = require('../../../lib/frameless');
require('./footer.scss');
-const Footer = props => (
- <FooterBox>
- <MediaQuery maxWidth={frameless.tablet - 1}>
- <div className="lists">
- <dl>
- <dd>
- <a href="/about">
- <FormattedMessage id="general.aboutScratch" />
- </a>
- </dd>
- <dd>
- <a href="/jobs">
- <FormattedMessage id="general.jobs" />
- </a>
- </dd>
- <dd>
- <a href="/contact-us/">
- <FormattedMessage id="general.contactUs" />
- </a>
- </dd>
- </dl>
- <dl>
- <dd>
- <a href="/terms_of_use">
- <FormattedMessage id="general.termsOfUse" />
- </a>
- </dd>
- <dd>
- <a href="/privacy_policy">
- <FormattedMessage id="general.privacyPolicy" />
- </a>
- </dd>
- <dd>
- <a href="/community_guidelines">
- <FormattedMessage id="general.guidelines" />
- </a>
- </dd>
- </dl>
- </div>
- </MediaQuery>
- <MediaQuery minWidth={frameless.tablet}>
- <div className="lists">
- <dl>
- <dt>
- <FormattedMessage id="general.about" />
- </dt>
- <dd>
- <a href="/about">
- <FormattedMessage id="general.aboutScratch" />
- </a>
- </dd>
- <dd>
- <a href="/parents/">
- <FormattedMessage id="general.forParents" />
- </a>
- </dd>
- <dd>
- <a href="/educators">
- <FormattedMessage id="general.forEducators" />
- </a>
- </dd>
- <dd>
- <a href="/developers">
- <FormattedMessage id="general.forDevelopers" />
- </a>
- </dd>
- <dd>
- <a href="/info/credits">
- <FormattedMessage id="general.credits" />
- </a>
- </dd>
- <dd>
- <a href="/jobs">
- <FormattedMessage id="general.jobs" />
- </a>
- </dd>
- <dd>
- <a href="http://wiki.scratch.mit.edu/wiki/Scratch_Press">
- <FormattedMessage id="general.press" />
- </a>
- </dd>
- </dl>
- <dl>
- <dt>
- <FormattedMessage id="general.community" />
- </dt>
- <dd>
- <a href="/community_guidelines">
- <FormattedMessage id="general.guidelines" />
- </a>
- </dd>
- <dd>
- <a href="/discuss/">
- <FormattedMessage id="footer.discuss" />
- </a>
- </dd>
- <dd>
- <a href="https://wiki.scratch.mit.edu/">
- <FormattedMessage id="general.wiki" />
- </a>
- </dd>
- <dd>
- <a href="/statistics/">
- <FormattedMessage id="general.statistics" />
- </a>
- </dd>
- </dl>
+var Footer = React.createClass({
+ type: 'Footer',
+ render: function () {
+ return (
+ <FooterBox>
+ <MediaQuery maxWidth={frameless.tablet - 1}>
+ <div className="lists">
+ <dl>
+ <dd>
+ <a href="/about">
+ <FormattedMessage id='general.aboutScratch' />
+ </a>
+ </dd>
+ <dd>
+ <a href="/jobs">
+ <FormattedMessage id='general.jobs' />
+ </a>
+ </dd>
+ <dd>
+ <a href="/contact-us/">
+ <FormattedMessage id='general.contactUs' />
+ </a>
+ </dd>
+ </dl>
+ <dl>
+ <dd>
+ <a href="/terms_of_use">
+ <FormattedMessage id='general.termsOfUse' />
+ </a>
+ </dd>
+ <dd>
+ <a href="/privacy_policy">
+ <FormattedMessage id='general.privacyPolicy' />
+ </a>
+ </dd>
+ <dd>
+ <a href="/community_guidelines">
+ <FormattedMessage id='general.guidelines' />
+ </a>
+ </dd>
+ </dl>
+ </div>
+ </MediaQuery>
+ <MediaQuery minWidth={frameless.tablet}>
+ <div className="lists">
+ <dl>
+ <dt>
+ <FormattedMessage id='general.about' />
+ </dt>
+ <dd>
+ <a href="/about">
+ <FormattedMessage id='general.aboutScratch' />
+ </a>
+ </dd>
+ <dd>
+ <a href="/parents/">
+ <FormattedMessage id='general.forParents' />
+ </a>
+ </dd>
+ <dd>
+ <a href="/educators">
+ <FormattedMessage id='general.forEducators' />
+ </a>
+ </dd>
+ <dd>
+ <a href="/developers">
+ <FormattedMessage id='general.forDevelopers' />
+ </a>
+ </dd>
+ <dd>
+ <a href="/info/credits">
+ <FormattedMessage id='general.credits' />
+ </a>
+ </dd>
+ <dd>
+ <a href="/jobs">
+ <FormattedMessage id='general.jobs' />
+ </a>
+ </dd>
+ <dd>
+ <a href="http://wiki.scratch.mit.edu/wiki/Scratch_Press">
+ <FormattedMessage id='general.press' />
+ </a>
+ </dd>
+ </dl>
+ <dl>
+ <dt>
+ <FormattedMessage id='general.community' />
+ </dt>
+ <dd>
+ <a href="/community_guidelines">
+ <FormattedMessage id='general.guidelines' />
+ </a>
+ </dd>
+ <dd>
+ <a href="/discuss/">
+ <FormattedMessage id='footer.discuss' />
+ </a>
+ </dd>
+ <dd>
+ <a href="https://wiki.scratch.mit.edu/">
+ <FormattedMessage id='general.wiki' />
+ </a>
+ </dd>
+ <dd>
+ <a href="/statistics/">
+ <FormattedMessage id='general.statistics' />
+ </a>
+ </dd>
+ </dl>
- <dl>
- <dt>
- <FormattedMessage id="general.support" />
- </dt>
- <dd>
- <a href="/tips">
- <FormattedMessage id="general.tips" />
- </a>
- </dd>
- <dd>
- <a href="/info/faq">
- <FormattedMessage id="general.faq" />
- </a>
- </dd>
- <dd>
- <a href="/download">
- <FormattedMessage id="general.offlineEditor" />
- </a>
- </dd>
- <dd>
- <a href="/contact-us/">
- <FormattedMessage id="general.contactUs" />
- </a>
- </dd>
- <dd>
- <a href="/store">
- <FormattedMessage id="general.scratchStore" />
- </a>
- </dd>
- <dd>
- <a href="https://secure.donationpay.org/scratchfoundation/">
- <FormattedMessage id="general.donate" />
- </a>
- </dd>
- </dl>
+ <dl>
+ <dt>
+ <FormattedMessage id='general.support' />
+ </dt>
+ <dd>
+ <a href="/tips">
+ <FormattedMessage id='general.tips' />
+ </a>
+ </dd>
+ <dd>
+ <a href="/info/faq">
+ <FormattedMessage id='general.faq' />
+ </a>
+ </dd>
+ <dd>
+ <a href="/download">
+ <FormattedMessage id='general.offlineEditor' />
+ </a>
+ </dd>
+ <dd>
+ <a href="/contact-us/">
+ <FormattedMessage id='general.contactUs' />
+ </a>
+ </dd>
+ <dd>
+ <a href="/store">
+ <FormattedMessage id='general.scratchStore' />
+ </a>
+ </dd>
+ <dd>
+ <a href="https://secure.donationpay.org/scratchfoundation/">
+ <FormattedMessage id='general.donate'/>
+ </a>
+ </dd>
+ </dl>
- <dl>
- <dt>
- <FormattedMessage id="general.legal" />
- </dt>
- <dd>
- <a href="/terms_of_use">
- <FormattedMessage id="general.termsOfUse" />
- </a>
- </dd>
- <dd>
- <a href="/privacy_policy">
- <FormattedMessage id="general.privacyPolicy" />
- </a>
- </dd>
- <dd>
- <a href="/DMCA">
- <FormattedMessage id="general.dmca" />
- </a>
- </dd>
- </dl>
+ <dl>
+ <dt>
+ <FormattedMessage id='general.legal'/>
+ </dt>
+ <dd>
+ <a href="/terms_of_use">
+ <FormattedMessage id='general.termsOfUse' />
+ </a>
+ </dd>
+ <dd>
+ <a href="/privacy_policy">
+ <FormattedMessage id='general.privacyPolicy' />
+ </a>
+ </dd>
+ <dd>
+ <a href="/DMCA">
+ <FormattedMessage id='general.dmca' />
+ </a>
+ </dd>
+ </dl>
- <dl>
- <dt>
- <FormattedMessage id="footer.scratchFamily" />
- </dt>
- <dd>
- <a href="http://scratched.gse.harvard.edu/">
- <FormattedMessage id="general.scratchEd" />
- </a>
- </dd>
- <dd>
- <a href="http://www.scratchjr.org/">
- <FormattedMessage id="general.scratchJr" />
- </a>
- </dd>
- <dd>
- <a href="http://day.scratch.mit.edu/">
- Scratch Day
- </a>
- </dd>
- <dd>
- <a href="/conference">
- <FormattedMessage id="general.scratchConference" />
- </a>
- </dd>
- <dd>
- <a href="http://www.scratchfoundation.org/">
- <FormattedMessage id="general.scratchFoundation" />
- </a>
- </dd>
- </dl>
- </div>
- </MediaQuery>
- <LanguageChooser locale={props.intl.locale} />
+ <dl>
+ <dt>
+ <FormattedMessage id='footer.scratchFamily' />
+ </dt>
+ <dd>
+ <a href="http://scratched.gse.harvard.edu/">
+ <FormattedMessage id='general.scratchEd' />
+ </a>
+ </dd>
+ <dd>
+ <a href="http://www.scratchjr.org/">
+ <FormattedMessage id='general.scratchJr' />
+ </a>
+ </dd>
+ <dd>
+ <a href="http://day.scratch.mit.edu/">
+ Scratch Day
+ </a>
+ </dd>
+ <dd>
+ <a href="/conference">
+ <FormattedMessage id='general.scratchConference' />
+ </a>
+ </dd>
+ <dd>
+ <a href="http://www.scratchfoundation.org/">
+ <FormattedMessage id='general.scratchFoundation' />
+ </a>
+ </dd>
+ </dl>
+ </div>
+ </MediaQuery>
+ <LanguageChooser locale={this.props.intl.locale} />
- <div className="copyright">
- <p>
- <FormattedMessage id="general.copyright" />
- </p>
- </div>
- </FooterBox>
-);
-
-Footer.propTypes = {
- intl: intlShape.isRequired
-};
+ <div className="copyright">
+ <p>
+ <FormattedMessage id='general.copyright' />
+ </p>
+ </div>
+ </FooterBox>
+ );
+ }
+});
module.exports = injectIntl(Footer);
diff --git a/src/components/forms/button.jsx b/src/components/forms/button.jsx
index b5b97e39a..2c12d7db7 100644
--- a/src/components/forms/button.jsx
+++ b/src/components/forms/button.jsx
@@ -1,26 +1,22 @@
-const classNames = require('classnames');
-const omit = require('lodash.omit');
-const PropTypes = require('prop-types');
-const React = require('react');
+var React = require('react');
+var classNames = require('classnames');
require('./button.scss');
-const Button = props => {
- const classes = classNames('button', props.className);
-
- return (
- <button
- className={classes}
- {...omit(props, ['className', 'children'])}
- >
- {props.children}
- </button>
- );
-};
-
-Button.propTypes = {
- children: PropTypes.node,
- className: PropTypes.string
-};
+var Button = React.createClass({
+ type: 'Button',
+ propTypes: {
+
+ },
+ render: function () {
+ var classes = classNames(
+ 'button',
+ this.props.className
+ );
+ return (
+ <button {... this.props} className={classes} >{this.props.children}</button>
+ );
+ }
+});
module.exports = Button;
diff --git a/src/components/forms/charcount.jsx b/src/components/forms/charcount.jsx
index bf46c95f4..af6192ebe 100644
--- a/src/components/forms/charcount.jsx
+++ b/src/components/forms/charcount.jsx
@@ -1,28 +1,28 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var React = require('react');
require('./charcount.scss');
-const CharCount = props => (
- <p
- className={classNames('char-count', props.className, {
- overmax: (props.currentCharacters > props.maxCharacters)
- })}
- >
- {props.currentCharacters}/{props.maxCharacters}
- </p>
-);
-
-CharCount.propTypes = {
- className: PropTypes.string,
- currentCharacters: PropTypes.number,
- maxCharacters: PropTypes.number
-};
-
-CharCount.defaultProps = {
- currentCharacters: 0,
- maxCharacters: 0
-};
+var CharCount = React.createClass({
+ type: 'CharCount',
+ getDefaultProps: function () {
+ return {
+ maxCharacters: 0,
+ currentCharacters: 0
+ };
+ },
+ render: function () {
+ var classes = classNames(
+ 'char-count',
+ this.props.className,
+ {overmax: (this.props.currentCharacters > this.props.maxCharacters)}
+ );
+ return (
+ <p className={classes}>
+ {this.props.currentCharacters}/{this.props.maxCharacters}
+ </p>
+ );
+ }
+});
module.exports = CharCount;
diff --git a/src/components/forms/checkbox-group.jsx b/src/components/forms/checkbox-group.jsx
index c98a0e5dd..29321d268 100644
--- a/src/components/forms/checkbox-group.jsx
+++ b/src/components/forms/checkbox-group.jsx
@@ -1,25 +1,25 @@
-const classNames = require('classnames');
-const FRCCheckboxGroup = require('formsy-react-components').CheckboxGroup;
-const PropTypes = require('prop-types');
-const React = require('react');
-
-const defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
-const inputHOC = require('./input-hoc.jsx');
+var classNames = require('classnames');
+var FRCCheckboxGroup = require('formsy-react-components').CheckboxGroup;
+var React = require('react');
+var defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
+var inputHOC = require('./input-hoc.jsx');
require('./row.scss');
require('./checkbox-group.scss');
-const CheckboxGroup = props => (
- <div className={classNames('checkbox-group', props.className)}>
- <FRCCheckboxGroup
- className={classNames('checkbox-group', props.className)}
- {... props}
- />
- </div>
-);
-
-CheckboxGroup.propTypes = {
- className: PropTypes.string
-};
+var CheckboxGroup = React.createClass({
+ type: 'CheckboxGroup',
+ render: function () {
+ var classes = classNames(
+ 'checkbox-group',
+ this.props.className
+ );
+ return (
+ <div className={classes}>
+ <FRCCheckboxGroup {... this.props} className={classes} />
+ </div>
+ );
+ }
+});
module.exports = inputHOC(defaultValidationHOC(CheckboxGroup));
diff --git a/src/components/forms/checkbox.jsx b/src/components/forms/checkbox.jsx
index fcaac2293..f0aa295b8 100644
--- a/src/components/forms/checkbox.jsx
+++ b/src/components/forms/checkbox.jsx
@@ -1,23 +1,23 @@
-const classNames = require('classnames');
-const FRCCheckbox = require('formsy-react-components').Checkbox;
-const PropTypes = require('prop-types');
-const React = require('react');
-
-const defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
-const inputHOC = require('./input-hoc.jsx');
+var classNames = require('classnames');
+var FRCCheckbox = require('formsy-react-components').Checkbox;
+var React = require('react');
+var defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
+var inputHOC = require('./input-hoc.jsx');
require('./row.scss');
require('./checkbox.scss');
-const Checkbox = props => (
- <FRCCheckbox
- rowClassName={classNames('checkbox-row', props.className)}
- {...props}
- />
-);
-
-Checkbox.propTypes = {
- className: PropTypes.string
-};
+var Checkbox = React.createClass({
+ type: 'Checkbox',
+ render: function () {
+ var classes = classNames(
+ 'checkbox-row',
+ this.props.className
+ );
+ return (
+ <FRCCheckbox rowClassName={classes} {... this.props} />
+ );
+ }
+});
module.exports = inputHOC(defaultValidationHOC(Checkbox));
diff --git a/src/components/forms/form.jsx b/src/components/forms/form.jsx
index 1514787b7..17ada223a 100644
--- a/src/components/forms/form.jsx
+++ b/src/components/forms/form.jsx
@@ -1,61 +1,47 @@
-const bindAll = require('lodash.bindall');
-const classNames = require('classnames');
-const Formsy = require('formsy-react');
-const omit = require('lodash.omit');
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var Formsy = require('formsy-react');
+var omit = require('lodash.omit');
+var React = require('react');
+var validations = require('./validations.jsx').validations;
-const validations = require('./validations.jsx').validations;
-
-for (const validation in validations) {
+for (var validation in validations) {
Formsy.addValidationRule(validation, validations[validation]);
}
-class Form extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleChange'
- ]);
- this.state = {
+var Form = React.createClass({
+ getDefaultProps: function () {
+ return {
+ noValidate: true,
+ onChange: function () {}
+ };
+ },
+ getInitialState: function () {
+ return {
allValues: {}
};
- }
- handleChange (currentValues, isChanged) {
+ },
+ onChange: function (currentValues, isChanged) {
this.setState({allValues: omit(currentValues, 'all')});
this.props.onChange(currentValues, isChanged);
- }
- render () {
+ },
+ render: function () {
+ var classes = classNames(
+ 'form',
+ this.props.className
+ );
return (
- <Formsy.Form
- className={classNames('form', this.props.className)}
- ref={form => {
- this.formsy = form;
- }}
- onChange={this.handleChange}
- {...this.props}
- >
- {React.Children.map(this.props.children, child => {
+ <Formsy.Form {... this.props} className={classes} ref="formsy" onChange={this.onChange}>
+ {React.Children.map(this.props.children, function (child) {
if (!child) return child;
if (child.props.name === 'all') {
return React.cloneElement(child, {value: this.state.allValues});
+ } else {
+ return child;
}
- return child;
- })}
+ }.bind(this))}
</Formsy.Form>
);
}
-}
-
-Form.propTypes = {
- children: PropTypes.node,
- className: PropTypes.string,
- onChange: PropTypes.func
-};
-
-Form.defaultProps = {
- noValidate: true,
- onChange: function () {}
-};
+});
module.exports = Form;
diff --git a/src/components/forms/general-error.jsx b/src/components/forms/general-error.jsx
index 270e3ca39..d9e20463b 100644
--- a/src/components/forms/general-error.jsx
+++ b/src/components/forms/general-error.jsx
@@ -1,6 +1,5 @@
-const Formsy = require('formsy-react');
-const PropTypes = require('prop-types');
-const React = require('react');
+var Formsy = require('formsy-react');
+var React = require('react');
require('./general-error.scss');
@@ -11,18 +10,13 @@ require('./general-error.scss');
* give it a name, and apply your validation error to
* the name of the GeneralError component.
*/
-const GeneralError = props => {
- if (!props.showError()) return null;
- return (
- <p className="general-error">
- {props.getErrorMessage()}
- </p>
- );
-};
-
-GeneralError.propTypes = {
- getErrorMessage: PropTypes.func,
- showError: PropTypes.func
-};
-
-module.exports = Formsy.HOC(GeneralError);
+module.exports = Formsy.HOC(React.createClass({
+ render: function () {
+ if (!this.props.showError()) return null;
+ return (
+ <p className="general-error">
+ {this.props.getErrorMessage()}
+ </p>
+ );
+ }
+}));
diff --git a/src/components/forms/input-hoc.jsx b/src/components/forms/input-hoc.jsx
index 1ce3c1c0b..1532eaefd 100644
--- a/src/components/forms/input-hoc.jsx
+++ b/src/components/forms/input-hoc.jsx
@@ -1,32 +1,20 @@
-const omit = require('lodash.omit');
-const PropTypes = require('prop-types');
-const React = require('react');
+var React = require('react');
-/**
- * Higher-order component for building an input field
- * @param {React.Component} Component an input component
- * @return {React.Component} a wrapped input component
- */
-module.exports = Component => {
- const InputComponent = props => (
- <Component
- help={props.required ? null : props.messages['general.notRequired']}
- {...omit(props, ['messages'])}
- />
- );
-
- InputComponent.propTypes = {
- messages: PropTypes.shape({
- 'general.notRequired': PropTypes.string
- }),
- required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
- };
-
- InputComponent.defaultProps = {
- messages: {
- 'general.notRequired': 'Not Required'
+module.exports = function InputComponentMixin (Component) {
+ var InputComponent = React.createClass({
+ getDefaultProps: function () {
+ return {
+ messages: {
+ 'general.notRequired': 'Not Required'
+ }
+ };
+ },
+ render: function () {
+ return (
+ <Component help={this.props.required ? null : this.props.messages['general.notRequired']}
+ {...this.props} />
+ );
}
- };
-
+ });
return InputComponent;
};
diff --git a/src/components/forms/input.jsx b/src/components/forms/input.jsx
index a9992a40c..3244ade3c 100644
--- a/src/components/forms/input.jsx
+++ b/src/components/forms/input.jsx
@@ -1,57 +1,46 @@
-const bindAll = require('lodash.bindall');
-const classNames = require('classnames');
-const FRCInput = require('formsy-react-components').Input;
-const omit = require('lodash.omit');
-const PropTypes = require('prop-types');
-const React = require('react');
-
-const defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
-const inputHOC = require('./input-hoc.jsx');
+var classNames = require('classnames');
+var FRCInput = require('formsy-react-components').Input;
+var React = require('react');
+var defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
+var inputHOC = require('./input-hoc.jsx');
require('./input.scss');
require('./row.scss');
-class Input extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleInvalid',
- 'handleValid'
- ]);
- this.state = {
+var Input = React.createClass({
+ type: 'Input',
+ getDefaultProps: function () {
+ return {};
+ },
+ getInitialState: function () {
+ return {
status: ''
};
- }
- handleValid () {
+ },
+ onValid: function () {
this.setState({
status: 'pass'
});
- }
- handleInvalid () {
+ },
+ onInvalid: function () {
this.setState({
status: 'fail'
});
- }
- render () {
+ },
+ render: function () {
+ var classes = classNames(
+ this.state.status,
+ this.props.className,
+ {'no-label': (typeof this.props.label === 'undefined')}
+ );
return (
- <FRCInput
- className="input"
- rowClassName={classNames(
- this.state.status,
- this.props.className,
- {'no-label': (typeof this.props.label === 'undefined')}
- )}
- onInvalid={this.handleInvalid}
- onValid={this.handleValid}
- {...omit(this.props, ['className'])}
- />
+ <FRCInput {... this.props}
+ className="input"
+ rowClassName={classes}
+ onValid={this.onValid}
+ onInvalid={this.onInvalid} />
);
}
-}
-
-Input.propTypes = {
- className: PropTypes.string,
- label: PropTypes.string
-};
+});
module.exports = inputHOC(defaultValidationHOC(Input));
diff --git a/src/components/forms/phone-input.jsx b/src/components/forms/phone-input.jsx
index 69d8ab23f..260c5a2ef 100644
--- a/src/components/forms/phone-input.jsx
+++ b/src/components/forms/phone-input.jsx
@@ -1,33 +1,23 @@
-const allCountries = require('react-telephone-input/lib/country_data').allCountries;
-const classNames = require('classnames');
-const ComponentMixin = require('formsy-react-components').ComponentMixin;
-const createReactClass = require('create-react-class');
-const FormsyMixin = require('formsy-react').Mixin;
-const omit = require('lodash.omit');
-const PropTypes = require('prop-types');
-const React = require('react');
-const ReactPhoneInput = require('react-telephone-input/lib/withStyles').default;
-const Row = require('formsy-react-components').Row;
+var allCountries = require('react-telephone-input/lib/country_data').allCountries;
+var classNames = require('classnames');
+var ComponentMixin = require('formsy-react-components').ComponentMixin;
+var FormsyMixin = require('formsy-react').Mixin;
+var React = require('react');
+var ReactPhoneInput = require('react-telephone-input/lib/withStyles');
+var Row = require('formsy-react-components').Row;
-const defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
-const inputHOC = require('./input-hoc.jsx');
-const intl = require('../../lib/intl.jsx');
-const validationHOCFactory = require('./validations.jsx').validationHOCFactory;
+var defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
+var inputHOC = require('./input-hoc.jsx');
+var intl = require('../../lib/intl.jsx');
+var validationHOCFactory = require('./validations.jsx').validationHOCFactory;
-const allIso2 = allCountries.map(country => (country.iso2));
+var allIso2 = allCountries.map(function (country) {return country.iso2;});
require('./row.scss');
require('./phone-input.scss');
-const PhoneInput = createReactClass({ // eslint-disable-line react/prefer-es6-class
+var PhoneInput = React.createClass({
displayName: 'PhoneInput',
- propTypes: {
- className: PropTypes.string,
- defaultCountry: PropTypes.string,
- disabled: PropTypes.bool,
- name: PropTypes.string,
- onChange: PropTypes.func
- },
mixins: [
FormsyMixin,
ComponentMixin
@@ -41,34 +31,29 @@ const PhoneInput = createReactClass({ // eslint-disable-line react/prefer-es6-cl
defaultCountry: 'us'
};
},
- handleChangeInput: function (number, country) {
- const value = {
- national_number: number,
- country_code: country
- };
+ onChangeInput: function (number, country) {
+ var value = {national_number: number, country_code: country};
this.setValue(value);
this.props.onChange(this.props.name, value);
},
render: function () {
- let defaultCountry = PhoneInput.getDefaultProps().defaultCountry;
+ var defaultCountry = PhoneInput.getDefaultProps().defaultCountry;
if (allIso2.indexOf(this.props.defaultCountry.toLowerCase()) !== -1) {
- defaultCountry = this.props.defaultCountry.toLowerCase();
+ defaultCountry = this.props.defaultCountry.toLowerCase();
}
return (
- <Row
- htmlFor={this.getId()}
- rowClassName={classNames('phone-input', this.props.className)}
- {...this.getRowProperties()}
+ <Row {... this.getRowProperties()}
+ htmlFor={this.getId()}
+ rowClassName={classNames('phone-input', this.props.className)}
>
<div className="input-group">
- <ReactPhoneInput
- className="form-control"
- defaultCountry={defaultCountry}
- disabled={this.isFormDisabled() || this.props.disabled}
- id={this.getId()}
- label={null}
- onChange={this.handleChangeInput}
- {...omit(this.props, ['className', 'disabled', 'onChange'])}
+ <ReactPhoneInput className="form-control"
+ {... this.props}
+ defaultCountry={defaultCountry}
+ onChange={this.onChangeInput}
+ id={this.getId()}
+ label={null}
+ disabled={this.isFormDisabled() || this.props.disabled}
/>
{this.renderHelp()}
{this.renderErrorMessage()}
@@ -78,7 +63,7 @@ const PhoneInput = createReactClass({ // eslint-disable-line react/prefer-es6-cl
}
});
-const phoneValidationHOC = validationHOCFactory({
+var phoneValidationHOC = validationHOCFactory({
isPhone: <intl.FormattedMessage id="teacherRegistration.validationPhoneNumber" />
});
diff --git a/src/components/forms/radio-group.jsx b/src/components/forms/radio-group.jsx
index 168f0a926..fcdf928a6 100644
--- a/src/components/forms/radio-group.jsx
+++ b/src/components/forms/radio-group.jsx
@@ -1,23 +1,23 @@
-const classNames = require('classnames');
-const FRCRadioGroup = require('formsy-react-components').RadioGroup;
-const PropTypes = require('prop-types');
-const React = require('react');
-
-const defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
-const inputHOC = require('./input-hoc.jsx');
+var classNames = require('classnames');
+var FRCRadioGroup = require('formsy-react-components').RadioGroup;
+var React = require('react');
+var defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
+var inputHOC = require('./input-hoc.jsx');
require('./row.scss');
require('./radio-group.scss');
-const RadioGroup = props => (
- <FRCRadioGroup
- className={classNames('radio-group', props.className)}
- {... props}
- />
-);
-
-RadioGroup.propTypes = {
- className: PropTypes.string
-};
+var RadioGroup = React.createClass({
+ type: 'RadioGroup',
+ render: function () {
+ var classes = classNames(
+ 'radio-group',
+ this.props.className
+ );
+ return (
+ <FRCRadioGroup {... this.props} className={classes} />
+ );
+ }
+});
module.exports = inputHOC(defaultValidationHOC(RadioGroup));
diff --git a/src/components/forms/select.jsx b/src/components/forms/select.jsx
index 16a7e1ee2..a17053942 100644
--- a/src/components/forms/select.jsx
+++ b/src/components/forms/select.jsx
@@ -1,31 +1,33 @@
-const classNames = require('classnames');
-const defaults = require('lodash.defaultsdeep');
-const FRCSelect = require('formsy-react-components').Select;
-const PropTypes = require('prop-types');
-const React = require('react');
-
-const defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
-const inputHOC = require('./input-hoc.jsx');
+var classNames = require('classnames');
+var defaults = require('lodash.defaultsdeep');
+var FRCSelect = require('formsy-react-components').Select;
+var React = require('react');
+var defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
+var inputHOC = require('./input-hoc.jsx');
require('./row.scss');
require('./select.scss');
-const Select = props => {
- if (props.required && !props.value) {
- props = defaults({}, props, {value: props.options[0].value});
+var Select = React.createClass({
+ type: 'Select',
+ propTypes: {
+
+ },
+ render: function () {
+ var classes = classNames(
+ 'select',
+ this.props.className
+ );
+ var props = this.props;
+ if (this.props.required && !this.props.value) {
+ props = defaults({}, this.props, {value: this.props.options[0].value});
+ }
+ return (
+ <div className={classes}>
+ <FRCSelect {... props} />
+ </div>
+ );
}
- return (
- <div className={classNames('select', props.className)}>
- <FRCSelect {...props} />
- </div>
- );
-};
-
-Select.propTypes = {
- className: PropTypes.string,
- options: PropTypes.arrayOf(PropTypes.any),
- required: PropTypes.bool,
- value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-};
+});
module.exports = inputHOC(defaultValidationHOC(Select));
diff --git a/src/components/forms/textarea.jsx b/src/components/forms/textarea.jsx
index 0c488f995..ec90f8b59 100644
--- a/src/components/forms/textarea.jsx
+++ b/src/components/forms/textarea.jsx
@@ -1,25 +1,25 @@
-const classNames = require('classnames');
-const FRCTextarea = require('formsy-react-components').Textarea;
-const omit = require('lodash.omit');
-const PropTypes = require('prop-types');
-const React = require('react');
-
-const defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
-const inputHOC = require('./input-hoc.jsx');
+var classNames = require('classnames');
+var FRCTextarea = require('formsy-react-components').Textarea;
+var React = require('react');
+var defaultValidationHOC = require('./validations.jsx').defaultValidationHOC;
+var inputHOC = require('./input-hoc.jsx');
require('./row.scss');
require('./textarea.scss');
-const TextArea = props => (
- <FRCTextarea
- className="textarea"
- rowClassName={classNames('textarea-row', props.className)}
- {...omit(props, ['className'])}
- />
-);
-
-TextArea.propTypes = {
- className: PropTypes.string
-};
+var TextArea = React.createClass({
+ type: 'TextArea',
+ render: function () {
+ var classes = classNames(
+ 'textarea-row',
+ this.props.className
+ );
+ return (
+ <FRCTextarea {... this.props}
+ className="textarea"
+ rowClassName={classes} />
+ );
+ }
+});
module.exports = inputHOC(defaultValidationHOC(TextArea));
diff --git a/src/components/forms/validations.jsx b/src/components/forms/validations.jsx
index c83ce63cb..113cd6fb4 100644
--- a/src/components/forms/validations.jsx
+++ b/src/components/forms/validations.jsx
@@ -1,46 +1,48 @@
-const defaults = require('lodash.defaultsdeep');
-const intl = require('../../lib/intl.jsx');
-const libphonenumber = require('google-libphonenumber');
-const omit = require('lodash.omit');
-const phoneNumberUtil = libphonenumber.PhoneNumberUtil.getInstance();
-const PropTypes = require('prop-types');
-const React = require('react');
+var defaults = require('lodash.defaultsdeep');
+var intl = require('../../lib/intl.jsx');
+var libphonenumber = require('google-libphonenumber');
+var phoneNumberUtil = libphonenumber.PhoneNumberUtil.getInstance();
+var React = require('react');
+
+module.exports = {};
module.exports.validations = {
- notEquals: (values, value, neq) => (value !== neq),
- notEqualsField: (values, value, field) => (value !== values[field]),
- isPhone: (values, value) => {
+ notEquals: function (values, value, neq) {
+ return value !== neq;
+ },
+ notEqualsField: function (values, value, field) {
+ return value !== values[field];
+ },
+ isPhone: function (values, value) {
if (typeof value === 'undefined') return true;
if (value && value.national_number === '+') return true;
try {
- const parsed = phoneNumberUtil.parse(value.national_number, value.country_code.iso2);
- return phoneNumberUtil.isValidNumber(parsed);
+ var parsed = phoneNumberUtil.parse(value.national_number, value.country_code.iso2);
} catch (err) {
return false;
}
+ return phoneNumberUtil.isValidNumber(parsed);
}
};
-
module.exports.validations.notEqualsUsername = module.exports.validations.notEquals;
-module.exports.validationHOCFactory = defaultValidationErrors => (Component => {
- const ValidatedComponent = props => (
- <Component
- validationErrors={defaults(
- {},
- defaultValidationErrors,
- props.validationErrors
- )}
- {...omit(props, ['validationErrors'])}
- />
- );
-
- ValidatedComponent.propTypes = {
- validationErrors: PropTypes.object // eslint-disable-line react/forbid-prop-types
+module.exports.validationHOCFactory = function (defaultValidationErrors) {
+ return function (Component) {
+ var ValidatedComponent = React.createClass({
+ render: function () {
+ var validationErrors = defaults(
+ {},
+ defaultValidationErrors,
+ this.props.validationErrors
+ );
+ return (
+ <Component {...this.props} validationErrors={validationErrors} />
+ );
+ }
+ });
+ return ValidatedComponent;
};
-
- return ValidatedComponent;
-});
+};
module.exports.defaultValidationHOC = module.exports.validationHOCFactory({
isDefaultRequiredValue: <intl.FormattedMessage id="form.validationRequired" />
diff --git a/src/components/grid/grid.jsx b/src/components/grid/grid.jsx
index 0bc8c9286..f130e5bbd 100644
--- a/src/components/grid/grid.jsx
+++ b/src/components/grid/grid.jsx
@@ -1,68 +1,79 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var React = require('react');
-const Thumbnail = require('../thumbnail/thumbnail.jsx');
-const FlexRow = require('../flex-row/flex-row.jsx');
+var Thumbnail = require('../thumbnail/thumbnail.jsx');
+var FlexRow = require('../flex-row/flex-row.jsx');
require('./grid.scss');
-const Grid = props => (
- <div className={classNames('grid', props.className)}>
- <FlexRow>
- {props.items.map((item, key) => {
- const href = `/${props.itemType}/${item.id}/`;
- if (props.itemType === 'projects') {
- return (
- <Thumbnail
- avatar={`https://cdn2.scratch.mit.edu/get_image/user/${item.author.id}_32x32.png`}
- creator={item.author.username}
- favorites={item.stats.favorites}
- href={href}
- key={key}
- loves={item.stats.loves}
- remixes={item.stats.remixes}
- showAvatar={props.showAvatar}
- showFavorites={props.showFavorites}
- showLoves={props.showLoves}
- showRemixes={props.showRemixes}
- showViews={props.showViews}
- src={item.image}
- title={item.title}
- type={'project'}
- views={item.stats.views}
- />
- );
- }
- return (
- <Thumbnail
- href={href}
- key={key}
- owner={item.owner}
- src={item.image}
- title={item.title}
- type={'gallery'}
- />
- );
- })}
- </FlexRow>
- </div>
-);
+var Grid = React.createClass({
+ type: 'Grid',
+ getDefaultProps: function () {
+ return {
+ items: require('./grid.json'),
+ itemType: 'projects',
+ showLoves: false,
+ showFavorites: false,
+ showRemixes: false,
+ showViews: false,
+ showAvatar: false
+ };
+ },
+ render: function () {
+ var classes = classNames(
+ 'grid',
+ this.props.className
+ );
+ return (
+ <div className={classes}>
+ <FlexRow>
+ {this.props.items.map(function (item, key) {
+ var href = '/' + this.props.itemType + '/' + item.id + '/';
-Grid.propTypes = {
- className: PropTypes.string,
- itemType: PropTypes.string,
- items: PropTypes.arrayOf(PropTypes.object)
-};
-
-Grid.defaultProps = {
- items: require('./grid.json'),
- itemType: 'projects',
- showLoves: false,
- showFavorites: false,
- showRemixes: false,
- showViews: false,
- showAvatar: false
-};
+ if (this.props.itemType == 'projects') {
+ return (
+ <Thumbnail
+ key={key}
+ showLoves={this.props.showLoves}
+ showFavorites={this.props.showFavorites}
+ showRemixes={this.props.showRemixes}
+ showViews={this.props.showViews}
+ showAvatar={this.props.showAvatar}
+ type={'project'}
+ href={href}
+ title={item.title}
+ src={item.image}
+ avatar={
+ 'https://uploads.scratch.mit.edu/users/avatars/' +
+ item.author.id +
+ '.png'
+ }
+ creator={item.author.username}
+ loves={item.stats.loves}
+ favorites={item.stats.favorites}
+ remixes={item.stats.remixes}
+ views={item.stats.views}
+ />
+ );
+ }
+ else {
+ return (
+ <Thumbnail
+ key={key}
+ type={'gallery'}
+ href={href}
+ title={item.title}
+ src={item.image}
+ srcDefault={'https://uploads.scratch.mit.edu/galleries/thumbnails/default.png'}
+ owner={item.owner}
+ />
+ );
+ }
+ }.bind(this))}
+ </FlexRow>
+ </div>
+ );
+ }
+});
module.exports = Grid;
diff --git a/src/components/informationpage/informationpage.jsx b/src/components/informationpage/informationpage.jsx
index 94a8bd740..acc68da77 100644
--- a/src/components/informationpage/informationpage.jsx
+++ b/src/components/informationpage/informationpage.jsx
@@ -1,34 +1,39 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
-
-const TitleBanner = require('../../components/title-banner/title-banner.jsx');
+var classNames = require('classnames');
+var React = require('react');
+var TitleBanner = require('../../components/title-banner/title-banner.jsx');
require('./informationpage.scss');
-/*
+/**
* Container for a table of contents
* alongside a long body of text
*/
-const InformationPage = props => (
- <div className="information-page">
- <TitleBanner className="masthead">
- <div className="inner">
- <h1 className="title-banner-h1">
- {props.title}
- </h1>
+var InformationPage = React.createClass({
+ type: 'InformationPage',
+ propTypes: {
+ title: React.PropTypes.string.isRequired
+ },
+ render: function () {
+ var classes = classNames(
+ 'info-outer',
+ 'inner',
+ this.props.className
+ );
+ return (
+ <div className="information-page">
+ <TitleBanner className="masthead">
+ <div className="inner">
+ <h1 className="title-banner-h1">
+ {this.props.title}
+ </h1>
+ </div>
+ </TitleBanner>
+ <div className={classes}>
+ {this.props.children}
+ </div>
</div>
- </TitleBanner>
- <div className={classNames('info-outer', 'inner', props.className)}>
- {props.children}
- </div>
- </div>
-);
-
-InformationPage.propTypes = {
- children: PropTypes.node,
- className: PropTypes.string,
- title: PropTypes.string.isRequired
-};
+ );
+ }
+});
module.exports = InformationPage;
diff --git a/src/components/intro/intro.jsx b/src/components/intro/intro.jsx
index efe0473a7..d1f7c4275 100644
--- a/src/components/intro/intro.jsx
+++ b/src/components/intro/intro.jsx
@@ -1,128 +1,111 @@
-const bindAll = require('lodash.bindall');
-const connect = require('react-redux').connect;
-const PropTypes = require('prop-types');
-const React = require('react');
+var connect = require('react-redux').connect;
+var React = require('react');
-const sessionActions = require('../../redux/session.js');
+var sessionActions = require('../../redux/session.js');
-const IframeModal = require('../modal/iframe/modal.jsx');
-const Registration = require('../registration/registration.jsx');
+var IframeModal = require('../modal/iframe/modal.jsx');
+var Registration = require('../registration/registration.jsx');
require('./intro.scss');
-class Intro extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleShowVideo',
- 'handleCloseVideo',
- 'handleJoinClick',
- 'handleCloseRegistration',
- 'handleCompleteRegistration'
- ]);
- this.state = {
+var Intro = React.createClass({
+ type: 'Intro',
+ getDefaultProps: function () {
+ return {
+ messages: {
+ 'intro.aboutScratch': 'ABOUT SCRATCH',
+ 'intro.forEducators': 'FOR EDUCATORS',
+ 'intro.forParents': 'FOR PARENTS',
+ 'intro.itsFree': 'it\'s free!',
+ 'intro.joinScratch': 'JOIN SCRATCH',
+ 'intro.seeExamples': 'SEE EXAMPLES',
+ 'intro.tagLine': 'Create stories, games, and animations<br /> Share with others around the world',
+ 'intro.tryItOut': 'TRY IT OUT',
+ 'intro.description': 'A creative learning community with <span class="project-count"> ' +
+ 'over 14 million </span>projects shared'
+ },
+ session: {}
+ };
+ },
+ getInitialState: function () {
+ return {
videoOpen: false
};
- }
- handleShowVideo () {
+ },
+ showVideo: function () {
this.setState({videoOpen: true});
- }
- handleCloseVideo () {
+ },
+ closeVideo: function () {
this.setState({videoOpen: false});
- }
- handleJoinClick (e) {
+ },
+ handleJoinClick: function (e) {
e.preventDefault();
- this.setState({registrationOpen: true});
- }
- handleCloseRegistration () {
- this.setState({registrationOpen: false});
- }
- handleCompleteRegistration () {
+ this.setState({'registrationOpen': true});
+ },
+ closeRegistration: function () {
+ this.setState({'registrationOpen': false});
+ },
+ completeRegistration: function () {
this.props.dispatch(sessionActions.refreshSession());
this.closeRegistration();
- }
- render () {
+ },
+ render: function () {
return (
<div className="intro">
<div className="content">
- <h1
- dangerouslySetInnerHTML={{ // eslint-disable-line react/no-danger
- __html: this.props.messages['intro.tagLine']
- }}
- />
+ <h1 dangerouslySetInnerHTML={{__html: this.props.messages['intro.tagLine']}}>
+ </h1>
<div className="sprites">
- <a
- className="sprite sprite-1"
- href="/projects/editor/?tip_bar=getStarted"
- >
+ <a className="sprite sprite-1" href="/projects/editor/?tip_bar=getStarted">
<img
- alt="Scratch Cat"
className="costume costume-1"
src="//cdn.scratch.mit.edu/scratchr2/static/images/cat-a.png"
- />
+ alt="Scratch Cat" />
<img
- alt="Scratch Cat"
className="costume costume-2"
src="//cdn.scratch.mit.edu/scratchr2/static/images/cat-b.png"
- />
- <div className="circle" />
+ alt="Scratch Cat" />
+ <div className="circle"></div>
<div className="text">
{this.props.messages['intro.tryItOut']}
</div>
</a>
- <a
- className="sprite sprite-2"
- href="/starter_projects/"
- >
+ <a className="sprite sprite-2" href="/starter_projects/">
<img
- alt="Tera"
className="costume costume-1"
src="//cdn.scratch.mit.edu/scratchr2/static/images/tera-a.png"
- />
+ alt="Tera" />
<img
- alt="Tera"
className="costume costume-2"
src="//cdn.scratch.mit.edu/scratchr2/static/images/tera-b.png"
- />
- <div className="circle" />
+ alt="Tera" />
+ <div className="circle"></div>
<div className="text">
{this.props.messages['intro.seeExamples']}
</div>
</a>
- <a
- className="sprite sprite-3"
- href="#"
- onClick={this.handleJoinClick}
- >
+ <a className="sprite sprite-3" href="#" onClick={this.handleJoinClick}>
<img
- alt="Gobo"
className="costume costume-1"
src="//cdn.scratch.mit.edu/scratchr2/static/images/gobo-a.png"
- />
+ alt="Gobo" />
<img
- alt="Gobo"
className="costume costume-2"
src="//cdn.scratch.mit.edu/scratchr2/static/images/gobo-b.png"
- />
- <div className="circle" />
+ alt="Gobo" />
+ <div className="circle"></div>
<div className="text">
{this.props.messages['intro.joinScratch']}
</div>
<div className="text subtext">{this.props.messages['intro.itsFree']}</div>
</a>
- <Registration
- isOpen={this.state.registrationOpen}
- key="registration"
- onRegistrationDone={this.handleCompleteRegistration}
- onRequestClose={this.handleCloseRegistration}
- />
+ <Registration key="registration"
+ isOpen={this.state.registrationOpen}
+ onRequestClose={this.closeRegistration}
+ onRegistrationDone={this.completeRegistration} />
</div>
- <div
- className="description"
- dangerouslySetInnerHTML={{ // eslint-disable-line react/no-danger
- __html: this.props.messages['intro.description']
- }}
- />
+ <div className="description"
+ dangerouslySetInnerHTML={{__html: this.props.messages['intro.description']}}></div>
<div className="links">
<a href="/about/">
{this.props.messages['intro.aboutScratch']}
@@ -130,70 +113,33 @@ class Intro extends React.Component {
<a href="/educators/">
{this.props.messages['intro.forEducators']}
</a>
- <a
- className="last"
- href="/parents/"
- >
+ <a className="last" href="/parents/">
{this.props.messages['intro.forParents']}
</a>
</div>
</div>
<div className="video">
- <div
- className="play-button"
- onClick={this.handleShowVideo}
- />
- <img
- alt="Intro Video"
- src="//cdn.scratch.mit.edu/scratchr2/static/images/hp-video-screenshot.png"
- />
+ <div className="play-button" onClick={this.showVideo}></div>
+ <img src="//cdn.scratch.mit.edu/scratchr2/static/images/hp-video-screenshot.png"
+ alt="Intro Video" />
</div>
<IframeModal
className="mod-intro-video"
isOpen={this.state.videoOpen}
+ onRequestClose={this.closeVideo}
src="//player.vimeo.com/video/65583694?title=0&byline=0&portrait=0"
- onRequestClose={this.handleCloseVideo}
/>
</div>
);
}
-}
-
-Intro.propTypes = {
- dispatch: PropTypes.func.isRequired,
- messages: PropTypes.shape({
- 'intro.aboutScratch': PropTypes.string,
- 'intro.forEducators': PropTypes.string,
- 'intro.forParents': PropTypes.string,
- 'intro.itsFree': PropTypes.string,
- 'intro.joinScratch': PropTypes.string,
- 'intro.seeExamples': PropTypes.string,
- 'intro.tagLine': PropTypes.string,
- 'intro.tryItOut': PropTypes.string,
- 'intro.description': PropTypes.string
- })
-};
-
-Intro.defaultProps = {
- messages: {
- 'intro.aboutScratch': 'ABOUT SCRATCH',
- 'intro.forEducators': 'FOR EDUCATORS',
- 'intro.forParents': 'FOR PARENTS',
- 'intro.itsFree': 'it\'s free!',
- 'intro.joinScratch': 'JOIN SCRATCH',
- 'intro.seeExamples': 'SEE EXAMPLES',
- 'intro.tagLine': 'Create stories, games, and animations<br /> Share with others around the world',
- 'intro.tryItOut': 'TRY IT OUT',
- 'intro.description': 'A creative learning community with <span class="project-count"> ' +
- 'over 14 million </span>projects shared'
- },
- session: {}
-};
-
-const mapStateToProps = state => ({
- session: state.session
});
-const ConnectedIntro = connect(mapStateToProps)(Intro);
+var mapStateToProps = function (state) {
+ return {
+ session: state.session
+ };
+};
+
+var ConnectedIntro = connect(mapStateToProps)(Intro);
module.exports = ConnectedIntro;
diff --git a/src/components/languagechooser/languagechooser.jsx b/src/components/languagechooser/languagechooser.jsx
index 1e9258853..c538fb923 100644
--- a/src/components/languagechooser/languagechooser.jsx
+++ b/src/components/languagechooser/languagechooser.jsx
@@ -1,57 +1,46 @@
-const bindAll = require('lodash.bindall');
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var React = require('react');
-const jar = require('../../lib/jar.js');
-const languages = require('../../../languages.json');
-const Form = require('../forms/form.jsx');
-const Select = require('../forms/select.jsx');
+var jar = require('../../lib/jar.js');
+var languages = require('../../../languages.json');
+var Form = require('../forms/form.jsx');
+var Select = require('../forms/select.jsx');
require('./languagechooser.scss');
/**
* Footer dropdown menu that allows one to change their language.
*/
-class LanguageChooser extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleSetLanguage'
- ]);
- }
- handleSetLanguage (name, value) {
+var LanguageChooser = React.createClass({
+ type: 'LanguageChooser',
+ getDefaultProps: function () {
+ return {
+ languages: languages,
+ locale: 'en'
+ };
+ },
+ onSetLanguage: function (name, value) {
jar.set('scratchlanguage', value);
window.location.reload();
- }
- render () {
- const languageOptions = Object.keys(this.props.languages).map(value => ({
- value: value,
- label: this.props.languages[value]
- }));
+ },
+ render: function () {
+ var classes = classNames(
+ 'language-chooser',
+ this.props.className
+ );
+ var languageOptions = Object.keys(this.props.languages).map(function (value) {
+ return {value: value, label: this.props.languages[value]};
+ }.bind(this));
return (
- <Form className={classNames('language-chooser', this.props.className)}>
- <Select
- required
- name="language"
- options={languageOptions}
- value={this.props.locale}
- onChange={this.handleSetLanguage}
- />
+ <Form className={classes}>
+ <Select name="language"
+ options={languageOptions}
+ value={this.props.locale}
+ onChange={this.onSetLanguage}
+ required />
</Form>
);
}
-}
-
-LanguageChooser.propTypes = {
- className: PropTypes.string,
- languages: PropTypes.object, // eslint-disable-line react/forbid-prop-types
- locale: PropTypes.string
-};
-
-LanguageChooser.defaultProps = {
- languages: languages,
- locale: 'en'
-};
+});
module.exports = LanguageChooser;
diff --git a/src/components/login/login.jsx b/src/components/login/login.jsx
index 58586e5e5..c7243d7a6 100644
--- a/src/components/login/login.jsx
+++ b/src/components/login/login.jsx
@@ -1,108 +1,66 @@
-const bindAll = require('lodash.bindall');
-const FormattedMessage = require('react-intl').FormattedMessage;
-const PropTypes = require('prop-types');
-const React = require('react');
+var React = require('react');
+var FormattedMessage = require('react-intl').FormattedMessage;
-const log = require('../../lib/log.js');
+var log = require('../../lib/log.js');
-const Form = require('../forms/form.jsx');
-const Input = require('../forms/input.jsx');
-const Button = require('../forms/button.jsx');
-const Spinner = require('../spinner/spinner.jsx');
+var Form = require('../forms/form.jsx');
+var Input = require('../forms/input.jsx');
+var Button = require('../forms/button.jsx');
+var Spinner = require('../spinner/spinner.jsx');
require('./login.scss');
-class Login extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleSubmit'
- ]);
- this.state = {
+var Login = React.createClass({
+ type: 'Login',
+ propTypes: {
+ onLogIn: React.PropTypes.func,
+ error: React.PropTypes.string
+ },
+ getInitialState: function () {
+ return {
waiting: false
};
- }
- handleSubmit (formData) {
+ },
+ handleSubmit: function (formData) {
this.setState({waiting: true});
- this.props.onLogIn(formData, err => {
+ this.props.onLogIn(formData, function (err) {
if (err) log.error(err);
this.setState({waiting: false});
- });
- }
- render () {
- let error;
+ }.bind(this));
+ },
+ render: function () {
+ var error;
if (this.props.error) {
error = <div className="error">{this.props.error}</div>;
}
return (
<div className="login">
<Form onSubmit={this.handleSubmit}>
- <label
- htmlFor="username"
- key="usernameLabel"
- >
- <FormattedMessage id="general.username" />
+ <label htmlFor="username" key="usernameLabel">
+ <FormattedMessage id='general.username' />
</label>
- <Input
- required
- key="usernameInput"
- maxLength="30"
- name="username"
- ref={input => {
- this.username = input;
- }}
- type="text"
- />
- <label
- htmlFor="password"
- key="passwordLabel"
- >
- <FormattedMessage id="general.password" />
+ <Input type="text" ref="username" name="username" maxLength="30" key="usernameInput" required />
+ <label htmlFor="password" key="passwordLabel">
+ <FormattedMessage id='general.password' />
</label>
- <Input
- required
- key="passwordInput"
- name="password"
- ref={input => {
- this.password = input;
- }}
- type="password"
- />
+ <Input type="password" ref="password" name="password" key="passwordInput" required />
{this.state.waiting ? [
- <Button
- className="submit-button white"
- disabled="disabled"
- key="submitButton"
- type="submit"
- >
+ <Button className="submit-button white" type="submit" disabled="disabled" key="submitButton">
<Spinner />
</Button>
] : [
- <Button
- className="submit-button white"
- key="submitButton"
- type="submit"
- >
- <FormattedMessage id="general.signIn" />
+ <Button className="submit-button white" type="submit" key="submitButton">
+ <FormattedMessage id='general.signIn' />
</Button>
]}
- <a
- className="right"
- href="/accounts/password_reset/"
- key="passwordResetLink"
- >
- <FormattedMessage id="login.needHelp" />
+ <a className="right" href="/accounts/password_reset/" key="passwordResetLink">
+ <FormattedMessage id='login.needHelp' />
</a>
{error}
</Form>
</div>
);
}
-}
-
-Login.propTypes = {
- error: PropTypes.string,
- onLogIn: PropTypes.func
-};
+});
module.exports = Login;
diff --git a/src/components/masonrygrid/masonrygrid.jsx b/src/components/masonrygrid/masonrygrid.jsx
index 5f654488d..ef32172e5 100644
--- a/src/components/masonrygrid/masonrygrid.jsx
+++ b/src/components/masonrygrid/masonrygrid.jsx
@@ -1,68 +1,60 @@
-const bindAll = require('lodash.bindall');
-const classNames = require('classnames');
-const MediaQuery = require('react-responsive').default;
-const PropTypes = require('prop-types');
-const React = require('react');
-
-const frameless = require('../../lib/frameless');
+var classNames = require('classnames');
+var React = require('react');
+var MediaQuery = require('react-responsive');
+var frameless = require('../../lib/frameless');
require('./masonrygrid.scss');
-class MasonryGrid extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'reorderColumns'
- ]);
- }
- reorderColumns (items, cols) {
- const a1 = [];
- const a2 = [];
- const a3 = [];
- let i = 0;
- // only implemented for 2 and 3 columns so far - easy to extend if needed
+var MasonryGrid = React.createClass({
+ type: 'MasonryGrid',
+ getDefaultProps: function () {
+ return {
+ as: 'div'
+ };
+ },
+ reorderColumns: function (items, cols) {
+ var a1 = [];
+ var a2 = [];
+ var a3 = [];
+ var i = 0;
+ //only implemented for 2 and 3 columns so far - easy to extend if needed
if (cols > 1 && cols < 4) {
- for (i = 0; i < items.length; i++){
- const col = (i + cols) % cols;
+ for (i=0;i<items.length;i++){
+ var col = (i+cols)%cols;
if (col === 0) {
a1.push(items[i]);
- } else if (col === 1) {
+ }
+ else if (col === 1) {
a2.push(items[i]);
- } else if (col === 2) {
+ }
+ else if (col === 2) {
a3.push(items[i]);
}
}
- return a1.concat(a2, a3);
+ return a1.concat(a2,a3);
+ } else {
+ return items;
}
- return items;
- }
- render () {
+ },
+ render: function () {
+ var classes = classNames(
+ 'masonry',
+ this.props.className
+ );
return (
- <this.props.as className={classNames('masonry', this.props.className)}>
- <MediaQuery maxWidth={frameless.tablet - 1}>
+ <this.props.as className={classes}>
+ <MediaQuery maxWidth={frameless.tablet - 1} >
{this.props.children}
</MediaQuery>
- <MediaQuery
- maxWidth={frameless.desktop - 1}
- minWidth={frameless.tablet}
- >
+ <MediaQuery minWidth={frameless.tablet} maxWidth={frameless.desktop - 1} >
{this.reorderColumns(this.props.children, 2)}
</MediaQuery>
- <MediaQuery minWidth={frameless.desktop}>
+ <MediaQuery minWidth={frameless.desktop} >
{this.reorderColumns(this.props.children, 3)}
</MediaQuery>
</this.props.as>
);
}
-}
-
-MasonryGrid.propTypes = {
- children: PropTypes.node,
- className: PropTypes.string
-};
-
-MasonryGrid.defaultProps = {
- as: 'div'
-};
+});
module.exports = MasonryGrid;
diff --git a/src/components/microworld/microworld.jsx b/src/components/microworld/microworld.jsx
index 5923f7ac4..ec21d5a87 100644
--- a/src/components/microworld/microworld.jsx
+++ b/src/components/microworld/microworld.jsx
@@ -1,53 +1,39 @@
-const bindAll = require('lodash.bindall');
-const PropTypes = require('prop-types');
-const React = require('react');
-
-const Box = require('../box/box.jsx');
-const LegacyCarousel = require('../carousel/legacy-carousel.jsx');
-const IframeModal = require('../modal/iframe/modal.jsx');
-const NestedCarousel = require('../nestedcarousel/nestedcarousel.jsx');
+var React = require('react');
require('./microworld.scss');
-class Microworld extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'markVideoOpen',
- 'markVideoClosed',
- 'renderVideos',
- 'renderVideo',
- 'renderEditorWindow',
- 'renderTips',
- 'renderStarterProject',
- 'renderProjectIdeasBox',
- 'renderForum',
- 'renderDesignStudio'
- ]);
- this.state = {
- videoOpen: {}
- };
- }
- markVideoOpen (key) {
- /*
- When a video is clicked, mark it as an open video, so the video Modal will open.
- Key is the number of the video, so distinguish between different videos on the page
- */
- const videoOpenArr = this.state.videoOpen;
+var Box = require('../box/box.jsx');
+var LegacyCarousel = require('../carousel/legacy-carousel.jsx');
+var IframeModal = require('../modal/iframe/modal.jsx');
+var NestedCarousel = require('../nestedcarousel/nestedcarousel.jsx');
+
+var Microworld = React.createClass({
+ type: 'Microworld',
+ propTypes: {
+ microworldData: React.PropTypes.node.isRequired
+ },
+ markVideoOpen: function (key) {
+ {/* When a video is clicked, mark it as an open video, so the video Modal will open.
+ Key is the number of the video, so distinguish between different videos on the page */}
+
+ var videoOpenArr = this.state.videoOpen;
videoOpenArr[key] = true;
this.setState({videoOpen: videoOpenArr});
- }
- markVideoClosed (key) {
- /*
- When a video's x is clicked, mark it as closed, so the video Modal will disappear.
- Key is the number of the video, so distinguish between different videos on the page
- */
- const videoOpenArr = this.state.videoOpen;
+ },
+ markVideoClosed: function (key) {
+ {/* When a video's x is clicked, mark it as closed, so the video Modal will disappear.
+ Key is the number of the video, so distinguish between different videos on the page */}
+ var videoOpenArr = this.state.videoOpen;
videoOpenArr[key] = false;
this.setState({videoOpen: videoOpenArr});
- }
- renderVideos () {
- const videos = this.props.microworldData.videos;
+ },
+ getInitialState: function () {
+ return {
+ videoOpen: {}
+ };
+ },
+ renderVideos: function () {
+ var videos = this.props.microworldData.videos;
if (!videos || videos.length <= 0) {
return null;
}
@@ -62,32 +48,26 @@ class Microworld extends React.Component {
</div>
</div>
);
- }
- renderVideo (video, key) {
+ },
+ renderVideo: function (video, key) {
return (
<div>
<div className="video">
- <div
- className="play-button"
- onClick={() => { // eslint-disable-line react/jsx-no-bind
- this.markVideoOpen(key);
- }}
- />
+ <div className="play-button" onClick={this.markVideoOpen.bind(this, key)}>
+ </div>
<img src={video.image} />
</div>
<IframeModal
className="mod-microworld-video"
isOpen={this.state.videoOpen[key]}
+ onRequestClose={this.markVideoClosed.bind(this, key)}
src={video.link}
- onRequestClose={() => { // eslint-disable-line react/jsx-no-bind
- this.markVideoClosed(key);
- }}
/>
</div>
);
- }
- renderEditorWindow () {
- const projectId = this.props.microworldData.microworld_project_id;
+ },
+ renderEditorWindow: function () {
+ var projectId = this.props.microworldData.microworld_project_id;
if (!projectId) {
return null;
@@ -95,37 +75,30 @@ class Microworld extends React.Component {
return (
<div className="editor section">
<h1 className="sectionheader">Start Creating!</h1>
- <iframe
- frameBorder="0"
- src={`//scratch.mit.edu/projects/embed-editor/${projectId}/?isMicroworld=true`}
- />
+ <iframe src={'//scratch.mit.edu/projects/embed-editor/' + projectId + '/?isMicroworld=true'}
+ frameBorder="0"> </iframe>
{this.renderTips()}
</div>
);
- }
- renderTips () {
- const tips = this.props.microworldData.tips;
+ },
+ renderTips: function () {
+ var tips = this.props.microworldData.tips;
if (!tips || tips.length <= 0) {
return null;
}
return (
<div className="box nestedcarousel">
- <div className="box-header" />
+ <div className="box-header">
+ </div>
<div className="box-content">
- <NestedCarousel
- items={tips}
- settings={{
- slidesToShow: 1,
- slidesToScroll: 1
- }}
- />
+ <NestedCarousel items={tips} settings={{slidesToShow:1,slidesToScroll:1}}/>
</div>
</div>
- );
- }
- renderStarterProject () {
- const starterProjects = this.props.microworldData.starter_projects;
+ );
+ },
+ renderStarterProject: function () {
+ var starterProjects = this.props.microworldData.starter_projects;
if (!starterProjects || starterProjects.length <= 0){
return null;
}
@@ -134,42 +107,39 @@ class Microworld extends React.Component {
<div className="project-ideas">
<h1 className="sectionheader">Check out ideas for more projects</h1>
<Box
- key="starter_projects"
title="More Starter Projects"
- >
+ key="starter_projects">
<LegacyCarousel items={starterProjects} />
</Box>
</div>
);
- }
- renderProjectIdeasBox () {
- const communityProjects = this.props.microworldData.community_projects;
+ },
+ renderProjectIdeasBox: function () {
+ var communityProjects = this.props.microworldData.community_projects;
if (!communityProjects || communityProjects.size <= 0) {
return null;
}
- const featured = communityProjects.featured_projects;
- const all = communityProjects.newest_projects;
+ var featured = communityProjects.featured_projects;
+ var all = communityProjects.newest_projects;
- const rows = [];
+ var rows = [];
if (featured && featured.length > 0){
rows.push(
<Box
- key="community_featured_projects"
title="Featured Community Projects"
- >
+ key="community_featured_projects">
<LegacyCarousel items={featured} />
- </Box>
+ </Box>
);
}
if (all && all.length > 0) {
rows.push(
<Box
- key="community_all_projects"
- title="All Community Projects"
- >
- <LegacyCarousel items={all} />
- </Box>
+ title="All Community Projects"
+ key="community_all_projects">
+ <LegacyCarousel items={all} />
+ </Box>
);
}
if (rows.length <= 0) {
@@ -181,88 +151,67 @@ class Microworld extends React.Component {
{rows}
</div>
);
- }
- renderForum () {
+ },
+ renderForum: function () {
if (!this.props.microworldData.show_forum) {
return null;
}
return (
- <div className="forum">
- <h1 className="sectionheader">Chat with others!</h1>
- <img src="/images/forum-image.png" />
- </div>
+ <div className="forum">
+ <h1 className="sectionheader">Chat with others!</h1>
+ <img src="/images/forum-image.png"/>
+ </div>
);
- }
- renderDesignStudio () {
- const designChallenge = this.props.microworldData.design_challenge;
+ },
+ renderDesignStudio: function () {
+ var designChallenge = this.props.microworldData.design_challenge;
if (!designChallenge) {
return null;
}
-
- let studioHref = '';
if (designChallenge.studio_id) {
- studioHref = `https://scratch.mit.edu//studios/${designChallenge.studio_id}/`;
+ var studioHref = 'https://scratch.mit.edu//studios/' + designChallenge.studio_id + '/';
}
if (designChallenge.project_id) {
return (
<div className="side-by-side section">
<h1 className="sectionheader">Join our Design Challenge!</h1>
<div className="design-studio">
- <iframe
- frameBorder="0"
- src={`https://scratch.mit.edu/projects/${designChallenge.project_id}/#fullscreen`}
- />
+ <iframe src={'https://scratch.mit.edu/projects/' + designChallenge.project_id +
+ '/#fullscreen'} frameBorder="0"> </iframe>
</div>
<div className="design-studio-projects">
- <Box
- key="scratch_design_studio"
- moreHref={studioHref ? studioHref : null}
- moreTitle={studioHref ? 'Visit the studio' : null}
- title="Examples"
- >
+ <Box title="Examples"
+ key="scratch_design_studio"
+ moreTitle={studioHref ? 'Visit the studio' : null}
+ moreHref={studioHref ? studioHref : null}>
{/* The two carousels are used to show two rows of projects, one above the
other. This should be probably be changed, to allow better scrolling. */}
- <LegacyCarousel
- items={this.props.microworldData.design_challenge.studio1}
- settings={{
- slidesToShow: 2,
- slidesToScroll: 2
- }}
- />
- <LegacyCarousel
- items={this.props.microworldData.design_challenge.studio2}
- settings={{
- slidesToShow: 2,
- slidesToScroll: 2
- }}
- />
+ <LegacyCarousel settings={{slidesToShow:2,slidesToScroll:2}}
+ items={this.props.microworldData.design_challenge.studio1} />
+ <LegacyCarousel settings={{slidesToShow:2,slidesToScroll:2}}
+ items={this.props.microworldData.design_challenge.studio2} />
</Box>
</div>
</div>
);
+ } else {
+ return (
+ <div className="section">
+ <h1 className="sectionheader">Join our Design Challenge!</h1>
+ <Box
+ title="design Challenge Projects"
+ key="scratch_design_studio"
+ moreTitle={studioHref ? 'Visit the studio' : null}
+ moreHref={studioHref ? studioHref : null}>
+ <LegacyCarousel items={this.props.microworldData.design_challenge.studio1.concat(
+ this.props.microworldData.design_challenge.studio2)} />
+ </Box>
+ </div>
+ );
}
- return (
- <div className="section">
- <h1 className="sectionheader">Join our Design Challenge!</h1>
- <Box
- key="scratch_design_studio"
- moreHref={studioHref ? studioHref : null}
- moreTitle={studioHref ? 'Visit the studio' : null}
- title="design Challenge Projects"
- >
- <LegacyCarousel
- items={
- this.props.microworldData.design_challenge.studio1.concat(
- this.props.microworldData.design_challenge.studio2
- )
- }
- />
- `</Box>
- </div>
- );
- }
- render () {
+ },
+ render: function () {
return (
<div className="inner microworld">
<div className="top-banner section">
@@ -282,10 +231,6 @@ class Microworld extends React.Component {
);
}
-}
-
-Microworld.propTypes = {
- microworldData: PropTypes.node.isRequired
-};
+});
module.exports = Microworld;
diff --git a/src/components/modal/base/modal.jsx b/src/components/modal/base/modal.jsx
index 613233a15..0c0647144 100644
--- a/src/components/modal/base/modal.jsx
+++ b/src/components/modal/base/modal.jsx
@@ -1,9 +1,7 @@
-const bindAll = require('lodash.bindall');
-const classNames = require('classnames');
-const omit = require('lodash.omit');
-const PropTypes = require('prop-types');
-const React = require('react');
-const ReactModal = require('react-modal');
+var classNames = require('classnames');
+var omit = require('lodash.omit');
+var React = require('react');
+var ReactModal = require('react-modal');
require('./modal.scss');
@@ -12,55 +10,47 @@ ReactModal.setAppElement(document.getElementById('view'));
/**
* Container for pop up windows (See: registration window)
*/
-class Modal extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleRequestClose'
- ]);
- }
- handleRequestClose () {
+var Modal = React.createClass({
+ type: 'Modal',
+ propTypes: {
+ className: React.PropTypes.string,
+ overlayClassName: React.PropTypes.string
+ },
+ requestClose: function () {
return this.modal.portal.requestClose();
- }
- render () {
+ },
+ render: function () {
+ var modalClasses = classNames(
+ 'modal-content',
+ this.props.className
+ );
+ var overlayClasses = classNames(
+ 'modal-overlay',
+ this.props.overlayClassName
+ );
+
return (
<ReactModal
- appElement={document.getElementById('view')}
- className={{
- base: classNames('modal-content', this.props.className),
- afterOpen: classNames('modal-content', this.props.className),
- beforeClose: classNames('modal-content', this.props.className)
- }}
- overlayClassName={{
- base: classNames('modal-overlay', this.props.overlayClassName),
- afterOpen: classNames('modal-overlay', this.props.overlayClassName),
- beforeClose: classNames('modal-overlay', this.props.overlayClassName)
- }}
- ref={component => {
- this.modal = component;
- }}
+ ref={
+ function (component) {
+ this.modal = component;
+ }.bind(this)
+ }
+ className={modalClasses}
+ overlayClassName={overlayClasses}
{...omit(this.props, ['className', 'overlayClassName'])}
>
- <div
- className="modal-content-close"
- onClick={this.handleRequestClose}
- >
+ <div className="modal-content-close" onClick={this.requestClose}>
<img
- alt="close-icon"
className="modal-content-close-img"
src="/svgs/modal/close-x.svg"
+ alt="close-icon"
/>
</div>
{this.props.children}
</ReactModal>
);
}
-}
-
-Modal.propTypes = {
- children: PropTypes.node,
- className: PropTypes.string,
- overlayClassName: PropTypes.string
-};
+});
module.exports = Modal;
diff --git a/src/components/modal/base/modal.scss b/src/components/modal/base/modal.scss
index 9fec2deef..3d01d683f 100644
--- a/src/components/modal/base/modal.scss
+++ b/src/components/modal/base/modal.scss
@@ -21,7 +21,7 @@
background-color: transparentize($ui-blue, .3);
}
-.modal-content:focus {
+.ReactModal__Content:focus {
outline: none;
}
diff --git a/src/components/modal/iframe/modal.jsx b/src/components/modal/iframe/modal.jsx
index 620e761f8..6bff74ee5 100644
--- a/src/components/modal/iframe/modal.jsx
+++ b/src/components/modal/iframe/modal.jsx
@@ -1,28 +1,34 @@
-const classNames = require('classnames');
-const omit = require('lodash.omit');
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var omit = require('lodash.omit');
+var React = require('react');
-const Modal = require('../base/modal.jsx');
+var Modal = require('../base/modal.jsx');
require('./modal.scss');
-const IframeModal = props => (
- <Modal {...omit(props, ['src'])}>
- <iframe
- className={classNames('modal-content-iframe', props.className)}
- ref={props.componentRef}
- src={props.src}
- />
- </Modal>
-);
-
-IframeModal.propTypes = {
- className: PropTypes.string,
- componentRef: PropTypes.func,
- isOpen: PropTypes.bool,
- onRequestClose: PropTypes.func,
- src: PropTypes.string
-};
+var IframeModal = React.createClass({
+ propTypes: {
+ isOpen: React.PropTypes.bool,
+ onRequestClose: React.PropTypes.func,
+ className: React.PropTypes.string,
+ componentRef: React.PropTypes.func,
+ src: React.PropTypes.string
+ },
+ render: function () {
+ var iframeClasses = classNames(
+ 'modal-content-iframe',
+ this.props.className
+ );
+ return (
+ <Modal {...omit(this.props, ['src'])}>
+ <iframe
+ ref={this.props.componentRef}
+ src={this.props.src}
+ className={iframeClasses}
+ />
+ </Modal>
+ );
+ }
+});
module.exports = IframeModal;
diff --git a/src/components/modal/ttt/modal.jsx b/src/components/modal/ttt/modal.jsx
index 698d15d2b..f70dcd173 100644
--- a/src/components/modal/ttt/modal.jsx
+++ b/src/components/modal/ttt/modal.jsx
@@ -1,138 +1,121 @@
-const FormattedMessage = require('react-intl').FormattedMessage;
-const MediaQuery = require('react-responsive').default;
-const omit = require('lodash.omit');
-const PropTypes = require('prop-types');
-const React = require('react');
+var FormattedMessage = require('react-intl').FormattedMessage;
+var MediaQuery = require('react-responsive');
+var omit = require('lodash.omit');
+var React = require('react');
-const FlexRow = require('../../flex-row/flex-row.jsx');
-const frameless = require('../../../lib/frameless');
-const Modal = require('../base/modal.jsx');
-const TitleBanner = require('../../title-banner/title-banner.jsx');
+var FlexRow = require('../../flex-row/flex-row.jsx');
+var frameless = require('../../../lib/frameless');
+var Modal = require('../base/modal.jsx');
+var TitleBanner = require('../../title-banner/title-banner.jsx');
require('../../forms/button.scss');
require('./modal.scss');
-const TTTModal = props => (
- <Modal
- className="mod-ttt"
- {...omit(
- props,
- [
- 'title',
- 'description',
- 'tutorialLoc',
- 'activityLoc',
- 'guideLoc',
- 'thumbUrl',
- 'bannerUrl'
- ]
- )}
- >
- <TitleBanner className="mod-ttt">
- <MediaQuery minWidth={frameless.mobile}>
- <img
- alt=""
- className="mod-ttt-img"
- src={props.bannerUrl}
- />
- </MediaQuery>
- <MediaQuery maxWidth={frameless.mobile - 1}>
- <img
- alt=""
- className="mod-ttt-img"
- src={props.thumbUrl}
- />
- </MediaQuery>
- </TitleBanner>
- <div className="ttt-title">
- <h2>{props.title}</h2>
- <p className="ttt-description">{props.description}</p>
- </div>
- <ul className="modal-content-ttt">
- <FlexRow
- as="li"
- className="mod-ttt-item"
+var TTTModal = React.createClass({
+ propTypes: {
+ title: React.PropTypes.string.isRequired,
+ description: React.PropTypes.string.isRequired,
+ tutorialLoc: React.PropTypes.string.isRequired,
+ activityLoc: React.PropTypes.string.isRequired,
+ guideLoc: React.PropTypes.string.isRequired,
+ thumbUrl: React.PropTypes.string.isRequired,
+ bannerUrl: React.PropTypes.string.isRequired
+ },
+ render: function () {
+ var modalOmit = [
+ 'title',
+ 'description',
+ 'tutorialLoc',
+ 'activityLoc',
+ 'guideLoc',
+ 'thumbUrl',
+ 'bannerUrl'
+ ];
+ return (
+ <Modal
+ className="mod-ttt"
+ {...omit(this.props, modalOmit)}
>
- <div className="modal-content-ttt-text">
- <div className="modal-content-ttt-title">
- <img
- alt="tutorial-icon"
- className="modal-content-ttt-title-img"
- src="/svgs/ttt/tutorial.svg"
- />
- <FormattedMessage id="ttt.tutorial" />
- </div>
- <p className="modal-content-ttt-subtitle">
- <FormattedMessage id="ttt.tutorialSubtitle" />
- </p>
+ <TitleBanner className="mod-ttt">
+ <MediaQuery minWidth={frameless.mobile}>
+ <img className="mod-ttt-img" src={this.props.bannerUrl} alt="" />
+ </MediaQuery>
+ <MediaQuery maxWidth={frameless.mobile - 1}>
+ <img className="mod-ttt-img" src={this.props.thumbUrl} alt="" />
+ </MediaQuery>
+ </TitleBanner>
+ <div className="ttt-title">
+ <h2>{this.props.title}</h2>
+ <p className="ttt-description">{this.props.description}</p>
</div>
- <a
- className="button white mod-ttt-item"
- href={props.tutorialLoc}
- >
- <FormattedMessage id="tile.tryIt" />
- </a>
- </FlexRow>
- <FlexRow
- as="li"
- className="mod-ttt-item"
- >
- <div className="modal-content-ttt-text">
- <div className="modal-content-ttt-title">
- <img
- alt="activity-cards-icon"
- className="modal-content-ttt-title-img"
- src="/svgs/ttt/activity-cards.svg"
- />
- <FormattedMessage id="ttt.activityTitle" />
- </div>
- <p className="modal-content-ttt-subtitle">
- <FormattedMessage id="ttt.activitySubtitle" />
- </p>
- </div>
- <a
- className="button white mod-ttt-item"
- href={props.activityLoc}
- >
- <FormattedMessage id="ttt.open" />
- </a>
- </FlexRow>
- <FlexRow
- as="li"
- className="mod-ttt-item"
- >
- <div className="modal-content-ttt-text">
- <div className="modal-content-ttt-title">
- <img
- alt="educator-guide-icon"
- className="modal-content-ttt-title-img"
- src="/svgs/ttt/educator-guide.svg"
- />
- <FormattedMessage id="ttt.educatorTitle" />
- </div>
- <p className="modal-content-ttt-subtitle">
- <FormattedMessage id="ttt.educatorSubtitle" />
- </p>
- </div>
- <a
- className="button white mod-ttt-item"
- href={props.guideLoc}
- >
- <FormattedMessage id="ttt.open" />
- </a>
- </FlexRow>
- </ul>
- </Modal>
-);
-
-TTTModal.propTypes = {
- activityLoc: PropTypes.string.isRequired,
- bannerUrl: PropTypes.string.isRequired,
- description: PropTypes.string.isRequired,
- guideLoc: PropTypes.string.isRequired,
- thumbUrl: PropTypes.string.isRequired,
- title: PropTypes.string.isRequired,
- tutorialLoc: PropTypes.string.isRequired
-};
+ <ul className="modal-content-ttt">
+ <FlexRow as="li" className="mod-ttt-item">
+ <div className="modal-content-ttt-text">
+ <div className="modal-content-ttt-title">
+ <img
+ className="modal-content-ttt-title-img"
+ src="/svgs/ttt/tutorial.svg"
+ alt="tutorial-icon"
+ />
+ <FormattedMessage id="ttt.tutorial" />
+ </div>
+ <p className="modal-content-ttt-subtitle">
+ <FormattedMessage id="ttt.tutorialSubtitle" />
+ </p>
+ </div>
+ <a
+ href={this.props.tutorialLoc}
+ className="button white mod-ttt-item"
+ >
+ <FormattedMessage id="tile.tryIt" />
+ </a>
+ </FlexRow>
+ <FlexRow as="li" className="mod-ttt-item">
+ <div className="modal-content-ttt-text">
+ <div className="modal-content-ttt-title">
+ <img
+ className="modal-content-ttt-title-img"
+ src="/svgs/ttt/activity-cards.svg"
+ alt="activity-cards-icon"
+ />
+ <FormattedMessage id="ttt.activityTitle" />
+ </div>
+ <p className="modal-content-ttt-subtitle">
+ <FormattedMessage id="ttt.activitySubtitle" />
+ </p>
+ </div>
+ <a
+ href={this.props.activityLoc}
+ className="button white mod-ttt-item"
+ >
+ <FormattedMessage id="ttt.open" />
+ </a>
+ </FlexRow>
+ <FlexRow as="li" className="mod-ttt-item">
+ <div className="modal-content-ttt-text">
+ <div className="modal-content-ttt-title">
+ <img
+ className="modal-content-ttt-title-img"
+ src="/svgs/ttt/educator-guide.svg"
+ alt="educator-guide-icon"
+ />
+ <FormattedMessage id="ttt.educatorTitle" />
+ </div>
+ <p className="modal-content-ttt-subtitle">
+ <FormattedMessage id="ttt.educatorSubtitle" />
+ </p>
+ </div>
+ <a
+ href={this.props.guideLoc}
+ className="button white mod-ttt-item"
+ >
+ <FormattedMessage id="ttt.open" />
+ </a>
+ </FlexRow>
+ </ul>
+ </Modal>
+ );
+ }
+});
module.exports = TTTModal;
diff --git a/src/components/navigation/base/navigation.jsx b/src/components/navigation/base/navigation.jsx
index 2b58f36e2..60e6d18f2 100644
--- a/src/components/navigation/base/navigation.jsx
+++ b/src/components/navigation/base/navigation.jsx
@@ -1,18 +1,21 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var React = require('react');
require('./navigation.scss');
-const NavigationBox = props => (
- <div className={classNames('inner', props.className)}>
- {props.children}
- </div>
-);
-
-NavigationBox.propTypes = {
- children: PropTypes.node,
- className: PropTypes.string
-};
+var NavigationBox = React.createClass({
+ type: 'NavigationBox',
+ render: function () {
+ var classes = classNames(
+ 'inner',
+ this.props.className
+ );
+ return (
+ <div className={classes}>
+ {this.props.children}
+ </div>
+ );
+ }
+});
module.exports = NavigationBox;
diff --git a/src/components/navigation/conference/2016/navigation.jsx b/src/components/navigation/conference/2016/navigation.jsx
index 627f32abf..b9158c5b7 100644
--- a/src/components/navigation/conference/2016/navigation.jsx
+++ b/src/components/navigation/conference/2016/navigation.jsx
@@ -1,55 +1,42 @@
-const React = require('react');
+var React = require('react');
-const NavigationBox = require('../../base/navigation.jsx');
+var NavigationBox = require('../../base/navigation.jsx');
require('./navigation.scss');
-const Navigation = () => (
- <NavigationBox>
- <ul className="ul mod-2016">
- <li className="li-left mod-logo mod-2016">
- <a
- className="logo-a"
- href="/conference/2016"
- >
- <img
- alt="Scratch Logo"
- className="logo-a-image"
- src="/images/logo_sm.png"
- />
- <p className="logo-a-title">Conference</p>
- </a>
- </li>
- <li className="li-right mod-2016">
- <ul className="li-right-ul mod-2016">
- <li className="link expect">
- <a
- className="link-a"
- href="/conference/2016/expect"
- >
- What to Expect
+var Navigation = React.createClass({
+ type: 'Navigation',
+ render: function () {
+ return (
+ <NavigationBox>
+ <ul className="ul mod-2016">
+ <li className="li-left mod-logo mod-2016">
+ <a href="/conference/2016" className="logo-a">
+ <img
+ src="/images/logo_sm.png"
+ alt="Scratch Logo"
+ className="logo-a-image"
+ />
+ <p className="logo-a-title">Conference</p>
</a>
</li>
- <li className="link plan">
- <a
- className="link-a"
- href="/conference/2016/plan"
- >
- Plan Your Visit
- </a>
- </li>
- <li className="link schedule">
- <a
- className="link-a"
- href="/conference/2016/schedule"
- >
- Schedule
- </a>
+ <li className="li-right mod-2016">
+ <ul className="li-right-ul mod-2016">
+ <li className="link expect">
+ <a href="/conference/2016/expect" className="link-a">What to Expect</a>
+ </li>
+ <li className="link plan">
+ <a href="/conference/2016/plan" className="link-a">Plan Your Visit</a>
+ </li>
+ <li className="link schedule">
+ <a href="/conference/2016/schedule" className="link-a">Schedule</a>
+ </li>
+ </ul>
</li>
</ul>
- </li>
- </ul>
- </NavigationBox>
-);
+ </NavigationBox>
+ );
+ }
+});
module.exports = Navigation;
diff --git a/src/components/navigation/conference/2017/navigation.jsx b/src/components/navigation/conference/2017/navigation.jsx
index aaac430eb..d3d554980 100644
--- a/src/components/navigation/conference/2017/navigation.jsx
+++ b/src/components/navigation/conference/2017/navigation.jsx
@@ -1,27 +1,29 @@
-const React = require('react');
+var React = require('react');
-const NavigationBox = require('../../base/navigation.jsx');
+var NavigationBox = require('../../base/navigation.jsx');
require('./navigation.scss');
-const Navigation = () => (
- <NavigationBox>
- <ul className="ul mod-2017">
- <li className="li-left mod-logo mod-2017">
- <a
- className="logo-a"
- href="/conference"
- >
- <img
- alt="Scratch Logo"
- className="logo-a-image"
- src="/images/logo_sm.png"
- />
- <p className="logo-a-title">Conferences</p>
- </a>
- </li>
- </ul>
- </NavigationBox>
-);
+var Navigation = React.createClass({
+ type: 'Navigation',
+ render: function () {
+ return (
+ <NavigationBox>
+ <ul className="ul mod-2017">
+ <li className="li-left mod-logo mod-2017">
+ <a href="/conference" className="logo-a">
+ <img
+ src="/images/logo_sm.png"
+ alt="Scratch Logo"
+ className="logo-a-image"
+ />
+ <p className="logo-a-title">Conferences</p>
+ </a>
+ </li>
+ </ul>
+ </NavigationBox>
+ );
+ }
+});
module.exports = Navigation;
diff --git a/src/components/navigation/conference/2018/navigation.jsx b/src/components/navigation/conference/2018/navigation.jsx
index d10870107..eb4b39de8 100644
--- a/src/components/navigation/conference/2018/navigation.jsx
+++ b/src/components/navigation/conference/2018/navigation.jsx
@@ -1,27 +1,29 @@
-const React = require('react');
+var React = require('react');
-const NavigationBox = require('../../base/navigation.jsx');
+var NavigationBox = require('../../base/navigation.jsx');
require('./navigation.scss');
-const Navigation = () => (
- <NavigationBox>
- <ul className="ul mod-2018">
- <li className="li-left mod-logo mod-2018">
- <a
- className="logo-a"
- href="/"
- >
- <img
- alt="Scratch Logo"
- className="logo-a-image"
- src="/images/logo_sm.png"
- />
- <p className="logo-a-title">Conferences</p>
- </a>
- </li>
- </ul>
- </NavigationBox>
-);
+var Navigation = React.createClass({
+ type: 'Navigation',
+ render: function () {
+ return (
+ <NavigationBox>
+ <ul className="ul mod-2018">
+ <li className="li-left mod-logo mod-2018">
+ <a href="/" className="logo-a">
+ <img
+ src="/images/logo_sm.png"
+ alt="Scratch Logo"
+ className="logo-a-image"
+ />
+ <p className="logo-a-title">Conferences</p>
+ </a>
+ </li>
+ </ul>
+ </NavigationBox>
+ );
+ }
+});
module.exports = Navigation;
diff --git a/src/components/navigation/www/navigation.jsx b/src/components/navigation/www/navigation.jsx
index fddfbafaf..4438718c6 100644
--- a/src/components/navigation/www/navigation.jsx
+++ b/src/components/navigation/www/navigation.jsx
@@ -1,48 +1,31 @@
-const bindAll = require('lodash.bindall');
-const classNames = require('classnames');
-const connect = require('react-redux').connect;
-const FormattedMessage = require('react-intl').FormattedMessage;
-const injectIntl = require('react-intl').injectIntl;
-const intlShape = require('react-intl').intlShape;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var connect = require('react-redux').connect;
+var React = require('react');
+var ReactIntl = require('react-intl');
+var FormattedMessage = ReactIntl.FormattedMessage;
+var injectIntl = ReactIntl.injectIntl;
-const messageCountActions = require('../../../redux/message-count.js');
-const sessionActions = require('../../../redux/session.js');
+var messageCountActions = require('../../../redux/message-count.js');
+var sessionActions = require('../../../redux/session.js');
-const api = require('../../../lib/api');
-const Avatar = require('../../avatar/avatar.jsx');
-const Button = require('../../forms/button.jsx');
-const Dropdown = require('../../dropdown/dropdown.jsx');
-const Form = require('../../forms/form.jsx');
-const Input = require('../../forms/input.jsx');
-const log = require('../../../lib/log.js');
-const Login = require('../../login/login.jsx');
-const Modal = require('../../modal/base/modal.jsx');
-const NavigationBox = require('../base/navigation.jsx');
-const Registration = require('../../registration/registration.jsx');
+var api = require('../../../lib/api');
+var Avatar = require('../../avatar/avatar.jsx');
+var Button = require('../../forms/button.jsx');
+var Dropdown = require('../../dropdown/dropdown.jsx');
+var Form = require('../../forms/form.jsx');
+var Input = require('../../forms/input.jsx');
+var log = require('../../../lib/log.js');
+var Login = require('../../login/login.jsx');
+var Modal = require('../../modal/base/modal.jsx');
+var NavigationBox = require('../base/navigation.jsx');
+var Registration = require('../../registration/registration.jsx');
require('./navigation.scss');
-class Navigation extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'getProfileUrl',
- 'handleJoinClick',
- 'handleLoginClick',
- 'handleCloseLogin',
- 'handleLogIn',
- 'handleLogOut',
- 'handleAccountNavClick',
- 'handleCloseAccountNav',
- 'showCanceledDeletion',
- 'handleCloseCanceledDeletion',
- 'handleCloseRegistration',
- 'handleCompleteRegistration',
- 'handleSearchSubmit'
- ]);
- this.state = {
+var Navigation = React.createClass({
+ type: 'Navigation',
+ getInitialState: function () {
+ return {
accountNavOpen: false,
canceledDeletionOpen: false,
loginOpen: false,
@@ -50,153 +33,155 @@ class Navigation extends React.Component {
registrationOpen: false,
messageCountIntervalId: -1 // javascript method interval id for getting messsage count.
};
- }
- componentDidMount () {
+ },
+ getDefaultProps: function () {
+ return {
+ session: {},
+ unreadMessageCount: 0, // bubble number to display how many notifications someone has.
+ searchTerm: ''
+ };
+ },
+ componentDidMount: function () {
if (this.props.session.session.user) {
- const intervalId = setInterval(() => {
- this.props.dispatch(
- messageCountActions.getCount(this.props.session.session.user.username)
- );
- }, 120000); // check for new messages every 2 mins.
- this.setState({ // eslint-disable-line react/no-did-mount-set-state
- messageCountIntervalId: intervalId
- });
+ var intervalId = setInterval(function () {
+ this.props.dispatch(messageCountActions.getCount(this.props.session.session.user.username));
+ }.bind(this), 120000); // check for new messages every 2 mins.
+ this.setState({'messageCountIntervalId': intervalId});
}
- }
- componentDidUpdate (prevProps) {
- if (prevProps.session.session.user !== this.props.session.session.user) {
- this.setState({ // eslint-disable-line react/no-did-update-set-state
- loginOpen: false,
- accountNavOpen: false
+ },
+ componentDidUpdate: function (prevProps) {
+ if (prevProps.session.session.user != this.props.session.session.user) {
+ this.setState({
+ 'loginOpen': false,
+ 'accountNavOpen': false
});
if (this.props.session.session.user) {
- const intervalId = setInterval(() => {
- this.props.dispatch(
- messageCountActions.getCount(this.props.session.session.user.username)
- );
- }, 120000); // check for new messages every 2 mins.
- this.setState({ // eslint-disable-line react/no-did-update-set-state
- messageCountIntervalId: intervalId
- });
+ var intervalId = setInterval(function () {
+ this.props.dispatch(messageCountActions.getCount(this.props.session.session.user.username));
+ }.bind(this), 120000); // check for new messages every 2 mins.
+ this.setState({'messageCountIntervalId': intervalId});
} else {
// clear message count check, and set to default id.
clearInterval(this.state.messageCountIntervalId);
this.props.dispatch(messageCountActions.setCount(0));
- this.setState({ // eslint-disable-line react/no-did-update-set-state
- messageCountIntervalId: -1
+ this.setState({
+ 'messageCountIntervalId': -1
});
}
}
- }
- componentWillUnmount () {
+ },
+ componentWillUnmount: function () {
// clear message interval if it exists
- if (this.state.messageCountIntervalId !== -1) {
+ if (this.state.messageCountIntervalId != -1) {
clearInterval(this.state.messageCountIntervalId);
this.props.dispatch(messageCountActions.setCount(0));
this.setState({
- messageCountIntervalId: -1
+ 'messageCountIntervalId': -1
});
}
- }
- getProfileUrl () {
+ },
+ getProfileUrl: function () {
if (!this.props.session.session.user) return;
- return `/users/${this.props.session.session.user.username}/`;
- }
- handleJoinClick (e) {
+ return '/users/' + this.props.session.session.user.username + '/';
+ },
+ handleJoinClick: function (e) {
e.preventDefault();
- this.setState({registrationOpen: true});
- }
- handleLoginClick (e) {
+ this.setState({'registrationOpen': true});
+ },
+ handleLoginClick: function (e) {
e.preventDefault();
- this.setState({loginOpen: !this.state.loginOpen});
- }
- handleCloseLogin () {
- this.setState({loginOpen: false});
- }
- handleLogIn (formData, callback) {
- this.setState({loginError: null});
- formData.useMessages = true;
+ this.setState({'loginOpen': !this.state.loginOpen});
+ },
+ closeLogin: function () {
+ this.setState({'loginOpen': false});
+ },
+ handleLogIn: function (formData, callback) {
+ this.setState({'loginError': null});
+ formData['useMessages'] = true;
api({
method: 'post',
host: '',
uri: '/accounts/login/',
json: formData,
useCsrf: true
- }, (err, body) => {
- if (err) this.setState({loginError: err.message});
+ }, function (err, body) {
+ if (err) this.setState({'loginError': err.message});
if (body) {
body = body[0];
- if (body.success) {
- this.handleCloseLogin();
- body.messages.map(message => { // eslint-disable-line array-callback-return
- if (message.message === 'canceled-deletion') {
- this.showCanceledDeletion();
- }
- });
- this.props.dispatch(sessionActions.refreshSession());
- } else {
+ if (!body.success) {
if (body.redirect) {
window.location = body.redirect;
}
// Update login error message to a friendlier one if it exists
- this.setState({loginError: body.msg});
+ this.setState({'loginError': body.msg});
+ } else {
+ this.closeLogin();
+ body.messages.map(function (message) {
+ if (message.message == 'canceled-deletion') {
+ this.showCanceledDeletion();
+ }
+ }.bind(this));
+ this.props.dispatch(sessionActions.refreshSession());
}
}
// JS error already logged by api mixin
callback();
- });
- }
- handleLogOut (e) {
+ }.bind(this));
+ },
+ handleLogOut: function (e) {
e.preventDefault();
api({
host: '',
method: 'post',
uri: '/accounts/logout/',
useCsrf: true
- }, err => {
+ }, function (err) {
if (err) log.error(err);
- this.handleCloseLogin();
+ this.closeLogin();
window.location = '/';
- });
- }
- handleAccountNavClick (e) {
+ }.bind(this));
+ },
+ handleAccountNavClick: function (e) {
e.preventDefault();
- this.setState({accountNavOpen: true});
- }
- handleCloseAccountNav () {
- this.setState({accountNavOpen: false});
- }
- showCanceledDeletion () {
- this.setState({canceledDeletionOpen: true});
- }
- handleCloseCanceledDeletion () {
- this.setState({canceledDeletionOpen: false});
- }
- handleCloseRegistration () {
- this.setState({registrationOpen: false});
- }
- handleCompleteRegistration () {
+ this.setState({'accountNavOpen': true});
+ },
+ closeAccountNav: function () {
+ this.setState({'accountNavOpen': false});
+ },
+ showCanceledDeletion: function () {
+ this.setState({'canceledDeletionOpen': true});
+ },
+ closeCanceledDeletion: function () {
+ this.setState({'canceledDeletionOpen': false});
+ },
+ closeRegistration: function () {
+ this.setState({'registrationOpen': false});
+ },
+ completeRegistration: function () {
this.props.dispatch(sessionActions.refreshSession());
- this.handleCloseRegistration();
- }
- handleSearchSubmit (formData) {
- window.location.href = `/search/projects?q=${encodeURIComponent(formData.q)}`;
- }
- render () {
- const createLink = this.props.session.session.user ? '/projects/editor/' : '/projects/editor/?tip_bar=home';
+ this.closeRegistration();
+ },
+ onSearchSubmit: function (formData) {
+ window.location.href = '/search/projects?q=' + encodeURIComponent(formData.q);
+ },
+ render: function () {
+ var classes = classNames({
+ 'logged-in': this.props.session.session.user
+ });
+ var messageClasses = classNames({
+ 'message-count': true,
+ 'show': this.props.unreadMessageCount > 0
+ });
+ var dropdownClasses = classNames({
+ 'user-info': true,
+ 'open': this.state.accountNavOpen
+ });
+ var formatMessage = this.props.intl.formatMessage;
+ var createLink = this.props.session.session.user ? '/projects/editor/' : '/projects/editor/?tip_bar=home';
return (
- <NavigationBox
- className={classNames({
- 'logged-in': this.props.session.session.user
- })}
- >
+ <NavigationBox className={classes}>
<ul>
- <li className="logo">
- <a
- aria-label="Scratch"
- href="/"
- />
- </li>
+ <li className="logo"><a href="/" aria-label="Scratch"></a></li>
<li className="link create">
<a href={createLink}>
@@ -220,76 +205,47 @@ class Navigation extends React.Component {
</li>
<li className="search">
- <Form onSubmit={this.handleSearchSubmit}>
- <Button
- className="btn-search"
- type="submit"
- />
- <Input
- aria-label={this.props.intl.formatMessage({id: 'general.search'})}
- name="q"
- placeholder={this.props.intl.formatMessage({id: 'general.search'})}
- type="text"
- value={this.props.searchTerm}
- />
+ <Form onSubmit={this.onSearchSubmit}>
+ <Button type="submit" className="btn-search" />
+ <Input type="text"
+ value={this.props.searchTerm}
+ aria-label={formatMessage({id: 'general.search'})}
+ placeholder={formatMessage({id: 'general.search'})}
+ name="q" />
</Form>
</li>
{this.props.session.status === sessionActions.Status.FETCHED ? (
this.props.session.session.user ? [
- <li
- className="link right messages"
- key="messages"
- >
+ <li className="link right messages" key="messages">
<a
href="/messages/"
- title={this.props.intl.formatMessage({id: 'general.messages'})}
- >
- <span
- className={classNames({
- 'message-count': true,
- 'show': this.props.unreadMessageCount > 0
- })}
- >{this.props.unreadMessageCount}</span>
+ title={formatMessage({id: 'general.messages'})}>
+
+ <span className={messageClasses}>{this.props.unreadMessageCount}</span>
<FormattedMessage id="general.messages" />
</a>
</li>,
- <li
- className="link right mystuff"
- key="mystuff"
- >
+ <li className="link right mystuff" key="mystuff">
<a
href="/mystuff/"
- title={this.props.intl.formatMessage({id: 'general.myStuff'})}
- >
+ title={formatMessage({id: 'general.myStuff'})}>
+
<FormattedMessage id="general.myStuff" />
</a>
</li>,
- <li
- className="link right account-nav"
- key="account-nav"
- >
- <a
- className={classNames({
- 'user-info': true,
- 'open': this.state.accountNavOpen
- })}
- href="#"
- onClick={this.handleAccountNavClick}
- >
- <Avatar
- alt=""
- src={this.props.session.session.user.thumbnailUrl}
- />
- <span className="profile-name">
+ <li className="link right account-nav" key="account-nav">
+ <a className={dropdownClasses}
+ href="#" onClick={this.handleAccountNavClick}>
+ <Avatar src={this.props.session.session.user.thumbnailUrl} alt="" />
+ <span className='profile-name'>
{this.props.session.session.user.username}
</span>
</a>
<Dropdown
- as="ul"
- className={process.env.SCRATCH_ENV}
- isOpen={this.state.accountNavOpen}
- onRequestClose={this.handleCloseAccountNav}
- >
+ as="ul"
+ isOpen={this.state.accountNavOpen}
+ onRequestClose={this.closeAccountNav}
+ className={process.env.SCRATCH_ENV}>
<li>
<a href={this.getProfileUrl()}>
<FormattedMessage id="general.profile" />
@@ -308,8 +264,8 @@ class Navigation extends React.Component {
</li>
] : []}
{this.props.permissions.student ? [
- <li key="my-class-li">
- <a href={`/classes/${this.props.session.session.user.classroomId}/`}>
+ <li>
+ <a href={'/classes/' + this.props.session.session.user.classroomId + '/'}>
<FormattedMessage id="general.myClass" />
</a>
</li>
@@ -320,123 +276,69 @@ class Navigation extends React.Component {
</a>
</li>
<li className="divider">
- <a
- href="#"
- onClick={this.handleLogOut}
- >
+ <a href="#" onClick={this.handleLogOut}>
<FormattedMessage id="navigation.signOut" />
</a>
</li>
</Dropdown>
</li>
] : [
- <li
- className="link right join"
- key="join"
- >
- <a
- href="#"
- onClick={this.handleJoinClick}
- >
+ <li className="link right join" key="join">
+ <a href="#" onClick={this.handleJoinClick}>
<FormattedMessage id="general.joinScratch" />
</a>
</li>,
<Registration
- isOpen={this.state.registrationOpen}
- key="registration"
- onRegistrationDone={this.handleCompleteRegistration}
- onRequestClose={this.handleCloseRegistration}
- />,
- <li
- className="link right login-item"
- key="login"
- >
+ key="registration"
+ isOpen={this.state.registrationOpen}
+ onRequestClose={this.closeRegistration}
+ onRegistrationDone={this.completeRegistration} />,
+ <li className="link right login-item" key="login">
<a
- className="ignore-react-onclickoutside"
href="#"
- key="login-link"
onClick={this.handleLoginClick}
- >
- <FormattedMessage id="general.signIn" />
- </a>
+ className="ignore-react-onclickoutside"
+ key="login-link">
+ <FormattedMessage id="general.signIn" />
+ </a>
<Dropdown
- className="login-dropdown with-arrow"
- isOpen={this.state.loginOpen}
- key="login-dropdown"
- onRequestClose={this.handleCloseLogin}
- >
+ className="login-dropdown with-arrow"
+ isOpen={this.state.loginOpen}
+ onRequestClose={this.closeLogin}
+ key="login-dropdown">
<Login
- error={this.state.loginError}
onLogIn={this.handleLogIn}
- />
+ error={this.state.loginError} />
</Dropdown>
</li>
- ]) : []}
+ ]) : [
+ ]}
</ul>
- <Modal
- isOpen={this.state.canceledDeletionOpen}
- style={{
- content: {
- padding: 15
- }
- }}
- onRequestClose={this.handleCloseCanceledDeletion}
- >
+ <Modal isOpen={this.state.canceledDeletionOpen}
+ onRequestClose={this.closeCanceledDeletion}
+ style={{content:{padding: 15}}}>
<h4>Your Account Will Not Be Deleted</h4>
- <h4><FormattedMessage id="general.noDeletionTitle" /></h4>
<p>
- <FormattedMessage
- id="general.noDeletionDescription"
- values={{
- resetLink: <a href="/accounts/password_reset/">
- {this.props.intl.formatMessage({id: 'general.noDeletionLink'})}
- </a>
- }}
- />
+ Your account was scheduled for deletion but you logged in. Your account has been reactivated.
+ If you didn’t request for your account to be deleted, you should
+ {' '}<a href="/accounts/password_reset/">change your password</a>{' '}
+ to make sure your account is secure.
</p>
</Modal>
</NavigationBox>
);
}
-}
-
-Navigation.propTypes = {
- dispatch: PropTypes.func,
- intl: intlShape,
- permissions: PropTypes.shape({
- admin: PropTypes.bool,
- social: PropTypes.bool,
- educator: PropTypes.bool,
- educator_invitee: PropTypes.bool,
- student: PropTypes.bool
- }),
- searchTerm: PropTypes.string,
- session: PropTypes.shape({
- session: PropTypes.shape({
- user: PropTypes.shape({
- classroomId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
- thumbnailUrl: PropTypes.string,
- username: PropTypes.string
- })
- }),
- status: PropTypes.string
- }),
- unreadMessageCount: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-};
-
-Navigation.defaultProps = {
- session: {},
- unreadMessageCount: 0, // bubble number to display how many notifications someone has.
- searchTerm: ''
-};
-
-const mapStateToProps = state => ({
- session: state.session,
- permissions: state.permissions,
- unreadMessageCount: state.messageCount.messageCount,
- searchTerm: state.navigation
});
-const ConnectedNavigation = connect(mapStateToProps)(Navigation);
+var mapStateToProps = function (state) {
+ return {
+ session: state.session,
+ permissions: state.permissions,
+ unreadMessageCount: state.messageCount.messageCount,
+ searchTerm: state.navigation
+ };
+};
+
+var ConnectedNavigation = connect(mapStateToProps)(Navigation);
module.exports = injectIntl(ConnectedNavigation);
diff --git a/src/components/nestedcarousel/nestedcarousel.jsx b/src/components/nestedcarousel/nestedcarousel.jsx
index fb5b41b8c..4600032e3 100644
--- a/src/components/nestedcarousel/nestedcarousel.jsx
+++ b/src/components/nestedcarousel/nestedcarousel.jsx
@@ -1,84 +1,75 @@
-const classNames = require('classnames');
-const defaults = require('lodash.defaults');
-const PropTypes = require('prop-types');
-const React = require('react');
-const Slider = require('react-slick');
+var classNames = require('classnames');
+var defaults = require('lodash.defaults');
+var React = require('react');
+var Slider = require('react-slick');
-const Thumbnail = require('../thumbnail/thumbnail.jsx');
+var Thumbnail = require('../thumbnail/thumbnail.jsx');
require('slick-carousel/slick/slick.scss');
require('slick-carousel/slick/slick-theme.scss');
require('./nestedcarousel.scss');
-/*
+{/*
NestedCarousel is used to show a carousel, where each slide is composed of a few
thumbnails (for example, to show step-by-syep tips, where each stage has a few steps).
It creates the thumbnails without links.
Each slide has a title, and then a list of thumbnails, that will be shown together.
-*/
-const NestedCarousel = props => {
- defaults(props.settings, {
- dots: true,
- infinite: false,
- lazyLoad: true,
- slidesToShow: 1,
- slidesToScroll: 1,
- variableWidth: false
- });
+*/}
+var NestedCarousel = React.createClass({
+ type: 'NestedCarousel',
+ propTypes: {
+ items: React.PropTypes.array
+ },
+ getDefaultProps: function () {
+ return {
+ items: require('./nestedcarousel.json')
+ };
+ },
+ render: function () {
+ var settings = this.props.settings || {};
+ defaults(settings, {
+ dots: true,
+ infinite: false,
+ lazyLoad: true,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ variableWidth: false
+ });
- const arrows = props.items.length > props.settings.slidesToShow;
- const stages = [];
-
- for (let i = 0; i < props.items.length; i++) {
- const items = props.items[i].thumbnails;
- const thumbnails = [];
- for (let j = 0; j < items.length; j++) {
- const item = items[j];
- thumbnails.push(
- <Thumbnail
- key={`inner_${i}_${j}`}
- linkTitle={false}
- src={item.thumbnailUrl}
- title={item.title}
- />
- );
- }
- stages.push(
- <div key={`outer_${i}`}>
- <h3>{props.items[i].title}</h3>
+ var arrows = this.props.items.length > settings.slidesToShow;
+
+ var classes = classNames(
+ 'nestedcarousel',
+ 'carousel',
+ this.props.className
+ );
+
+ var stages = [];
+ for (var i=0; i < this.props.items.length; i++) {
+ var items = this.props.items[i].thumbnails;
+ var thumbnails = [];
+ for (var j=0; j < items.length; j++) {
+ var item = items[j];
+ thumbnails.push(
+ <Thumbnail key={'inner_' + i + '_' + j}
+ title={item.title}
+ src={item.thumbnailUrl}
+ linkTitle = {false} />);
+ }
+ stages.push(
+ <div key={'outer_' + i}>
+ <h3>{this.props.items[i].title}</h3>
{thumbnails}
- </div>
+ </div>);
+ }
+ return (
+ <Slider className={classes} arrows={arrows} {... settings}>
+ {stages}
+ </Slider>
);
}
- return (
- <Slider
- arrows={arrows}
- className={classNames('nestedcarousel', 'carousel', props.className)}
- {...props.settings}
- >
- {stages}
- </Slider>
- );
-};
-
-NestedCarousel.propTypes = {
- className: PropTypes.string,
- items: PropTypes.arrayOf(PropTypes.object),
- settings: PropTypes.shape({
- dots: PropTypes.bool,
- infinite: PropTypes.bool,
- lazyLoad: PropTypes.bool,
- slidesToShow: PropTypes.number,
- slidesToScroll: PropTypes.number,
- variableWidth: PropTypes.bool
- })
-};
-
-NestedCarousel.defaultProps = {
- settings: {},
- items: require('./nestedcarousel.json')
-};
+});
module.exports = NestedCarousel;
diff --git a/src/components/news/news.jsx b/src/components/news/news.jsx
index b951f4e3b..227e2e1a8 100644
--- a/src/components/news/news.jsx
+++ b/src/components/news/news.jsx
@@ -1,53 +1,54 @@
-const PropTypes = require('prop-types');
-const React = require('react');
+var React = require('react');
-const Box = require('../box/box.jsx');
+var Box = require('../box/box.jsx');
require('./news.scss');
-const News = props => (
- <Box
- className="news"
- moreHref="/discuss/5/"
- moreTitle={props.messages['general.viewAll']}
- title={props.messages['news.scratchNews']}
- >
- <ul>
- {props.items.map(item => (
- <li key={item.id}>
- <a href={item.url}>
- <img
- alt=""
- className="news-image"
- height="53"
- src={item.image}
- width="53"
- />
- <div className="news-description">
- <h4>{item.headline}</h4>
- <p>{item.copy}</p>
- </div>
- </a>
- </li>
- ))}
- </ul>
- </Box>
-);
+var News = React.createClass({
+ type: 'News',
+ propTypes: {
+ items: React.PropTypes.array
+ },
+ getDefaultProps: function () {
+ return {
+ items: require('./news.json'),
+ messages: {
+ 'general.viewAll': 'View All',
+ 'news.scratchNews': 'Scratch News'
+ }
+ };
+ },
+ render: function () {
+ return (
+ <Box
+ className="news"
+ title={this.props.messages['news.scratchNews']}
+ moreTitle={this.props.messages['general.viewAll']}
+ moreHref="/discuss/5/">
-News.propTypes = {
- items: PropTypes.arrayOf(PropTypes.object),
- messages: PropTypes.shape({
- 'general.viewAll': PropTypes.string,
- 'news.scratchNews': PropTypes.string
- })
-};
-
-News.defaultProps = {
- items: require('./news.json'),
- messages: {
- 'general.viewAll': 'View All',
- 'news.scratchNews': 'Scratch News'
+ <ul>
+ {this.props.items.map(function (item) {
+ return (
+ <li key={item.id}>
+ <a href={item.url}>
+ <img src={item.image}
+ className="news-image"
+ width="53"
+ height="53"
+ alt=""
+ />
+ <div className="news-description">
+ <h4>{item.headline}</h4>
+ <p>{item.copy}</p>
+ </div>
+ </a>
+ </li>
+ );
+ })}
+ </ul>
+ </Box>
+ );
}
-};
+});
module.exports = News;
diff --git a/src/components/page/conference/2016/page.jsx b/src/components/page/conference/2016/page.jsx
index fa8ff3a01..32b1e359e 100644
--- a/src/components/page/conference/2016/page.jsx
+++ b/src/components/page/conference/2016/page.jsx
@@ -1,27 +1,27 @@
-const PropTypes = require('prop-types');
-const React = require('react');
+var React = require('react');
-const Navigation = require('../../../navigation/conference/2016/navigation.jsx');
-const Footer = require('../../../footer/conference/2016/footer.jsx');
+var Navigation = require('../../../navigation/conference/2016/navigation.jsx');
+var Footer = require('../../../footer/conference/2016/footer.jsx');
require('../page.scss');
-const Page = props => (
- <div className="page mod-conference">
- <div id="navigation">
- <Navigation />
- </div>
- <div id="view">
- {props.children}
- </div>
- <div id="footer">
- <Footer />
- </div>
- </div>
-);
-
-Page.propTypes = {
- children: PropTypes.node
-};
+var Page = React.createClass({
+ type: 'Page',
+ render: function () {
+ return (
+ <div className="page mod-conference">
+ <div id="navigation">
+ <Navigation />
+ </div>
+ <div id="view">
+ {this.props.children}
+ </div>
+ <div id="footer">
+ <Footer />
+ </div>
+ </div>
+ );
+ }
+});
module.exports = Page;
diff --git a/src/components/page/conference/2017/page.jsx b/src/components/page/conference/2017/page.jsx
index 03e8757af..b0def2666 100644
--- a/src/components/page/conference/2017/page.jsx
+++ b/src/components/page/conference/2017/page.jsx
@@ -1,27 +1,27 @@
-const PropTypes = require('prop-types');
-const React = require('react');
+var React = require('react');
-const Navigation = require('../../../navigation/conference/2017/navigation.jsx');
-const Footer = require('../../../footer/conference/2017/footer.jsx');
+var Navigation = require('../../../navigation/conference/2017/navigation.jsx');
+var Footer = require('../../../footer/conference/2017/footer.jsx');
require('../page.scss');
-const Page = props => (
- <div className="page mod-conference">
- <div id="navigation">
- <Navigation />
- </div>
- <div id="view">
- {props.children}
- </div>
- <div id="footer">
- <Footer />
- </div>
- </div>
-);
-
-Page.propTypes = {
- children: PropTypes.node
-};
+var Page = React.createClass({
+ type: 'Page',
+ render: function () {
+ return (
+ <div className="page mod-conference">
+ <div id="navigation">
+ <Navigation />
+ </div>
+ <div id="view">
+ {this.props.children}
+ </div>
+ <div id="footer">
+ <Footer />
+ </div>
+ </div>
+ );
+ }
+});
module.exports = Page;
diff --git a/src/components/page/conference/2018/page.jsx b/src/components/page/conference/2018/page.jsx
index c4d242d31..e8dd6e6f8 100644
--- a/src/components/page/conference/2018/page.jsx
+++ b/src/components/page/conference/2018/page.jsx
@@ -1,27 +1,27 @@
-const PropTypes = require('prop-types');
-const React = require('react');
+var React = require('react');
-const Navigation = require('../../../navigation/conference/2018/navigation.jsx');
-const Footer = require('../../../footer/conference/2018/footer.jsx');
+var Navigation = require('../../../navigation/conference/2018/navigation.jsx');
+var Footer = require('../../../footer/conference/2018/footer.jsx');
require('../page.scss');
-const Page = props => (
- <div className="page mod-conference">
- <div id="navigation">
- <Navigation />
- </div>
- <div id="view">
- {props.children}
- </div>
- <div id="footer">
- <Footer />
- </div>
- </div>
-);
-
-Page.propTypes = {
- children: PropTypes.node
-};
+var Page = React.createClass({
+ type: 'Page',
+ render: function () {
+ return (
+ <div className="page mod-conference">
+ <div id="navigation">
+ <Navigation />
+ </div>
+ <div id="view">
+ {this.props.children}
+ </div>
+ <div id="footer">
+ <Footer />
+ </div>
+ </div>
+ );
+ }
+});
module.exports = Page;
diff --git a/src/components/page/www/page.jsx b/src/components/page/www/page.jsx
index d286deb2b..070f7e1dc 100644
--- a/src/components/page/www/page.jsx
+++ b/src/components/page/www/page.jsx
@@ -1,31 +1,29 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+var React = require('react');
+var classNames = require('classnames');
-const Navigation = require('../../navigation/www/navigation.jsx');
-const Footer = require('../../footer/www/footer.jsx');
+var Navigation = require('../../navigation/www/navigation.jsx');
+var Footer = require('../../footer/www/footer.jsx');
-const Page = props => (
- <div className="page">
- <div
- className={classNames({
- staging: process.env.SCRATCH_ENV === 'staging'
- })}
- id="navigation"
- >
- <Navigation />
- </div>
- <div id="view">
- {props.children}
- </div>
- <div id="footer">
- <Footer />
- </div>
- </div>
-);
-
-Page.propTypes = {
- children: PropTypes.node
-};
+var Page = React.createClass({
+ type: 'Page',
+ render: function () {
+ var classes = classNames({
+ 'staging': process.env.SCRATCH_ENV == 'staging'
+ });
+ return (
+ <div className="page">
+ <div id="navigation" className={classes}>
+ <Navigation />
+ </div>
+ <div id="view">
+ {this.props.children}
+ </div>
+ <div id="footer">
+ <Footer />
+ </div>
+ </div>
+ );
+ }
+});
module.exports = Page;
diff --git a/src/components/progression/progression.jsx b/src/components/progression/progression.jsx
index e632b190a..b4a7a4b56 100644
--- a/src/components/progression/progression.jsx
+++ b/src/components/progression/progression.jsx
@@ -1,45 +1,42 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var React = require('react');
-const Progression = props => {
- const childProps = {
- activeStep: props.step,
- totalSteps: React.Children.count(props.children)
- };
- return (
- <div
- className={classNames('progression', props.className)}
- {...props}
- >
- {React.Children.map(props.children, (child, id) => {
- if (id === props.step) {
- return React.cloneElement(child, childProps);
+module.exports = React.createClass({
+ displayName: 'Progression',
+ propTypes: {
+ step: function (props, propName, componentName) {
+ var stepValidator = function (props, propName) {
+ if (props[propName] > -1 && props[propName] < props.children.length) {
+ return null;
+ } else {
+ return new Error('Prop `step` out of range');
}
- })}
- </div>
- );
-};
-
-Progression.propTypes = {
- children: PropTypes.node,
- className: PropTypes.string,
- step: function (props, propName, componentName) {
- const stepValidator = (propz, name) => {
- if (propz[name] > -1 && propz[name] < propz.children.length) {
- return null;
- }
- return new Error('Prop `step` out of range');
+ };
+ return (
+ React.PropTypes.number.isRequired(props, propName, componentName) ||
+ stepValidator(props, propName, componentName)
+ );
+ }
+ },
+ getDefaultProps: function () {
+ return {
+ step: 0
+ };
+ },
+ render: function () {
+ var childProps = {
+ activeStep: this.props.step,
+ totalSteps: React.Children.count(this.props.children)
};
return (
- (typeof props[propName] === 'number' ? null : new Error('Not a number')) ||
- stepValidator(props, propName, componentName)
+ <div {... this.props}
+ className={classNames('progression', this.props.className)}>
+ {React.Children.map(this.props.children, function (child, id) {
+ if (id === this.props.step) {
+ return React.cloneElement(child, childProps);
+ }
+ }, this)}
+ </div>
);
}
-};
-
-Progression.defaultProps = {
- step: 0
-};
-
-module.exports = Progression;
+});
diff --git a/src/components/registration/registration.jsx b/src/components/registration/registration.jsx
index fed69ed49..f0dffa57a 100644
--- a/src/components/registration/registration.jsx
+++ b/src/components/registration/registration.jsx
@@ -1,62 +1,53 @@
-const bindAll = require('lodash.bindall');
-const PropTypes = require('prop-types');
-const React = require('react');
-
-const IframeModal = require('../modal/iframe/modal.jsx');
+var React = require('react');
+var IframeModal = require('../modal/iframe/modal.jsx');
require('./registration.scss');
-class Registration extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleMessage',
- 'toggleMessageListener'
- ]);
- }
- componentDidMount () {
- if (this.props.isOpen) this.toggleMessageListener(true);
- }
- componentDidUpdate (prevProps) {
- this.toggleMessageListener(this.props.isOpen && !prevProps.isOpen);
- }
- componentWillUnmount () {
- this.toggleMessageListener(false);
- }
- handleMessage (e) {
- if (e.origin !== window.location.origin) return;
- if (e.source !== this.registrationIframe.contentWindow) return;
- if (e.data === 'registration-done') this.props.onRegistrationDone();
- if (e.data === 'registration-relaunch') {
+var Registration = React.createClass({
+ propTypes: {
+ isOpen: React.PropTypes.bool,
+ onRegistrationDone: React.PropTypes.func,
+ onRequestClose: React.PropTypes.func
+ },
+ onMessage: function (e) {
+ if (e.origin != window.location.origin) return;
+ if (e.source != this.registrationIframe.contentWindow) return;
+ if (e.data == 'registration-done') this.props.onRegistrationDone();
+ if (e.data == 'registration-relaunch') {
this.registrationIframe.contentWindow.location.reload();
}
- }
- toggleMessageListener (present) {
+ },
+ toggleMessageListener: function (present) {
if (present) {
- window.addEventListener('message', this.handleMessage);
+ window.addEventListener('message', this.onMessage);
} else {
- window.removeEventListener('message', this.handleMessage);
+ window.removeEventListener('message', this.onMessage);
}
- }
- render () {
+ },
+ componentDidMount: function () {
+ if (this.props.isOpen) this.toggleMessageListener(true);
+ },
+ componentDidUpdate: function (prevProps) {
+ this.toggleMessageListener(this.props.isOpen && !prevProps.isOpen);
+ },
+ componentWillUnmount: function () {
+ this.toggleMessageListener(false);
+ },
+ render: function () {
return (
<IframeModal
- className="mod-registration"
- componentRef={iframe => { // eslint-disable-line react/jsx-no-bind
- this.registrationIframe = iframe;
- }}
isOpen={this.props.isOpen}
- src="/accounts/standalone-registration/"
onRequestClose={this.props.onRequestClose}
+ className="mod-registration"
+ componentRef={
+ function (iframe) {
+ this.registrationIframe = iframe;
+ }.bind(this)
+ }
+ src="/accounts/standalone-registration/"
/>
);
}
-}
-
-Registration.propTypes = {
- isOpen: PropTypes.bool,
- onRegistrationDone: PropTypes.func,
- onRequestClose: PropTypes.func
-};
+});
module.exports = Registration;
diff --git a/src/components/registration/steps.jsx b/src/components/registration/steps.jsx
index 90e0fc0f2..7e7ce68e4 100644
--- a/src/components/registration/steps.jsx
+++ b/src/components/registration/steps.jsx
@@ -1,1596 +1,1076 @@
-/* eslint-disable react/no-multi-comp */
-const bindAll = require('lodash.bindall');
-const injectIntl = require('react-intl').injectIntl;
-const intlShape = require('react-intl').intlShape;
-const omit = require('lodash.omit');
-const PropTypes = require('prop-types');
-const React = require('react');
+var React = require('react');
-const api = require('../../lib/api');
-const countryData = require('../../lib/country-data');
-const intl = require('../../lib/intl.jsx');
+var api = require('../../lib/api');
+var countryData = require('../../lib/country-data');
+var intl = require('../../lib/intl.jsx');
-const Avatar = require('../../components/avatar/avatar.jsx');
-const Button = require('../../components/forms/button.jsx');
-const Card = require('../../components/card/card.jsx');
-const CharCount = require('../../components/forms/charcount.jsx');
-const Checkbox = require('../../components/forms/checkbox.jsx');
-const CheckboxGroup = require('../../components/forms/checkbox-group.jsx');
-const Form = require('../../components/forms/form.jsx');
-const GeneralError = require('../../components/forms/general-error.jsx');
-const Input = require('../../components/forms/input.jsx');
-const PhoneInput = require('../../components/forms/phone-input.jsx');
-const RadioGroup = require('../../components/forms/radio-group.jsx');
-const Select = require('../../components/forms/select.jsx');
-const Slide = require('../../components/slide/slide.jsx');
-const Spinner = require('../../components/spinner/spinner.jsx');
-const StepNavigation = require('../../components/stepnavigation/stepnavigation.jsx');
-const TextArea = require('../../components/forms/textarea.jsx');
-const Tooltip = require('../../components/tooltip/tooltip.jsx');
+var Avatar = require('../../components/avatar/avatar.jsx');
+var Button = require('../../components/forms/button.jsx');
+var Card = require('../../components/card/card.jsx');
+var CharCount = require('../../components/forms/charcount.jsx');
+var Checkbox = require('../../components/forms/checkbox.jsx');
+var CheckboxGroup = require('../../components/forms/checkbox-group.jsx');
+var Form = require('../../components/forms/form.jsx');
+var GeneralError = require('../../components/forms/general-error.jsx');
+var Input = require('../../components/forms/input.jsx');
+var PhoneInput = require('../../components/forms/phone-input.jsx');
+var RadioGroup = require('../../components/forms/radio-group.jsx');
+var Select = require('../../components/forms/select.jsx');
+var Slide = require('../../components/slide/slide.jsx');
+var Spinner = require('../../components/spinner/spinner.jsx');
+var StepNavigation = require('../../components/stepnavigation/stepnavigation.jsx');
+var TextArea = require('../../components/forms/textarea.jsx');
+var Tooltip = require('../../components/tooltip/tooltip.jsx');
require('./steps.scss');
-const DEFAULT_COUNTRY = 'us';
+var DEFAULT_COUNTRY = 'us';
/**
* Return a list of options to give to frc select
- * @param {object} reactIntl react-intl, used to localize strings
- * @param {string} defaultCountry optional string of default country to put at top of list
- * @return {object} ordered set of county options formatted for frc select
+ * @param {Object} intl react-intl, used to localize strings
+ * @param {String} defaultCountry optional string of default country to put at top of list
+ * @return {Object} ordered set of county options formatted for frc select
*/
-const getCountryOptions = (reactIntl, defaultCountry) => {
- const options = countryData.countryOptions.concat({
- label: reactIntl.formatMessage({id: 'registration.selectCountry'}),
+var getCountryOptions = function (intl, defaultCountry) {
+ var options = countryData.countryOptions.concat({
+ label: intl.formatMessage({id: 'registration.selectCountry'}),
disabled: true,
selected: true
});
-
if (typeof defaultCountry !== 'undefined') {
- return options.sort((a, b) => {
+ return options.sort(function (a, b) {
if (a.disabled) return -1;
if (b.disabled) return 1;
if (a.value === defaultCountry) return -1;
if (b.value === defaultCountry) return 1;
return 0;
- });
+ }.bind(this));
}
return options;
};
-const NextStepButton = props => (
- <Button
- className="card-button"
- disabled={props.waiting}
- type="submit"
- {...omit(props, ['text', 'waiting'])}
- >
- {props.waiting ?
- <Spinner /> :
- props.text
- }
- </Button>
-);
-
-NextStepButton.propTypes = {
- text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
- waiting: PropTypes.bool
-};
-
-NextStepButton.defaultProps = {
- waiting: false,
- text: 'Next Step'
-};
-
-
-/*
- * USERNAME STEP
- */
-class UsernameStep extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleChangeShowPassword',
- 'handleUsernameBlur',
- 'handleValidSubmit',
- 'validateUsername'
- ]);
- this.state = {
- showPassword: props.showPassword,
+var NextStepButton = React.createClass({
+ getDefaultProps: function () {
+ return {
waiting: false,
- validUsername: ''
+ text: 'Next Step'
};
- }
- handleChangeShowPassword (field, value) {
- this.setState({showPassword: value});
- }
- validateUsername (username, callback) {
- callback = callback || function () {};
-
- if (!username) {
- this.form.formsy.updateInputsWithError({
- 'user.username': this.props.intl.formatMessage({id: 'form.validationRequired'})
- });
- return callback(false);
- }
-
- api({
- host: '',
- uri: `/accounts/check_username/${username}/`
- }, (err, body, res) => {
- if (err || res.statusCode !== 200) {
- err = err || this.props.intl.formatMessage({id: 'general.error'});
- this.form.formsy.updateInputsWithError({all: err});
- return callback(false);
- }
- body = body[0];
-
- switch (body.msg) {
- case 'valid username':
- this.setState({
- validUsername: 'pass'
- });
- return callback(true);
- case 'username exists':
- this.form.formsy.updateInputsWithError({
- 'user.username': this.props.intl.formatMessage({
- id: 'registration.validationUsernameExists'
- })
- });
- return callback(false);
- case 'bad username':
- this.form.formsy.updateInputsWithError({
- 'user.username': this.props.intl.formatMessage({
- id: 'registration.validationUsernameVulgar'
- })
- });
- return callback(false);
- case 'invalid username':
- default:
- this.form.formsy.updateInputsWithError({
- 'user.username': this.props.intl.formatMessage({
- id: 'registration.validationUsernameInvalid'
- })
- });
- return callback(false);
- }
- });
- }
- handleUsernameBlur (event) {
- if (this.form.formsy.inputs[0].isValidValue(event.currentTarget.value)) {
- this.validateUsername(event.currentTarget.value);
- }
- }
- handleValidSubmit (formData) {
- this.setState({waiting: true});
- this.validateUsername(formData.user.username, isValid => {
- this.setState({waiting: false});
- if (isValid) return this.props.onNextStep(formData);
- });
- }
- render () {
+ },
+ render: function () {
return (
- <Slide className="registration-step username-step">
- <h2>
- {this.props.title ? (
- this.props.title
- ) : (
- <intl.FormattedMessage id="registration.usernameStepTitle" />
- )}
- </h2>
- <p className="description">
- {this.props.description ? (
- this.props.description
- ) : (
- <intl.FormattedMessage id="registration.usernameStepDescription" />
- )}
- {this.props.tooltip ? (
- <Tooltip
- tipContent={this.props.tooltip}
- title={'?'}
- />
- ) : (
- null
- )}
- </p>
- <Card>
- <Form
- ref={form => {
- this.form = form;
- }}
- onValidSubmit={this.handleValidSubmit}
- >
- <div>
- <div className="username-label">
- <b>
- {this.props.intl.formatMessage({id: 'registration.createUsername'})}
- </b>
- {this.props.usernameHelp ? (
- <p className="help-text">{this.props.usernameHelp}</p>
- ) : (
- null
- )}
- </div>
- <Input
- required
- className={this.state.validUsername}
- name="user.username"
- type="text"
- validationErrors={{
- matchRegexp: this.props.intl.formatMessage({
- id: 'registration.validationUsernameRegexp'
- }),
- minLength: this.props.intl.formatMessage({
- id: 'registration.validationUsernameMinLength'
- }),
- maxLength: this.props.intl.formatMessage({
- id: 'registration.validationUsernameMaxLength'
- })
- }}
- validations={{
- matchRegexp: /^[\w-]*$/,
- minLength: 3,
- maxLength: 20
- }}
- onBlur={this.handleUsernameBlur}
- />
- </div>
- <Input
- required
- label={
- this.props.intl.formatMessage({id: 'general.password'})
- }
- name="user.password"
- type={this.state.showPassword ? 'text' : 'password'}
- validationErrors={{
- minLength: this.props.intl.formatMessage({
- id: 'registration.validationPasswordLength'
- }),
- notEquals: this.props.intl.formatMessage({
- id: 'registration.validationPasswordNotEquals'
- }),
- notEqualsField: this.props.intl.formatMessage({
- id: 'registration.validationPasswordNotUsername'
- })
- }}
- validations={{
- minLength: 6,
- notEquals: 'password',
- notEqualsField: 'user.username'
- }}
- />
- <Checkbox
- help={null}
- label={
- this.props.intl.formatMessage({id: 'registration.showPassword'})
- }
- name="showPassword"
- value={this.state.showPassword}
- onChange={this.handleChangeShowPassword}
- />
- <GeneralError name="all" />
- <NextStepButton
- text={<intl.FormattedMessage id="registration.nextStep" />}
- waiting={this.props.waiting || this.state.waiting}
- />
- </Form>
- </Card>
- <StepNavigation
- active={this.props.activeStep}
- steps={this.props.totalSteps - 1}
- />
- </Slide>
- );
- }
-}
-
-UsernameStep.propTypes = {
- activeStep: PropTypes.number,
- description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
- intl: intl.intlShape,
- onNextStep: PropTypes.func,
- showPassword: PropTypes.bool,
- title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
- tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
- totalSteps: PropTypes.number,
- usernameHelp: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
- waiting: PropTypes.bool
-};
-
-UsernameStep.defaultProps = {
- showPassword: false,
- waiting: false
-};
-
-const IntlUsernameStep = injectIntl(UsernameStep);
-
-
-/*
- * PASSWORD STEP
- */
-class ChoosePasswordStep extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleChangeShowPassword'
- ]);
- this.state = {
- showPassword: props.showPassword
- };
- }
- handleChangeShowPassword (field, value) {
- this.setState({showPassword: value});
- }
- render () {
- return (
- <Slide className="registration-step choose-password-step">
- <h2>
- {this.props.intl.formatMessage({id: 'registration.choosePasswordStepTitle'})}
- </h2>
- <p className="description">
- <intl.FormattedMessage id="registration.choosePasswordStepDescription" />
- <Tooltip
- tipContent={
- this.props.intl.formatMessage({id: 'registration.choosePasswordStepTooltip'})
- }
- title={'?'}
- />
- </p>
-
- <Card>
- <Form onValidSubmit={this.props.onNextStep}>
- <Input
- required
- label={
- this.props.intl.formatMessage({id: 'registration.newPassword'})
- }
- name="user.password"
- type={this.state.showPassword ? 'text' : 'password'}
- validationErrors={{
- minLength: this.props.intl.formatMessage({
- id: 'registration.validationPasswordLength'
- }),
- notEquals: this.props.intl.formatMessage({
- id: 'registration.validationPasswordNotEquals'
- }),
- notEqualsUsername: this.props.intl.formatMessage({
- id: 'registration.validationPasswordNotUsername'
- })
- }}
- validations={{
- minLength: 6,
- notEquals: 'password',
- notEqualsUsername: this.props.username
- }}
- />
- <Checkbox
- help={null}
- label={
- this.props.intl.formatMessage({id: 'registration.showPassword'})
- }
- name="showPassword"
- value={this.state.showPassword}
- onChange={this.handleChangeShowPassword}
- />
- <NextStepButton
- text={<intl.FormattedMessage id="registration.nextStep" />}
- waiting={this.props.waiting || this.state.waiting}
- />
- </Form>
- </Card>
- <StepNavigation
- active={this.props.activeStep}
- steps={this.props.totalSteps - 1}
- />
- </Slide>
- );
- }
-}
-
-ChoosePasswordStep.propTypes = {
- activeStep: PropTypes.number,
- intl: intlShape,
- onNextStep: PropTypes.func,
- showPassword: PropTypes.bool,
- totalSteps: PropTypes.number,
- username: PropTypes.string,
- waiting: PropTypes.bool
-};
-
-ChoosePasswordStep.defaultProps = {
- showPassword: false,
- username: null,
- waiting: false
-};
-
-const IntlChoosePasswordStep = injectIntl(ChoosePasswordStep);
-
-
-/*
- * DEMOGRAPHICS STEP
- */
-class DemographicsStep extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'getMonthOptions',
- 'getYearOptions',
- 'handleChooseGender',
- 'handleValidSubmit'
- ]);
- this.state = {
- otherDisabled: true
- };
- }
- getMonthOptions () {
- return [
- 'January', 'February', 'March', 'April', 'May', 'June', 'July',
- 'August', 'September', 'October', 'November', 'December'
- ].map((label, id) => ({
- value: id + 1,
- label: this.props.intl.formatMessage({id: `general.month${label}`})
- }));
- }
- getYearOptions () {
- return Array.apply(null, Array(100)).map((v, id) => {
- const year = new Date().getFullYear() - (id + this.props.birthOffset);
- return {value: year, label: year};
- });
- }
- handleChooseGender (name, gender) {
- this.setState({otherDisabled: gender !== 'other'});
- }
- handleValidSubmit (formData, reset, invalidate) {
- const birthdate = new Date(
- formData.user.birth.year,
- formData.user.birth.month - 1,
- 1
- );
- if (((Date.now() - birthdate) / (24 * 3600 * 1000 * 365.25)) < this.props.birthOffset) {
- return invalidate({
- 'user.birth.year': this.props.intl.formatMessage({id: 'teacherRegistration.validationAge'})
- });
- }
- return this.props.onNextStep(formData);
- }
- render () {
- return (
- <Slide className="registration-step demographics-step">
- <h2>
- <intl.FormattedMessage id="registration.personalStepTitle" />
- </h2>
- <p className="description">
- {this.props.description ?
- this.props.description :
- <intl.FormattedMessage id="registration.personalStepDescription" />
- }
- <Tooltip
- tipContent={
- this.props.intl.formatMessage({id: 'registration.nameStepTooltip'})
- }
- title={'?'}
- />
- </p>
- <Card>
- <Form onValidSubmit={this.handleValidSubmit}>
- <Select
- required
- label={
- this.props.intl.formatMessage({id: 'general.birthMonth'})
- }
- name="user.birth.month"
- options={this.getMonthOptions()}
- />
- <Select
- required
- label={
- this.props.intl.formatMessage({id: 'general.birthYear'})
- }
- name="user.birth.year"
- options={this.getYearOptions()}
- />
- <RadioGroup
- required
- label={
- this.props.intl.formatMessage({id: 'general.gender'})
- }
- name="user.gender"
- options={[
- {
- value: 'female',
- label: this.props.intl.formatMessage({id: 'general.female'})
- },
- {
- value: 'male',
- label: this.props.intl.formatMessage({id: 'general.male'})
- },
- {
- value: 'other',
- label: <Input
- className="demographics-step-input-other"
- disabled={this.state.otherDisabled}
- help={null}
- name="user.genderOther"
- required={!this.state.otherDisabled}
- type="text"
- validationErrors={{
- maxLength: this.props.intl.formatMessage({
- id: 'registration.validationMaxLength'
- })
- }}
- validations={{
- maxLength: 25
- }}
- />
- }
- ]}
- onChange={this.handleChooseGender}
- />
- <Select
- required
- label={this.props.intl.formatMessage({id: 'general.country'})}
- name="user.country"
- options={getCountryOptions(this.props.intl, DEFAULT_COUNTRY)}
- />
- <Checkbox
- className="demographics-checkbox-is-robot"
- label="I'm a robot!"
- name="user.isRobot"
- />
- <NextStepButton
- text={<intl.FormattedMessage id="registration.nextStep" />}
- waiting={this.props.waiting}
- />
- </Form>
- </Card>
- <StepNavigation
- active={this.props.activeStep}
- steps={this.props.totalSteps - 1}
- />
- </Slide>
- );
- }
-}
-
-DemographicsStep.propTypes = {
- activeStep: PropTypes.number,
- birthOffset: PropTypes.number,
- description: PropTypes.string,
- intl: intlShape,
- onNextStep: PropTypes.func,
- totalSteps: PropTypes.number,
- waiting: PropTypes.bool
-};
-
-DemographicsStep.defaultProps = {
- waiting: false,
- description: null,
- birthOffset: 0
-};
-
-const IntlDemographicsStep = injectIntl(DemographicsStep);
-
-
-/*
- * NAME STEP
- */
-const NameStep = props => (
- <Slide className="registration-step name-step">
- <h2>
- <intl.FormattedHTMLMessage id="teacherRegistration.nameStepTitle" />
- </h2>
- <p className="description">
- <intl.FormattedMessage id="teacherRegistration.nameStepDescription" />
- <Tooltip
- tipContent={
- props.intl.formatMessage({id: 'registration.nameStepTooltip'})
+ <Button type="submit" disabled={this.props.waiting} className="card-button" {... this.props}>
+ {this.props.waiting ?
+ <Spinner /> :
+ this.props.text
}
- title={'?'}
- />
- </p>
- <Card>
- <Form onValidSubmit={props.onNextStep}>
- <Input
- required
- label={
- props.intl.formatMessage({id: 'teacherRegistration.firstName'})
- }
- name="user.name.first"
- type="text"
- validationErrors={{
- maxLength: props.intl.formatMessage({
- id: 'registration.validationMaxLength'
- })
- }}
- validations={{
- maxLength: 50
- }}
- />
- <Input
- required
- label={
- props.intl.formatMessage({id: 'teacherRegistration.lastName'})
- }
- name="user.name.last"
- type="text"
- validationErrors={{
- maxLength: props.intl.formatMessage({
- id: 'registration.validationMaxLength'
- })
- }}
- validations={{
- maxLength: 50
- }}
- />
- <NextStepButton
- text={<intl.FormattedMessage id="registration.nextStep" />}
- waiting={props.waiting}
- />
- </Form>
- </Card>
- <StepNavigation
- active={props.activeStep}
- steps={props.totalSteps - 1}
- />
- </Slide>
-);
-
-NameStep.propTypes = {
- activeStep: PropTypes.number,
- intl: intlShape,
- onNextStep: PropTypes.func,
- totalSteps: PropTypes.number,
- waiting: PropTypes.bool
-};
-
-NameStep.defaultProps = {
- waiting: false
-};
-
-const IntlNameStep = injectIntl(NameStep);
-
-
-/*
- * PHONE NUMBER STEP
- */
-class PhoneNumberStep extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleValidSubmit'
- ]);
- }
- handleValidSubmit (formData, reset, invalidate) {
- if (!formData.phone || formData.phone.national_number === '+') {
- return invalidate({
- phone: this.props.intl.formatMessage({id: 'form.validationRequired'})
- });
- }
- return this.props.onNextStep(formData);
- }
- render () {
- return (
- <Slide className="registration-step phone-step">
- <h2>
- <intl.FormattedMessage id="teacherRegistration.phoneNumber" />
- </h2>
- <p className="description">
- <intl.FormattedMessage id="teacherRegistration.phoneStepDescription" />
- <Tooltip
- tipContent={
- this.props.intl.formatMessage({id: 'registration.nameStepTooltip'})
- }
- title={'?'}
- />
- </p>
- <Card>
- <Form onValidSubmit={this.handleValidSubmit}>
- <PhoneInput
- required
- defaultCountry={this.props.defaultCountry}
- label={
- this.props.intl.formatMessage({id: 'teacherRegistration.phoneNumber'})
- }
- name="phone"
- />
- <Checkbox
- label={
- this.props.intl.formatMessage({id: 'teacherRegistration.phoneConsent'})
- }
- name="phoneConsent"
- required="isFalse"
- validationErrors={{
- isFalse: this.props.intl.formatMessage({
- id: 'teacherRegistration.validationPhoneConsent'
- })
- }}
- />
- <NextStepButton
- text={<intl.FormattedMessage id="registration.nextStep" />}
- waiting={this.props.waiting}
- />
- </Form>
- </Card>
- <StepNavigation
- active={this.props.activeStep}
- steps={this.props.totalSteps - 1}
- />
- </Slide>
+ </Button>
);
}
-}
+});
-PhoneNumberStep.propTypes = {
- activeStep: PropTypes.number,
- defaultCountry: PropTypes.string,
- intl: intlShape,
- onNextStep: PropTypes.func,
- totalSteps: PropTypes.number,
- waiting: PropTypes.bool
-};
-
-PhoneNumberStep.defaultProps = {
- defaultCountry: DEFAULT_COUNTRY,
- waiting: false
-};
-
-const IntlPhoneNumberStep = injectIntl(PhoneNumberStep);
-
-
-/*
- * ORGANIZATION STEP
- */
-const ORGANIZATION_L10N_STEMS = [
- 'orgChoiceElementarySchool',
- 'orgChoiceMiddleSchool',
- 'orgChoiceHighSchool',
- 'orgChoiceUniversity',
- 'orgChoiceAfterschool',
- 'orgChoiceMuseum',
- 'orgChoiceLibrary',
- 'orgChoiceCamp'
-];
-
-class OrganizationStep extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'getOrganizationOptions',
- 'handleChooseOrganization'
- ]);
- this.state = {
- otherDisabled: true
- };
- }
- getOrganizationOptions () {
- const options = ORGANIZATION_L10N_STEMS.map((choice, id) => ({
- value: id,
- label: this.props.intl.formatMessage({
- id: `teacherRegistration.${choice}`
- })
- }));
-
- // Add "Other" option with empty string, since input field is used
- const otherId = options.length;
- options.push({value: otherId, label: ' '});
-
- return options;
- }
- handleChooseOrganization (name, values) {
- this.setState({
- otherDisabled: values.indexOf(ORGANIZATION_L10N_STEMS.length) === -1
- });
- }
- render () {
- return (
- <Slide className="registration-step organization-step">
- <h2>
- <intl.FormattedMessage id="teacherRegistration.organization" />
- </h2>
- <p className="description">
- <intl.FormattedMessage id="teacherRegistration.orgStepDescription" />
- <Tooltip
- tipContent={
- this.props.intl.formatMessage({id: 'registration.nameStepTooltip'})
- }
- title={'?'}
- />
- </p>
- <Card>
- <Form onValidSubmit={this.props.onNextStep}>
- <Input
- required
- label={
- this.props.intl.formatMessage({id: 'teacherRegistration.organization'})
- }
- name="organization.name"
- type="text"
- validationErrors={{
- maxLength: this.props.intl.formatMessage({
- id: 'registration.validationMaxLength'
- })
- }}
- validations={{
- maxLength: 50
- }}
- />
- <Input
- required
- label={this.props.intl.formatMessage({id: 'teacherRegistration.orgTitle'})}
- name="organization.title"
- type="text"
- validationErrors={{
- maxLength: this.props.intl.formatMessage({
- id: 'registration.validationMaxLength'
- })
- }}
- validations={{
- maxLength: 50
- }}
- />
- <div className="organization-type">
- <b><intl.FormattedMessage id="teacherRegistration.orgType" /></b>
- <p className="help-text">
- <intl.FormattedMessage id="teacherRegistration.checkAll" />
- </p>
- <CheckboxGroup
- required
- name="organization.type"
- options={this.getOrganizationOptions()}
- validationErrors={{
- minLength: this.props.intl.formatMessage({
- id: 'form.validationRequired'
- })
- }}
- validations={{
- minLength: 1
- }}
- value={[]}
- onChange={this.handleChooseOrganization}
- />
- </div>
- <div className="other-input">
- <Input
- disabled={this.state.otherDisabled}
- help={null}
- name="organization.other"
- placeholder={
- this.props.intl.formatMessage({id: 'general.other'})
- }
- required={!this.state.otherDisabled}
- type="text"
- validationErrors={{
- maxLength: this.props.intl.formatMessage({
- id: 'registration.validationMaxLength'
- })
- }}
- validations={{
- maxLength: 50
- }}
- />
- </div>
- <div className="url-input">
- <b><intl.FormattedMessage id="general.website" /></b>
- <p className="help-text">
- <intl.FormattedMessage id="teacherRegistration.notRequired" />
- </p>
- <Input
- name="organization.url"
- placeholder={'http://'}
- required="isFalse"
- type="url"
- validationErrors={{
- maxLength: this.props.intl.formatMessage({
- id: 'registration.validationMaxLength'
- })
- }}
- validations={{
- maxLength: 200
- }}
- />
- </div>
- <NextStepButton
- text={<intl.FormattedMessage id="registration.nextStep" />}
- waiting={this.props.waiting}
- />
- </Form>
- </Card>
- <StepNavigation
- active={this.props.activeStep}
- steps={this.props.totalSteps - 1}
- />
- </Slide>
- );
- }
-}
-
-OrganizationStep.propTypes = {
- activeStep: PropTypes.number,
- intl: intlShape,
- onNextStep: PropTypes.func,
- totalSteps: PropTypes.number,
- waiting: PropTypes.bool
-};
-
-OrganizationStep.defaultProps = {
- waiting: false
-};
-
-const IntlOrganizationStep = injectIntl(OrganizationStep);
-
-
-/*
- * ADDRESS STEP
- */
-class AddressStep extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleChangeCountry'
- ]);
- this.state = {
- countryChoice: props.defaultCountry,
- waiting: false
- };
- }
- handleChangeCountry (field, choice) {
- this.setState({countryChoice: choice});
- }
- render () {
- let stateOptions = countryData.subdivisionOptions[this.state.countryChoice];
- stateOptions = [{}].concat(stateOptions);
- return (
- <Slide className="registration-step address-step">
- <h2>
- <intl.FormattedMessage id="teacherRegistration.addressStepTitle" />
- </h2>
- <p className="description">
- <intl.FormattedMessage id="teacherRegistration.addressStepDescription" />
- <Tooltip
- tipContent={
- this.props.intl.formatMessage({id: 'registration.nameStepTooltip'})
- }
- title={'?'}
- />
- </p>
- <Card>
- <Form onValidSubmit={this.props.onNextStep}>
- <Select
- required
- label={
- this.props.intl.formatMessage({id: 'general.country'})
- }
- name="address.country"
- options={getCountryOptions(this.props.intl)}
- value={this.props.defaultCountry}
- onChange={this.handleChangeCountry}
- />
- <Input
- required
- label={
- this.props.intl.formatMessage({id: 'teacherRegistration.addressLine1'})
- }
- name="address.line1"
- type="text"
- validationErrors={{
- maxLength: this.props.intl.formatMessage({
- id: 'registration.validationMaxLength'
- })
- }}
- validations={{
- maxLength: 100
- }}
- />
- <Input
- label={
- this.props.intl.formatMessage({id: 'teacherRegistration.addressLine2'})
- }
- name="address.line2"
- required="isFalse"
- type="text"
- validationErrors={{
- maxLength: this.props.intl.formatMessage({
- id: 'registration.validationMaxLength'
- })
- }}
- validations={{
- maxLength: 100
- }}
- />
- <Input
- required
- label={
- this.props.intl.formatMessage({id: 'teacherRegistration.city'})
- }
- name="address.city"
- type="text"
- validationErrors={{
- maxLength: this.props.intl.formatMessage({
- id: 'registration.validationMaxLength'
- })
- }}
- validations={{
- maxLength: 50
- }}
- />
- {stateOptions.length > 2 ?
- <Select
- required
- label={
- this.props.intl.formatMessage({id: 'teacherRegistration.stateProvince'})
- }
- name="address.state"
- options={stateOptions}
- /> : []
- }
- <b className="row-label">
- <intl.FormattedMessage id="teacherRegistration.zipCode" />
- </b>
- {this.state.countryChoice === 'us' ? [] : <p className="help-text">
- <intl.FormattedMessage id="teacherRegistration.notRequired" />
- </p>}
- <Input
- name="address.zip"
- required={(this.state.countryChoice === 'us') ? true : 'isFalse'}
- type="text"
- validationErrors={{
- maxLength: this.props.intl.formatMessage({
- id: 'registration.validationMaxLength'
- })
- }}
- validations={{
- maxLength: 10
- }}
- />
- <GeneralError name="all" />
- <NextStepButton
- text={<intl.FormattedMessage id="registration.nextStep" />}
- waiting={this.props.waiting || this.state.waiting}
- />
- </Form>
- </Card>
- <StepNavigation
- active={this.props.activeStep}
- steps={this.props.totalSteps - 1}
- />
- </Slide>
- );
- }
-}
-
-AddressStep.propTypes = {
- activeStep: PropTypes.number,
- defaultCountry: PropTypes.string,
- intl: intlShape,
- onNextStep: PropTypes.func,
- totalSteps: PropTypes.number,
- waiting: PropTypes.bool
-};
-
-AddressStep.defaultProps = {
- defaultCountry: DEFAULT_COUNTRY,
- waiting: false
-};
-
-const IntlAddressStep = injectIntl(AddressStep);
-
-
-/*
- * USE SCRATCH STEP
- */
-class UseScratchStep extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleTyping'
- ]);
- this.state = {
- characterCount: 0
- };
- }
- handleTyping (name, value) {
- this.setState({
- characterCount: value.length
- });
- }
- render () {
- const textAreaClass = (this.state.characterCount > this.props.maxCharacters) ? 'fail' : '';
- return (
- <Slide className="registration-step usescratch-step">
- <h2>
- <intl.FormattedMessage id="teacherRegistration.useScratchStepTitle" />
- </h2>
- <p className="description">
- <intl.FormattedMessage id="teacherRegistration.useScratchStepDescription" />
- <Tooltip
- tipContent={
- this.props.intl.formatMessage({id: 'registration.nameStepTooltip'})
- }
- title={'?'}
- />
- </p>
- <Card>
- <Form onValidSubmit={this.props.onNextStep}>
- <TextArea
- required
- className={textAreaClass}
- label={
- this.props.intl.formatMessage({id: 'teacherRegistration.howUseScratch'})
- }
- name="useScratch"
- validationErrors={{
- maxLength: this.props.intl.formatMessage({
- id: 'teacherRegistration.useScratchMaxLength'
- })
- }}
- validations={{
- maxLength: this.props.maxCharacters
- }}
- onChange={this.handleTyping}
- />
- <CharCount
- currentCharacters={this.state.characterCount}
- maxCharacters={this.props.maxCharacters}
- />
- <NextStepButton
- text={<intl.FormattedMessage id="registration.nextStep" />}
- waiting={this.props.waiting}
- />
- </Form>
- </Card>
- <StepNavigation
- active={this.props.activeStep}
- steps={this.props.totalSteps - 1}
- />
- </Slide>
- );
- }
-}
-
-UseScratchStep.propTypes = {
- activeStep: PropTypes.number,
- intl: intlShape,
- maxCharacters: PropTypes.number,
- onNextStep: PropTypes.func,
- totalSteps: PropTypes.number,
- waiting: PropTypes.bool
-};
-
-UseScratchStep.defaultProps = {
- maxCharacters: 300,
- waiting: false
-};
-
-const IntlUseScratchStep = injectIntl(UseScratchStep);
-
-
-/*
- * EMAIL STEP
- */
-class EmailStep extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleValidSubmit'
- ]);
- this.state = {
- waiting: false
- };
- }
- handleValidSubmit (formData, reset, invalidate) {
- this.setState({waiting: true});
- api({
- host: '',
- uri: '/accounts/check_email/',
- params: {email: formData.user.email}
- }, (err, res) => {
- this.setState({
+module.exports = {
+ UsernameStep: intl.injectIntl(React.createClass({
+ getDefaultProps: function () {
+ return {
+ showPassword: false,
waiting: false
- });
-
- if (err) return invalidate({all: err});
- res = res[0];
- switch (res.msg) {
- case 'valid email':
- return this.props.onNextStep(formData);
- default:
- return invalidate({'user.email': res.msg});
+ };
+ },
+ getInitialState: function () {
+ return {
+ showPassword: this.props.showPassword,
+ waiting: false,
+ validUsername: ''
+ };
+ },
+ onChangeShowPassword: function (field, value) {
+ this.setState({showPassword: value});
+ },
+ validateUsername: function (username, callback) {
+ callback = callback || function () {};
+ if (!username) {
+ this.refs.form.refs.formsy.updateInputsWithError({
+ 'user.username': this.props.intl.formatMessage({id: 'form.validationRequired'})
+ });
+ return callback(false);
}
- });
- }
- render () {
- return (
- <Slide className="registration-step email-step">
- <h2>
- <intl.FormattedMessage id="teacherRegistration.emailStepTitle" />
- </h2>
- <p className="description">
- <intl.FormattedMessage id="teacherRegistration.emailStepDescription" />
- <Tooltip
- tipContent={
- this.props.intl.formatMessage({id: 'registration.nameStepTooltip'})
- }
- title={'?'}
- />
- </p>
- <Card>
- <Form onValidSubmit={this.handleValidSubmit}>
- <Input
- required
- label={
- this.props.intl.formatMessage({id: 'general.emailAddress'})
- }
- name="user.email"
- type="text"
- validationError={
- this.props.intl.formatMessage({id: 'general.validationEmail'})
- }
- validations="isEmail"
- />
- <Input
- required
- label={this.props.intl.formatMessage({id: 'general.confirmEmail'})}
- name="confirmEmail"
- type="text"
- validationErrors={{
- equalsField: this.props.intl.formatMessage({id: 'general.validationEmailMatch'})
- }}
- validations="equalsField:user.email"
- />
- <Checkbox
- value
- help={null}
- label={
- this.props.intl.formatMessage({id: 'registration.optIn'})
- }
- name="subscribe"
- />
- <GeneralError name="all" />
- <NextStepButton
- text={<intl.FormattedMessage id="registration.nextStep" />}
- waiting={this.props.waiting}
- />
- </Form>
- </Card>
- <StepNavigation
- active={this.props.activeStep}
- steps={this.props.totalSteps - 1}
- />
- </Slide>
- );
- }
-}
-EmailStep.propTypes = {
- activeStep: PropTypes.number,
- intl: intlShape,
- onNextStep: PropTypes.func,
- totalSteps: PropTypes.number,
- waiting: PropTypes.bool
-};
+ api({
+ host: '',
+ uri: '/accounts/check_username/' + username + '/'
+ }, function (err, body, res) {
+ var formatMessage = this.props.intl.formatMessage;
+ if (err || res.statusCode !== 200) {
+ err = err || formatMessage({id: 'general.error'});
+ this.refs.form.refs.formsy.updateInputsWithError({all: err});
+ return callback(false);
+ }
+ body = body[0];
-EmailStep.defaultProps = {
- waiting: false
-};
-
-const IntlEmailStep = injectIntl(EmailStep);
-
-
-/*
- * TEACHER APPROVAL STEP
- */
-const TeacherApprovalStep = props => (
- <Slide className="registration-step last-step">
- <h2>
- <intl.FormattedMessage id="registration.lastStepTitle" />
- </h2>
- <p className="description">
- <intl.FormattedMessage id="registration.lastStepDescription" />
- </p>
- {props.confirmed || !props.email ?
- [] : (
- <Card className="confirm">
- <h4><intl.FormattedMessage id="registration.confirmYourEmail" /></h4>
- <p>
- <intl.FormattedMessage id="registration.confirmYourEmailDescription" /><br />
- <strong>{props.email}</strong>
+ switch (body.msg) {
+ case 'valid username':
+ this.setState({
+ validUsername: 'pass'
+ });
+ return callback(true);
+ case 'username exists':
+ this.refs.form.refs.formsy.updateInputsWithError({
+ 'user.username': formatMessage({id: 'registration.validationUsernameExists'})
+ });
+ return callback(false);
+ case 'bad username':
+ this.refs.form.refs.formsy.updateInputsWithError({
+ 'user.username': formatMessage({id: 'registration.validationUsernameVulgar'})
+ });
+ return callback(false);
+ case 'invalid username':
+ default:
+ this.refs.form.refs.formsy.updateInputsWithError({
+ 'user.username': formatMessage({id: 'registration.validationUsernameInvalid'})
+ });
+ return callback(false);
+ }
+ }.bind(this));
+ },
+ onUsernameBlur: function (event) {
+ if (this.refs.form.refs.formsy.inputs[0].isValidValue(event.currentTarget.value)) {
+ this.validateUsername(event.currentTarget.value);
+ }
+ },
+ onValidSubmit: function (formData) {
+ this.setState({waiting: true});
+ this.validateUsername(formData.user.username, function (isValid) {
+ this.setState({waiting: false});
+ if (isValid) return this.props.onNextStep(formData);
+ }.bind(this));
+ },
+ render: function () {
+ var formatMessage = this.props.intl.formatMessage;
+ return (
+ <Slide className="registration-step username-step">
+ <h2>
+ {this.props.title ? (
+ this.props.title
+ ) : (
+ <intl.FormattedMessage id="registration.usernameStepTitle" />
+ )}
+ </h2>
+ <p className="description">
+ {this.props.description ? (
+ this.props.description
+ ) : (
+ <intl.FormattedMessage id="registration.usernameStepDescription" />
+ )}
+ {this.props.tooltip ? (
+ <Tooltip title={'?'}
+ tipContent={this.props.tooltip} />
+ ) : (
+ null
+ )}
</p>
- </Card>
- )
+ <Card>
+ <Form onValidSubmit={this.onValidSubmit} ref="form">
+ <div>
+ <div className="username-label">
+ <b>{formatMessage({id: 'registration.createUsername'})}</b>
+ {this.props.usernameHelp ? (
+ <p className="help-text">{this.props.usernameHelp}</p>
+ ):(
+ null
+ )}
+ </div>
+ <Input className={this.state.validUsername}
+ type="text"
+ name="user.username"
+ onBlur={this.onUsernameBlur}
+ validations={{
+ matchRegexp: /^[\w-]*$/,
+ minLength: 3,
+ maxLength: 20
+ }}
+ validationErrors={{
+ matchRegexp: formatMessage({
+ id: 'registration.validationUsernameRegexp'
+ }),
+ minLength: formatMessage({
+ id: 'registration.validationUsernameMinLength'
+ }),
+ maxLength: formatMessage({
+ id: 'registration.validationUsernameMaxLength'
+ })
+ }}
+ required />
+ </div>
+ <Input label={formatMessage({id: 'general.password'})}
+ type={this.state.showPassword ? 'text' : 'password'}
+ name="user.password"
+ validations={{
+ minLength: 6,
+ notEquals: 'password',
+ notEqualsField: 'user.username'
+ }}
+ validationErrors={{
+ minLength: formatMessage({
+ id: 'registration.validationPasswordLength'
+ }),
+ notEquals: formatMessage({
+ id: 'registration.validationPasswordNotEquals'
+ }),
+ notEqualsField: formatMessage({
+ id: 'registration.validationPasswordNotUsername'
+ })
+ }}
+ required />
+ <Checkbox label={formatMessage({id: 'registration.showPassword'})}
+ value={this.state.showPassword}
+ onChange={this.onChangeShowPassword}
+ help={null}
+ name="showPassword" />
+ <GeneralError name="all" />
+ <NextStepButton waiting={this.props.waiting || this.state.waiting}
+ text={<intl.FormattedMessage id="registration.nextStep" />} />
+ </Form>
+ </Card>
+ <StepNavigation steps={this.props.totalSteps - 1} active={this.props.activeStep} />
+ </Slide>
+ );
}
- {props.invited ?
- <Card className="wait">
- <h4><intl.FormattedMessage id="registration.waitForApproval" /></h4>
- <p>
- <intl.FormattedMessage id="registration.waitForApprovalDescription" />
- </p>
- </Card> : []
+ })),
+ ChoosePasswordStep: intl.injectIntl(React.createClass({
+ getDefaultProps: function () {
+ return {
+ username: null,
+ showPassword: false,
+ waiting: false
+ };
+ },
+ getInitialState: function () {
+ return {
+ showPassword: this.props.showPassword
+ };
+ },
+ onChangeShowPassword: function (field, value) {
+ this.setState({showPassword: value});
+ },
+ render: function () {
+ var formatMessage = this.props.intl.formatMessage;
+ return (
+ <Slide className="registration-step choose-password-step">
+ <h2>{formatMessage({id: 'registration.choosePasswordStepTitle'})}</h2>
+ <p className="description">
+ <intl.FormattedMessage id="registration.choosePasswordStepDescription" />
+ <Tooltip title={'?'}
+ tipContent={formatMessage({id: 'registration.choosePasswordStepTooltip'})} />
+ </p>
+
+ <Card>
+ <Form onValidSubmit={this.props.onNextStep}>
+ <Input label={formatMessage({id: 'registration.newPassword'})}
+ type={this.state.showPassword ? 'text' : 'password'}
+ name="user.password"
+ validations={{
+ minLength: 6,
+ notEquals: 'password',
+ notEqualsUsername: this.props.username
+ }}
+ validationErrors={{
+ minLength: formatMessage({
+ id: 'registration.validationPasswordLength'
+ }),
+ notEquals: formatMessage({
+ id: 'registration.validationPasswordNotEquals'
+ }),
+ notEqualsUsername: formatMessage({
+ id: 'registration.validationPasswordNotUsername'
+ })
+ }}
+ required />
+ <Checkbox label={formatMessage({id: 'registration.showPassword'})}
+ value={this.state.showPassword}
+ onChange={this.onChangeShowPassword}
+ help={null}
+ name="showPassword" />
+ <NextStepButton waiting={this.props.waiting || this.state.waiting}
+ text={<intl.FormattedMessage id="registration.nextStep" />} />
+ </Form>
+ </Card>
+ <StepNavigation steps={this.props.totalSteps - 1} active={this.props.activeStep} />
+ </Slide>
+ );
}
- <Card className="resources">
- <h4><intl.FormattedMessage id="registration.checkOutResources" /></h4>
- <p>
- <intl.FormattedHTMLMessage id="registration.checkOutResourcesDescription" />
- </p>
- </Card>
- </Slide>
-);
+ })),
+ DemographicsStep: intl.injectIntl(React.createClass({
+ getDefaultProps: function () {
+ return {
+ waiting: false,
+ description: null,
+ birthOffset: 0
+ };
+ },
+ getInitialState: function () {
+ return {otherDisabled: true};
+ },
+ getMonthOptions: function () {
+ return [
+ 'January', 'February', 'March', 'April', 'May', 'June', 'July',
+ 'August', 'September', 'October', 'November', 'December'
+ ].map(function (label, id) {
+ return {
+ value: id + 1,
+ label: this.props.intl.formatMessage({id: 'general.month' + label})};
+ }.bind(this));
+ },
+ getYearOptions: function () {
+ return Array.apply(null, Array(100)).map(function (v, id) {
+ var year = new Date().getFullYear() - (id + this.props.birthOffset);
+ return {value: year, label: year};
+ }.bind(this));
+ },
+ onChooseGender: function (name, gender) {
+ this.setState({otherDisabled: gender !== 'other'});
+ },
+ onValidSubmit: function (formData, reset, invalidate) {
+ var birthdate = new Date(
+ formData.user.birth.year,
+ formData.user.birth.month - 1,
+ 1
+ );
+ if (((Date.now() - birthdate) / (24*3600*1000*365.25)) < this.props.birthOffset) {
+ return invalidate({
+ 'user.birth.year': this.props.intl.formatMessage({id: 'teacherRegistration.validationAge'})
+ });
+ }
+ return this.props.onNextStep(formData);
+ },
+ render: function () {
+ var formatMessage = this.props.intl.formatMessage;
+ return (
+ <Slide className="registration-step demographics-step">
+ <h2>
+ <intl.FormattedMessage id="registration.personalStepTitle" />
+ </h2>
+ <p className="description">
+ {this.props.description ?
+ this.props.description
+ :
+ <intl.FormattedMessage id="registration.personalStepDescription" />
+ }
+ <Tooltip title={'?'}
+ tipContent={formatMessage({id: 'registration.nameStepTooltip'})} />
+ </p>
+ <Card>
+ <Form onValidSubmit={this.onValidSubmit}>
+ <Select label={formatMessage({id: 'general.birthMonth'})}
+ name="user.birth.month"
+ options={this.getMonthOptions()}
+ required />
+ <Select label={formatMessage({id: 'general.birthYear'})}
+ name="user.birth.year"
+ options={this.getYearOptions()} required />
+ <RadioGroup label={formatMessage({id: 'general.gender'})}
+ name="user.gender"
+ onChange={this.onChooseGender}
+ options={[
+ {value: 'female', label: formatMessage({id: 'general.female'})},
+ {value: 'male', label: formatMessage({id: 'general.male'})},
+ {value: 'other', label: <Input
+ className="demographics-step-input-other"
+ name="user.genderOther"
+ type="text"
+ validations={{
+ maxLength: 25
+ }}
+ validationErrors={{
+ maxLength: formatMessage({
+ id: 'registration.validationMaxLength'
+ })
+ }}
+ disabled={this.state.otherDisabled}
+ required={!this.state.otherDisabled}
+ help={null}
+ />}
+ ]}
+ required />
+ <Select label={formatMessage({id: 'general.country'})}
+ name="user.country"
+ options={getCountryOptions(this.props.intl, DEFAULT_COUNTRY)}
+ required />
+ <Checkbox className="demographics-checkbox-is-robot"
+ label="I'm a robot!"
+ name="user.isRobot" />
+ <NextStepButton waiting={this.props.waiting}
+ text={<intl.FormattedMessage id="registration.nextStep" />} />
+ </Form>
+ </Card>
+ <StepNavigation steps={this.props.totalSteps - 1} active={this.props.activeStep} />
+ </Slide>
+ );
+ }
+ })),
+ NameStep: intl.injectIntl(React.createClass({
+ getDefaultProps: function () {
+ return {
+ waiting: false
+ };
+ },
+ render: function () {
+ var formatMessage = this.props.intl.formatMessage;
+ return (
+ <Slide className="registration-step name-step">
+ <h2>
+ <intl.FormattedHTMLMessage id="teacherRegistration.nameStepTitle" />
+ </h2>
+ <p className="description">
+ <intl.FormattedMessage id="teacherRegistration.nameStepDescription" />
+ <Tooltip title={'?'}
+ tipContent={formatMessage({id: 'registration.nameStepTooltip'})} />
+ </p>
+ <Card>
+ <Form onValidSubmit={this.props.onNextStep}>
+ <Input label={formatMessage({id: 'teacherRegistration.firstName'})}
+ type="text"
+ name="user.name.first"
+ validations={{
+ maxLength: 50
+ }}
+ validationErrors={{
+ maxLength: formatMessage({
+ id: 'registration.validationMaxLength'
+ })
+ }}
+ required />
+ <Input label={formatMessage({id: 'teacherRegistration.lastName'})}
+ type="text"
+ name="user.name.last"
+ validations={{
+ maxLength: 50
+ }}
+ validationErrors={{
+ maxLength: formatMessage({
+ id: 'registration.validationMaxLength'
+ })
+ }}
+ required />
+ <NextStepButton waiting={this.props.waiting}
+ text={<intl.FormattedMessage id="registration.nextStep" />} />
+ </Form>
+ </Card>
+ <StepNavigation steps={this.props.totalSteps - 1} active={this.props.activeStep} />
+ </Slide>
+ );
+ }
+ })),
+ PhoneNumberStep: intl.injectIntl(React.createClass({
+ getDefaultProps: function () {
+ return {
+ defaultCountry: DEFAULT_COUNTRY,
+ waiting: false
+ };
+ },
+ onValidSubmit: function (formData, reset, invalidate) {
+ if (!formData.phone || formData.phone.national_number === '+') {
+ return invalidate({
+ 'phone': this.props.intl.formatMessage({id: 'form.validationRequired'})
+ });
+ }
+ return this.props.onNextStep(formData);
+ },
+ render: function () {
+ var formatMessage = this.props.intl.formatMessage;
+ return (
+ <Slide className="registration-step phone-step">
+ <h2>
+ <intl.FormattedMessage id="teacherRegistration.phoneNumber" />
+ </h2>
+ <p className="description">
+ <intl.FormattedMessage id="teacherRegistration.phoneStepDescription" />
+ <Tooltip title={'?'}
+ tipContent={formatMessage({id: 'registration.nameStepTooltip'})} />
+ </p>
+ <Card>
+ <Form onValidSubmit={this.onValidSubmit}>
+ <PhoneInput label={formatMessage({id: 'teacherRegistration.phoneNumber'})}
+ name="phone"
+ defaultCountry={this.props.defaultCountry}
+ required />
+ <Checkbox label={formatMessage({id: 'teacherRegistration.phoneConsent'})}
+ name="phoneConsent"
+ required="isFalse"
+ validationErrors={{
+ isFalse: formatMessage({id: 'teacherRegistration.validationPhoneConsent'})
+ }} />
+ <NextStepButton waiting={this.props.waiting}
+ text={<intl.FormattedMessage id="registration.nextStep" />} />
+ </Form>
+ </Card>
+ <StepNavigation steps={this.props.totalSteps - 1} active={this.props.activeStep} />
+ </Slide>
+ );
+ }
+ })),
+ OrganizationStep: intl.injectIntl(React.createClass({
+ getInitialState: function () {
+ return {
+ otherDisabled: true
+ };
+ },
+ getDefaultProps: function () {
+ return {
+ waiting: false
+ };
+ },
+ organizationL10nStems: [
+ 'orgChoiceElementarySchool',
+ 'orgChoiceMiddleSchool',
+ 'orgChoiceHighSchool',
+ 'orgChoiceUniversity',
+ 'orgChoiceAfterschool',
+ 'orgChoiceMuseum',
+ 'orgChoiceLibrary',
+ 'orgChoiceCamp'
+ ],
+ getOrganizationOptions: function () {
+ var options = this.organizationL10nStems.map(function (choice, id) {
+ return {
+ value: id,
+ label: this.props.intl.formatMessage({
+ id: 'teacherRegistration.' + choice
+ })
+ };
+ }.bind(this));
+
+ // Add "Other" option with empty string, since input field is used
+ var otherId = options.length;
+ options.push({value: otherId, label: ' '});
+
+ return options;
+ },
+ onChooseOrganization: function (name, values) {
+ this.setState({otherDisabled: values.indexOf(this.organizationL10nStems.length) === -1});
+ },
+ render: function () {
+ var formatMessage = this.props.intl.formatMessage;
+ return (
+ <Slide className="registration-step organization-step">
+ <h2>
+ <intl.FormattedMessage id="teacherRegistration.organization" />
+ </h2>
+ <p className="description">
+ <intl.FormattedMessage id="teacherRegistration.orgStepDescription" />
+ <Tooltip title={'?'}
+ tipContent={formatMessage({id: 'registration.nameStepTooltip'})} />
+ </p>
+ <Card>
+ <Form onValidSubmit={this.props.onNextStep}>
+ <Input label={formatMessage({id: 'teacherRegistration.organization'})}
+ type="text"
+ name="organization.name"
+ validations={{
+ maxLength: 50
+ }}
+ validationErrors={{
+ maxLength: formatMessage({
+ id: 'registration.validationMaxLength'
+ })
+ }}
+ required />
+ <Input label={formatMessage({id: 'teacherRegistration.orgTitle'})}
+ type="text"
+ name="organization.title"
+ validations={{
+ maxLength: 50
+ }}
+ validationErrors={{
+ maxLength: formatMessage({
+ id: 'registration.validationMaxLength'
+ })
+ }}
+ required />
+ <div className="organization-type">
+ <b><intl.FormattedMessage id="teacherRegistration.orgType" /></b>
+ <p className="help-text">
+ <intl.FormattedMessage id="teacherRegistration.checkAll" />
+ </p>
+ <CheckboxGroup name="organization.type"
+ value={[]}
+ options={this.getOrganizationOptions()}
+ onChange={this.onChooseOrganization}
+ validations={{
+ minLength: 1
+ }}
+ validationErrors={{
+ minLength: formatMessage({
+ id: 'form.validationRequired'
+ })
+ }}
+ required />
+ </div>
+ <div className="other-input">
+ <Input name="organization.other"
+ type="text"
+ validations={{
+ maxLength: 50
+ }}
+ validationErrors={{
+ maxLength: formatMessage({
+ id: 'registration.validationMaxLength'
+ })
+ }}
+ disabled={this.state.otherDisabled}
+ required={!this.state.otherDisabled}
+ help={null}
+ placeholder={formatMessage({id: 'general.other'})} />
+ </div>
+ <div className="url-input">
+ <b><intl.FormattedMessage id="general.website" /></b>
+ <p className="help-text">
+ <intl.FormattedMessage id="teacherRegistration.notRequired" />
+ </p>
+ <Input type="url"
+ name="organization.url"
+ validations={{
+ maxLength: 200
+ }}
+ validationErrors={{
+ maxLength: formatMessage({
+ id: 'registration.validationMaxLength'
+ })
+ }}
+ required="isFalse"
+ placeholder={'http://'} />
+ </div>
+ <NextStepButton waiting={this.props.waiting}
+ text={<intl.FormattedMessage id="registration.nextStep" />} />
+ </Form>
+ </Card>
+ <StepNavigation steps={this.props.totalSteps - 1} active={this.props.activeStep} />
+ </Slide>
+ );
+ }
+ })),
+ AddressStep: intl.injectIntl(React.createClass({
+ getDefaultProps: function () {
+ return {
+ defaultCountry: DEFAULT_COUNTRY,
+ waiting: false
+ };
+ },
+ getInitialState: function () {
+ return {
+ countryChoice: this.props.defaultCountry,
+ waiting: false
+ };
+ },
+ onChangeCountry: function (field, choice) {
+ this.setState({countryChoice: choice});
+ },
+ render: function () {
+ var formatMessage = this.props.intl.formatMessage;
+ var stateOptions = countryData.subdivisionOptions[this.state.countryChoice];
+ stateOptions = [{}].concat(stateOptions);
+ return (
+ <Slide className="registration-step address-step">
+ <h2>
+ <intl.FormattedMessage id="teacherRegistration.addressStepTitle" />
+ </h2>
+ <p className="description">
+ <intl.FormattedMessage id="teacherRegistration.addressStepDescription" />
+ <Tooltip title={'?'}
+ tipContent={formatMessage({id: 'registration.nameStepTooltip'})} />
+ </p>
+ <Card>
+ <Form onValidSubmit={this.props.onNextStep}>
+ <Select label={formatMessage({id: 'general.country'})}
+ name="address.country"
+ options={getCountryOptions(this.props.intl)}
+ value={this.props.defaultCountry}
+ onChange={this.onChangeCountry}
+ required />
+ <Input label={formatMessage({id: 'teacherRegistration.addressLine1'})}
+ type="text"
+ name="address.line1"
+ validations={{
+ maxLength: 100
+ }}
+ validationErrors={{
+ maxLength: formatMessage({
+ id: 'registration.validationMaxLength'
+ })
+ }}
+ required />
+ <Input label={formatMessage({id: 'teacherRegistration.addressLine2'})}
+ type="text"
+ name="address.line2"
+ validations={{
+ maxLength: 100
+ }}
+ validationErrors={{
+ maxLength: formatMessage({
+ id: 'registration.validationMaxLength'
+ })
+ }}
+ required="isFalse" />
+ <Input label={formatMessage({id: 'teacherRegistration.city'})}
+ type="text"
+ name="address.city"
+ validations={{
+ maxLength: 50
+ }}
+ validationErrors={{
+ maxLength: formatMessage({
+ id: 'registration.validationMaxLength'
+ })
+ }}
+ required />
+ {stateOptions.length > 2 ?
+ <Select label={formatMessage({id: 'teacherRegistration.stateProvince'})}
+ name="address.state"
+ options={stateOptions}
+ required /> :
+ []
+ }
+ <b className="row-label">
+ <intl.FormattedMessage id="teacherRegistration.zipCode" />
+ </b>
+ {this.state.countryChoice !== 'us' ?
+ <p className="help-text">
+ <intl.FormattedMessage id="teacherRegistration.notRequired" />
+ </p> : []
+ }
+ <Input type="text"
+ name="address.zip"
+ validations={{
+ maxLength: 10
+ }}
+ validationErrors={{
+ maxLength: formatMessage({
+ id: 'registration.validationMaxLength'
+ })
+ }}
+ required={(this.state.countryChoice === 'us') ? true : 'isFalse'} />
+ <GeneralError name="all" />
+ <NextStepButton waiting={this.props.waiting || this.state.waiting}
+ text={<intl.FormattedMessage id="registration.nextStep" />} />
+ </Form>
+ </Card>
+ <StepNavigation steps={this.props.totalSteps - 1} active={this.props.activeStep} />
+ </Slide>
+ );
+ }
+ })),
+ UseScratchStep: intl.injectIntl(React.createClass({
+ getDefaultProps: function () {
+ return {
+ waiting: false,
+ maxCharacters: 300
+ };
+ },
+ getInitialState: function () {
+ return {
+ characterCount: 0
+ };
+ },
+ handleTyping: function (name, value) {
+ this.setState({
+ characterCount: value.length
+ });
+ },
+ render: function () {
+ var formatMessage = this.props.intl.formatMessage;
+ var textAreaClass = (this.state.characterCount > this.props.maxCharacters) ? 'fail' : '';
-TeacherApprovalStep.propTypes = {
- confirmed: PropTypes.bool,
- email: PropTypes.string,
- invited: PropTypes.bool
-};
-
-TeacherApprovalStep.defaultProps = {
- confirmed: false,
- email: null,
- invited: false
-};
-
-const IntlTeacherApprovalStep = injectIntl(TeacherApprovalStep);
-
-
-/*
- * CLASS INVITE NEW STUDENT STEP
- */
-class ClassInviteNewStudentStep extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleNextStep'
- ]);
- }
- handleNextStep () {
- return this.props.onNextStep();
- }
- render () {
- return (
- <Slide className="registration-step class-invite-step">
- {this.props.waiting ? [
- <Spinner key="spinner" />
- ] : [
- <Avatar
- className="invite-avatar"
- key="avatar"
- src={this.props.classroom.educator.profile.images['50x50']}
- />,
- <h2 key="username">{this.props.classroom.educator.username}</h2>,
- <p
- className="description"
- key="description"
- >
- {this.props.intl.formatMessage({id: 'registration.classroomInviteNewStudentStepDescription'})}
- </p>,
- <Card key="card">
- <div className="contents">
- <h3>{this.props.classroom.title}</h3>
- <img
- className="class-image"
- src={this.props.classroom.images['250x150']}
+ return (
+ <Slide className="registration-step usescratch-step">
+ <h2>
+ <intl.FormattedMessage id="teacherRegistration.useScratchStepTitle" />
+ </h2>
+ <p className="description">
+ <intl.FormattedMessage id="teacherRegistration.useScratchStepDescription" />
+ <Tooltip title={'?'}
+ tipContent={formatMessage({id: 'registration.nameStepTooltip'})} />
+ </p>
+ <Card>
+ <Form onValidSubmit={this.props.onNextStep}>
+ <TextArea label={formatMessage({id: 'teacherRegistration.howUseScratch'})}
+ name="useScratch"
+ className={textAreaClass}
+ onChange={this.handleTyping}
+ validations={{
+ maxLength: this.props.maxCharacters
+ }}
+ validationErrors={{
+ maxLength: formatMessage({
+ id: 'teacherRegistration.useScratchMaxLength'
+ })
+ }}
+ required />
+ <CharCount maxCharacters={this.props.maxCharacters}
+ currentCharacters={this.state.characterCount} />
+ <NextStepButton waiting={this.props.waiting}
+ text={<intl.FormattedMessage id="registration.nextStep" />} />
+ </Form>
+ </Card>
+ <StepNavigation steps={this.props.totalSteps - 1} active={this.props.activeStep} />
+ </Slide>
+ );
+ }
+ })),
+ EmailStep: intl.injectIntl(React.createClass({
+ getDefaultProps: function () {
+ return {
+ waiting: false
+ };
+ },
+ getInitialState: function () {
+ return {
+ waiting: false
+ };
+ },
+ onValidSubmit: function (formData, reset, invalidate) {
+ this.setState({waiting: true});
+ api({
+ host: '',
+ uri: '/accounts/check_email/',
+ params: {email: formData.user.email}
+ }, function (err, res) {
+ this.setState({waiting: false});
+ if (err) return invalidate({all: err});
+ res = res[0];
+ switch (res.msg) {
+ case 'valid email':
+ return this.props.onNextStep(formData);
+ default:
+ return invalidate({'user.email': res.msg});
+ }
+ }.bind(this));
+ },
+ render: function () {
+ var formatMessage = this.props.intl.formatMessage;
+ return (
+ <Slide className="registration-step email-step">
+ <h2>
+ <intl.FormattedMessage id="teacherRegistration.emailStepTitle" />
+ </h2>
+ <p className="description">
+ <intl.FormattedMessage id="teacherRegistration.emailStepDescription" />
+ <Tooltip title={'?'}
+ tipContent={formatMessage({id: 'registration.nameStepTooltip'})} />
+ </p>
+ <Card>
+ <Form onValidSubmit={this.onValidSubmit}>
+ <Input
+ label={formatMessage({id: 'general.emailAddress'})}
+ type="text"
+ name="user.email"
+ validations="isEmail"
+ validationError={formatMessage({id: 'general.validationEmail'})}
+ required
/>
- </div>
- <NextStepButton
- text={this.props.intl.formatMessage({id: 'general.getStarted'})}
- waiting={this.props.waiting}
- onClick={this.handleNextStep}
- />
- </Card>,
- <StepNavigation
- active={this.props.activeStep}
- key="step"
- steps={this.props.totalSteps - 1}
- />
- ]}
- </Slide>
- );
- }
-}
-
-ClassInviteNewStudentStep.propTypes = {
- activeStep: PropTypes.number,
- classroom: PropTypes.shape({
- educator: PropTypes.shape({
- profile: PropTypes.object,
- username: PropTypes.string
- }),
- images: PropTypes.object,
- title: PropTypes.string
- }),
- intl: intlShape,
- onNextStep: PropTypes.func,
- totalSteps: PropTypes.number,
- waiting: PropTypes.bool
-};
-
-ClassInviteNewStudentStep.defaultProps = {
- waiting: false
-};
-
-const IntlClassInviteNewStudentStep = injectIntl(ClassInviteNewStudentStep);
-
-
-/*
- * CLASS INVITE EXISTING STUDENT STEP
- */
-class ClassInviteExistingStudentStep extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleNextStep'
- ]);
- }
- handleNextStep () {
- return this.props.onNextStep();
- }
- render () {
- return (
- <Slide className="registration-step class-invite-step">
- {this.props.waiting ? [
- <Spinner key="spinner" />
- ] : [
- <h2 key="username">{this.props.studentUsername}</h2>,
- <p
- className="description"
- key="description"
- >
- {this.props.intl.formatMessage({
- id: 'registration.classroomInviteExistingStudentStepDescription'
- })}
- </p>,
- <Card key="card">
- <div className="contents">
- <h3>{this.props.classroom.title}</h3>
- <img
- className="class-image"
- src={this.props.classroom.images['250x150']}
+ <Input
+ label={formatMessage({id: 'general.confirmEmail'})}
+ type="text"
+ name="confirmEmail"
+ validations="equalsField:user.email"
+ validationErrors={{
+ equalsField: formatMessage({id: 'general.validationEmailMatch'})
+ }}
+ required
/>
- <p>{this.props.intl.formatMessage({id: 'registration.invitedBy'})}</p>
- <p><strong>{this.props.classroom.educator.username}</strong></p>
- </div>
- <NextStepButton
- text={this.props.intl.formatMessage({id: 'general.getStarted'})}
- waiting={this.props.waiting}
- onClick={this.handleNextStep}
- />
- </Card>,
- <p key="logout">
- <a onClick={this.props.onHandleLogOut}>
- {this.props.intl.formatMessage({id: 'registration.notYou'})}
- </a>
- </p>,
- <StepNavigation
- active={this.props.activeStep}
- key="step"
- steps={this.props.totalSteps - 1}
- />
- ]}
- </Slide>
- );
- }
-}
-
-ClassInviteExistingStudentStep.propTypes = {
- activeStep: PropTypes.number,
- classroom: PropTypes.shape({
- educator: PropTypes.shape({
- profile: PropTypes.object,
- username: PropTypes.string
- }),
- images: PropTypes.object,
- title: PropTypes.string
- }),
- intl: intlShape,
- onHandleLogOut: PropTypes.func,
- onNextStep: PropTypes.func,
- studentUsername: PropTypes.string,
- totalSteps: PropTypes.number,
- waiting: PropTypes.bool
-};
-
-ClassInviteExistingStudentStep.defaultProps = {
- classroom: null,
- onHandleLogOut: () => {},
- studentUsername: null,
- waiting: false
-};
-
-const IntlClassInviteExistingStudentStep = injectIntl(ClassInviteExistingStudentStep);
-
-
-/*
- * CLASS WELCOME STEP
- */
-const ClassWelcomeStep = props => (
- <Slide className="registration-step class-welcome-step">
- {props.waiting ? [
- <Spinner key="spinner" />
- ] : [
- <h2 key="title">
- {props.intl.formatMessage({id: 'registration.welcomeStepTitle'})}
- </h2>,
- <p
- className="description"
- key="description"
- >
- {props.intl.formatMessage({id: 'registration.welcomeStepDescription'})}
- </p>,
- <Card key="card">
- {props.classroom ? (
- <div className="contents">
- <h3>{props.classroom.title}</h3>
- <img
- className="class-image"
- src={props.classroom.images['250x150']}
- />
- <p>{props.intl.formatMessage({id: 'registration.welcomeStepPrompt'})}</p>
- </div>
- ) : (
- null
- )}
- <NextStepButton
- text={
- props.intl.formatMessage({id: 'registration.goToClass'})
+ <Checkbox
+ label={formatMessage({id: 'registration.optIn'})}
+ value={true}
+ help={null}
+ name="subscribe"
+ />
+ <GeneralError name="all" />
+ <NextStepButton
+ waiting={this.props.waiting}
+ text={<intl.FormattedMessage id="registration.nextStep" />}
+ />
+ </Form>
+ </Card>
+ <StepNavigation steps={this.props.totalSteps - 1} active={this.props.activeStep} />
+ </Slide>
+ );
+ }
+ })),
+ TeacherApprovalStep: intl.injectIntl(React.createClass({
+ getDefaultProps: function () {
+ return {
+ email: null,
+ invited: false,
+ confirmed: false
+ };
+ },
+ render: function () {
+ return (
+ <Slide className="registration-step last-step">
+ <h2>
+ <intl.FormattedMessage id="registration.lastStepTitle" />
+ </h2>
+ <p className="description">
+ <intl.FormattedMessage id="registration.lastStepDescription" />
+ </p>
+ {this.props.confirmed || !this.props.email ?
+ []
+ :
+ (<Card className="confirm">
+ <h4><intl.FormattedMessage id="registration.confirmYourEmail" /></h4>
+ <p>
+ <intl.FormattedMessage id="registration.confirmYourEmailDescription" /><br />
+ <strong>{this.props.email}</strong>
+ </p>
+ </Card>)
}
- waiting={props.waiting}
- onClick={props.onNextStep}
- />
- </Card>
- ]}
- </Slide>
-);
-
-ClassWelcomeStep.propTypes = {
- classroom: PropTypes.shape({
- educator: PropTypes.shape({
- profile: PropTypes.object,
- username: PropTypes.string
- }),
- images: PropTypes.object,
- title: PropTypes.string
- }),
- intl: intlShape,
- onNextStep: PropTypes.func,
- waiting: PropTypes.bool
+ {this.props.invited ?
+ <Card className="wait">
+ <h4><intl.FormattedMessage id="registration.waitForApproval" /></h4>
+ <p>
+ <intl.FormattedMessage id="registration.waitForApprovalDescription" />
+ </p>
+ </Card>
+ :
+ []
+ }
+ <Card className="resources">
+ <h4><intl.FormattedMessage id="registration.checkOutResources" /></h4>
+ <p>
+ <intl.FormattedHTMLMessage id="registration.checkOutResourcesDescription" />
+ </p>
+ </Card>
+ </Slide>
+ );
+ }
+ })),
+ ClassInviteNewStudentStep: intl.injectIntl(React.createClass({
+ getDefaultProps: function () {
+ return {
+ waiting: false
+ };
+ },
+ onNextStep: function () {
+ this.props.onNextStep();
+ },
+ render: function () {
+ var formatMessage = this.props.intl.formatMessage;
+ return (
+ <Slide className="registration-step class-invite-step">
+ {this.props.waiting ? [
+ <Spinner />
+ ] : [
+ <Avatar className="invite-avatar"
+ src={this.props.classroom.educator.profile.images['50x50']} />,
+ <h2>{this.props.classroom.educator.username}</h2>,
+ <p className="description">
+ {formatMessage({id: 'registration.classroomInviteNewStudentStepDescription'})}
+ </p>,
+ <Card>
+ <div className="contents">
+ <h3>{this.props.classroom.title}</h3>
+ <img className="class-image" src={this.props.classroom.images['250x150']} />
+ </div>
+ <NextStepButton onClick={this.onNextStep}
+ waiting={this.props.waiting}
+ text={formatMessage({id: 'general.getStarted'})} />
+ </Card>,
+ <StepNavigation steps={this.props.totalSteps - 1} active={this.props.activeStep} />
+ ]}
+ </Slide>
+ );
+ }
+ })),
+ ClassInviteExistingStudentStep: intl.injectIntl(React.createClass({
+ getDefaultProps: function () {
+ return {
+ classroom: null,
+ onHandleLogOut: function () {},
+ studentUsername: null,
+ waiting: false
+ };
+ },
+ onNextStep: function () {
+ this.props.onNextStep();
+ },
+ render: function () {
+ var formatMessage = this.props.intl.formatMessage;
+ return (
+ <Slide className="registration-step class-invite-step">
+ {this.props.waiting ? [
+ <Spinner />
+ ] : [
+ <h2>{this.props.studentUsername}</h2>,
+ <p className="description">
+ {formatMessage({id: 'registration.classroomInviteExistingStudentStepDescription'})}
+ </p>,
+ <Card>
+ <div className="contents">
+ <h3>{this.props.classroom.title}</h3>
+ <img className="class-image" src={this.props.classroom.images['250x150']} />
+ <p>{formatMessage({id: 'registration.invitedBy'})}</p>
+ <p><strong>{this.props.classroom.educator.username}</strong></p>
+ </div>
+ <NextStepButton onClick={this.onNextStep}
+ waiting={this.props.waiting}
+ text={formatMessage({id: 'general.getStarted'})} />
+ </Card>,
+ <p><a onClick={this.props.onHandleLogOut}>{formatMessage({id: 'registration.notYou'})}</a></p>,
+ <StepNavigation steps={this.props.totalSteps - 1} active={this.props.activeStep} />
+ ]}
+ </Slide>
+ );
+ }
+ })),
+ ClassWelcomeStep: intl.injectIntl(React.createClass({
+ getDefaultProps: function () {
+ return {
+ waiting: false
+ };
+ },
+ onNextStep: function () {
+ this.props.onNextStep();
+ },
+ render: function () {
+ var formatMessage = this.props.intl.formatMessage;
+ return (
+ <Slide className="registration-step class-welcome-step">
+ {this.props.waiting ? [
+ <Spinner />
+ ] : [
+ <h2>{formatMessage({id: 'registration.welcomeStepTitle'})}</h2>,
+ <p className="description">{formatMessage({id: 'registration.welcomeStepDescription'})}</p>,
+ <Card>
+ {this.props.classroom ? (
+ <div className="contents">
+ <h3>{this.props.classroom.title}</h3>
+ <img className="class-image" src={this.props.classroom.images['250x150']} />
+ <p>{formatMessage({id: 'registration.welcomeStepPrompt'})}</p>
+ </div>
+ ) : (
+ null
+ )}
+ <NextStepButton onClick={this.onNextStep}
+ waiting={this.props.waiting}
+ text={formatMessage({id: 'registration.goToClass'})} />
+ </Card>
+ ]}
+ </Slide>
+ );
+ }
+ })),
+ RegistrationError: intl.injectIntl(React.createClass({
+ render: function () {
+ return (
+ <Slide className="registration-step error-step">
+ <h2>Something went wrong</h2>
+ <Card>
+ <h4>There was an error while processing your registration</h4>
+ <p>
+ {this.props.children}
+ </p>
+ </Card>
+ </Slide>
+ );
+ }
+ }))
};
-
-ClassWelcomeStep.defaultProps = {
- waiting: false
-};
-
-const IntlClassWelcomeStep = injectIntl(ClassWelcomeStep);
-
-
-/*
- * REGISTRATION ERROR STEP
- */
-const RegistrationError = props => (
- <Slide className="registration-step error-step">
- <h2>Something went wrong</h2>
- <Card>
- <h4>There was an error while processing your registration</h4>
- <p>
- {props.children}
- </p>
- </Card>
- </Slide>
-);
-
-RegistrationError.propTypes = {
- children: PropTypes.node
-};
-
-const IntlRegistrationError = injectIntl(RegistrationError);
-
-module.exports.UsernameStep = IntlUsernameStep;
-module.exports.ChoosePasswordStep = IntlChoosePasswordStep;
-module.exports.DemographicsStep = IntlDemographicsStep;
-module.exports.NameStep = IntlNameStep;
-module.exports.PhoneNumberStep = IntlPhoneNumberStep;
-module.exports.OrganizationStep = IntlOrganizationStep;
-module.exports.AddressStep = IntlAddressStep;
-module.exports.UseScratchStep = IntlUseScratchStep;
-module.exports.EmailStep = IntlEmailStep;
-module.exports.TeacherApprovalStep = IntlTeacherApprovalStep;
-module.exports.ClassInviteNewStudentStep = IntlClassInviteNewStudentStep;
-module.exports.ClassInviteExistingStudentStep = IntlClassInviteExistingStudentStep;
-module.exports.ClassWelcomeStep = IntlClassWelcomeStep;
-module.exports.RegistrationError = IntlRegistrationError;
diff --git a/src/components/slide/slide.jsx b/src/components/slide/slide.jsx
index a63c2a07a..cc297e33a 100644
--- a/src/components/slide/slide.jsx
+++ b/src/components/slide/slide.jsx
@@ -1,18 +1,17 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var React = require('react');
require('./slide.scss');
-const Slide = props => (
- <div className={classNames(['slide', props.className])}>
- {props.children}
- </div>
-);
-
-Slide.propTypes = {
- children: PropTypes.node,
- className: PropTypes.string
-};
+var Slide = React.createClass({
+ displayName: 'Slide',
+ render: function () {
+ return (
+ <div className={classNames(['slide', this.props.className])}>
+ {this.props.children}
+ </div>
+ );
+ }
+});
module.exports = Slide;
diff --git a/src/components/social-message/social-message.jsx b/src/components/social-message/social-message.jsx
index 5bb893494..d231e9563 100644
--- a/src/components/social-message/social-message.jsx
+++ b/src/components/social-message/social-message.jsx
@@ -1,47 +1,57 @@
-const classNames = require('classnames');
-const FormattedRelative = require('react-intl').FormattedRelative;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var FormattedRelative = require('react-intl').FormattedRelative;
+var React = require('react');
-const FlexRow = require('../flex-row/flex-row.jsx');
+var FlexRow = require('../flex-row/flex-row.jsx');
require('./social-message.scss');
-const SocialMessage = props => (
- <props.as className={classNames('social-message', props.className)}>
- <FlexRow className="mod-social-message">
- <div className="social-message-content">
- {typeof props.iconSrc === 'undefined' ? [] : [
- <img
- alt={props.iconAlt}
- className={classNames('social-message-icon', props.imgClassName)}
- key="social-message-icon"
- src={props.iconSrc}
- />
- ]}
- <div>
- {props.children}
- </div>
- </div>
- <span className="social-message-date">
- <FormattedRelative value={new Date(props.datetime)} />
- </span>
- </FlexRow>
- </props.as>
-);
-
-SocialMessage.propTypes = {
- as: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
- children: PropTypes.node,
- className: PropTypes.string,
- datetime: PropTypes.string.isRequired,
- iconAlt: PropTypes.string,
- iconSrc: PropTypes.string,
- imgClassName: PropTypes.string
-};
-
-SocialMessage.defaultProps = {
- as: 'li'
-};
+var SocialMessage = React.createClass({
+ type: 'SocialMessage',
+ propTypes: {
+ as: React.PropTypes.string,
+ datetime: React.PropTypes.string.isRequired,
+ iconSrc: React.PropTypes.string,
+ iconAlt: React.PropTypes.string,
+ imgClassName: React.PropTypes.string
+ },
+ getDefaultProps: function () {
+ return {
+ as: 'li'
+ };
+ },
+ render: function () {
+ var classes = classNames(
+ 'social-message',
+ this.props.className
+ );
+ var imgClass = classNames(
+ 'social-message-icon',
+ this.props.imgClassName
+ );
+ return (
+ <this.props.as className={classes}>
+ <FlexRow className="mod-social-message">
+ <div className="social-message-content">
+ {typeof this.props.iconSrc !== 'undefined' ? [
+ <img
+ key="social-message-icon"
+ className={imgClass}
+ src={this.props.iconSrc}
+ alt={this.props.iconAlt}
+ />
+ ] : []}
+ <div>
+ {this.props.children}
+ </div>
+ </div>
+ <span className="social-message-date">
+ <FormattedRelative value={new Date(this.props.datetime)} />
+ </span>
+ </FlexRow>
+ </this.props.as>
+ );
+ }
+});
module.exports = SocialMessage;
diff --git a/src/components/spinner/spinner.jsx b/src/components/spinner/spinner.jsx
index fa3af8050..68fab1950 100644
--- a/src/components/spinner/spinner.jsx
+++ b/src/components/spinner/spinner.jsx
@@ -1,18 +1,20 @@
-const range = require('lodash.range');
-const React = require('react');
+var range = require('lodash.range');
+var React = require('react');
require('./spinner.scss');
-// Adapted from http://tobiasahlin.com/spinkit/
-const Spinner = () => (
- <div className="spinner">
- {range(1, 13).map(id => (
- <div
- className={`circle${id} circle`}
- key={`circle${id}`}
- />
- ))}
- </div>
-);
+var Spinner = React.createClass({
+ // Adapted from http://tobiasahlin.com/spinkit/
+ type: 'Spinner',
+ render: function () {
+ return (
+ <div className="spinner">
+ {range(1,13).map(function (id) {
+ return <div className={'circle' + id + ' circle'}></div>;
+ })}
+ </div>
+ );
+ }
+});
module.exports = Spinner;
diff --git a/src/components/stepnavigation/stepnavigation.jsx b/src/components/stepnavigation/stepnavigation.jsx
index 4988ffa1b..1f049e3ab 100644
--- a/src/components/stepnavigation/stepnavigation.jsx
+++ b/src/components/stepnavigation/stepnavigation.jsx
@@ -1,29 +1,28 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var React = require('react');
require('./stepnavigation.scss');
-const StepNavigation = props => (
- <ul className={classNames('step-navigation', props.className)}>
- {Array.apply(null, Array(props.steps)).map((v, step) => (
- <li
- className={classNames({
- active: step < props.active,
- selected: step === props.active
- })}
- key={step}
- >
- <div className="indicator" />
- </li>
- ))}
- </ul>
-);
-
-StepNavigation.propTypes = {
- active: PropTypes.number,
- className: PropTypes.string,
- steps: PropTypes.number
-};
+var StepNavigation = React.createClass({
+ type: 'Navigation',
+ render: function () {
+ return (
+ <ul className={classNames('step-navigation', this.props.className)}>
+ {Array.apply(null, Array(this.props.steps)).map(function (v, step) {
+ return (
+ <li key={step}
+ className={classNames({
+ active: step < this.props.active,
+ selected: step === this.props.active
+ })}
+ >
+ <div className="indicator" />
+ </li>
+ );
+ }.bind(this))}
+ </ul>
+ );
+ }
+});
module.exports = StepNavigation;
diff --git a/src/components/subnavigation/subnavigation.jsx b/src/components/subnavigation/subnavigation.jsx
index e9d964975..62f4a78bb 100644
--- a/src/components/subnavigation/subnavigation.jsx
+++ b/src/components/subnavigation/subnavigation.jsx
@@ -1,38 +1,36 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var React = require('react');
require('./subnavigation.scss');
-/*
+/**
* Container for a custom, horizontal list of navigation elements
* that can be displayed within a view or component.
*/
-const SubNavigation = props => (
- <div
- className={classNames(
+var SubNavigation = React.createClass({
+ type: 'SubNavigation',
+ getDefaultProps: function () {
+ return {
+ align: 'middle'
+ };
+ },
+ render: function () {
+ var classes = classNames(
[
'sub-nav',
- props.className
+ this.props.className
],
{
- 'sub-nav-align-left': props.align === 'left',
- 'sub-nav-align-right': props.align === 'right'
+ 'sub-nav-align-left': this.props.align === 'left',
+ 'sub-nav-align-right': this.props.align === 'right'
}
- )}
- >
- {props.children}
- </div>
-);
-
-SubNavigation.propTypes = {
- align: PropTypes.string,
- children: PropTypes.node,
- className: PropTypes.string
-};
-
-SubNavigation.defaultProps = {
- align: 'middle'
-};
+ );
+ return (
+ <div className={classes}>
+ {this.props.children}
+ </div>
+ );
+ }
+});
module.exports = SubNavigation;
diff --git a/src/components/tabs/tabs.jsx b/src/components/tabs/tabs.jsx
index cc637ff56..dd816c1ac 100644
--- a/src/components/tabs/tabs.jsx
+++ b/src/components/tabs/tabs.jsx
@@ -1,26 +1,28 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
-
-const SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
+var classNames = require('classnames');
+var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
+var React = require('react');
require('./tabs.scss');
-/*
+/**
* Container for a custom, horizontal list of navigation elements
* that can be displayed within a view or component.
*/
-const Tabs = props => (
- <div className="tab-background">
- <SubNavigation className={classNames('tabs', props.className)}>
- {props.children}
- </SubNavigation>
- </div>
-);
-
-Tabs.propTypes = {
- children: PropTypes.node,
- className: PropTypes.string
-};
+var Tabs = React.createClass({
+ type: 'Tabs',
+ render: function () {
+ var classes = classNames(
+ 'tabs',
+ this.props.className
+ );
+ return (
+ <div className='tab-background'>
+ <SubNavigation className={classes}>
+ {this.props.children}
+ </SubNavigation>
+ </div>
+ );
+ }
+});
module.exports = Tabs;
diff --git a/src/components/teacher-banner/teacher-banner.jsx b/src/components/teacher-banner/teacher-banner.jsx
index 3ccf8ea89..b24cebcc0 100644
--- a/src/components/teacher-banner/teacher-banner.jsx
+++ b/src/components/teacher-banner/teacher-banner.jsx
@@ -1,100 +1,86 @@
-const classNames = require('classnames');
-const connect = require('react-redux').connect;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var connect = require('react-redux').connect;
+var React = require('react');
-const sessionActions = require('../../redux/session.js');
+var sessionActions = require('../../redux/session.js');
-const TitleBanner = require('../title-banner/title-banner.jsx');
-const Button = require('../forms/button.jsx');
-const FlexRow = require('../flex-row/flex-row.jsx');
+var TitleBanner = require('../title-banner/title-banner.jsx');
+var Button = require('../forms/button.jsx');
+var FlexRow = require('../flex-row/flex-row.jsx');
require('./teacher-banner.scss');
-const TeacherBanner = props => (
- <TitleBanner className={classNames('teacher-banner', props.className)}>
- <FlexRow className="inner">
- <div className="welcome">
- {props.sessionStatus === sessionActions.Status.FETCHED ? (
- props.user ? [
- <h3 key="greeting">
- {props.messages['teacherbanner.greeting']},{' '}
- {props.user.username}
- </h3>,
- <p
- className="title-banner-p"
- key="subgreeting"
- >
- {props.messages['teacherbanner.subgreeting']}
- </p>
- ] : []
- ) : []}
- </div>
- <FlexRow className="quick-links">
- {props.sessionStatus === sessionActions.Status.FETCHED ? (
- props.user ? [
- <a
- href="/educators/classes"
- key="classes-button"
- >
- <Button>
- {props.messages['teacherbanner.classesButton']}
- </Button>
- </a>,
- <a
- href="/info/educators"
- key="resources-button"
- >
- <Button>
- {props.messages['teacherbanner.resourcesButton']}
- </Button>
- </a>,
- <a
- href="/educators/faq"
- key="faq-button"
- >
- <Button>
- {props.messages['teacherbanner.faqButton']}
- </Button>
- </a>
- ] : []
- ) : []}
- </FlexRow>
- </FlexRow>
- </TitleBanner>
-);
-
-TeacherBanner.propTypes = {
- className: PropTypes.string,
- messages: PropTypes.shape({
- 'teacherbanner.greeting': PropTypes.string,
- 'teacherbanner.subgreeting': PropTypes.string,
- 'teacherbanner.classesButton': PropTypes.string,
- 'teacherbanner.resourcesButton': PropTypes.string,
- 'teacherbanner.faqButton': PropTypes.string
- }),
- sessionStatus: PropTypes.string,
- user: PropTypes.shape({
- username: PropTypes.string
- })
-};
-
-TeacherBanner.defaultProps = {
- messages: {
- 'teacherbanner.greeting': 'Hi',
- 'teacherbanner.subgreeting': 'Teacher Account',
- 'teacherbanner.classesButton': 'My Classes',
- 'teacherbanner.resourcesButton': 'Educator Resources',
- 'teacherbanner.faqButton': 'Teacher Account FAQ'
+var TeacherBanner = React.createClass({
+ type: 'TeacherBanner',
+ getDefaultProps: function () {
+ return {
+ messages: {
+ 'teacherbanner.greeting': 'Hi',
+ 'teacherbanner.subgreeting': 'Teacher Account',
+ 'teacherbanner.classesButton': 'My Classes',
+ 'teacherbanner.resourcesButton': 'Educator Resources',
+ 'teacherbanner.faqButton': 'Teacher Account FAQ'
+ },
+ session: {}
+ };
},
- user: {}
-};
-
-const mapStateToProps = state => ({
- sessionStatus: state.session.status,
- user: state.session.session.user
+ render: function () {
+ var classes = classNames(
+ 'teacher-banner',
+ this.props.className
+ );
+ return (
+ <TitleBanner className={classes}>
+ <FlexRow className="inner">
+ <div className="welcome">
+ {this.props.session.status === sessionActions.Status.FETCHED ? (
+ this.props.session.session.user ? [
+ <h3 key="greeting">
+ {this.props.messages['teacherbanner.greeting']},{' '}
+ {this.props.session.session.user.username}
+ </h3>,
+ <p
+ key="subgreeting"
+ className="title-banner-p"
+ >
+ {this.props.messages['teacherbanner.subgreeting']}
+ </p>
+ ] : []
+ ): []}
+ </div>
+ <FlexRow className="quick-links">
+ {this.props.session.status === sessionActions.Status.FETCHED ? (
+ this.props.session.session.user ? [
+ <a href="/educators/classes" key="classes-button">
+ <Button>
+ {this.props.messages['teacherbanner.classesButton']}
+ </Button>
+ </a>,
+ <a href="/info/educators" key="resources-button">
+ <Button>
+ {this.props.messages['teacherbanner.resourcesButton']}
+ </Button>
+ </a>,
+ <a href="/educators/faq" key="faq-button">
+ <Button>
+ {this.props.messages['teacherbanner.faqButton']}
+ </Button>
+ </a>
+ ] : []
+ ): []}
+ </FlexRow>
+ </FlexRow>
+ </TitleBanner>
+ );
+ }
});
-const ConnectedTeacherBanner = connect(mapStateToProps)(TeacherBanner);
+var mapStateToProps = function (state) {
+ return {
+ session: state.session
+ };
+};
+
+var ConnectedTeacherBanner = connect(mapStateToProps)(TeacherBanner);
module.exports = ConnectedTeacherBanner;
diff --git a/src/components/thumbnail/thumbnail.jsx b/src/components/thumbnail/thumbnail.jsx
index 300c65955..314061ba0 100644
--- a/src/components/thumbnail/thumbnail.jsx
+++ b/src/components/thumbnail/thumbnail.jsx
@@ -1,168 +1,186 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var React = require('react');
require('./thumbnail.scss');
-const Thumbnail = props => {
- const extra = [];
- const info = [];
+var Thumbnail = React.createClass({
+ type: 'Thumbnail',
+ propTypes: {
+ src: React.PropTypes.string
+ },
+ getInitialState: function () {
+ return {
+ srcFallback: false,
+ avatarFallback: false
+ };
+ },
+ getDefaultProps: function () {
+ return {
+ href: '#',
+ title: 'Project',
+ src: '',
+ srcDefault: 'https://uploads.scratch.mit.edu/projects/thumbnails/default.png',
+ avatar: '',
+ avatarDefault: 'https://uploads.scratch.mit.edu/users/avatars/default.png',
+ type: 'project',
+ showLoves: false,
+ showFavorites: false,
+ showRemixes: false,
+ showViews: false,
+ showAvatar: false,
+ linkTitle: true,
+ alt: ''
+ };
+ },
+ handleSrcError: function () {
+ this.setState({srcFallback: true});
+ },
+ handleAvatarError: function () {
+ this.setState({avatarFallback: true});
+ },
+ render: function () {
+ var classes = classNames(
+ 'thumbnail',
+ this.props.type,
+ this.props.className
+ );
+ var extra = [];
+ var info = [];
- if (props.loves && props.showLoves) {
- extra.push(
- <div
- className="thumbnail-loves"
- key="loves"
- title={`${props.loves} loves`}
- >
- {props.loves}
- </div>
- );
- }
- if (props.favorites && props.showFavorites) {
- extra.push(
- <div
- className="thumbnail-favorites"
- key="favorites"
- title={`${props.favorites} favorites`}
- >
- {props.favorites}
- </div>
- );
- }
- if (props.remixes && props.showRemixes) {
- extra.push(
- <div
- className="thumbnail-remixes"
- key="remixes"
- title={`${props.remixes} remixes`}
- >
- {props.remixes}
- </div>
- );
- }
- if (props.views && props.showViews) {
- extra.push(
- <div
- className="thumbnail-views"
- key="views"
- title={`${props.views} views`}
- >
- {props.views}
- </div>
- );
- }
-
- let imgElement;
- let titleElement;
- let avatarElement;
-
- if (props.linkTitle) {
- imgElement = (
- <a
- className="thumbnail-image"
- href={props.href}
- key="imgElement"
- >
- <img
- alt={props.alt}
- src={props.src}
- />
- </a>
- );
- titleElement = (
- <a
- href={props.href}
- key="titleElement"
- >
- {props.title}
- </a>
- );
- } else {
- imgElement = <img src={props.src} />;
- titleElement = props.title;
- }
-
- info.push(titleElement);
-
- if (props.creator) {
- info.push(
- <div
- className="thumbnail-creator"
- key="creator"
- >
- <a href={`/users/${props.creator}/`}>{props.creator}</a>
- </div>
- );
- }
-
- if (props.avatar && props.showAvatar) {
- avatarElement = (
- <a
- className="creator-image"
- href={`/users/${props.creator}/`}
- >
- <img
- alt={props.creator}
- src={props.avatar}
- />
- </a>
- );
- }
- return (
- <div
- className={classNames(
- 'thumbnail',
- props.type,
- props.className
- )}
- >
- {imgElement}
- <div className="thumbnail-info">
- {avatarElement}
- <div className="thumbnail-title">
- {info}
+ if (this.props.loves && this.props.showLoves) {
+ extra.push(
+ <div
+ key="loves"
+ className="thumbnail-loves"
+ title={this.props.loves + ' loves'}>
+ {this.props.loves}
</div>
+ );
+ }
+ if (this.props.favorites && this.props.showFavorites) {
+ extra.push(
+ <div
+ key="favorites"
+ className="thumbnail-favorites"
+ title={this.favorites + ' favorites'}>
+ {this.props.favorites}
+ </div>
+ );
+ }
+ if (this.props.remixes && this.props.showRemixes) {
+ extra.push(
+ <div
+ key="remixes"
+ className="thumbnail-remixes"
+ title={this.props.remixes + ' remixes'}
+ >
+ {this.props.remixes}
+ </div>
+ );
+ }
+ if (this.props.views && this.props.showViews) {
+ extra.push(
+ <div
+ key="views"
+ className="thumbnail-views"
+ title={this.props.views + ' views'}
+ >
+ {this.props.views}
+ </div>
+ );
+ }
+
+ var imgElement, titleElement, avatarElement;
+ if (this.props.linkTitle) {
+ if (this.state.srcFallback) {
+ imgElement = (
+ <a
+ className="thumbnail-image"
+ href={this.props.href}
+ key="imgElement"
+ >
+ <img
+ alt={this.props.alt}
+ src={this.props.srcDefault}
+ />
+ </a>
+ );
+ } else {
+ imgElement = (
+ <a
+ className="thumbnail-image"
+ href={this.props.href}
+ key="imgElement"
+ >
+ <img
+ alt={this.props.alt}
+ src={this.props.src}
+ onError={this.handleSrcError}
+ />
+ </a>
+ );
+ }
+ titleElement = (
+ <a href={this.props.href} key="titleElement">
+ {this.props.title}
+ </a>
+ );
+ } else {
+ imgElement = <img src={this.props.src} />;
+ titleElement = this.props.title;
+ }
+
+ info.push(titleElement);
+
+ if (this.props.creator) {
+ info.push(
+ <div key="creator" className="thumbnail-creator">
+ <a href={'/users/' + this.props.creator + '/'}>{this.props.creator}</a>
+ </div>
+ );
+ }
+
+ if (this.props.avatar && this.props.showAvatar) {
+ if (this.state.avatarFallback) {
+ avatarElement = (
+ <a
+ className="creator-image"
+ href={'/users/' + this.props.creator + '/'}
+ >
+ <img
+ alt={this.props.creator}
+ src={this.props.avatarDefault}
+ />
+ </a>
+ );
+ } else {
+ avatarElement = (
+ <a
+ className="creator-image"
+ href={'/users/' + this.props.creator + '/'}
+ >
+ <img
+ alt={this.props.creator}
+ src={this.props.avatar}
+ onError={this.handleAvatarError}
+ />
+ </a>
+ );
+ }
+ }
+ return (
+ <div className={classes} >
+ {imgElement}
+ <div className="thumbnail-info">
+ {avatarElement}
+ <div className="thumbnail-title">
+ {info}
+ </div>
+ </div>
+ {extra}
</div>
- {extra}
- </div>
- );
-};
-
-Thumbnail.propTypes = {
- alt: PropTypes.string,
- avatar: PropTypes.string,
- className: PropTypes.string,
- creator: PropTypes.string,
- favorites: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
- href: PropTypes.string,
- linkTitle: PropTypes.bool,
- loves: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
- remixes: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
- showAvatar: PropTypes.bool,
- showFavorites: PropTypes.bool,
- showLoves: PropTypes.bool,
- showRemixes: PropTypes.bool,
- showViews: PropTypes.bool,
- src: PropTypes.string,
- title: PropTypes.string,
- type: PropTypes.string,
- views: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-};
-
-Thumbnail.defaultProps = {
- alt: '',
- avatar: '',
- href: '#',
- linkTitle: true,
- showAvatar: false,
- showFavorites: false,
- showLoves: false,
- showRemixes: false,
- showViews: false,
- src: '',
- title: 'Project',
- type: 'project'
-};
+ );
+ }
+});
module.exports = Thumbnail;
diff --git a/src/components/title-banner/title-banner.jsx b/src/components/title-banner/title-banner.jsx
index 60cf13c6b..7b6dd722f 100644
--- a/src/components/title-banner/title-banner.jsx
+++ b/src/components/title-banner/title-banner.jsx
@@ -1,18 +1,21 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var React = require('react');
require('./title-banner.scss');
-const TitleBanner = props => (
- <div className={classNames('title-banner', props.className)}>
- {props.children}
- </div>
-);
-
-TitleBanner.propTypes = {
- children: PropTypes.node,
- className: PropTypes.string
-};
+var TitleBanner = React.createClass({
+ type: 'TitleBanner',
+ render: function () {
+ var classes = classNames(
+ 'title-banner',
+ this.props.className
+ );
+ return (
+ <div className={classes}>
+ {this.props.children}
+ </div>
+ );
+ }
+});
module.exports = TitleBanner;
diff --git a/src/components/tooltip/tooltip.jsx b/src/components/tooltip/tooltip.jsx
index 9bd441b9e..b5521878d 100644
--- a/src/components/tooltip/tooltip.jsx
+++ b/src/components/tooltip/tooltip.jsx
@@ -1,39 +1,33 @@
-const classNames = require('classnames');
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var React = require('react');
require('./tooltip.scss');
-const Tooltip = props => (
- <span
- className={classNames(
+var Tooltip = React.createClass({
+ type: 'Tooltip',
+ getDefaultProps: function () {
+ return {
+ title: '',
+ tipContent: ''
+ };
+ },
+ render: function () {
+ var classes = classNames(
'tooltip',
- props.className,
- {overmax: (props.currentCharacters > props.maxCharacters)}
- )}
- >
- <span className="tip">
- <img
- alt="info icon"
- src="/svgs/tooltip/info.svg"
- />
- </span>
- <span className="expand">
- {props.tipContent}
- </span>
- </span>
-);
-
-Tooltip.propTypes = {
- className: PropTypes.string,
- currentCharacters: PropTypes.number,
- maxCharacters: PropTypes.number,
- tipContent: PropTypes.node
-};
-
-Tooltip.defaultProps = {
- title: '',
- tipContent: ''
-};
+ this.props.className,
+ {overmax: (this.props.currentCharacters > this.props.maxCharacters)}
+ );
+ return (
+ <span className={classes}>
+ <span className="tip">
+ <img src="/svgs/tooltip/info.svg" alt="info icon" />
+ </span>
+ <span className="expand">
+ {this.props.tipContent}
+ </span>
+ </span>
+ );
+ }
+});
module.exports = Tooltip;
diff --git a/src/components/ttt-tile/ttt-tile.jsx b/src/components/ttt-tile/ttt-tile.jsx
index cd71ec37a..4bcb3d109 100644
--- a/src/components/ttt-tile/ttt-tile.jsx
+++ b/src/components/ttt-tile/ttt-tile.jsx
@@ -1,68 +1,58 @@
-const classNames = require('classnames');
-const FormattedMessage = require('react-intl').FormattedMessage;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var React = require('react');
+var FormattedMessage = require('react-intl').FormattedMessage;
require('../forms/button.scss');
require('./ttt-tile.scss');
-const TTTTile = props => (
- <div className={classNames('ttt-tile', props.className)}>
- <a href={props.tutorialLoc}>
- <div className="ttt-tile-tutorial">
- <div className="ttt-tile-image">
- <img
- alt=""
- className="ttt-tile-image-img"
- src={props.thumbUrl}
- />
- <div className="ttt-tile-image-try">
- <div className="button mod-ttt-try-button">
- <FormattedMessage id="tile.tryIt" />
+var TTTTile = React.createClass({
+ type: 'TTTTile',
+ propTypes: {
+ title: React.PropTypes.string.isRequired,
+ description: React.PropTypes.string,
+ thumbUrl: React.PropTypes.string.isRequired,
+ tutorialLoc: React.PropTypes.string.isRequired,
+ onGuideClick: React.PropTypes.func
+ },
+ render: function () {
+ var classes = classNames(
+ 'ttt-tile',
+ this.props.className
+ );
+ return (
+ <div className={classes} >
+ <a href={this.props.tutorialLoc}>
+ <div className="ttt-tile-tutorial">
+ <div className="ttt-tile-image">
+ <img className="ttt-tile-image-img" src={this.props.thumbUrl} alt="" />
+ <div className="ttt-tile-image-try">
+ <div className="button mod-ttt-try-button">
+ <FormattedMessage id="tile.tryIt" />
+ </div>
+ </div>
+ </div>
+ <div className="ttt-tile-info">
+
+ <div className="ttt-tile-tag">
+ <FormattedMessage id='ttt.tutorial' defaultMessage='Tutorial'/>
+ </div>
+ <h4 className="ttt-tile-title">{this.props.title}</h4>
+ <p className="ttt-tile-description">
+ {this.props.description}
+ </p>
</div>
</div>
- </div>
- <div className="ttt-tile-info">
- <div className="ttt-tile-tag">
- <FormattedMessage
- defaultMessage="Tutorial"
- id="ttt.tutorial"
- />
+ </a>
+ {this.props.onGuideClick && (
+ <div className="ttt-tile-guides" onClick={this.props.onGuideClick}>
+ <FormattedMessage id='tile.guides' defaultMessage='See Cards and Guides'/>
+ <img className="ttt-tile-open-modal" src="/svgs/modal/open-blue.svg" />
</div>
- <h4 className="ttt-tile-title">{props.title}</h4>
- <p className="ttt-tile-description">
- {props.description}
- </p>
- </div>
+ )}
</div>
-
- </a>
- {props.onGuideClick && (
- <div
- className="ttt-tile-guides"
- onClick={props.onGuideClick}
- >
- <FormattedMessage
- defaultMessage="See Cards and Guides"
- id="tile.guides"
- />
- <img
- className="ttt-tile-open-modal"
- src="/svgs/modal/open-blue.svg"
- />
- </div>
- )}
- </div>
-);
-
-TTTTile.propTypes = {
- className: PropTypes.string,
- description: PropTypes.string,
- onGuideClick: PropTypes.func,
- thumbUrl: PropTypes.string.isRequired,
- title: PropTypes.string.isRequired,
- tutorialLoc: PropTypes.string.isRequired
-};
+ );
+ }
+});
module.exports = TTTTile;
diff --git a/src/components/welcome/welcome.jsx b/src/components/welcome/welcome.jsx
index 76f1dcf53..4cca43997 100644
--- a/src/components/welcome/welcome.jsx
+++ b/src/components/welcome/welcome.jsx
@@ -1,81 +1,69 @@
-const PropTypes = require('prop-types');
-const React = require('react');
+var React = require('react');
-const Box = require('../box/box.jsx');
+var Box = require('../box/box.jsx');
require('./welcome.scss');
-const Welcome = props => (
- <Box
- className="welcome"
- moreHref="#"
- moreProps={{
- className: 'close',
- title: 'Dismiss',
- onClick: props.onDismiss
- }}
- moreTitle="x"
- title={props.messages['welcome.welcomeToScratch']}
- >
- <div className="welcome-col blue">
- <h4>
- <a href="/projects/editor/?tip_bar=getStarted">
- {props.messages['welcome.learn']}
- </a>
- </h4>
- <a href="/projects/editor/?tip_bar=getStarted">
- <img
- alt="Get Started"
- src="/images/welcome-learn.png"
- />
- </a>
- </div>
- <div className="welcome-col green">
- <h4>
- <a href="/starter_projects/">
- {props.messages['welcome.tryOut']}
- </a>
- </h4>
- <a href="/starter_projects/">
- <img
- alt="Starter Projects"
- src="/images/welcome-try.png"
- />
- </a>
- </div>
- <div className="welcome-col pink">
- <h4>
- <a href="/studios/146521/">
- {props.messages['welcome.connect']}
- </a>
- </h4>
- <a href="/studios/146521/">
- <img
- alt="Connect"
- src="/images/welcome-connect.png"
- />
- </a>
- </div>
- </Box>
-);
+var Welcome = React.createClass({
+ type: 'Welcome',
+ propTypes: {
+ onDismiss: React.PropTypes.func
+ },
+ getDefaultProps: function () {
+ return {
+ messages: {
+ 'welcome.welcomeToScratch': 'Welcome to Scratch!',
+ 'welcome.learn': 'Learn how to make a project in Scratch',
+ 'welcome.tryOut': 'Try out starter projects',
+ 'welcome.connect': 'Connect with other Scratchers'
+ }
+ };
+ },
+ render: function () {
+ return (
+ <Box title={this.props.messages['welcome.welcomeToScratch']}
+ className="welcome"
+ moreTitle="x"
+ moreHref="#"
+ moreProps={{
+ className: 'close',
+ title: 'Dismiss',
+ onClick: this.props.onDismiss
+ }}>
-Welcome.propTypes = {
- messages: PropTypes.shape({
- 'welcome.welcomeToScratch': PropTypes.string,
- 'welcome.learn': PropTypes.string,
- 'welcome.tryOut': PropTypes.string,
- 'welcome.connect': PropTypes.string
- }),
- onDismiss: PropTypes.func
-};
-
-Welcome.defaultProps = {
- messages: {
- 'welcome.welcomeToScratch': 'Welcome to Scratch!',
- 'welcome.learn': 'Learn how to make a project in Scratch',
- 'welcome.tryOut': 'Try out starter projects',
- 'welcome.connect': 'Connect with other Scratchers'
+ <div className="welcome-col blue">
+ <h4>
+ <a href="/projects/editor/?tip_bar=getStarted">
+ {this.props.messages['welcome.learn']}
+ </a>
+ </h4>
+ <a href="/projects/editor/?tip_bar=getStarted">
+ <img src="/images/welcome-learn.png" alt="Get Started" />
+ </a>
+ </div>
+ <div className="welcome-col green">
+ <h4>
+ <a href="/starter_projects/">
+ {this.props.messages['welcome.tryOut']}
+ </a>
+ </h4>
+ <a href="/starter_projects/">
+ <img src="/images/welcome-try.png" alt="Starter Projects" />
+ </a>
+ </div>
+ <div className="welcome-col pink">
+ <h4>
+ <a href="/studios/146521/">
+ {this.props.messages['welcome.connect']}
+ </a>
+ </h4>
+ <a href="/studios/146521/">
+ <img src="/images/welcome-connect.png" alt="Connect" />
+ </a>
+ </div>
+ </Box>
+ );
}
-};
+});
module.exports = Welcome;
diff --git a/src/init.js b/src/init.js
index 85e4b643f..d97d79646 100644
--- a/src/init.js
+++ b/src/init.js
@@ -1,12 +1,12 @@
-const jar = require('./lib/jar');
-const Raven = require('raven-js');
+var jar = require('./lib/jar');
+var Raven = require('raven-js');
/**
* -----------------------------------------------------------------------------
* Error handling
* -----------------------------------------------------------------------------
*/
-(() => {
+(function () {
if (process.env.SENTRY_DSN !== '') {
Raven.config(process.env.SENTRY_DSN).install();
}
@@ -17,22 +17,22 @@ const Raven = require('raven-js');
* L10N
* -----------------------------------------------------------------------------
*/
-(() => {
- /*
+(function () {
+ /**
* Bind locale code from cookie if available. Uses navigator language API as a fallback.
*
* @return {string}
*/
- const updateLocale = () => {
- let obj = jar.get('scratchlanguage');
+ function updateLocale () {
+ var obj = jar.get('scratchlanguage');
if (typeof obj === 'undefined') {
obj = window.navigator.userLanguage || window.navigator.language;
- if (['pt', 'pt-pt', 'PT', 'PT-PT'].indexOf(obj) !== -1) {
+ if (['pt','pt-pt','PT','PT-PT'].indexOf(obj) !== -1) {
obj = 'pt-br'; // default Portuguese users to Brazilian Portuguese due to our user base. Added in 2.2.5.
}
}
return obj;
- };
+ }
window._locale = updateLocale();
})();
diff --git a/src/l10n.json b/src/l10n.json
index e6f266126..843aa5d32 100644
--- a/src/l10n.json
+++ b/src/l10n.json
@@ -47,9 +47,6 @@
"general.myClass": "My Class",
"general.myClasses": "My Classes",
"general.myStuff": "My Stuff",
- "general.noDeletionTitle": "Your Account Will Not Be Deleted",
- "general.noDeletionDescription": "Your account was scheduled for deletion but you logged in. Your account has been reactivated. If you didn’t request for your account to be deleted, you should {resetLink} to make sure your account is secure.",
- "general.noDeletionLink": "change your password",
"general.notRequired": "Not Required",
"general.other": "Other",
"general.offlineEditor": "Offline Editor",
diff --git a/src/lib/api.js b/src/lib/api.js
index c226d7929..8ee18706f 100644
--- a/src/lib/api.js
+++ b/src/lib/api.js
@@ -1,9 +1,9 @@
-const defaults = require('lodash.defaults');
-const xhr = require('xhr');
+var defaults = require('lodash.defaults');
+var xhr = require('xhr');
-const jar = require('./jar');
-const log = require('./log');
-const urlParams = require('./url-params');
+var jar = require('./jar');
+var log = require('./log');
+var urlParams = require('./url-params');
/**
* Helper method that constructs requests to the scratch api.
@@ -12,11 +12,9 @@ const urlParams = require('./url-params');
* CSRF forgeries (see: https://www.squarefree.com/securitytips/web-developers.html#CSRF)
*
* It also takes in other arguments specified in the xhr library spec.
- *
- * @param {object} opts optional xhr args (see above)
- * @param {Function} callback [description]
*/
-module.exports = (opts, callback) => {
+
+module.exports = function (opts, callback) {
defaults(opts, {
host: process.env.API_HOST,
headers: {},
@@ -42,29 +40,26 @@ module.exports = (opts, callback) => {
opts.headers['Content-Type'] = 'application/x-www-form-urlencoded';
}
- const apiRequest = options => {
- if (options.host !== '') {
+ var apiRequest = function (opts) {
+ if (opts.host !== '') {
if ('withCredentials' in new XMLHttpRequest()) {
- options.useXDR = false;
+ opts.useXDR = false;
} else {
// For IE < 10, we must use XDR for cross-domain requests. XDR does not support
// custom headers.
- options.useXDR = true;
- delete options.headers;
- if (options.authentication) {
- const authenticationParams = [`x-token=${options.authentication}`];
- const parts = options.uri.split('?');
- const qs = (parts[1] || '')
- .split('&')
- .concat(authenticationParams)
- .join('&');
- options.uri = `${parts[0]}?${qs}`;
+ opts.useXDR = true;
+ delete opts.headers;
+ if (opts.authentication) {
+ var authenticationParams = ['x-token=' + opts.authentication];
+ var parts = opts.uri.split('?');
+ var qs = (parts[1] || '').split('&').concat(authenticationParams).join('&');
+ opts.uri = parts[0] + '?' + qs;
}
}
}
- xhr(options, (err, res, body) => {
+ xhr(opts, function (err, res, body) {
if (err) log.error(err);
- if (options.responseType === 'json' && typeof body === 'string') {
+ if (opts.responseType === 'json' && typeof body === 'string') {
// IE doesn't parse responses as JSON without the json attribute,
// even with responseType: 'json'.
// See https://github.com/Raynos/xhr/issues/123
@@ -78,25 +73,25 @@ module.exports = (opts, callback) => {
// [{success: true, redirect: "/location/to/redirect"}]
try {
if ('redirect' in body[0]) window.location = body[0].redirect;
- } catch (e) {
+ } catch (err) {
// do nothing
}
callback(err, body, res);
});
- };
+ }.bind(this);
if (typeof jar.get('scratchlanguage') !== 'undefined') {
- opts.headers['Accept-Language'] = `${jar.get('scratchlanguage')}, en;q=0.8`;
+ opts.headers['Accept-Language'] = jar.get('scratchlanguage') + ', en;q=0.8';
}
if (opts.authentication) {
opts.headers['X-Token'] = opts.authentication;
}
if (opts.useCsrf) {
- jar.use('scratchcsrftoken', '/csrf_token/', (err, csrftoken) => {
+ jar.use('scratchcsrftoken', '/csrf_token/', function (err, csrftoken) {
if (err) return log.error('Error while retrieving CSRF token', err);
opts.headers['X-CSRFToken'] = csrftoken;
apiRequest(opts);
- });
+ }.bind(this));
} else {
apiRequest(opts);
}
diff --git a/src/lib/country-data.js b/src/lib/country-data.js
index 93268c071..46e8ebbe5 100644
--- a/src/lib/country-data.js
+++ b/src/lib/country-data.js
@@ -1,28 +1,22 @@
module.exports = {};
-const countries = module.exports.data = require('iso-3166-2').data;
+var countries = module.exports.data = require('iso-3166-2').data;
-module.exports.countryOptions = Object.keys(countries).map(code => ({
- value: code.toLowerCase(),
- label: countries[code].name
-}))
- .sort((a, b) => {
- if (a.label < b.label) {
- return -1;
- }
- return 1;
+module.exports.countryOptions = Object.keys(countries).map(function (code) {
+ return {value: code.toLowerCase(), label: countries[code].name};
+}).sort(function (a, b) {
+ return a.label < b.label ? -1 : 1;
+});
+
+module.exports.subdivisionOptions =
+Object.keys(countries).reduce(function (subByCountry, code) {
+ subByCountry[code.toLowerCase()] = Object.keys(countries[code].sub).map(function (subCode) {
+ return {
+ value: subCode.toLowerCase(),
+ label: countries[code].sub[subCode].name,
+ type: countries[code].sub[subCode].type
+ };
+ }).sort(function (a, b) {
+ return a.label < b.label ? -1 : 1;
});
-
-module.exports.subdivisionOptions = Object.keys(countries).reduce((subByCountry, code) => {
- subByCountry[code.toLowerCase()] = Object.keys(countries[code].sub).map(subCode => ({
- value: subCode.toLowerCase(),
- label: countries[code].sub[subCode].name,
- type: countries[code].sub[subCode].type
- }))
- .sort((a, b) => {
- if (a.label < b.label) {
- return -1;
- }
- return 1;
- });
return subByCountry;
}, {});
diff --git a/src/lib/format.js b/src/lib/format.js
new file mode 100644
index 000000000..f54f084c5
--- /dev/null
+++ b/src/lib/format.js
@@ -0,0 +1,34 @@
+/**
+ * Takes an ISO time and returns a string representing how long ago the date
+ * represents. For example, "2015-01-01T00:00:00" becomes "1 minute ago".
+ *
+ * Based on "JavaScript Pretty Date"
+ * Copyright (c) 2011 John Resig (ejohn.org)
+ * Licensed under the MIT and GPL licenses.
+ */
+
+var Format = {
+ date: function (stamp) {
+ stamp = (stamp || '').replace(/-/g,'/').replace(/[TZ]/g,' ');
+
+ var date = new Date(stamp);
+ var diff = (((new Date()).getTime() - date.getTime()) / 1000);
+ var day_diff = Math.floor(diff / 86400);
+
+ if (isNaN(day_diff) || day_diff < 0 || day_diff >= 31) {
+ return 'A while ago';
+ }
+
+ return day_diff == 0 && (
+ diff < 60 && 'Just now' ||
+ diff < 120 && '1 minute ago' ||
+ diff < 3600 && Math.floor( diff / 60 ) + ' minutes ago' ||
+ diff < 7200 && '1 hour ago' ||
+ diff < 86400 && Math.floor( diff / 3600 ) + ' hours ago') ||
+ day_diff == 1 && 'Yesterday' ||
+ day_diff < 7 && day_diff + ' days ago' ||
+ day_diff < 31 && Math.ceil( day_diff / 7 ) + ' weeks ago';
+ }
+};
+
+module.exports = Format;
diff --git a/src/lib/frameless.js b/src/lib/frameless.js
index 6c93deed5..9c63eb507 100644
--- a/src/lib/frameless.js
+++ b/src/lib/frameless.js
@@ -1,10 +1,9 @@
/* This file contains breakpoints from _frameless.scss, to be used in MediaQuery elements.
* All units are in px, as per _frameless.scss and the MediaQuery default arguments.
*/
-const frameless = {
+
+module.exports = {
desktop: 942,
tablet: 640,
mobile: 480
};
-
-module.exports = frameless;
diff --git a/src/lib/intl.jsx b/src/lib/intl.jsx
index c29c53fab..12a76eb46 100644
--- a/src/lib/intl.jsx
+++ b/src/lib/intl.jsx
@@ -1,20 +1,20 @@
-const requireAll = require('./require-all');
-const ReactIntl = require('react-intl');
+var requireAll = require('./require-all');
+var ReactIntl = require('react-intl');
-const allLocaleData = requireAll(require.context('react-intl/locale-data', true, /^\.\/.*\.js$/));
-const customLocaleData = require('../../custom-locales.json');
+var allLocaleData = requireAll(require.context('react-intl/locale-data', true, /^\.\/.*\.js$/));
+var customLocaleData = require('../../custom-locales.json');
/**
* Add all locales
*/
-for (const locale in allLocaleData) {
+for (var locale in allLocaleData) {
ReactIntl.addLocaleData(allLocaleData[locale]);
}
/**
* Add custom locales to react-intl if it doesn't have them.
*/
-for (const customLocale in customLocaleData) {
+for (var customLocale in customLocaleData) {
ReactIntl.addLocaleData(customLocaleData[customLocale]);
}
diff --git a/src/lib/jar.js b/src/lib/jar.js
index afcc1b277..343a3befa 100644
--- a/src/lib/jar.js
+++ b/src/lib/jar.js
@@ -1,7 +1,7 @@
-const cookie = require('cookie');
-const defaults = require('lodash.defaults');
-const xhr = require('xhr');
-const pako = require('pako');
+var cookie = require('cookie');
+var defaults = require('lodash.defaults');
+var xhr = require('xhr');
+var pako = require('pako');
/**
* Module that handles coookie interactions.
@@ -11,16 +11,16 @@ const pako = require('pako');
* set(name, value) – synchronously sets the cookie
* use(name, uri, callback) – can by sync or async, gets cookie from the uri if not there.
*/
-const Jar = {
- unsign: (value, callback) => {
+var Jar = {
+ unsign: function (value, callback) {
// Return the usable content portion of a signed, compressed cookie generated by
// Django's signing module
// https://github.com/django/django/blob/stable/1.8.x/django/core/signing.py
if (typeof value === 'undefined') return callback(null, value);
try {
- let b64Data = value.split(':')[0];
- let decompress = false;
+ var b64Data = value.split(':')[0];
+ var decompress = false;
if (b64Data[0] === '.') {
decompress = true;
b64Data = b64Data.substring(1);
@@ -29,29 +29,24 @@ const Jar = {
// Django makes its base64 strings url safe by replacing + and / with - and _ respectively
// using base64.urlsafe_b64encode
// https://docs.python.org/2/library/base64.html#base64.b64encode
- b64Data = b64Data.replace(
- /[-_]/g,
- c => ({
- '-': '+',
- '_': '/'
- }[c])
- );
- let strData = atob(b64Data);
+ b64Data = b64Data.replace(/[-_]/g, function (c) {return {'-':'+', '_':'/'}[c]; });
+ var strData = atob(b64Data);
if (decompress) {
- const charData = strData.split('').map(c => (c.charCodeAt(0)));
- const binData = new Uint8Array(charData);
- const data = pako.inflate(binData);
+ var charData = strData.split('').map(function (c) { return c.charCodeAt(0); });
+ var binData = new Uint8Array(charData);
+ var data = pako.inflate(binData);
strData = String.fromCharCode.apply(null, new Uint16Array(data));
}
+
return callback(null, strData);
} catch (e) {
return callback(e);
}
},
- get: (name, callback) => {
+ get: function (name, callback) {
// Get cookie by name
- const obj = cookie.parse(document.cookie) || {};
+ var obj = cookie.parse(document.cookie) || {};
// Handle optional callback
if (typeof callback === 'function') {
@@ -61,44 +56,44 @@ const Jar = {
return obj[name];
},
- use: (name, uri, callback) => {
+ use: function (name, uri, callback) {
// Attempt to get cookie
- Jar.get(name, (err, obj) => {
+ Jar.get(name, function (err, obj) {
if (typeof obj !== 'undefined') return callback(null, obj);
// Make XHR request to cookie setter uri
xhr({
uri: uri
- }, e => {
- if (e) return callback(e);
+ }, function (err) {
+ if (err) return callback(err);
Jar.get(name, callback);
});
});
},
- set: (name, value, opts) => {
+ set: function (name, value, opts) {
opts = opts || {};
defaults(opts, {
expires: new Date(new Date().setYear(new Date().getFullYear() + 1))
});
opts.path = '/';
- const obj = cookie.serialize(name, value, opts);
+ var obj = cookie.serialize(name, value, opts);
document.cookie = obj;
},
- getUnsignedValue: (cookieName, signedValue, callback) => {
+ getUnsignedValue: function (cookieName, signedValue, callback) {
// Get a value from a signed object
- Jar.get(cookieName, (err, value) => {
+ Jar.get(cookieName, function (err, value) {
if (err) return callback(err);
if (typeof value === 'undefined') return callback(null, value);
- Jar.unsign(value, (e, contents) => {
- if (e) return callback(e);
+ Jar.unsign(value, function (err, contents) {
+ if (err) return callback(err);
try {
- const data = JSON.parse(contents);
- return callback(null, data[signedValue]);
- } catch (error) {
- return callback(error);
+ var data = JSON.parse(contents);
+ } catch (err) {
+ return callback(err);
}
+ return callback(null, data[signedValue]);
});
});
}
diff --git a/src/lib/log.js b/src/lib/log.js
index bbc8dac4a..9a364044f 100644
--- a/src/lib/log.js
+++ b/src/lib/log.js
@@ -1,4 +1,4 @@
-const minilog = require('minilog');
+var minilog = require('minilog');
minilog.enable();
module.exports = minilog('www');
diff --git a/src/lib/render.jsx b/src/lib/render.jsx
index 394eee801..eddfd707c 100644
--- a/src/lib/render.jsx
+++ b/src/lib/render.jsx
@@ -1,27 +1,21 @@
-const redux = require('redux');
-const thunk = require('redux-thunk').default;
+var redux = require('redux');
+var thunk = require('redux-thunk').default;
// JSX syntax transforms to React.createElement
-const React = require('react'); // eslint-disable-line
-const ReactDOM = require('react-dom');
-const StoreProvider = require('react-redux').Provider;
+var React = require('react'); // eslint-disable-line
+var ReactDOM = require('react-dom');
+var StoreProvider = require('react-redux').Provider;
-const IntlProvider = require('./intl.jsx').IntlProvider;
-const permissionsActions = require('../redux/permissions.js');
-const sessionActions = require('../redux/session.js');
-const reducer = require('../redux/reducer.js');
+var IntlProvider = require('./intl.jsx').IntlProvider;
+var permissionsActions = require('../redux/permissions.js');
+var sessionActions = require('../redux/session.js');
+var reducer = require('../redux/reducer.js');
require('../main.scss');
-/**
- * Function to render views into a full page
- * @param {object} jsx jsx component of the view
- * @param {object} element html element to render to on the template
- * @param {array} reducers list of view-specific reducers
- */
-const render = (jsx, element, reducers) => {
+var render = function (jsx, element, reducers) {
// Get locale and messages from global namespace (see "init.js")
- let locale = window._locale || 'en';
- let messages = {};
+ var locale = window._locale || 'en';
+ var messages = {};
if (typeof window._messages !== 'undefined') {
if (typeof window._messages[locale] === 'undefined') {
// Fall back on the split
@@ -34,8 +28,8 @@ const render = (jsx, element, reducers) => {
messages = window._messages[locale];
}
- const allReducers = reducer(reducers);
- const store = redux.createStore(
+ var allReducers = reducer(reducers);
+ var store = redux.createStore(
allReducers,
redux.applyMiddleware(thunk)
);
@@ -43,10 +37,7 @@ const render = (jsx, element, reducers) => {
// Render view component
ReactDOM.render(
<StoreProvider store={store}>
- <IntlProvider
- locale={locale}
- messages={messages}
- >
+ <IntlProvider locale={locale} messages={messages}>
{jsx}
</IntlProvider>
</StoreProvider>,
diff --git a/src/lib/require-all.js b/src/lib/require-all.js
index 415eeecb9..028a18028 100644
--- a/src/lib/require-all.js
+++ b/src/lib/require-all.js
@@ -1,5 +1,5 @@
-const requireAll = requireContext => (
- requireContext.keys().map(requireContext)
-);
+var requireAll = function (requireContext) {
+ return requireContext.keys().map(requireContext);
+};
module.exports = requireAll;
diff --git a/src/lib/shuffle.js b/src/lib/shuffle.js
index 11b6c4137..c32601375 100644
--- a/src/lib/shuffle.js
+++ b/src/lib/shuffle.js
@@ -1,19 +1,21 @@
/*
* Function that shuffles an array using a Fisher-Yates shuffle.
*/
-module.exports.shuffle = arr => {
- let i = 0;
- let j = 0;
- let temp = null;
+
+module.exports.shuffle = function (arr) {
+ var i, j = 0;
+ var temp = null;
if (arr) {
- const tempArray = arr.slice(0);
- for (i = arr.length - 1; i > 0; i -= 1) {
- j = Math.floor(Math.random() * (i + 1));
- temp = tempArray[i];
- tempArray[i] = tempArray[j];
- tempArray[j] = temp;
- }
- return tempArray;
+ var tempArray = arr.slice(0);
+ } else {
+ return arr;
}
- return arr;
+
+ for (i = arr.length - 1; i > 0; i -= 1) {
+ j = Math.floor(Math.random() * (i + 1));
+ temp = tempArray[i];
+ tempArray[i] = tempArray[j];
+ tempArray[j] = temp;
+ }
+ return tempArray;
};
diff --git a/src/lib/url-params.js b/src/lib/url-params.js
index f639f6e0f..f9b283608 100644
--- a/src/lib/url-params.js
+++ b/src/lib/url-params.js
@@ -2,18 +2,21 @@
* urlParams({a: 1, b: 2, c: 3})
* // a=1&b=2&c=3
*/
-const params = values => (
- Object.keys(values).map(key => {
- const value = typeof values[key] === 'undefined' ? '' : values[key];
- const encodeKeyValuePair = val => (
- [key, val].map(encodeURIComponent).join('=')
- );
- if (Array.isArray(value)) {
- return value.map(encodeKeyValuePair).join('&');
- }
- return encodeKeyValuePair(value);
- })
- .join('&')
-);
-
-module.exports = params;
+module.exports = function urlParams (values) {
+ return Object
+ .keys(values)
+ .map(function (key) {
+ var value = typeof values[key] === 'undefined' ? '' : values[key];
+ function encodeKeyValuePair (value) {
+ return [key, value]
+ .map(encodeURIComponent)
+ .join('=');
+ }
+ if (Array.isArray(value)) {
+ return value.map(encodeKeyValuePair).join('&');
+ } else {
+ return encodeKeyValuePair(value);
+ }
+ })
+ .join('&');
+};
diff --git a/src/redux/conference-details.js b/src/redux/conference-details.js
index a9ac55447..0e3cf4b25 100644
--- a/src/redux/conference-details.js
+++ b/src/redux/conference-details.js
@@ -1,13 +1,13 @@
-const keyMirror = require('keymirror');
-const api = require('../lib/api');
+var keyMirror = require('keymirror');
+var api = require('../lib/api');
-const Types = keyMirror({
+var Types = keyMirror({
SET_DETAILS: null,
SET_DETAILS_FETCHING: null,
SET_DETAILS_ERROR: null
});
-module.exports.detailsReducer = (state, action) => {
+module.exports.detailsReducer = function (state, action) {
if (typeof state === 'undefined') {
state = {};
}
@@ -23,50 +23,61 @@ module.exports.detailsReducer = (state, action) => {
}
};
-module.exports.setDetailsError = error => ({
- type: Types.SET_DETAILS_ERROR,
- error: error
-});
+module.exports.setDetailsError = function (error) {
+ return {
+ type: Types.SET_DETAILS_ERROR,
+ error: error
+ };
+};
-module.exports.setDetails = details => ({
- type: Types.SET_DETAILS,
- details: details
-});
+module.exports.setDetails = function (details) {
+ return {
+ type: Types.SET_DETAILS,
+ details: details
+ };
+};
-module.exports.setDetailsFetching = () => ({
- type: Types.SET_DETAILS_FETCHING,
- fetching: true
-});
+module.exports.setDetailsFetching = function () {
+ return {
+ type: Types.SET_DETAILS_FETCHING,
+ fetching: true
+ };
+};
-module.exports.getDetails = id => (dispatch => {
- api({
- uri: `/conference/${id}/details`
- }, (err, body) => {
- if (err) {
- dispatch(module.exports.setDetailsError(err));
- return;
- }
+module.exports.startGetDetails = function (id) {
+ return function (dispatch) {
+ dispatch(module.exports.setDetailsFetching());
+ dispatch(module.exports.getDetails(id));
+ };
+};
- if (typeof body !== 'undefined') {
- const columns = body.columns;
- if (body.rows) {
- const details = body.rows[0];
- const detailsObject = details.reduce((prev, cur, index) => {
- prev[columns[index]] = cur;
- return prev;
- }, {});
- dispatch(module.exports.setDetails(detailsObject));
- } else {
- dispatch(module.exports.setDetailsError('Not Found'));
+module.exports.getDetails = function (id) {
+ return function (dispatch) {
+ api({
+ uri: '/conference/' + id + '/details'
+ }, function (err, body) {
+ if (err) {
+ dispatch(module.exports.setDetailsError(err));
+ return;
}
- return;
- }
- dispatch(module.exports.setDetailsError('An unexpected error occurred'));
- return;
- });
-});
-module.exports.startGetDetails = id => (dispatch => {
- dispatch(module.exports.setDetailsFetching());
- dispatch(module.exports.getDetails(id));
-});
+ if (typeof body !== 'undefined') {
+ var columns = body.columns;
+ if (body.rows) {
+ var details = body.rows[0];
+ var detailsObject = details.reduce(function (prev, cur, index) {
+ prev[columns[index]] = cur;
+ return prev;
+ }, {});
+ dispatch(module.exports.setDetails(detailsObject));
+ } else {
+ dispatch(module.exports.setDetailsError('Not Found'));
+ }
+ return;
+ } else {
+ dispatch(module.exports.setDetailsError('An unexpected error occurred'));
+ return;
+ }
+ });
+ };
+};
diff --git a/src/redux/conference-schedule.js b/src/redux/conference-schedule.js
index 224341c64..4509f7b8e 100644
--- a/src/redux/conference-schedule.js
+++ b/src/redux/conference-schedule.js
@@ -1,13 +1,13 @@
-const keyMirror = require('keymirror');
-const api = require('../lib/api');
+var keyMirror = require('keymirror');
+var api = require('../lib/api');
-const Types = keyMirror({
+var Types = keyMirror({
SET_SCHEDULE: null,
SET_SCHEDULE_FETCHING: null,
SET_SCHEDULE_ERROR: null
});
-module.exports.scheduleReducer = (state, action) => {
+module.exports.scheduleReducer = function (state, action) {
if (typeof state === 'undefined') {
state = {
timeSlots: [],
@@ -26,27 +26,40 @@ module.exports.scheduleReducer = (state, action) => {
}
};
-module.exports.setSchedule = schedule => ({
- type: Types.SET_SCHEDULE,
- schedule: schedule
-});
+module.exports.setSchedule = function (schedule) {
+ return {
+ type: Types.SET_SCHEDULE,
+ schedule: schedule
+ };
+};
-module.exports.setScheduleFetching = () => ({
- type: Types.SET_SCHEDULE_FETCHING,
- fetching: true
-});
+module.exports.setScheduleFetching = function () {
+ return {
+ type: Types.SET_SCHEDULE_FETCHING,
+ fetching: true
+ };
+};
-module.exports.setScheduleError = error => ({
- type: Types.SET_SCHEDULE_ERROR,
- error: error
-});
+module.exports.setScheduleError = function (error) {
+ return {
+ type: Types.SET_SCHEDULE_ERROR,
+ error: error
+ };
+};
+
+module.exports.startGetSchedule = function (day) {
+ return function (dispatch) {
+ dispatch(module.exports.setScheduleFetching());
+ dispatch(module.exports.getDaySchedule(day));
+ };
+};
// group periods of time by start time
-module.exports.sortTimeSlots = (timeSlot1, timeSlot2) => {
- const timeSlot1Am = (timeSlot1.time.substr(timeSlot1.time.length - 1, timeSlot1.time.length) === 'a');
- const timeSlot2Am = (timeSlot2.time.substr(timeSlot2.time.length - 1, timeSlot2.time.length) === 'a');
- let timeSlot1Time = parseInt(timeSlot1.time.substr(0, timeSlot1.time.length - 1), 10);
- let timeSlot2Time = parseInt(timeSlot2.time.substr(0, timeSlot2.time.length - 1), 10);
+module.exports.sortTimeSlots = function (timeSlot1, timeSlot2) {
+ var timeSlot1Am = (timeSlot1.time.substr(timeSlot1.time.length - 1, timeSlot1.time.length) === 'a') ? true : false;
+ var timeSlot2Am = (timeSlot2.time.substr(timeSlot2.time.length - 1, timeSlot2.time.length) === 'a') ? true : false;
+ var timeSlot1Time = parseInt(timeSlot1.time.substr(0, timeSlot1.time.length - 1));
+ var timeSlot2Time = parseInt(timeSlot2.time.substr(0, timeSlot2.time.length - 1));
// convert to 24-hour for sorting
if (timeSlot1Time !== 12 && !timeSlot1Am) {
@@ -58,67 +71,68 @@ module.exports.sortTimeSlots = (timeSlot1, timeSlot2) => {
if (timeSlot1Time < timeSlot2Time) {
return -1;
+ } else {
+ return 1;
}
- return 1;
};
/**
* Gets the schedule for the given day from the api
- * @param {string} day Day of the conference (Thursday, Friday or Satrurday)
+ * @param {String} day Day of the conference (Thursday, Friday or Satrurday)
*
- * @return {object} Schedule for the day, broken into chunks
+ * @return {Object} Schedule for the day, broken into chunks
*/
-module.exports.getDaySchedule = day => (dispatch => {
- api({
- uri: `/conference/schedule/${day}`
- }, (err, body) => {
- if (err) {
- dispatch(module.exports.setScheduleError(err));
- return;
- }
+module.exports.getDaySchedule = function (day) {
+ return function (dispatch) {
+ api({
+ uri: '/conference/schedule/' + day
+ }, function (err, body) {
+ if (err) {
+ dispatch(module.exports.setScheduleError(err));
+ return;
+ }
- if (typeof body !== 'undefined') {
- const columns = body.columns;
- const rows = body.rows || [];
- // Group events by the time period in which they occur (for presentation)
- const scheduleByTimeSlot = rows.reduce((prev, cur) => {
- const cleanedRow = {};
- for (let i = 0; i < columns.length; i++) {
- if (cur[i].length > 0) {
- cleanedRow[columns[i]] = cur[i];
+ if (typeof body !== 'undefined') {
+ var columns = body.columns;
+ var rows = body.rows || [];
+ // Group events by the time period in which they occur (for presentation)
+ var scheduleByTimeSlot = rows.reduce(function (prev, cur) {
+ var cleanedRow = {};
+ for (var i = 0; i < columns.length; i++) {
+ if (cur[i].length > 0) {
+ cleanedRow[columns[i]] = cur[i];
+ }
}
- }
- cleanedRow.uri = `/conference/2016/${cleanedRow.rowid}/details`;
- const timeSlot = cleanedRow.Chunk + cleanedRow.Start;
- if (typeof prev.timeSlots[timeSlot] === 'undefined') {
- prev.timeSlots[timeSlot] = [cleanedRow];
- prev.info.push({
- name: cleanedRow.Chunk,
- time: cleanedRow.Start
- });
- } else {
- prev.timeSlots[timeSlot].push(cleanedRow);
- }
- return prev;
- }, {timeSlots: [], info: []});
+ cleanedRow['uri'] = '/conference/2016/' + cleanedRow.rowid + '/details';
+ var timeSlot = cleanedRow.Chunk + cleanedRow.Start;
+ if (typeof prev.timeSlots[timeSlot] === 'undefined') {
+ prev.timeSlots[timeSlot] = [cleanedRow];
+ prev.info.push({
+ name: cleanedRow.Chunk,
+ time: cleanedRow.Start
+ });
+ } else {
+ prev.timeSlots[timeSlot].push(cleanedRow);
+ }
+ return prev;
+ }, {timeSlots: [], info: []});
- scheduleByTimeSlot.info.sort(module.exports.sortTimeSlots);
- const schedule = scheduleByTimeSlot.info.map(timeSlot => ({
- info: timeSlot,
- items: scheduleByTimeSlot.timeSlots[timeSlot.name + timeSlot.time]
- }));
- dispatch(module.exports.setSchedule({
- timeSlots: schedule,
- day: day
- }));
- return;
- }
- dispatch(module.exports.setScheduleError('An unexpected error occurred'));
- return;
- });
-});
-
-module.exports.startGetSchedule = day => (dispatch => {
- dispatch(module.exports.setScheduleFetching());
- dispatch(module.exports.getDaySchedule(day));
-});
+ scheduleByTimeSlot.info.sort(module.exports.sortTimeSlots);
+ var schedule = scheduleByTimeSlot.info.map(function (timeSlot) {
+ return {
+ info: timeSlot,
+ items: scheduleByTimeSlot.timeSlots[timeSlot.name + timeSlot.time]
+ };
+ });
+ dispatch(module.exports.setSchedule({
+ timeSlots: schedule,
+ day: day
+ }));
+ return;
+ } else {
+ dispatch(module.exports.setScheduleError('An unexpected error occurred'));
+ return;
+ }
+ });
+ };
+};
diff --git a/src/redux/message-count.js b/src/redux/message-count.js
index e3df74b33..0efa84025 100644
--- a/src/redux/message-count.js
+++ b/src/redux/message-count.js
@@ -1,22 +1,22 @@
-const keyMirror = require('keymirror');
-const defaults = require('lodash.defaults');
+var keyMirror = require('keymirror');
+var defaults = require('lodash.defaults');
-const api = require('../lib/api');
+var api = require('../lib/api');
-const Types = keyMirror({
+var Types = keyMirror({
SET_MESSAGE_COUNT: null,
SET_MESSAGE_COUNT_ERROR: null,
SET_STATUS: null
});
-const getInitialState = () => ({
- messageCount: 0
-});
+module.exports.getInitialState = function (){
+ return {messageCount: 0};
+};
-module.exports.messageCountReducer = (state, action) => {
+module.exports.messageCountReducer = function (state, action) {
// Reducer for handling changes to session state
if (typeof state === 'undefined') {
- state = getInitialState();
+ state = module.exports.getInitialState();
}
switch (action.type) {
case Types.SET_MESSAGE_COUNT:
@@ -31,32 +31,40 @@ module.exports.messageCountReducer = (state, action) => {
}
};
-module.exports.setSessionError = error => ({
- type: Types.SET_MESSAGE_COUNT_ERROR,
- error: error
-});
+module.exports.setSessionError = function (error) {
+ return {
+ type: Types.SET_MESSAGE_COUNT_ERROR,
+ error: error
+ };
+};
-module.exports.setCount = count => ({
- type: Types.SET_MESSAGE_COUNT,
- count: count
-});
+module.exports.setCount = function (count) {
+ return {
+ type: Types.SET_MESSAGE_COUNT,
+ count: count
+ };
+};
-module.exports.setStatus = status => ({
- type: Types.SET_STATUS,
- status: status
-});
+module.exports.setStatus = function (status){
+ return {
+ type: Types.SET_STATUS,
+ status: status
+ };
+};
-module.exports.getCount = username => (dispatch => {
- api({
- method: 'get',
- uri: `/users/${username}/messages/count`
- }, (err, body) => {
- if (err) {
- dispatch(module.exports.setCount(0));
- dispatch(module.exports.setSessionError(err));
- return;
- }
- const count = parseInt(body.count, 10);
- dispatch(module.exports.setCount(count));
- });
-});
+module.exports.getCount = function (username) {
+ return function (dispatch) {
+ api({
+ method: 'get',
+ uri: '/users/' + username + '/messages/count'
+ }, function (err, body) {
+ if (err) {
+ dispatch(module.exports.setCount(0));
+ dispatch(module.exports.setSessionError(err));
+ return;
+ }
+ var count = parseInt(body.count, 10);
+ dispatch(module.exports.setCount(count));
+ });
+ };
+};
diff --git a/src/redux/messages.js b/src/redux/messages.js
index 7cc7e4238..d976162f5 100644
--- a/src/redux/messages.js
+++ b/src/redux/messages.js
@@ -1,10 +1,10 @@
-const defaults = require('lodash.defaults');
-const defaultsDeep = require('lodash.defaultsdeep');
-const keyMirror = require('keymirror');
+var defaults = require('lodash.defaults');
+var defaultsDeep = require('lodash.defaultsdeep');
+var keyMirror = require('keymirror');
-const api = require('../lib/api');
-const log = require('../lib/log');
-const messageCountActions = require('./message-count.js');
+var api = require('../lib/api');
+var log = require('../lib/log');
+var messageCountActions = require('./message-count.js');
module.exports.Status = keyMirror({
FETCHED: null,
@@ -17,21 +17,23 @@ module.exports.Status = keyMirror({
DELETE_ERROR: null
});
-module.exports.getInitialState = () => ({
- status: {
- admin: module.exports.Status.NOT_FETCHED,
- message: module.exports.Status.NOT_FETCHED,
- clear: module.exports.Status.NOT_FETCHED,
- delete: module.exports.Status.NOT_FETCHED
- },
- messages: {
- admin: [],
- social: [],
- invite: {}
- }
-});
+module.exports.getInitialState = function () {
+ return {
+ status: {
+ admin: module.exports.Status.NOT_FETCHED,
+ message: module.exports.Status.NOT_FETCHED,
+ clear: module.exports.Status.NOT_FETCHED,
+ delete: module.exports.Status.NOT_FETCHED
+ },
+ messages: {
+ admin: [],
+ social: [],
+ invite: {}
+ }
+ };
+};
-module.exports.messagesReducer = (state, action) => {
+module.exports.messagesReducer = function (state, action) {
if (typeof state === 'undefined') {
state = module.exports.getInitialState();
}
@@ -66,61 +68,75 @@ module.exports.messagesReducer = (state, action) => {
}
};
-module.exports.setMessagesError = error => ({
- type: 'ERROR',
- error: error
-});
+module.exports.setMessagesError = function (error) {
+ return {
+ type: 'ERROR',
+ error: error
+ };
+};
-module.exports.setMessages = messages => ({
- type: 'SET_MESSAGES',
- messages: messages
-});
+module.exports.setMessages = function (messages) {
+ return {
+ type: 'SET_MESSAGES',
+ messages: messages
+ };
+};
-module.exports.setMessagesOffset = offset => ({
- type: 'SET_MESSAGES_OFFSET',
- offset: offset
-});
+module.exports.setMessagesOffset = function (offset) {
+ return {
+ type: 'SET_MESSAGES_OFFSET',
+ offset: offset
+ };
+};
-module.exports.setAdminMessages = messages => ({
- type: 'SET_ADMIN_MESSAGES',
- messages: messages
-});
+module.exports.setAdminMessages = function (messages) {
+ return {
+ type: 'SET_ADMIN_MESSAGES',
+ messages: messages
+ };
+};
-module.exports.setScratcherInvite = invite => ({
- type: 'SET_SCRATCHER_INVITE',
- invite: invite
-});
+module.exports.setScratcherInvite = function (invite) {
+ return {
+ type: 'SET_SCRATCHER_INVITE',
+ invite: invite
+ };
+};
-module.exports.setStatus = (type, status) => ({
- type: type,
- status: status
-});
+module.exports.setStatus = function (type, status){
+ return {
+ type: type,
+ status: status
+ };
+};
/**
* Sends a request to mark one's unread messages count as cleared.
* @return {null} returns nothing
*/
-module.exports.clearMessageCount = () => (dispatch => {
- dispatch(module.exports.setStatus('CLEAR_STATUS', module.exports.Status.FETCHING));
- api({
- host: '',
- uri: '/site-api/messages/messages-clear/',
- method: 'POST',
- useCsrf: true
- }, (err, body) => {
- if (err) {
- dispatch(module.exports.setStatus('CLEAR_STATUS', module.exports.Status.CLEAR_ERROR));
- dispatch(module.exports.setMessagesError(err));
- return;
- }
- if (typeof body !== 'undefined' && !body.success) {
- dispatch(module.exports.setStatus('CLEAR_STATUS', module.exports.Status.CLEAR_ERROR));
- dispatch(module.exports.setMessagesError('messages not cleared'));
- return;
- }
- dispatch(module.exports.setStatus('CLEAR_STATUS', module.exports.Status.FETCHED));
- });
-});
+module.exports.clearMessageCount = function () {
+ return function (dispatch) {
+ dispatch(module.exports.setStatus('CLEAR_STATUS', module.exports.Status.FETCHING));
+ api({
+ host: '',
+ uri: '/site-api/messages/messages-clear/',
+ method: 'POST',
+ useCsrf: true
+ }, function (err, body) {
+ if (err) {
+ dispatch(module.exports.setStatus('CLEAR_STATUS', module.exports.Status.CLEAR_ERROR));
+ dispatch(module.exports.setMessagesError(err));
+ return;
+ }
+ if (typeof body !== 'undefined' && !body.success) {
+ dispatch(module.exports.setStatus('CLEAR_STATUS', module.exports.Status.CLEAR_ERROR));
+ dispatch(module.exports.setMessagesError('messages not cleared'));
+ return;
+ }
+ dispatch(module.exports.setStatus('CLEAR_STATUS', module.exports.Status.FETCHED));
+ });
+ };
+};
/**
* Marks an admin message as read, dismissing it from the page
@@ -130,8 +146,8 @@ module.exports.clearMessageCount = () => (dispatch => {
* @param {object[]} adminMessages current list of admin messages retrieved
* @return {null} returns nothing
*/
-module.exports.clearAdminMessage = (messageType, messageId, messageCount, adminMessages) => (
- dispatch => {
+module.exports.clearAdminMessage = function (messageType, messageId, messageCount, adminMessages) {
+ return function (dispatch) {
dispatch(module.exports.setStatus('CLEAR_STATUS', module.exports.Status.FETCHING));
api({
host: '',
@@ -142,7 +158,7 @@ module.exports.clearAdminMessage = (messageType, messageId, messageCount, adminM
alertType: messageType,
alertId: messageId
}
- }, (err, body) => {
+ }, function (err, body) {
if (err) {
dispatch(module.exports.setStatus('DELETE_STATUS', module.exports.Status.DELETE_ERROR));
dispatch(module.exports.setMessagesError(err));
@@ -159,9 +175,9 @@ module.exports.clearAdminMessage = (messageType, messageId, messageCount, adminM
dispatch(module.exports.setScratcherInvite({}));
} else {
// find the admin message and remove it
- let toRemove = -1;
- for (const i of adminMessages) {
- if (i.id === messageId) {
+ var toRemove = -1;
+ for (var i in adminMessages) {
+ if (adminMessages[i].id === messageId) {
toRemove = i;
break;
}
@@ -172,8 +188,8 @@ module.exports.clearAdminMessage = (messageType, messageId, messageCount, adminM
dispatch(messageCountActions.setCount(messageCount - 1));
dispatch(module.exports.setStatus('DELETE_STATUS', module.exports.Status.FETCHED));
});
- }
-);
+ };
+};
/**
* Gets a user's messages to be displayed on the /messages page
@@ -185,7 +201,7 @@ module.exports.clearAdminMessage = (messageType, messageId, messageCount, adminM
* @param {string} [opts.filter] type of messages to return
* @return {null} returns nothing
*/
-module.exports.getMessages = (username, token, opts) => {
+module.exports.getMessages = function (username, token, opts) {
opts = defaults(opts, {
messages: [],
offset: 0,
@@ -193,17 +209,17 @@ module.exports.getMessages = (username, token, opts) => {
clearCount: true
});
- let filterArg = '';
+ var filterArg = '';
if (opts.filter.length > 0) {
- filterArg = `&filter=${opts.filter}`;
+ filterArg = '&filter=' + opts.filter;
}
- return dispatch => {
+ return function (dispatch) {
dispatch(module.exports.setStatus('MESSAGE_STATUS', module.exports.Status.FETCHING));
api({
- uri: `/users/${username}/messages?limit=40&offset=${opts.offset}${filterArg}`,
+ uri: '/users/' + username + '/messages?limit=40&offset=' + opts.offset + filterArg,
authentication: token
- }, (err, body) => {
+ }, function (err, body) {
if (err) {
dispatch(module.exports.setStatus('MESSAGE_STATUS', module.exports.Status.MESSAGES_ERROR));
dispatch(module.exports.setMessagesError(err));
@@ -230,28 +246,30 @@ module.exports.getMessages = (username, token, opts) => {
* @param {string} token the user's unique token for auth
* @return {null} returns nothing
*/
-module.exports.getAdminMessages = (username, token) => (dispatch => {
- dispatch(module.exports.setStatus('ADMIN_STATUS', module.exports.Status.FETCHING));
- api({
- uri: `/users/${username}/messages/admin`,
- authentication: token
- }, (err, body) => {
- if (err) {
- dispatch(module.exports.setStatus('ADMIN_STATUS', module.exports.Status.ADMIN_ERROR));
- dispatch(module.exports.setMessagesError(err));
- dispatch(module.exports.setAdminMessages([]));
- return;
- }
- if (typeof body === 'undefined') {
- dispatch(module.exports.setStatus('ADMIN_STATUS', module.exports.Status.ADMIN_ERROR));
- dispatch(module.exports.setMessagesError('No session content'));
- dispatch(module.exports.setAdminMessages([]));
- return;
- }
- dispatch(module.exports.setAdminMessages(body));
- dispatch(module.exports.setStatus('ADMIN_STATUS', module.exports.Status.FETCHED));
- });
-});
+module.exports.getAdminMessages = function (username, token) {
+ return function (dispatch) {
+ dispatch(module.exports.setStatus('ADMIN_STATUS', module.exports.Status.FETCHING));
+ api({
+ uri: '/users/' + username + '/messages/admin',
+ authentication: token
+ }, function (err, body) {
+ if (err) {
+ dispatch(module.exports.setStatus('ADMIN_STATUS', module.exports.Status.ADMIN_ERROR));
+ dispatch(module.exports.setMessagesError(err));
+ dispatch(module.exports.setAdminMessages([]));
+ return;
+ }
+ if (typeof body === 'undefined') {
+ dispatch(module.exports.setStatus('ADMIN_STATUS', module.exports.Status.ADMIN_ERROR));
+ dispatch(module.exports.setMessagesError('No session content'));
+ dispatch(module.exports.setAdminMessages([]));
+ return;
+ }
+ dispatch(module.exports.setAdminMessages(body));
+ dispatch(module.exports.setStatus('ADMIN_STATUS', module.exports.Status.FETCHED));
+ });
+ };
+};
/**
* Gets the invitation to become a Scratcher for a user, if one exists
@@ -259,18 +277,20 @@ module.exports.getAdminMessages = (username, token) => (dispatch => {
* @param {string} token the user's unique token for auth
* @return {null} returns nothing
*/
-module.exports.getScratcherInvite = (username, token) => (dispatch => {
- api({
- uri: `/users/${username}/invites`,
- authentication: token
- }, (err, body) => {
- if (err) {
- dispatch(module.exports.setStatus('ADMIN_STATUS', module.exports.Status.INVITE_ERROR));
- dispatch(module.exports.setMessagesError(err));
- dispatch(module.exports.setScratcherInvite({}));
- return;
- }
- if (typeof body === 'undefined') return dispatch(module.exports.setMessagesError('No session content'));
- dispatch(module.exports.setScratcherInvite(body));
- });
-});
+module.exports.getScratcherInvite = function (username, token) {
+ return function (dispatch) {
+ api({
+ uri: '/users/' + username + '/invites',
+ authentication: token
+ }, function (err, body) {
+ if (err) {
+ dispatch(module.exports.setStatus('ADMIN_STATUS', module.exports.Status.INVITE_ERROR));
+ dispatch(module.exports.setMessagesError(err));
+ dispatch(module.exports.setScratcherInvite({}));
+ return;
+ }
+ if (typeof body === 'undefined') return dispatch(module.exports.setMessagesError('No session content'));
+ dispatch(module.exports.setScratcherInvite(body));
+ });
+ };
+};
diff --git a/src/redux/navigation.js b/src/redux/navigation.js
index 088fc7fb6..5ced2f06e 100644
--- a/src/redux/navigation.js
+++ b/src/redux/navigation.js
@@ -1,11 +1,11 @@
-const keyMirror = require('keymirror');
+var keyMirror = require('keymirror');
-const Types = keyMirror({
+var Types = keyMirror({
SET_SEARCH_TERM: null
});
-module.exports.navigationReducer = (state, action) => {
- if (typeof state === 'undefined') {
+module.exports.navigationReducer = function (state, action) {
+ if(typeof state === 'undefined') {
state = '';
}
switch (action.type) {
@@ -16,7 +16,9 @@ module.exports.navigationReducer = (state, action) => {
}
};
-module.exports.setSearchTerm = searchTerm => ({
- type: Types.SET_SEARCH_TERM,
- searchTerm: searchTerm
-});
+module.exports.setSearchTerm = function (searchTerm) {
+ return {
+ type: Types.SET_SEARCH_TERM,
+ searchTerm: searchTerm
+ };
+};
diff --git a/src/redux/permissions.js b/src/redux/permissions.js
index 87eebf64e..0530cb868 100644
--- a/src/redux/permissions.js
+++ b/src/redux/permissions.js
@@ -1,14 +1,14 @@
-const keyMirror = require('keymirror');
-const jar = require('../lib/jar.js');
+var keyMirror = require('keymirror');
+var jar = require('../lib/jar.js');
-const Types = keyMirror({
+var Types = keyMirror({
SET_PERMISSIONS: null,
SET_PERMISSIONS_ERROR: null
});
-module.exports.permissionsReducer = (state, action) => {
+module.exports.permissionsReducer = function (state, action) {
if (typeof state === 'undefined') {
- state = {};
+ state = '';
}
switch (action.type) {
case Types.SET_PERMISSIONS:
@@ -20,37 +20,43 @@ module.exports.permissionsReducer = (state, action) => {
}
};
-module.exports.storePermissions = permissions => {
+module.exports.storePermissions = function (permissions) {
permissions = permissions || {};
- return dispatch => {
+ return function (dispatch) {
jar.set('permissions', permissions, {
- encode: value => (
- encodeURIComponent(JSON.stringify(value))
- )
+ encode: function (value) {
+ return encodeURIComponent(JSON.stringify(value));
+ }
});
return dispatch(module.exports.setPermissions(permissions));
};
};
-module.exports.getPermissions = () => (dispatch => {
- jar.get('permissions', (err, value) => {
- if (err) return dispatch(module.exports.setPermissionsError(err));
+module.exports.getPermissions = function () {
+ return function (dispatch) {
+ jar.get('permissions', function (err, value) {
+ if (err) return dispatch(module.exports.setPermissionsError(err));
- try {
- value = JSON.parse(decodeURIComponent(value)) || {};
- } catch (e) {
- value = {};
- }
- return dispatch(module.exports.setPermissions(value));
- });
-});
+ try {
+ value = JSON.parse(decodeURIComponent(value)) || {};
+ } catch (e) {
+ value = {};
+ }
+ return dispatch(module.exports.setPermissions(value));
+ });
+ };
+};
-module.exports.setPermissions = permissions => ({
- type: Types.SET_PERMISSIONS,
- permissions: permissions
-});
+module.exports.setPermissions = function (permissions) {
+ return {
+ type: Types.SET_PERMISSIONS,
+ permissions: permissions
+ };
+};
-module.exports.setPermissionsError = error => ({
- type: Types.SET_PERMISSIONS_ERROR,
- error: error
-});
+module.exports.setPermissionsError = function (error) {
+ return {
+ type: Types.SET_PERMISSIONS_ERROR,
+ error: error
+ };
+};
diff --git a/src/redux/reducer.js b/src/redux/reducer.js
index 3df093a98..951b03a8a 100644
--- a/src/redux/reducer.js
+++ b/src/redux/reducer.js
@@ -1,9 +1,9 @@
-const combineReducers = require('redux').combineReducers;
-const defaults = require('lodash.defaults');
+var combineReducers = require('redux').combineReducers;
+var defaults = require('lodash.defaults');
-const messageCountReducer = require('./message-count.js').messageCountReducer;
-const permissionsReducer = require('./permissions.js').permissionsReducer;
-const sessionReducer = require('./session.js').sessionReducer;
+var messageCountReducer = require('./message-count.js').messageCountReducer;
+var permissionsReducer = require('./permissions.js').permissionsReducer;
+var sessionReducer = require('./session.js').sessionReducer;
/**
* Returns a combined reducer to be used for a page in `render.jsx`.
@@ -11,11 +11,11 @@ const sessionReducer = require('./session.js').sessionReducer;
* - and any reducers specific to the page should be passed into
* `render()` as an object (which will then be passed to the function
* below).
- * @param {object} opts key/value where the key is the name of the
+ * @param {Object} opts key/value where the key is the name of the
* redux state, value is the reducer function.
- * @return {object} combined reducer to be used in the redux store
+ * @return {Object} combined reducer to be used in the redux store
*/
-module.exports = opts => {
+module.exports = function (opts) {
opts = opts || {};
return combineReducers(defaults(opts, {
session: sessionReducer,
diff --git a/src/redux/session.js b/src/redux/session.js
index d5701cb1d..12645753f 100644
--- a/src/redux/session.js
+++ b/src/redux/session.js
@@ -1,17 +1,17 @@
-const keyMirror = require('keymirror');
-const defaults = require('lodash.defaults');
+var keyMirror = require('keymirror');
+var defaults = require('lodash.defaults');
-const api = require('../lib/api');
-const messageCountActions = require('./message-count.js');
-const permissionsActions = require('./permissions.js');
+var api = require('../lib/api');
+var messageCountActions = require('./message-count.js');
+var permissionsActions = require('./permissions.js');
-const Types = keyMirror({
+var Types = keyMirror({
SET_SESSION: null,
SET_SESSION_ERROR: null,
SET_STATUS: null
});
-const banWhitelistPaths = [
+var banWhitelistPaths = [
'/accounts/banned-response/',
'/community_guidelines/',
'/community_guidelines'
@@ -23,12 +23,11 @@ module.exports.Status = keyMirror({
FETCHING: null
});
-module.exports.getInitialState = () => ({
- status: module.exports.Status.NOT_FETCHED,
- session: {}
-});
+module.exports.getInitialState = function (){
+ return {status: module.exports.Status.NOT_FETCHED, session:{}};
+};
-module.exports.sessionReducer = (state, action) => {
+module.exports.sessionReducer = function (state, action) {
// Reducer for handling changes to session state
if (typeof state === 'undefined') {
state = module.exports.getInitialState();
@@ -46,60 +45,63 @@ module.exports.sessionReducer = (state, action) => {
}
};
-module.exports.setSessionError = error => ({
- type: Types.SET_SESSION_ERROR,
- error: error
-});
+module.exports.setSessionError = function (error) {
+ return {
+ type: Types.SET_SESSION_ERROR,
+ error: error
+ };
+};
-module.exports.setSession = session => ({
- type: Types.SET_SESSION,
- session: session
-});
+module.exports.setSession = function (session) {
+ return {
+ type: Types.SET_SESSION,
+ session: session
+ };
+};
-module.exports.setStatus = status => ({
- type: Types.SET_STATUS,
- status: status
-});
+module.exports.setStatus = function (status){
+ return {
+ type: Types.SET_STATUS,
+ status: status
+ };
+};
-module.exports.refreshSession = () => (dispatch => {
- dispatch(module.exports.setStatus(module.exports.Status.FETCHING));
- api({
- host: '',
- uri: '/session/'
- }, (err, body) => {
- if (err) return dispatch(module.exports.setSessionError(err));
- if (typeof body === 'undefined') return dispatch(module.exports.setSessionError('No session content'));
- if (
- body.user &&
- body.user.banned &&
- banWhitelistPaths.indexOf(window.location.pathname) === -1
- ) {
- window.location = '/accounts/banned-response/';
- return;
- } else if (
- body.flags &&
- body.flags.must_complete_registration &&
- window.location.pathname !== '/classes/complete_registration'
- ) {
- window.location = '/classes/complete_registration';
- return;
- } else if (
- body.flags &&
- body.flags.must_reset_password &&
- !body.flags.must_complete_registration &&
- window.location.pathname !== '/classes/student_password_reset/'
- ) {
- window.location = '/classes/student_password_reset/';
- return;
- }
- dispatch(module.exports.setSession(body));
- dispatch(module.exports.setStatus(module.exports.Status.FETCHED));
+module.exports.refreshSession = function () {
+ return function (dispatch) {
+ dispatch(module.exports.setStatus(module.exports.Status.FETCHING));
+ api({
+ host: '',
+ uri: '/session/'
+ }, function (err, body) {
+ if (err) return dispatch(module.exports.setSessionError(err));
+ if (typeof body === 'undefined') return dispatch(module.exports.setSessionError('No session content'));
+ if (
+ body.user &&
+ body.user.banned &&
+ banWhitelistPaths.indexOf(window.location.pathname) === -1) {
+ return window.location = '/accounts/banned-response/';
+ } else if (
+ body.flags &&
+ body.flags.must_complete_registration &&
+ window.location.pathname !== '/classes/complete_registration') {
+ return window.location = '/classes/complete_registration';
+ } else if (
+ body.flags &&
+ body.flags.must_reset_password &&
+ !body.flags.must_complete_registration &&
+ window.location.pathname !== '/classes/student_password_reset/') {
+ return window.location = '/classes/student_password_reset/';
+ } else {
+ dispatch(module.exports.setSession(body));
+ dispatch(module.exports.setStatus(module.exports.Status.FETCHED));
- // get the permissions from the updated session
- dispatch(permissionsActions.storePermissions(body.permissions));
- if (typeof body.user !== 'undefined') {
- dispatch(messageCountActions.getCount(body.user.username));
- }
- return;
- });
-});
+ // get the permissions from the updated session
+ dispatch(permissionsActions.storePermissions(body.permissions));
+ if (typeof body.user !== 'undefined') {
+ dispatch(messageCountActions.getCount(body.user.username));
+ }
+ return;
+ }
+ });
+ };
+};
diff --git a/src/redux/splash.js b/src/redux/splash.js
index 65840ddec..6a02c5c8d 100644
--- a/src/redux/splash.js
+++ b/src/redux/splash.js
@@ -1,7 +1,7 @@
-const keyMirror = require('keymirror');
+var keyMirror = require('keymirror');
-const api = require('../lib/api');
-const log = require('../lib/log');
+var api = require('../lib/api');
+var log = require('../lib/log');
module.exports.Status = keyMirror({
FETCHED: null,
@@ -10,30 +10,32 @@ module.exports.Status = keyMirror({
ERROR: null
});
-module.exports.getInitialState = () => ({
- activity: {
- status: module.exports.Status.NOT_FETCHED,
- rows: []
- },
- featured: {
- status: module.exports.Status.NOT_FETCHED,
- rows: {}
- },
- shared: {
- status: module.exports.Status.NOT_FETCHED,
- rows: []
- },
- loved: {
- status: module.exports.Status.NOT_FETCHED,
- rows: []
- },
- studios: {
- status: module.exports.Status.NOT_FETCHED,
- rows: []
- }
-});
+module.exports.getInitialState = function () {
+ return {
+ activity: {
+ status: module.exports.Status.NOT_FETCHED,
+ rows: []
+ },
+ featured: {
+ status: module.exports.Status.NOT_FETCHED,
+ rows: {}
+ },
+ shared: {
+ status: module.exports.Status.NOT_FETCHED,
+ rows: []
+ },
+ loved: {
+ status: module.exports.Status.NOT_FETCHED,
+ rows: []
+ },
+ studios: {
+ status: module.exports.Status.NOT_FETCHED,
+ rows: []
+ }
+ };
+};
-module.exports.splashReducer = (state, action) => {
+module.exports.splashReducer = function (state, action) {
if (typeof state === 'undefined') {
state = module.exports.getInitialState();
}
@@ -55,141 +57,157 @@ module.exports.splashReducer = (state, action) => {
}
};
-module.exports.setError = error => ({
- type: 'ERROR',
- error: error
-});
+module.exports.setError = function (error) {
+ return {
+ type: 'ERROR',
+ error: error
+ };
+};
-module.exports.setRows = (type, rows) => ({
- type: 'SET_ROWS',
- rowType: type,
- rows: rows
-});
+module.exports.setRows = function (type, rows) {
+ return {
+ type: 'SET_ROWS',
+ rowType: type,
+ rows: rows
+ };
+};
-module.exports.setFetchStatus = (type, status) => ({
- type: 'SET_FETCH_STATUS',
- rowType: type,
- status: status
-});
+module.exports.setFetchStatus = function (type, status){
+ return {
+ type: 'SET_FETCH_STATUS',
+ rowType: type,
+ status: status
+ };
+};
-module.exports.getActivity = (username, token) => (dispatch => {
- dispatch(module.exports.setFetchStatus('activity', module.exports.Status.FETCHING));
- api({
- uri: `/users/${username}/following/users/activity?limit=5`,
- authentication: token
- }, (err, body) => {
- if (err) {
- dispatch(module.exports.setFetchStatus('activity', module.exports.Status.ERROR));
- dispatch(module.exports.setError(err));
- return;
- }
- if (typeof body === 'undefined') {
- dispatch(module.exports.setFetchStatus('activity', module.exports.Status.ERROR));
- dispatch(module.exports.setError('No session content'));
- return;
- }
- dispatch(module.exports.setFetchStatus('activity', module.exports.Status.FETCHED));
- dispatch(module.exports.setRows('activity', body));
- });
-});
+module.exports.getActivity = function (username, token) {
+ return function (dispatch) {
+ dispatch(module.exports.setFetchStatus('activity', module.exports.Status.FETCHING));
+ api({
+ uri: '/users/' + username + '/following/users/activity?limit=5',
+ authentication: token
+ }, function (err, body) {
+ if (err) {
+ dispatch(module.exports.setFetchStatus('activity', module.exports.Status.ERROR));
+ dispatch(module.exports.setError(err));
+ return;
+ }
+ if (typeof body === 'undefined') {
+ dispatch(module.exports.setFetchStatus('activity', module.exports.Status.ERROR));
+ dispatch(module.exports.setError('No session content'));
+ return;
+ }
+ dispatch(module.exports.setFetchStatus('activity', module.exports.Status.FETCHED));
+ dispatch(module.exports.setRows('activity', body));
+ });
+ };
+};
-/*
+/**
* Get global homepage rows
*/
-module.exports.getFeaturedGlobal = () => (dispatch => {
- dispatch(module.exports.setFetchStatus('featured', module.exports.Status.FETCHING));
- api({
- uri: '/proxy/featured'
- }, (err, body) => {
- if (err) {
- dispatch(module.exports.setFetchStatus('featured', module.exports.Status.ERROR));
- dispatch(module.exports.setError(err));
- return;
- }
- if (typeof body === 'undefined') {
- dispatch(module.exports.setFetchStatus('featured', module.exports.Status.ERROR));
- dispatch(module.exports.setError('No session content'));
- return;
- }
- dispatch(module.exports.setFetchStatus('featured', module.exports.Status.FETCHED));
- dispatch(module.exports.setRows('featured', body));
- });
-});
+module.exports.getFeaturedGlobal = function () {
+ return function (dispatch) {
+ dispatch(module.exports.setFetchStatus('featured', module.exports.Status.FETCHING));
+ api({
+ uri: '/proxy/featured'
+ }, function (err, body) {
+ if (err) {
+ dispatch(module.exports.setFetchStatus('featured', module.exports.Status.ERROR));
+ dispatch(module.exports.setError(err));
+ return;
+ }
+ if (typeof body === 'undefined') {
+ dispatch(module.exports.setFetchStatus('featured', module.exports.Status.ERROR));
+ dispatch(module.exports.setError('No session content'));
+ return;
+ }
+ dispatch(module.exports.setFetchStatus('featured', module.exports.Status.FETCHED));
+ dispatch(module.exports.setRows('featured', body));
+ });
+ };
+};
-/*
+/**
* Get list of projects shared by users the given user is following.
* @param {string} username username of the Scratcher for whom to get projects
* @param {string} token authentication
*/
-module.exports.getSharedByFollowing = (username, token) => (dispatch => {
- dispatch(module.exports.setFetchStatus('shared', module.exports.Status.FETCHING));
- api({
- uri: `/users/${username}/following/users/projects`,
- authentication: token
- }, (err, body) => {
- if (err) {
- dispatch(module.exports.setFetchStatus('shared', module.exports.Status.Status.ERROR));
- dispatch(module.exports.setError(err));
- return;
- }
- if (typeof body === 'undefined') {
- dispatch(module.exports.setFetchStatus('shared', module.exports.Status.ERROR));
- dispatch(module.exports.setError('No session content'));
- return;
- }
- dispatch(module.exports.setFetchStatus('shared', module.exports.Status.FETCHED));
- dispatch(module.exports.setRows('shared', body));
- });
-});
+module.exports.getSharedByFollowing = function (username, token) {
+ return function (dispatch) {
+ dispatch(module.exports.setFetchStatus('shared', module.exports.Status.FETCHING));
+ api({
+ uri: '/users/' + username + '/following/users/projects',
+ authentication: token
+ }, function (err, body) {
+ if (err) {
+ dispatch(module.exports.setFetchStatus('shared', module.exports.Status.Status.ERROR));
+ dispatch(module.exports.setError(err));
+ return;
+ }
+ if (typeof body === 'undefined') {
+ dispatch(module.exports.setFetchStatus('shared', module.exports.Status.ERROR));
+ dispatch(module.exports.setError('No session content'));
+ return;
+ }
+ dispatch(module.exports.setFetchStatus('shared', module.exports.Status.FETCHED));
+ dispatch(module.exports.setRows('shared', body));
+ });
+ };
+};
-/*
+/**
* Get list of projects in studios that the given user is following.
* @param {string} username username of the Scratcher for whom to get projects
* @param {string} token authentication
*/
-module.exports.getInStudiosFollowing = (username, token) => (dispatch => {
- dispatch(module.exports.setFetchStatus('studios', module.exports.Status.FETCHING));
- api({
- uri: `/users/${username}/following/studios/projects`,
- authentication: token
- }, (err, body) => {
- if (err) {
- dispatch(module.exports.setFetchStatus('studios', module.exports.Status.ERROR));
- dispatch(module.exports.setError(err));
- return;
- }
- if (typeof body === 'undefined') {
- dispatch(module.exports.setFetchStatus('studios', module.exports.Status.ERROR));
- dispatch(module.exports.setError('No session content'));
- return;
- }
- dispatch(module.exports.setFetchStatus('studios', module.exports.Status.FETCHED));
- dispatch(module.exports.setRows('studios', body));
- });
-});
+module.exports.getInStudiosFollowing = function (username, token) {
+ return function (dispatch) {
+ dispatch(module.exports.setFetchStatus('studios', module.exports.Status.FETCHING));
+ api({
+ uri: '/users/' + username + '/following/studios/projects',
+ authentication: token
+ }, function (err, body) {
+ if (err) {
+ dispatch(module.exports.setFetchStatus('studios', module.exports.Status.ERROR));
+ dispatch(module.exports.setError(err));
+ return;
+ }
+ if (typeof body === 'undefined') {
+ dispatch(module.exports.setFetchStatus('studios', module.exports.Status.ERROR));
+ dispatch(module.exports.setError('No session content'));
+ return;
+ }
+ dispatch(module.exports.setFetchStatus('studios', module.exports.Status.FETCHED));
+ dispatch(module.exports.setRows('studios', body));
+ });
+ };
+};
-/*
+/**
* Get list of projects loved by users the given user is following.
* @param {string} username username of the Scratcher for whom to get projects
* @param {string} token authentication
*/
-module.exports.getLovedByFollowing = (username, token) => (dispatch => {
- dispatch(module.exports.setFetchStatus('loved', module.exports.Status.FETCHING));
- api({
- uri: `/users/${username}/following/users/loves`,
- authentication: token
- }, (err, body) => {
- if (err) {
- dispatch(module.exports.setFetchStatus('loved', module.exports.Status.ERROR));
- dispatch(module.exports.setError(err));
- return;
- }
- if (typeof body === 'undefined') {
- dispatch(module.exports.setFetchStatus('loved', module.exports.Status.ERROR));
- dispatch(module.exports.setError('No session content'));
- return;
- }
- dispatch(module.exports.setFetchStatus('loved', module.exports.Status.FETCHED));
- dispatch(module.exports.setRows('loved', body));
- });
-});
+module.exports.getLovedByFollowing = function (username, token) {
+ return function (dispatch) {
+ dispatch(module.exports.setFetchStatus('loved', module.exports.Status.FETCHING));
+ api({
+ uri: '/users/' + username + '/following/users/loves',
+ authentication: token
+ }, function (err, body) {
+ if (err) {
+ dispatch(module.exports.setFetchStatus('loved', module.exports.Status.ERROR));
+ dispatch(module.exports.setError(err));
+ return;
+ }
+ if (typeof body === 'undefined') {
+ dispatch(module.exports.setFetchStatus('loved', module.exports.Status.ERROR));
+ dispatch(module.exports.setError('No session content'));
+ return;
+ }
+ dispatch(module.exports.setFetchStatus('loved', module.exports.Status.FETCHED));
+ dispatch(module.exports.setRows('loved', body));
+ });
+ };
+};
diff --git a/src/views/about/about.jsx b/src/views/about/about.jsx
index 2675bca69..e2a6f73aa 100644
--- a/src/views/about/about.jsx
+++ b/src/views/about/about.jsx
@@ -1,189 +1,177 @@
-const React = require('react');
-const FormattedMessage = require('react-intl').FormattedMessage;
-const render = require('../../lib/render.jsx');
+var React = require('react');
+var FormattedMessage = require('react-intl').FormattedMessage;
+var render = require('../../lib/render.jsx');
-const Page = require('../../components/page/www/page.jsx');
+var Page = require('../../components/page/www/page.jsx');
require('./about.scss');
-const About = () => (
- <div className="inner about">
- <h1><FormattedMessage id="general.aboutScratch" /></h1>
+var About = React.createClass({
+ type: 'About',
+ render: function () {
+ return (
+ <div className="inner about">
+ <h1><FormattedMessage id='general.aboutScratch' /></h1>
- <div className="masthead">
- <div>
- <p><FormattedMessage id="about.introOne" /></p>
- <p><FormattedMessage id="about.introTwo" /></p>
- <p><FormattedMessage id="about.introThree" /></p>
+ <div className="masthead">
+ <div>
+ <p><FormattedMessage id='about.introOne' /></p>
+ <p><FormattedMessage id='about.introTwo' /></p>
+ <p><FormattedMessage id='about.introThree' /></p>
- <ul>
- <li><a href="/parents/"><FormattedMessage id="about.introParents" /></a></li>
- <li><a href="/educators/"><FormattedMessage id="about.introEducators" /></a></li>
- </ul>
- </div>
-
- <div>
- <iframe
- allowFullScreen
- mozallowfullscreen
- webkitAllowFullScreen
- frameBorder="0"
- src="https://player.vimeo.com/video/65583694?title=0&byline=0&portrait=0"
- title="Scratch Overview Video"
- />
- </div>
- </div>
-
- <div className="body">
- <ul>
- <li>
- <h3><FormattedMessage id="about.whoUsesScratch" /></h3>
- <img
- alt=""
- src="/images/about/who-uses-scratch.jpg"
- />
- <p><FormattedMessage id="about.whoUsesScratchDescription" /></p>
- </li>
-
- <li>
- <h3><FormattedMessage id="about.literacy" /></h3>
- <iframe
- allowFullScreen
- mozallowfullscreen
- webkitAllowFullScreen
- scrolling="no"
- src="https://embed-ssl.ted.com/talks/mitch_resnick_let_s_teach_kids_to_code.html"
- />
- <p><FormattedMessage id="about.literacyDescription" /></p>
- </li>
-
- <li>
- <h3><FormattedMessage id="about.aroundTheWorld" /></h3>
- <img
- alt=""
- src="/images/about/around-the-world.png"
- />
- <p><FormattedMessage
- id="about.aroundTheWorldDescription"
- values={{
- translationLink: (
- <a href="http://wiki.scratch.mit.edu/wiki/How_to_Translate_Scratch">
- <FormattedMessage id="about.translationLinkText" />
- </a>
- )
- }}
- /></p>
- </li>
- <li>
- <h3><FormattedMessage id="about.schools" /></h3>
- <img
- alt=""
- src="/images/about/scratch-in-schools.jpg"
- />
- <p><FormattedMessage
- id="about.schoolsDescription"
- values={{
- scratchedLink: (
- <a href="http://scratched.gse.harvard.edu/">
- <FormattedMessage id="about.scratchedLinkText" />
- </a>
- )
- }}
- /></p>
- </li>
- <li>
- <h3><FormattedMessage id="about.quotes" /></h3>
- <img
- alt="Quotes about Scratch"
- src="/images/about/quotes.gif"
- />
- <p><FormattedMessage
- id="about.quotesDescription"
- values={{
- quotesLink: (
- <a href="http://wiki.scratch.mit.edu/wiki/How_to_Translate_Scratch">
- <FormattedMessage id="about.quotesLinkText" />
- </a>
- )
- }}
- /></p>
- </li>
-
- <li>
- <h3><FormattedMessage id="about.research" /></h3>
- <img
- alt=""
- src="/images/about/research-remix.png"
- />
- <p><FormattedMessage
- id="about.researchDescription"
- values={{
- researchLink: (
- <a href="/info/research">
- <FormattedMessage id="about.researchLinkText" />
- </a>
- ),
- spfaLink: (
- <a href="http://web.media.mit.edu/~mres/papers/Scratch-CACM-final.pdf">
- <FormattedMessage id="about.spfaLinkText" />
- </a>
- ),
- statisticsLink: (
- <a href="/statistics">
- <FormattedMessage id="about.statisticsLinkText" />
- </a>
- )
- }}
- /></p>
- </li>
-
- <li>
- <h3><FormattedMessage id="about.learnMore" /></h3>
- <p>
- <ul className="list">
- <li>
- <a href="/help"><FormattedMessage id="about.learnMoreHelp" /></a>
- </li>
- <li>
- <a href="/info/faq"><FormattedMessage id="about.learnMoreFaq" /></a>
- </li>
- <li>
- <a href="/parents"><FormattedMessage id="about.learnMoreParents" /></a>
- </li>
- <li>
- <a href="/info/credits"><FormattedMessage id="about.learnMoreCredits" /></a>
- </li>
+ <ul>
+ <li><a href = "/parents/"><FormattedMessage id="about.introParents" /></a></li>
+ <li><a href = "/educators/"><FormattedMessage id="about.introEducators" /></a></li>
</ul>
- </p>
- </li>
+ </div>
- <li>
- <h3><FormattedMessage id="about.support" /></h3>
- <p><FormattedMessage
- id="about.supportDescription"
- values={{
- supportersList: 'National Science Foundation, Scratch Foundation, Siegel Family Endowment, Google, LEGO Foundation, Intel, Cartoon Network, Lemann Foundation, MacArthur Foundation', // eslint-disable-line max-len
- creditsLink: (
- <a href="//scratch.mit.edu/info/credits">
- <FormattedMessage id="about.creditsLinkText" />
- </a>
- ),
- donateLink: (
- <a href="//secure.donationpay.org/scratchfoundation/">
- <FormattedMessage id="about.donateLinkText" />
- </a>
- ),
- donateemail: (
- <a href="mailto:donate@scratch.mit.edu">
- donate@scratch.mit.edu
- </a>
- )
- }}
- /></p>
- </li>
- </ul>
- </div>
- </div>
-);
+ <div>
+ <iframe
+ title="Scratch Overview Video"
+ src="https://player.vimeo.com/video/65583694?title=0&byline=0&portrait=0"
+ frameBorder="0"
+ webkitAllowFullScreen
+ mozallowfullscreen
+ allowFullScreen />
+ </div>
+ </div>
+
+ <div className="body">
+ <ul>
+ <li>
+ <h3><FormattedMessage id='about.whoUsesScratch' /></h3>
+ <img src="/images/about/who-uses-scratch.jpg" alt="" />
+ <p><FormattedMessage id='about.whoUsesScratchDescription' /></p>
+ </li>
+
+ <li>
+ <h3><FormattedMessage id='about.literacy' /></h3>
+ <iframe
+ src="https://embed-ssl.ted.com/talks/mitch_resnick_let_s_teach_kids_to_code.html"
+ scrolling="no"
+ webkitAllowFullScreen
+ mozallowfullscreen
+ allowFullScreen />
+ <p><FormattedMessage id='about.literacyDescription' /></p>
+ </li>
+
+ <li>
+ <h3><FormattedMessage id='about.aroundTheWorld' /></h3>
+ <img src="/images/about/around-the-world.png" alt="" />
+ <p><FormattedMessage
+ id='about.aroundTheWorldDescription'
+ values={{
+ translationLink: (
+ <a href='http://wiki.scratch.mit.edu/wiki/How_to_Translate_Scratch'>
+ <FormattedMessage id='about.translationLinkText' />
+ </a>
+ )
+ }}
+ /></p>
+ </li>
+ <li>
+ <h3><FormattedMessage id='about.schools' /></h3>
+ <img src="/images/about/scratch-in-schools.jpg" alt="" />
+ <p><FormattedMessage
+ id='about.schoolsDescription'
+ values={{
+ scratchedLink: (
+ <a href='http://scratched.gse.harvard.edu/'>
+ <FormattedMessage id='about.scratchedLinkText' />
+ </a>
+ )
+ }}
+ /></p>
+ </li>
+ <li>
+ <h3><FormattedMessage id='about.quotes' /></h3>
+ <img src="/images/about/quotes.gif" alt="Quotes about Scratch" />
+ <p><FormattedMessage
+ id='about.quotesDescription'
+ values={{
+ quotesLink: (
+ <a href='http://wiki.scratch.mit.edu/wiki/How_to_Translate_Scratch'>
+ <FormattedMessage id='about.quotesLinkText'/>
+ </a>
+ )
+ }}
+ /></p>
+ </li>
+
+ <li>
+ <h3><FormattedMessage id='about.research' /></h3>
+ <img src="/images/about/research-remix.png" alt="" />
+ <p><FormattedMessage
+ id='about.researchDescription'
+ values={{
+ researchLink: (
+ <a href='/info/research'>
+ <FormattedMessage id='about.researchLinkText'/>
+ </a>
+ ),
+ spfaLink: (
+ <a href='http://web.media.mit.edu/~mres/papers/Scratch-CACM-final.pdf'>
+ <FormattedMessage id='about.spfaLinkText'/>
+ </a>
+ ),
+ statisticsLink: (
+ <a href='/statistics'>
+ <FormattedMessage id='about.statisticsLinkText'/>
+ </a>
+ )
+ }}
+ /></p>
+ </li>
+
+ <li>
+ <h3><FormattedMessage id='about.learnMore' /></h3>
+ <p>
+ <ul className="list">
+ <li>
+ <a href="/help"><FormattedMessage id='about.learnMoreHelp' /></a>
+ </li>
+ <li>
+ <a href="/info/faq"><FormattedMessage id='about.learnMoreFaq' /></a>
+ </li>
+ <li>
+ <a href="/parents"><FormattedMessage id='about.learnMoreParents' /></a>
+ </li>
+ <li>
+ <a href="/info/credits"><FormattedMessage id='about.learnMoreCredits' /></a>
+ </li>
+ </ul>
+ </p>
+ </li>
+
+ <li>
+ <h3><FormattedMessage id='about.support' /></h3>
+ <p><FormattedMessage
+ id='about.supportDescription'
+ values={{
+ supportersList: 'National Science Foundation, Scratch Foundation, Siegel Family Endowment, Google, LEGO Foundation, Intel, Cartoon Network, Lemann Foundation, MacArthur Foundation', // eslint-disable-line max-len
+ creditsLink: (
+ <a href='//scratch.mit.edu/info/credits'>
+ <FormattedMessage id='about.creditsLinkText'/>
+ </a>
+ ),
+ donateLink: (
+ <a href='//secure.donationpay.org/scratchfoundation/'>
+ <FormattedMessage id='about.donateLinkText'/>
+ </a>
+ ),
+ donateemail: (
+ <a href='mailto:donate@scratch.mit.edu'>
+ donate@scratch.mit.edu
+ </a>
+ )
+ }}
+ /></p>
+ </li>
+ </ul>
+ </div>
+ </div>
+ );
+ }
+});
render(<Page><About /></Page>, document.getElementById('app'));
diff --git a/src/views/camp/camp.jsx b/src/views/camp/camp.jsx
index b57ccf17d..e99edc6d3 100644
--- a/src/views/camp/camp.jsx
+++ b/src/views/camp/camp.jsx
@@ -1,168 +1,138 @@
-const React = require('react');
-const injectIntl = require('react-intl').injectIntl;
-const FormattedMessage = require('react-intl').FormattedMessage;
-const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
-const render = require('../../lib/render.jsx');
-const TitleBanner = require('../../components/title-banner/title-banner.jsx');
-const FlexRow = require('../../components/flex-row/flex-row.jsx');
+var React = require('react');
+var injectIntl = require('react-intl').injectIntl;
+var FormattedMessage = require('react-intl').FormattedMessage;
+var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
+var render = require('../../lib/render.jsx');
+var TitleBanner = require('../../components/title-banner/title-banner.jsx');
+var FlexRow = require('../../components/flex-row/flex-row.jsx');
-const Page = require('../../components/page/www/page.jsx');
+var Page = require('../../components/page/www/page.jsx');
require('./camp.scss');
-const Camp = injectIntl(() => (
- <div>
- <TitleBanner className="masthead mod-blue-bg">
- <img
- alt="Top"
- className="topImg"
- src="/images/camp/ocean-top.svg"
- />
- <div className="inner">
- <div className="title-content">
- <h1 className="title-banner-h1">
- <FormattedMessage id="camp.title" />
- </h1>
- <h4 className="intro title-banner-p">
- <FormattedMessage id="camp.dates" />
- </h4>
- <img
- alt="Bubbles"
- className="bubbles"
- src="/images/camp/bubbles.svg"
- />
+var Camp = injectIntl(React.createClass({
+ type: 'Camp',
+ render: function () {
+ return (
+ <div>
+ <TitleBanner className="masthead mod-blue-bg">
+ <img src="/images/camp/ocean-top.svg" alt="Top" className="topImg"/>
+ <div className="inner">
+ <div className="title-content">
+ <h1 className="title-banner-h1">
+ <FormattedMessage id='camp.title' />
+ </h1>
+ <h4 className="intro title-banner-p">
+ <FormattedMessage id='camp.dates' />
+ </h4>
+ <img src="/images/camp/bubbles.svg" alt="Bubbles" className="bubbles"/>
+ </div>
+ </div>
+ </TitleBanner>
+ <div className="gradient1">
+ <section id="particpate">
+ <div className="inner">
+ <center>
+ <h2><FormattedMessage id='camp.welcome' /></h2>
+ <p id="intro">
+ <FormattedHTMLMessage id='camp.welcomeIntro' />
+ </p>
+ </center>
+ <center>
+ <img src="/images/camp/fish-divider.svg" className="fishDivider" />
+ </center>
+ <h2>
+ <center><FormattedMessage id='camp.part1Dates' /></center>
+ </h2>
+ <center>
+ <FlexRow className="sidebar-row">
+ <div className="body-copy column">
+ <h3><FormattedMessage id='camp.detailsTitle' /></h3>
+ <p>
+ <FormattedMessage id='camp.part1Details' />
+ </p>
+ </div>
+ <div className="sidebar column">
+ <h3><FormattedMessage id='camp.particpateTitle' /></h3>
+ <p>
+ <FormattedHTMLMessage id='camp.part1Particpate' />
+ </p>
+ </div>
+ </FlexRow>
+ <center>
+ <img src="/images/camp/fish-divider2.svg" className="fishDivider" />
+ </center>
+ <h2>
+ <center><FormattedMessage id='camp.part2Dates' /></center>
+ </h2>
+ <FlexRow className="sidebar-row">
+ <div className="body-copy column">
+ <h3><FormattedMessage id='camp.detailsTitle' /></h3>
+ <p>
+ <FormattedMessage id='camp.part2Details' />
+ </p>
+ </div>
+ <div className="sidebar column">
+ <h3><FormattedMessage id='camp.particpateTitle' /></h3>
+ <p>
+ <FormattedHTMLMessage id='camp.part2Particpate' />
+ </p>
+ </div>
+ </FlexRow>
+ <center>
+ <img src="/images/camp/fish-divider.svg" className="fishDivider" />
+ </center>
+ <h2>
+ <center><FormattedMessage id='camp.part3Dates' /></center>
+ </h2>
+ <FlexRow className="sidebar-row">
+ <div className="body-copy column">
+ <h3><FormattedMessage id='camp.detailsTitle' /></h3>
+ <p>
+ <FormattedMessage id='camp.part3Details' />
+ </p>
+ </div>
+ <div className="sidebar column">
+ <h3><FormattedMessage id='camp.particpateTitle' /></h3>
+ <p>
+ <FormattedHTMLMessage id='camp.part3Particpate' />
+ </p>
+ </div>
+ </FlexRow>
+ </center>
+ </div>
+ </section>
+ <img src="/images/camp/bubbles.svg" alt="Bubbles" className="bubbles"/>
+ <section id="info">
+ <div className="inner">
+ <center><h2><FormattedMessage id='camp.helpfulInfo' /></h2></center>
+ <FlexRow className="info-content">
+ <div>
+ <img src="/images/camp/dolphin.svg" alt="Dolphin" className="infoImg" />
+ <p>
+ <FormattedHTMLMessage id='camp.infoCounselors' />
+ </p>
+ </div>
+ <div>
+ <img src="/images/camp/treasure.svg" className="infoImg" />
+ <p>
+ <FormattedMessage id='camp.infoPart3' />
+ </p>
+ </div>
+ <div>
+ <img src="/images/camp/map.svg" className="infoImg" />
+ <p>
+ <FormattedMessage id='camp.infoTime' />
+ </p>
+ </div>
+ </FlexRow>
+ </div>
+ </section>
+ <img src="/images/camp/ocean-bottom.svg" alt="Top" className="bottomImg"/>
</div>
</div>
- </TitleBanner>
- <div className="gradient1">
- <section id="particpate">
- <div className="inner">
- <center>
- <h2><FormattedMessage id="camp.welcome" /></h2>
- <p id="intro">
- <FormattedHTMLMessage id="camp.welcomeIntro" />
- </p>
- </center>
- <center>
- <img
- className="fishDivider"
- src="/images/camp/fish-divider.svg"
- />
- </center>
- <h2>
- <center><FormattedMessage id="camp.part1Dates" /></center>
- </h2>
- <center>
- <FlexRow className="sidebar-row">
- <div className="body-copy column">
- <h3><FormattedMessage id="camp.detailsTitle" /></h3>
- <p>
- <FormattedMessage id="camp.part1Details" />
- </p>
- </div>
- <div className="sidebar column">
- <h3><FormattedMessage id="camp.particpateTitle" /></h3>
- <p>
- <FormattedHTMLMessage id="camp.part1Particpate" />
- </p>
- </div>
- </FlexRow>
- <center>
- <img
- className="fishDivider"
- src="/images/camp/fish-divider2.svg"
- />
- </center>
- <h2>
- <center><FormattedMessage id="camp.part2Dates" /></center>
- </h2>
- <FlexRow className="sidebar-row">
- <div className="body-copy column">
- <h3><FormattedMessage id="camp.detailsTitle" /></h3>
- <p>
- <FormattedMessage id="camp.part2Details" />
- </p>
- </div>
- <div className="sidebar column">
- <h3><FormattedMessage id="camp.particpateTitle" /></h3>
- <p>
- <FormattedHTMLMessage id="camp.part2Particpate" />
- </p>
- </div>
- </FlexRow>
- <center>
- <img
- className="fishDivider"
- src="/images/camp/fish-divider.svg"
- />
- </center>
- <h2>
- <center><FormattedMessage id="camp.part3Dates" /></center>
- </h2>
- <FlexRow className="sidebar-row">
- <div className="body-copy column">
- <h3><FormattedMessage id="camp.detailsTitle" /></h3>
- <p>
- <FormattedMessage id="camp.part3Details" />
- </p>
- </div>
- <div className="sidebar column">
- <h3><FormattedMessage id="camp.particpateTitle" /></h3>
- <p>
- <FormattedHTMLMessage id="camp.part3Particpate" />
- </p>
- </div>
- </FlexRow>
- </center>
- </div>
- </section>
- <img
- alt="Bubbles"
- className="bubbles"
- src="/images/camp/bubbles.svg"
- />
- <section id="info">
- <div className="inner">
- <center><h2><FormattedMessage id="camp.helpfulInfo" /></h2></center>
- <FlexRow className="info-content">
- <div>
- <img
- alt="Dolphin"
- className="infoImg"
- src="/images/camp/dolphin.svg"
- />
- <p>
- <FormattedHTMLMessage id="camp.infoCounselors" />
- </p>
- </div>
- <div>
- <img
- className="infoImg"
- src="/images/camp/treasure.svg"
- />
- <p>
- <FormattedMessage id="camp.infoPart3" />
- </p>
- </div>
- <div>
- <img
- className="infoImg"
- src="/images/camp/map.svg"
- />
- <p>
- <FormattedMessage id="camp.infoTime" />
- </p>
- </div>
- </FlexRow>
- </div>
- </section>
- <img
- alt="Top"
- className="bottomImg"
- src="/images/camp/ocean-bottom.svg"
- />
- </div>
- </div>
-));
+ );
+ }
+}));
render(<Page><Camp /></Page>, document.getElementById('app'));
diff --git a/src/views/cards/cards.jsx b/src/views/cards/cards.jsx
index c18da2497..76824d5c6 100644
--- a/src/views/cards/cards.jsx
+++ b/src/views/cards/cards.jsx
@@ -1,33 +1,26 @@
-const bindAll = require('lodash.bindall');
-const injectIntl = require('react-intl').injectIntl;
-const intlShape = require('react-intl').intlShape;
-const FormattedMessage = require('react-intl').FormattedMessage;
-const React = require('react');
-const render = require('../../lib/render.jsx');
+var React = require('react');
+var injectIntl = require('react-intl').injectIntl;
+var FormattedMessage = require('react-intl').FormattedMessage;
+var render = require('../../lib/render.jsx');
-const Box = require('../../components/box/box.jsx');
-const FlexRow = require('../../components/flex-row/flex-row.jsx');
-const Page = require('../../components/page/www/page.jsx');
+var Box = require('../../components/box/box.jsx');
+var FlexRow = require('../../components/flex-row/flex-row.jsx');
+var Page = require('../../components/page/www/page.jsx');
require('./cards.scss');
-class Cards extends React.Component {
- constructor (props) {
- super(props);
- bindAll([
- 'pdfLocaleMismatch'
- ]);
- }
- pdfLocaleMismatch (locale, pdf, englishPdf) {
+var Cards = injectIntl(React.createClass({
+ type: 'Cards',
+ pdfLocaleMismatch: function (locale, pdf, englishPdf) {
if (pdf === englishPdf && locale.indexOf('en') !== 0) {
return true;
}
return false;
- }
- render () {
- const locale = this.props.intl.locale || 'en';
- const formatMessage = this.props.intl.formatMessage;
- const englishLinks = {
+ },
+ render: function () {
+ var locale = this.props.intl.locale || 'en';
+ var formatMessage = this.props.intl.formatMessage;
+ var englishLinks = {
'cards.starterLink': 'https://resources.scratch.mit.edu/www/cards/en/Scratch2Cards.pdf',
'cards.nameLink': 'https://resources.scratch.mit.edu/www/cards/en/nameCards.pdf',
'cards.flyLink': 'https://resources.scratch.mit.edu/www/cards/en/flyCards.pdf',
@@ -41,7 +34,7 @@ class Cards extends React.Component {
'cards.catchLink': 'https://resources.scratch.mit.edu/www/cards/en/catchCards.pdf',
'cards.petLink': 'https://resources.scratch.mit.edu/www/cards/en/petCards.pdf'
};
- const formattedLinks = {
+ var formattedLinks = {
'cards.starterLink': formatMessage({id: 'cards.Scratch2CardsLink'}),
'cards.nameLink': formatMessage({id: 'cards.nameCardsLink'}),
'cards.flyLink': formatMessage({id: 'cards.flyCardsLink'}),
@@ -55,411 +48,273 @@ class Cards extends React.Component {
'cards.catchLink': formatMessage({id: 'cards.catchCardsLink'}),
'cards.petLink': formatMessage({id: 'cards.petCardsLink'})
};
-
- /* eslint-disable indent */
return (
<div className="inner cards">
<div className="cards-intro">
<div className="cards-intro-content">
<h1 className="cards-intro-content-header">
- <FormattedMessage id="cards.introHeader" />
+ <FormattedMessage id='cards.introHeader' />
</h1>
<p className="cards-intro-content-body">
- <FormattedMessage id="cards.introContent" />
+ <FormattedMessage id='cards.introContent' />
</p>
</div>
- <img
- alt="Card Use Explanation"
- className="cards-intro-img"
- src="/images/cards/card-use-overview.png"
- />
+ <img src='/images/cards/card-use-overview.png'
+ alt="Card Use Explanation"
+ className="cards-intro-img" />
</div>
<div className="cards-container">
<Box title={''}>
<FlexRow>
<div className="flex-row-card">
<h4 className="flex-row-card-header">
- <FormattedMessage id="cards.starter" />
+ <FormattedMessage id='cards.starter' />
</h4>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.starterLink']}
- >
- <img
- alt=""
- src="/images/cards/cards-starter.jpg"
- />
+ <a className="flex-row-card-link" href={formattedLinks['cards.starterLink']}>
+ <img src="/images/cards/cards-starter.jpg" alt="" />
</a>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.starterLink']}
- >
- <img
- alt=""
- className="flex-row-card-link-icon"
- src="/svgs/pdf-icon-ui-blue.svg"
- />
- <FormattedMessage id="cards.viewCard" />
- {(this.pdfLocaleMismatch(
- locale,
- formattedLinks['cards.starterLink'],
- englishLinks['cards.starterLink']
- )) ? [
- <span key="english-cards">
- <FormattedMessage id="cards.english" />
- </span>
+ <a className="flex-row-card-link" href={formattedLinks['cards.starterLink']}>
+ <img src="/svgs/pdf-icon-ui-blue.svg" alt="" className="flex-row-card-link-icon" />
+ <FormattedMessage id='cards.viewCard' />
+ {(
+ this.pdfLocaleMismatch(
+ locale,
+ formattedLinks['cards.starterLink'],
+ englishLinks['cards.starterLink']
+ )
+ ) ? [
+ <span> <FormattedMessage id='cards.english' /></span>
] : []}
</a>
</div>
<div className="flex-row-card">
<h4 className="flex-row-card-header">
- <FormattedMessage id="cards.name" />
+ <FormattedMessage id='cards.name' />
</h4>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.nameLink']}
- >
- <img
- alt=""
- src="/images/cards/cards-name.jpg"
- />
+ <a className="flex-row-card-link" href={formattedLinks['cards.nameLink']}>
+ <img src="/images/cards/cards-name.jpg" alt="" />
</a>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.nameLink']}
- >
- <img
- alt=""
- className="flex-row-card-link-icon"
- src="/svgs/pdf-icon-ui-blue.svg"
- />
- <FormattedMessage id="cards.viewCard" />
- {(this.pdfLocaleMismatch(
- locale,
- formattedLinks['cards.nameLink'],
- englishLinks['cards.nameLink']
- )) ? [
- <span key="name-link"> (<FormattedMessage id="cards.english" />)</span>
+ <a className="flex-row-card-link" href={formattedLinks['cards.nameLink']}>
+ <img src="/svgs/pdf-icon-ui-blue.svg" alt="" className="flex-row-card-link-icon" />
+ <FormattedMessage id='cards.viewCard' />
+ {(
+ this.pdfLocaleMismatch(
+ locale,
+ formattedLinks['cards.nameLink'],
+ englishLinks['cards.nameLink']
+ )
+ ) ? [
+ <span> (<FormattedMessage id='cards.english' />)</span>
] : []}
</a>
</div>
<div className="flex-row-card">
<h4 className="flex-row-card-header">
- <FormattedMessage id="cards.fly" />
+ <FormattedMessage id='cards.fly' />
</h4>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.flyLink']}
- >
- <img
- alt=""
- src="/images/cards/cards-fly.jpg"
- />
+ <a className="flex-row-card-link" href={formattedLinks['cards.flyLink']}>
+ <img src="/images/cards/cards-fly.jpg" alt="" />
</a>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.flyLink']}
- >
- <img
- alt=""
- className="flex-row-card-link-icon"
- src="/svgs/pdf-icon-ui-blue.svg"
- />
- <FormattedMessage id="cards.viewCard" />
- {(this.pdfLocaleMismatch(
- locale,
- formattedLinks['cards.flyLink'],
- englishLinks['cards.flyLink']
- )) ? [
- <span key="fly-link"> (<FormattedMessage id="cards.english" />)</span>
+ <a className="flex-row-card-link" href={formattedLinks['cards.flyLink']}>
+ <img src="/svgs/pdf-icon-ui-blue.svg" alt="" className="flex-row-card-link-icon" />
+ <FormattedMessage id='cards.viewCard' />
+ {(
+ this.pdfLocaleMismatch(
+ locale,
+ formattedLinks['cards.flyLink'],
+ englishLinks['cards.flyLink']
+ )
+ ) ? [
+ <span> (<FormattedMessage id='cards.english' />)</span>
] : []}
</a>
</div>
<div className="flex-row-card">
<h4 className="flex-row-card-header">
- <FormattedMessage id="cards.race" />
+ <FormattedMessage id='cards.race' />
</h4>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.raceLink']}
- >
- <img
- alt=""
- src="/images/cards/cards-race.jpg"
- />
+ <a className="flex-row-card-link" href={formattedLinks['cards.raceLink']}>
+ <img src="/images/cards/cards-race.jpg" alt="" />
</a>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.raceLink']}
- >
- <img
- alt=""
- className="flex-row-card-link-icon"
- src="/svgs/pdf-icon-ui-blue.svg"
- />
- <FormattedMessage id="cards.viewCard" />
- {(this.pdfLocaleMismatch(
- locale,
- formattedLinks['cards.raceLink'],
- englishLinks['cards.raceLink']
- )) ? [
- <span key="race-link"> (<FormattedMessage id="cards.english" />)</span>
+ <a className="flex-row-card-link" href={formattedLinks['cards.raceLink']}>
+ <img src="/svgs/pdf-icon-ui-blue.svg" alt="" className="flex-row-card-link-icon" />
+ <FormattedMessage id='cards.viewCard' />
+ {(
+ this.pdfLocaleMismatch(
+ locale,
+ formattedLinks['cards.raceLink'],
+ englishLinks['cards.raceLink']
+ )
+ ) ? [
+ <span> (<FormattedMessage id='cards.english' />)</span>
] : []}
</a>
</div>
<div className="flex-row-card">
<h4 className="flex-row-card-header">
- <FormattedMessage id="cards.music" />
+ <FormattedMessage id='cards.music' />
</h4>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.musicLink']}
- >
- <img
- alt=""
- src="/images/cards/cards-music.jpg"
- />
+ <a className="flex-row-card-link" href={formattedLinks['cards.musicLink']}>
+ <img src="/images/cards/cards-music.jpg" alt="" />
</a>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.musicLink']}
- >
- <img
- alt=""
- className="flex-row-card-link-icon"
- src="/svgs/pdf-icon-ui-blue.svg"
- />
- <FormattedMessage id="cards.viewCard" />
- {(this.pdfLocaleMismatch(
- locale,
- formattedLinks['cards.musicLink'],
- englishLinks['cards.musicLink']
- )) ? [
- <span key="music-link"> (<FormattedMessage id="cards.english" />)</span>
+ <a className="flex-row-card-link" href={formattedLinks['cards.musicLink']}>
+ <img src="/svgs/pdf-icon-ui-blue.svg" alt="" className="flex-row-card-link-icon" />
+ <FormattedMessage id='cards.viewCard' />
+ {(
+ this.pdfLocaleMismatch(
+ locale,
+ formattedLinks['cards.musicLink'],
+ englishLinks['cards.musicLink']
+ )
+ ) ? [
+ <span> (<FormattedMessage id='cards.english' />)</span>
] : []}
</a>
</div>
<div className="flex-row-card">
<h4 className="flex-row-card-header">
- <FormattedMessage id="cards.hide" />
+ <FormattedMessage id='cards.hide' />
</h4>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.hideLink']}
- >
- <img
- alt=""
- src="/images/cards/cards-hide.jpg"
- />
+ <a className="flex-row-card-link" href={formattedLinks['cards.hideLink']}>
+ <img src="/images/cards/cards-hide.jpg" alt="" />
</a>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.hideLink']}
- >
- <img
- alt=""
- className="flex-row-card-link-icon"
- src="/svgs/pdf-icon-ui-blue.svg"
- />
- <FormattedMessage id="cards.viewCard" />
- {(this.pdfLocaleMismatch(
- locale,
- formattedLinks['cards.hideLink'],
- englishLinks['cards.hideLink']
- )) ? [
- <span key="hide-link"> (<FormattedMessage id="cards.english" />)</span>
+ <a className="flex-row-card-link" href={formattedLinks['cards.hideLink']}>
+ <img src="/svgs/pdf-icon-ui-blue.svg" alt="" className="flex-row-card-link-icon" />
+ <FormattedMessage id='cards.viewCard' />
+ {(
+ this.pdfLocaleMismatch(
+ locale,
+ formattedLinks['cards.hideLink'],
+ englishLinks['cards.hideLink']
+ )
+ ) ? [
+ <span> (<FormattedMessage id='cards.english' />)</span>
] : []}
</a>
</div>
<div className="flex-row-card">
<h4 className="flex-row-card-header">
- <FormattedMessage id="cards.story" />
+ <FormattedMessage id='cards.story' />
</h4>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.storyLink']}
- >
- <img
- alt=""
- src="/images/cards/cards-story.jpg"
- />
+ <a className="flex-row-card-link" href={formattedLinks['cards.storyLink']}>
+ <img src="/images/cards/cards-story.jpg" alt="" />
</a>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.storyLink']}
- >
- <img
- alt=""
- className="flex-row-card-link-icon"
- src="/svgs/pdf-icon-ui-blue.svg"
- />
- <FormattedMessage id="cards.viewCard" />
- {(this.pdfLocaleMismatch(
- locale,
- formattedLinks['cards.storyLink'],
- englishLinks['cards.storyLink']
- )) ? [
- <span key="story-link"> (<FormattedMessage id="cards.english" />)</span>
+ <a className="flex-row-card-link" href={formattedLinks['cards.storyLink']}>
+ <img src="/svgs/pdf-icon-ui-blue.svg" alt="" className="flex-row-card-link-icon" />
+ <FormattedMessage id='cards.viewCard' />
+ {(
+ this.pdfLocaleMismatch(
+ locale,
+ formattedLinks['cards.storyLink'],
+ englishLinks['cards.storyLink']
+ )
+ ) ? [
+ <span> (<FormattedMessage id='cards.english' />)</span>
] : []}
</a>
</div>
<div className="flex-row-card">
<h4 className="flex-row-card-header">
- <FormattedMessage id="cards.dressup" />
+ <FormattedMessage id='cards.dressup' />
</h4>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.dressupLink']}
- >
- <img
- alt=""
- src="/images/cards/cards-dressup.jpg"
- />
+ <a className="flex-row-card-link" href={formattedLinks['cards.dressupLink']}>
+ <img src="/images/cards/cards-dressup.jpg" alt="" />
</a>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.dressupLink']}
- >
- <img
- alt=""
- className="flex-row-card-link-icon"
- src="/svgs/pdf-icon-ui-blue.svg"
- />
- <FormattedMessage id="cards.viewCard" />
- {(this.pdfLocaleMismatch(
- locale,
- formattedLinks['cards.dressupLink'],
- englishLinks['cards.dressupLink']
- )) ? [
- <span key="dress-link"> (<FormattedMessage id="cards.english" />)</span>
+ <a className="flex-row-card-link" href={formattedLinks['cards.dressupLink']}>
+ <img src="/svgs/pdf-icon-ui-blue.svg" alt="" className="flex-row-card-link-icon" />
+ <FormattedMessage id='cards.viewCard' />
+ {(
+ this.pdfLocaleMismatch(
+ locale,
+ formattedLinks['cards.dressupLink'],
+ englishLinks['cards.dressupLink']
+ )
+ ) ? [
+ <span> (<FormattedMessage id='cards.english' />)</span>
] : []}
</a>
</div>
<div className="flex-row-card">
<h4 className="flex-row-card-header">
- <FormattedMessage id="cards.pong" />
+ <FormattedMessage id='cards.pong' />
</h4>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.pongLink']}
- >
- <img
- alt=""
- src="/images/cards/cards-pong.jpg"
- />
+ <a className="flex-row-card-link" href={formattedLinks['cards.pongLink']}>
+ <img src="/images/cards/cards-pong.jpg" alt="" />
</a>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.pongLink']}
- >
- <img
- alt=""
- className="flex-row-card-link-icon"
- src="/svgs/pdf-icon-ui-blue.svg"
- />
- <FormattedMessage id="cards.viewCard" />
- {(this.pdfLocaleMismatch(
- locale,
- formattedLinks['cards.pongLink'],
- englishLinks['cards.pongLink']
- )) ? [
- <span key="pong-link"> (<FormattedMessage id="cards.english" />)</span>
+ <a className="flex-row-card-link" href={formattedLinks['cards.pongLink']}>
+ <img src="/svgs/pdf-icon-ui-blue.svg" alt="" className="flex-row-card-link-icon" />
+ <FormattedMessage id='cards.viewCard' />
+ {(
+ this.pdfLocaleMismatch(
+ locale,
+ formattedLinks['cards.pongLink'],
+ englishLinks['cards.pongLink']
+ )
+ ) ? [
+ <span> (<FormattedMessage id='cards.english' />)</span>
] : []}
</a>
</div>
<div className="flex-row-card">
<h4 className="flex-row-card-header">
- <FormattedMessage id="cards.dance" />
+ <FormattedMessage id='cards.dance' />
</h4>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.danceLink']}
- >
- <img
- alt=""
- src="/images/cards/cards-dance.jpg"
- />
+ <a className="flex-row-card-link" href={formattedLinks['cards.danceLink']}>
+ <img src="/images/cards/cards-dance.jpg" alt="" />
</a>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.danceLink']}
- >
- <img
- alt=""
- className="flex-row-card-link-icon"
- src="/svgs/pdf-icon-ui-blue.svg"
- />
- <FormattedMessage id="cards.viewCard" />
- {(this.pdfLocaleMismatch(
- locale,
- formattedLinks['cards.danceLink'],
- englishLinks['cards.danceLink']
- )) ? [
- <span key="dance-link"> (<FormattedMessage id="cards.english" />)</span>
+ <a className="flex-row-card-link" href={formattedLinks['cards.danceLink']}>
+ <img src="/svgs/pdf-icon-ui-blue.svg" alt="" className="flex-row-card-link-icon" />
+ <FormattedMessage id='cards.viewCard' />
+ {(
+ this.pdfLocaleMismatch(
+ locale,
+ formattedLinks['cards.danceLink'],
+ englishLinks['cards.danceLink']
+ )
+ ) ? [
+ <span> (<FormattedMessage id='cards.english' />)</span>
] : []}
</a>
</div>
<div className="flex-row-card">
<h4 className="flex-row-card-header">
- <FormattedMessage id="cards.catch" />
+ <FormattedMessage id='cards.catch' />
</h4>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.catchLink']}
- >
- <img
- alt=""
- src="/images/cards/cards-catch.jpg"
- />
+ <a className="flex-row-card-link" href={formattedLinks['cards.catchLink']}>
+ <img src="/images/cards/cards-catch.jpg" alt="" />
</a>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.catchLink']}
- >
- <img
- alt=""
- className="flex-row-card-link-icon"
- src="/svgs/pdf-icon-ui-blue.svg"
- />
- <FormattedMessage id="cards.viewCard" />
- {(this.pdfLocaleMismatch(
- locale,
- formattedLinks['cards.catchLink'],
- englishLinks['cards.catchLink']
- )) ? [
- <span key="catch-link"> (<FormattedMessage id="cards.english" />)</span>
+ <a className="flex-row-card-link" href={formattedLinks['cards.catchLink']}>
+ <img src="/svgs/pdf-icon-ui-blue.svg" alt="" className="flex-row-card-link-icon" />
+ <FormattedMessage id='cards.viewCard' />
+ {(
+ this.pdfLocaleMismatch(
+ locale,
+ formattedLinks['cards.catchLink'],
+ englishLinks['cards.catchLink']
+ )
+ ) ? [
+ <span> (<FormattedMessage id='cards.english' />)</span>
] : []}
</a>
</div>
<div className="flex-row-card">
<h4 className="flex-row-card-header">
- <FormattedMessage id="cards.pet" />
+ <FormattedMessage id='cards.pet' />
</h4>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.petLink']}
- >
- <img
- alt=""
- src="/images/cards/cards-pet.jpg"
- />
+ <a className="flex-row-card-link" href={formattedLinks['cards.petLink']}>
+ <img src="/images/cards/cards-pet.jpg" alt="" />
</a>
- <a
- className="flex-row-card-link"
- href={formattedLinks['cards.petLink']}
- >
- <img
- alt=""
- className="flex-row-card-link-icon"
- src="/svgs/pdf-icon-ui-blue.svg"
- />
- <FormattedMessage id="cards.viewCard" />
- {(this.pdfLocaleMismatch(
- locale,
- formattedLinks['cards.petLink'],
- englishLinks['cards.petLink']
- )) ? [
- <span key="pet-link"> (<FormattedMessage id="cards.english" />)</span>
+ <a className="flex-row-card-link" href={formattedLinks['cards.petLink']}>
+ <img src="/svgs/pdf-icon-ui-blue.svg" alt="" className="flex-row-card-link-icon" />
+ <FormattedMessage id='cards.viewCard' />
+ {(
+ this.pdfLocaleMismatch(
+ locale,
+ formattedLinks['cards.petLink'],
+ englishLinks['cards.petLink']
+ )
+ ) ? [
+ <span> (<FormattedMessage id='cards.english' />)</span>
] : []}
</a>
</div>
@@ -469,12 +324,6 @@ class Cards extends React.Component {
</div>
);
}
-}
+}));
-Cards.propTypes = {
- intl: intlShape
-};
-
-const LocalizedCards = injectIntl(Cards);
-
-render(<Page><LocalizedCards /></Page>, document.getElementById('app'));
+render(<Page><Cards /></Page>, document.getElementById('app'));
diff --git a/src/views/communityblocks-interviews/communityblocks-interviews.jsx b/src/views/communityblocks-interviews/communityblocks-interviews.jsx
index 91d86dc71..89d1d7243 100644
--- a/src/views/communityblocks-interviews/communityblocks-interviews.jsx
+++ b/src/views/communityblocks-interviews/communityblocks-interviews.jsx
@@ -1,86 +1,62 @@
-const React = require('react');
-const render = require('../../lib/render.jsx');
+var React = require('react');
+var render = require('../../lib/render.jsx');
-const Page = require('../../components/page/www/page.jsx');
+var Page = require('../../components/page/www/page.jsx');
-const CommunityBlocksInterviews = () => (
- <div className="inner">
- <h2>Community Blocks Beta Tester Interviews</h2>
- <br />
- <p>
+var CommunityBlocksInterviews = React.createClass({
+ type: 'communityblocks-interviews',
+ render: function () {
+ return (
+ <div className="inner">
+ <h2>Community Blocks Beta Tester Interviews</h2>
+ <br/>
+ <p>
Hello Scratchers!
- </p>
- <p>
- I am Sayamindu Dasgupta (<a
- href="/users/sdg1/"
- rel="noopener noreferrer"
- target="_blank"
- >
- sdg1
- </a> on Scratch) and I am a member of
- the <a
- href="/info/credits"
- rel="noopener noreferrer"
- target="_blank"
- >
- MIT Scratch Team
- </a>.
- </p>
- <p>
+ </p>
+ <p>
+ I am Sayamindu Dasgupta (<a href="/users/sdg1/" target="_blank">sdg1</a> on Scratch) and I am a member of
+ the <a href="/info/credits" target="_blank">MIT Scratch Team</a>.
+ </p>
+ <p>
One of our projects on the MIT Scratch Team is to understand how people use Scratch, the Scratch Community
Blocks, and participate in the Scratch community. To do this, we are talking to Scratchers who have been
particapting the Community Blocks beta testing program directly through interviews. In the interview, we
would talk for an hour, asking about your Scratch experience (by phone or a service like Skype).
- </p>
- <p>
+ </p>
+ <p>
Thank you for indicating in the beta invitation survey that you are willing to be interviewed.
If you are still interested, please do the following steps:
- </p>
+ </p>
- <ul>
- <li>
- <b>Complete the consent forms:</b> If you are under 18 years old, please download and complete these
- two forms (<a href="/pdfs/interviews/communityblocks/assent_form.pdf">one for you to sign</a>
- and <a href="/pdfs/interviews/communityblocks/consent_for_parent.pdf">
- another for your parent to sign
- </a>).
- If you are 18 years old and over, please complete
- <a href="/pdfs/interviews/communityblocks/consent_for_over_18.pdf">this form</a>.
- </li>
- <li>
- <b>Send the forms:</b> You can send me the forms in two ways: (1) by email
- (<a
- href="mailto:sayamindu@media.mit.edu"
- rel="noopener noreferrer"
- target="_blank"
- >
- sayamindu@media.mit.edu
- </a>) by taking a picture
- or scanning the forms, or (2) send it through snail mail to Sayamindu Dasgupta, 77 Massachusetts Ave
- E14-464A, Cambridge, MA 02139
- </li>
- <li>
- <b>Schedule a time to talk:</b> Send me an email
- (<a
- href="mailto:sayamindu@media.mit.edu"
- rel="noopener noreferrer"
- target="_blank"
- >
- sayamindu@media.mit.edu
- </a>) with a possible time
- where we can talk for about an hour.
- </li>
- <li>
- If you have any questions, please do not hesitate to contact me by sending me an email
- at <a href="mailto:sayamindu@media.mit.edu">sayamindu@media.mit.edu</a>.
- </li>
- </ul>
+ <ul>
- <p>
+ <li><b>Complete the consent forms:</b> If you are under 18 years old, please download and complete these
+ two forms (<a href="/pdfs/interviews/communityblocks/assent_form.pdf">one for you to sign</a>
+ and <a href="/pdfs/interviews/communityblocks/consent_for_parent.pdf">another for your parent to sign</a>).
+ If you are 18 years old and over, please complete
+ <a href="/pdfs/interviews/communityblocks/consent_for_over_18.pdf">this form</a>.</li>
+
+ <li><b>Send the forms:</b> You can send me the forms in two ways: (1) by email
+ (<a href="mailto:sayamindu@media.mit.edu" target="_blank">sayamindu@media.mit.edu</a>) by taking a picture
+ or scanning the forms, or (2) send it through snail mail to Sayamindu Dasgupta, 77 Massachusetts Ave
+ E14-464A, Cambridge, MA 02139</li>
+
+ <li><b>Schedule a time to talk:</b> Send me an email
+ (<a href="mailto:sayamindu@media.mit.edu" target="_blank">sayamindu@media.mit.edu</a>) with a possible time
+ where we can talk for about an hour.</li>
+
+ <li>If you have any questions, please do not hesitate to contact me by sending me an email
+ at <a href="mailto:sayamindu@media.mit.edu">sayamindu@media.mit.edu</a>.</li>
+
+ </ul>
+
+ <p>
Thank you and I look forward to speaking with you. Scratch on!
- </p>
- Sayamindu
- </div>
-);
+ </p>
+ Sayamindu
+ </div>
+ );
+ }
+});
render(<Page><CommunityBlocksInterviews /></Page>, document.getElementById('app'));
diff --git a/src/views/components/components.jsx b/src/views/components/components.jsx
index 5f481d019..259485334 100644
--- a/src/views/components/components.jsx
+++ b/src/views/components/components.jsx
@@ -1,68 +1,67 @@
-const React = require('react');
-const render = require('../../lib/render.jsx');
+var React = require('react');
+var render = require('../../lib/render.jsx');
-const Page = require('../../components/page/www/page.jsx');
-const Box = require('../../components/box/box.jsx');
-const Button = require('../../components/forms/button.jsx');
-const Carousel = require('../../components/carousel/carousel.jsx');
-const Input = require('../../components/forms/input.jsx');
-const Spinner = require('../../components/spinner/spinner.jsx');
+var Page = require('../../components/page/www/page.jsx');
+var Box = require('../../components/box/box.jsx');
+var Button = require('../../components/forms/button.jsx');
+var Carousel = require('../../components/carousel/carousel.jsx');
+var Input = require('../../components/forms/input.jsx');
+var Spinner = require('../../components/spinner/spinner.jsx');
require('./components.scss');
-const Components = () => (
- <div className="components">
- <div className="inner">
- <h1>Button</h1>
- <Button>I love button</Button>
- <h1>Form</h1>
- <Input
- maxLength="30"
- name="test"
- type="text"
- />
- <h1>Box Component</h1>
- <Box
- more="Cat Gifs"
- moreUrl="http://www.catgifpage.com/"
- title="Some Title"
- >
- <h4>Things go in here</h4>
- <p>Lorem ipsum dolor sit amet.</p>
- </Box>
- <h1>Carousel Component</h1>
- <Carousel />
- <Box title="Carousel component in a box!">
+var Components = React.createClass({
+ type: 'Components',
+ render: function () {
+ return (<div className="components">
+ <div className="inner">
+ <h1>Button</h1>
+ <Button>I love button</Button>
+ <h1>Form</h1>
+ <Input type="text" name="test" maxLength="30" />
+ <h1>Box Component</h1>
+ <Box
+ title="Some Title"
+ more="Cat Gifs"
+ moreUrl="http://www.catgifpage.com/">
+ <h4>Things go in here</h4>
+ <p>Lorem ipsum dolor sit amet.</p>
+ </Box>
+ <h1>Carousel Component</h1>
<Carousel />
- </Box>
- <h1>This is a Spinner</h1>
- <Spinner />
- <h1>Colors</h1>
- <div className="colors">
- <span className="ui-blue">$ui-blue</span>
- <span className="ui-orange">$ui-orange</span>
- <span className="ui-light-gray">$ui-light-gray</span>
- <span className="ui-gray">$ui-gray</span>
- <span className="ui-dark-gray">$ui-dark-gray</span>
- <span className="background-color">$background-color</span>
- <span className="ui-aqua">$ui-aqua</span>
- <span className="ui-purple">$ui-purple</span>
- <span className="ui-white">$ui-white</span>
- <span className="ui-border">$ui-border</span>
- <span className="active-gray">$active-gray</span>
- <span className="active-dark-gray">$active-dark-gray</span>
- <span className="box-shadow-gray">$box-shadow-gray</span>
- <span className="overlay-gray">$overlay-gray</span>
- <span className="header-gray">$header-gray</span>
- <span className="type-gray">$type-gray</span>
- <span className="type-white">$type-white</span>
- <span className="link-blue">$link-blue</span>
- <span className="splash-green">$splash-green</span>
- <span className="splash-pink">$splash-pink</span>
- <span className="splash-blue">$splash-blue</span>
+ <Box
+ title="Carousel component in a box!">
+ <Carousel />
+ </Box>
+ <h1>This is a Spinner</h1>
+ <Spinner />
+ <h1>Colors</h1>
+ <div className="colors">
+ <span className="ui-blue">$ui-blue</span>
+ <span className="ui-orange">$ui-orange</span>
+ <span className="ui-light-gray">$ui-light-gray</span>
+ <span className="ui-gray">$ui-gray</span>
+ <span className="ui-dark-gray">$ui-dark-gray</span>
+ <span className="background-color">$background-color</span>
+ <span className="ui-aqua">$ui-aqua</span>
+ <span className="ui-purple">$ui-purple</span>
+ <span className="ui-white">$ui-white</span>
+ <span className="ui-border">$ui-border</span>
+ <span className="active-gray">$active-gray</span>
+ <span className="active-dark-gray">$active-dark-gray</span>
+ <span className="box-shadow-gray">$box-shadow-gray</span>
+ <span className="overlay-gray">$overlay-gray</span>
+ <span className="header-gray">$header-gray</span>
+ <span className="type-gray">$type-gray</span>
+ <span className="type-white">$type-white</span>
+ <span className="link-blue">$link-blue</span>
+ <span className="splash-green">$splash-green</span>
+ <span className="splash-pink">$splash-pink</span>
+ <span className="splash-blue">$splash-blue</span>
+ </div>
</div>
- </div>
- </div>
-);
+ </div>);
+ }
+});
render(<Page><Components /></Page>, document.getElementById('app'));
diff --git a/src/views/conference/2016/details/details.jsx b/src/views/conference/2016/details/details.jsx
index 19d98603a..3dfbf3871 100644
--- a/src/views/conference/2016/details/details.jsx
+++ b/src/views/conference/2016/details/details.jsx
@@ -1,34 +1,38 @@
-const classNames = require('classnames');
-const connect = require('react-redux').connect;
-const PropTypes = require('prop-types');
-const React = require('react');
-const render = require('../../../../lib/render.jsx');
+var classNames = require('classnames');
+var connect = require('react-redux').connect;
+var React = require('react');
+var render = require('../../../../lib/render.jsx');
-const detailsActions = require('../../../../redux/conference-details.js');
+var detailsActions = require('../../../../redux/conference-details.js');
-const Page = require('../../../../components/page/conference/2016/page.jsx');
+var Page = require('../../../../components/page/conference/2016/page.jsx');
require('./details.scss');
-class ConferenceDetails extends React.Component {
- componentDidMount () {
- let pathname = window.location.pathname.toLowerCase();
+var ConferenceDetails = React.createClass({
+ type: 'ConferenceDetails',
+ propTypes: {
+ detailsId: React.PropTypes.number,
+ conferenceDetails: React.PropTypes.object
+ },
+ componentDidMount: function () {
+ var pathname = window.location.pathname.toLowerCase();
if (pathname[pathname.length - 1] === '/') {
pathname = pathname.substring(0, pathname.length - 1);
}
- const path = pathname.split('/');
- const detailsId = path[path.length - 2];
+ var path = pathname.split('/');
+ var detailsId = path[path.length - 2];
this.props.dispatch(detailsActions.startGetDetails(detailsId));
- }
- render () {
- let backUri = '/conference/2016/schedule';
+ },
+ render: function () {
+ var backUri = '/conference/2016/schedule';
if (!this.props.conferenceDetails.error && !this.props.conferenceDetails.fetching) {
- backUri = `${backUri}#${this.props.conferenceDetails.Day}`;
+ backUri = backUri + '#' + this.props.conferenceDetails.Day;
}
- const classes = classNames({
- inner: true,
- details: true,
- fetching: this.props.conferenceDetails.fetching
+ var classes = classNames({
+ 'inner': true,
+ 'details': true,
+ 'fetching': this.props.conferenceDetails.fetching
});
return (
<div className={classes}>
@@ -38,81 +42,54 @@ class ConferenceDetails extends React.Component {
</a>
</div>
{this.props.conferenceDetails.error ? [
- <h2 key="not-found">Agenda Item Not Found</h2>
+ <h2>Agenda Item Not Found</h2>
] : [
- <h2 key="details-title">{this.props.conferenceDetails.Title}</h2>,
- <ul
- className="logistics"
- key="details-logistics"
- >
+ <h2>{this.props.conferenceDetails.Title}</h2>,
+ <ul className="logistics">
{this.props.conferenceDetails.fetching ? [] : [
- <li key="presenter">
- <img
- alt="presenter icon"
- src="/svgs/conference/schedule/presenter-icon.svg"
- />
+ <li>
+ <img src="/svgs/conference/schedule/presenter-icon.svg" alt="presenter icon" />
{this.props.conferenceDetails.Presenter}
</li>,
- <li key="start">
- <img
- alt="time icon"
- src="/svgs/conference/schedule/time-icon.svg"
- />
+ <li>
+ <img src="/svgs/conference/schedule/time-icon.svg" alt="time icon" />
{this.props.conferenceDetails.Start} – {this.props.conferenceDetails.End}
</li>,
- <li key="type">
- <img
- alt="event icon"
- src="/svgs/conference/schedule/event-icon.svg"
- />
+ <li>
+ <img src="/svgs/conference/schedule/event-icon.svg" alt="event icon" />
{this.props.conferenceDetails.Type}
</li>,
- <li key="location">
- <img
- alt="location icon"
- src="/svgs/conference/schedule/location-icon.svg"
- />
+ <li>
+ <img src="/svgs/conference/schedule/location-icon.svg" alt="location icon" />
{this.props.conferenceDetails.Location}
</li>
]}
</ul>,
- <div
- className="description"
- key="details-desc"
- >
+ <div className="description">
<p>
{this.props.conferenceDetails.Description}
</p>
</div>,
- <div
- className="back"
- key="details-back"
- >
- {this.props.conferenceDetails.fetching ? [] : [
- <a
- href={backUri}
- key="details-back-uri"
- >
- ← Back to Full Schedule
- </a>
- ]}
+ <div className="back">
+ {this.props.conferenceDetails.fetching ? [] : [
+ <a href={backUri}>
+ ← Back to Full Schedule
+ </a>
+ ]}
</div>
]}
</div>
);
}
-}
-
-ConferenceDetails.propTypes = {
- conferenceDetails: PropTypes.object, // eslint-disable-line react/forbid-prop-types
- dispatch: PropTypes.func
-};
-
-const mapStateToProps = state => ({
- conferenceDetails: state.conferenceDetails
});
-const ConnectedDetails = connect(mapStateToProps)(ConferenceDetails);
+var mapStateToProps = function (state) {
+ return {
+ conferenceDetails: state.conferenceDetails
+ };
+};
+
+var ConnectedDetails = connect(mapStateToProps)(ConferenceDetails);
render(
<Page><ConnectedDetails /></Page>,
diff --git a/src/views/conference/2016/expect/expect.jsx b/src/views/conference/2016/expect/expect.jsx
index 08ed20218..4d4468cd7 100644
--- a/src/views/conference/2016/expect/expect.jsx
+++ b/src/views/conference/2016/expect/expect.jsx
@@ -1,306 +1,286 @@
-const React = require('react');
-const render = require('../../../../lib/render.jsx');
+var React = require('react');
+var render = require('../../../../lib/render.jsx');
-const FlexRow = require('../../../../components/flex-row/flex-row.jsx');
-const Page = require('../../../../components/page/conference/2016/page.jsx');
-const TitleBanner = require('../../../../components/title-banner/title-banner.jsx');
+var FlexRow = require('../../../../components/flex-row/flex-row.jsx');
+var Page = require('../../../../components/page/conference/2016/page.jsx');
+var TitleBanner = require('../../../../components/title-banner/title-banner.jsx');
require('./expect.scss');
-const ConferenceExpectations = () => (
- <div className="expect">
- <TitleBanner className="mod-conference">
- <h1>
- What to Expect
- </h1>
- <div className="title-icon">
- <img
- alt="expect-image"
- src="/images/conference/expect/what-to-expect.png"
- />
- </div>
- </TitleBanner>
- <section className="inner profile">
- <FlexRow className="uneven">
- <div className="short">
- <img src="/images/conference/expect/mitch.jpg" />
- <h4>Mitchel Resnick</h4>
- <p>
- Professor of Learning Research at the MIT Media Lab
- </p>
- </div>
- <div className="long">
- <h2>Welcome to Scratch@MIT 2016!</h2>
- <p className="intro">
- The Scratch community keeps growing and growing.{' '}
- Young people around the world have shared more than{' '}
- 15 million projects in the Scratch online community{' '}
- – with 20,000 new projects every day.
- </p>
- <p className="intro">
- But what excites us most is not the number of projects{' '}
- but the diversity of projects. Take a look at the Scratch{' '}
- website, and you’ll find an incredible variety of projects:{' '}
- musical animations, virtual tours, science simulations,{' '}
- interactive tutorials, and much more.
- </p>
- <p className="intro">
- For us, this diversity of projects is an indication that{' '}
- members of the Scratch community are developing their own{' '}
- voices and identities through Scratch. They are learning{' '}
- to express themselves creatively, to build on their interests,{' '}
- and to share their ideas with others.
- </p>
- <p className="intro">
- At this year’s Scratch@MIT conference, we’ll celebrate the many{' '}
- paths and many styles of Scratch, exploring the multiple ways{' '}
- that people can create, share, and learn with Scratch.
- </p>
- <p className="intro">
- We are planning a very participatory conference, with lots of{' '}
- hands-on workshops and opportunities for collaboration and sharing.{' '}
- Let’s learn together!
- </p>
- </div>
- </FlexRow>
- </section>
- <section className="keynote">
- <div className="inner">
- <div className="section-header">
- <h2>Keynotes</h2>
- </div>
- <FlexRow>
- <div className="card">
- <div className="date">
- <b>Thursday</b>
+var ConferenceExpectations = React.createClass({
+ render: function () {
+ return (
+ <div className="expect">
+ <TitleBanner className="mod-conference">
+ <h1>
+ What to Expect
+ </h1>
+ <div className="title-icon">
+ <img src="/images/conference/expect/what-to-expect.png" alt="expect-image" />
+ </div>
+ </TitleBanner>
+ <section className="inner profile">
+ <FlexRow className="uneven">
+ <div className="short">
+ <img src="/images/conference/expect/mitch.jpg" />
+ <h4>Mitchel Resnick</h4>
+ <p>
+ Professor of Learning Research at the MIT Media Lab
+ </p>
</div>
- <h3>Scratch Conversations</h3>
- <img
- alt="Scratch Team Photo"
- src="/images/conference/expect/scratch-team.jpg"
- />
- <p>
- <b>MIT Scratch Team</b>
- <br />
- <b>Mitchel Resnick (moderator)</b>
- </p>
- <p>
- The MIT Scratch Team opens the conference with a series of{' '}
- conversations, exploring new ideas, new directions, and new{' '}
- strategies for supporting creative learning with Scratch.
+ <div className="long">
+ <h2>Welcome to Scratch@MIT 2016!</h2>
+ <p className="intro">
+ The Scratch community keeps growing and growing.{' '}
+ Young people around the world have shared more than{' '}
+ 15 million projects in the Scratch online community{' '}
+ – with 20,000 new projects every day.
+ </p>
+ <p className="intro">
+ But what excites us most is not the number of projects{' '}
+ but the diversity of projects. Take a look at the Scratch{' '}
+ website, and you’ll find an incredible variety of projects:{' '}
+ musical animations, virtual tours, science simulations,{' '}
+ interactive tutorials, and much more.
+ </p>
+ <p className="intro">
+ For us, this diversity of projects is an indication that{' '}
+ members of the Scratch community are developing their own{' '}
+ voices and identities through Scratch. They are learning{' '}
+ to express themselves creatively, to build on their interests,{' '}
+ and to share their ideas with others.
+ </p>
+ <p className="intro">
+ At this year’s Scratch@MIT conference, we’ll celebrate the many{' '}
+ paths and many styles of Scratch, exploring the multiple ways{' '}
+ that people can create, share, and learn with Scratch.
+ </p>
+ <p className="intro">
+ We are planning a very participatory conference, with lots of{' '}
+ hands-on workshops and opportunities for collaboration and sharing.{' '}
+ Let’s learn together!
+ </p>
+ </div>
+ </FlexRow>
+ </section>
+ <section className="keynote">
+ <div className="inner">
+ <div className="section-header">
+ <h2>Keynotes</h2>
+ </div>
+ <FlexRow>
+ <div className="card">
+ <div className="date">
+ <b>Thursday</b>
+ </div>
+ <h3>Scratch Conversations</h3>
+ <img src="/images/conference/expect/scratch-team.jpg" alt="Scratch Team Photo" />
+ <p>
+ <b>MIT Scratch Team</b>
+ <br />
+ <b>Mitchel Resnick (moderator)</b>
+ </p>
+ <p>
+ The MIT Scratch Team opens the conference with a series of{' '}
+ conversations, exploring new ideas, new directions, and new{' '}
+ strategies for supporting creative learning with Scratch.
+ </p>
+ </div>
+ <div className="card">
+ <div className="date">
+ <b>Friday</b>
+ </div>
+ <h3>Pathways to Participation</h3>
+ <img src="/images/conference/expect/mimi-nichole.jpg" alt="Mimi and Nichole" />
+ <p>
+ <b>Mimi Ito & Nichole Pinkard</b>
+ <br />
+ <b>Ricarose Roque (moderator)</b>
+ </p>
+ <p>
+ How can we ensure that young people of all backgrounds and all{' '}
+ interests have opportunities to learn, grow, and thrive in today’s{' '}
+ rapidly-changing digital society?
+ </p>
+ </div>
+ <div className="card">
+ <div className="date">
+ <b>Saturday</b>
+ </div>
+ <h3>Creative Computing For All</h3>
+ <img src="/images/conference/expect/karen.jpg" alt="Karen" />
+ <p>
+ <b>Karen Brennan (moderator)</b>
+ </p>
+ <p>
+ With ever-increasing attention on computing education and computer{' '}
+ science in K–12, what role can teachers play in making creative{' '}
+ computing experiences accessible to all learners?
+ </p>
+ </div>
+ </FlexRow>
+ </div>
+ </section>
+ <section className="inner schedule">
+ <div className="section-header">
+ <div className="title">
+ <h2>Daily Schedules</h2>
+ </div>
+ <p className="callout">
+ <img src="/svgs/conference/expect/aug3-icon.svg" alt="August 3rd Icon" />
+ <b>Wednesday at 6:00p</b> – Early check-in and opening reception
</p>
</div>
- <div className="card">
- <div className="date">
- <b>Friday</b>
- </div>
- <h3>Pathways to Participation</h3>
- <img
- alt="Mimi and Nichole"
- src="/images/conference/expect/mimi-nichole.jpg"
- />
- <p>
- <b>Mimi Ito & Nichole Pinkard</b>
- <br />
- <b>Ricarose Roque (moderator)</b>
- </p>
- <p>
- How can we ensure that young people of all backgrounds and all{' '}
- interests have opportunities to learn, grow, and thrive in today’s{' '}
- rapidly-changing digital society?
- </p>
- </div>
- <div className="card">
- <div className="date">
- <b>Saturday</b>
- </div>
- <h3>Creative Computing For All</h3>
- <img
- alt="Karen"
- src="/images/conference/expect/karen.jpg"
- />
- <p>
- <b>Karen Brennan (moderator)</b>
- </p>
- <p>
- With ever-increasing attention on computing education and computer{' '}
- science in K–12, what role can teachers play in making creative{' '}
- computing experiences accessible to all learners?
- </p>
- </div>
- </FlexRow>
+ <FlexRow>
+ <table>
+ <tbody>
+ <tr>
+ <th>
+ <img src="/svgs/conference/expect/aug4-icon.svg" alt="August 4th Icon" />
+ <h3>Thursday</h3>
+ </th>
+ </tr>
+ <tr>
+ <td>
+ <b>8:30a</b>
+ <p>Breakfast (provided)</p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <b>9:30a</b>
+ <p>Keynote Presentation</p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <b>11:00a</b>
+ <p>Morning Workshops</p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <b>12:30p</b>
+ <p>Lunch (provided)</p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <b>2:00p</b>
+ <p>Afternoon Workshops</p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <b>4:00p</b>
+ <p>Poster Sessions</p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <b>7:00p</b>
+ <p>Self-organized dinner excursions</p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table>
+ <tbody>
+ <tr>
+ <th>
+ <img src="/svgs/conference/expect/aug5-icon.svg" alt="August 5th Icon" />
+ <h3>Friday</h3>
+ </th>
+ </tr>
+ <tr>
+ <td>
+ <b>8:30a</b>
+ <p>Breakfast (provided)</p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <b>9:30a</b>
+ <p>Keynote Presentation</p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <b>11:00a</b>
+ <p>Morning Workshops, Panels, and Ignite Talks</p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <b>12:00p</b>
+ <p>Lunch (provided)</p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <b>1:30p</b>
+ <p>Early afternoon Workshops Panels and Ignite Talks</p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <b>3:00p</b>
+ <p>Late afternoon Workshops, Panels and Ignite Talks</p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <b>4:30p</b>
+ <p>Poster Sessions</p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <b>6:30p</b>
+ <p>Conference Dinner</p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table>
+ <tbody>
+ <tr>
+ <th>
+ <img src="/svgs/conference/expect/aug6-icon.svg" alt="August 6th Icon" />
+ <h3>Saturday</h3>
+ </th>
+ </tr>
+ <tr>
+ <td>
+ <b>8:30a</b>
+ <p>Breakfast (provided)</p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <b>9:30a</b>
+ <p>Keynote Presentation</p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <b>11:00a</b>
+ <p>Morning Workshops, Panels and Ignite Talks</p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <b>12:00p</b>
+ <p>Lunch (provided) and Wrap-up Session</p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </FlexRow>
+ </section>
</div>
- </section>
- <section className="inner schedule">
- <div className="section-header">
- <div className="title">
- <h2>Daily Schedules</h2>
- </div>
- <p className="callout">
- <img
- alt="August 3rd Icon"
- src="/svgs/conference/expect/aug3-icon.svg"
- />
- <b>Wednesday at 6:00p</b> – Early check-in and opening reception
- </p>
- </div>
- <FlexRow>
- <table>
- <tbody>
- <tr>
- <th>
- <img
- alt="August 4th Icon"
- src="/svgs/conference/expect/aug4-icon.svg"
- />
- <h3>Thursday</h3>
- </th>
- </tr>
- <tr>
- <td>
- <b>8:30a</b>
- <p>Breakfast (provided)</p>
- </td>
- </tr>
- <tr>
- <td>
- <b>9:30a</b>
- <p>Keynote Presentation</p>
- </td>
- </tr>
- <tr>
- <td>
- <b>11:00a</b>
- <p>Morning Workshops</p>
- </td>
- </tr>
- <tr>
- <td>
- <b>12:30p</b>
- <p>Lunch (provided)</p>
- </td>
- </tr>
- <tr>
- <td>
- <b>2:00p</b>
- <p>Afternoon Workshops</p>
- </td>
- </tr>
- <tr>
- <td>
- <b>4:00p</b>
- <p>Poster Sessions</p>
- </td>
- </tr>
- <tr>
- <td>
- <b>7:00p</b>
- <p>Self-organized dinner excursions</p>
- </td>
- </tr>
- </tbody>
- </table>
- <table>
- <tbody>
- <tr>
- <th>
- <img
- alt="August 5th Icon"
- src="/svgs/conference/expect/aug5-icon.svg"
- />
- <h3>Friday</h3>
- </th>
- </tr>
- <tr>
- <td>
- <b>8:30a</b>
- <p>Breakfast (provided)</p>
- </td>
- </tr>
- <tr>
- <td>
- <b>9:30a</b>
- <p>Keynote Presentation</p>
- </td>
- </tr>
- <tr>
- <td>
- <b>11:00a</b>
- <p>Morning Workshops, Panels, and Ignite Talks</p>
- </td>
- </tr>
- <tr>
- <td>
- <b>12:00p</b>
- <p>Lunch (provided)</p>
- </td>
- </tr>
- <tr>
- <td>
- <b>1:30p</b>
- <p>Early afternoon Workshops Panels and Ignite Talks</p>
- </td>
- </tr>
- <tr>
- <td>
- <b>3:00p</b>
- <p>Late afternoon Workshops, Panels and Ignite Talks</p>
- </td>
- </tr>
- <tr>
- <td>
- <b>4:30p</b>
- <p>Poster Sessions</p>
- </td>
- </tr>
- <tr>
- <td>
- <b>6:30p</b>
- <p>Conference Dinner</p>
- </td>
- </tr>
- </tbody>
- </table>
- <table>
- <tbody>
- <tr>
- <th>
- <img
- alt="August 6th Icon"
- src="/svgs/conference/expect/aug6-icon.svg"
- />
- <h3>Saturday</h3>
- </th>
- </tr>
- <tr>
- <td>
- <b>8:30a</b>
- <p>Breakfast (provided)</p>
- </td>
- </tr>
- <tr>
- <td>
- <b>9:30a</b>
- <p>Keynote Presentation</p>
- </td>
- </tr>
- <tr>
- <td>
- <b>11:00a</b>
- <p>Morning Workshops, Panels and Ignite Talks</p>
- </td>
- </tr>
- <tr>
- <td>
- <b>12:00p</b>
- <p>Lunch (provided) and Wrap-up Session</p>
- </td>
- </tr>
- </tbody>
- </table>
- </FlexRow>
- </section>
- </div>
-);
+ );
+ }
+});
render(<Page><ConferenceExpectations /></Page>, document.getElementById('app'));
diff --git a/src/views/conference/2016/index/index.jsx b/src/views/conference/2016/index/index.jsx
index 5a1f5119b..91e526668 100644
--- a/src/views/conference/2016/index/index.jsx
+++ b/src/views/conference/2016/index/index.jsx
@@ -1,88 +1,82 @@
-const React = require('react');
-const render = require('../../../../lib/render.jsx');
+var React = require('react');
+var render = require('../../../../lib/render.jsx');
-const Button = require('../../../../components/forms/button.jsx');
-const FlexRow = require('../../../../components/flex-row/flex-row.jsx');
-const Page = require('../../../../components/page/conference/2016/page.jsx');
-const TitleBanner = require('../../../../components/title-banner/title-banner.jsx');
+var Button = require('../../../../components/forms/button.jsx');
+var FlexRow = require('../../../../components/flex-row/flex-row.jsx');
+var Page = require('../../../../components/page/conference/2016/page.jsx');
+var TitleBanner = require('../../../../components/title-banner/title-banner.jsx');
require('./index.scss');
-const ConferenceSplash = () => (
- <div className="index mod-2016">
- <TitleBanner className="mod-conference">
- <h1>
- Many Paths, Many Styles
- </h1>
- <h3>
- August 4 - 6, 2016 | Cambridge, MA, USA
- </h3>
- <p>
- <a href="/conference/2016/schedule">
- <Button>
- See the Schedule
- </Button>
- </a>
- </p>
- <p className="sub-button">
- <b>
- <a
- href="https://youtu.be/alsfSTVn2es?list=PLpfxVARjkP-8chnTrjtDeo88Pcz6-xf_B"
- rel="noopener noreferrer"
- target="_blank"
- >
- Watch videos of the keynote sessions
- </a>
- </b>
- </p>
- </TitleBanner>
- <section className="inner">
- <FlexRow>
- <div>
+var ConferenceSplash = React.createClass({
+ type: 'ConferenceSplash',
+
+ render: function () {
+ return (
+ <div className="index mod-2016">
+ <TitleBanner className="mod-conference">
+ <h1>
+ Many Paths, Many Styles
+ </h1>
<h3>
- <a href="/conference/2016/expect">
- <img
- alt="expect-image"
- src="/images/conference/expect/what-to-expect.png"
- />
- What to Expect
- </a>
+ August 4 - 6, 2016 | Cambridge, MA, USA
</h3>
<p>
- Learn more about participating in Scratch@MIT
- </p>
- </div>
- <div>
- <h3>
- <a href="/conference/2016/plan">
- <img
- alt="plan-image"
- src="/images/conference/plan/plan-your-visit.png"
- />
- Plan Your Visit
- </a>
- </h3>
- <p>
- Information on traveling, staying, and exploring around the Media Lab
- </p>
- </div>
- <div>
- <h3>
<a href="/conference/2016/schedule">
- <img
- alt="schedule"
- src="/images/conference/schedule/schedule.png"
- />
- Schedule
+ <Button>
+ See the Schedule
+ </Button>
</a>
- </h3>
- <p>
- Full schedule of events and sessions
</p>
- </div>
- </FlexRow>
- </section>
- </div>
-);
+ <p className="sub-button">
+ <b>
+ <a href="https://youtu.be/alsfSTVn2es?list=PLpfxVARjkP-8chnTrjtDeo88Pcz6-xf_B"
+ target="_blank">
+ Watch videos of the keynote sessions
+ </a>
+ </b>
+ </p>
+ </TitleBanner>
+ <section className="inner">
+ <FlexRow>
+ <div>
+ <h3>
+ <a href="/conference/2016/expect">
+ <img src="/images/conference/expect/what-to-expect.png" alt="expect-image" />
+ What to Expect
+ </a>
+ </h3>
+ <p>
+ Learn more about participating in Scratch@MIT
+ </p>
+ </div>
+ <div>
+ <h3>
+ <a href="/conference/2016/plan">
+ <img src="/images/conference/plan/plan-your-visit.png" alt="plan-image" />
+ Plan Your Visit
+ </a>
+ </h3>
+ <p>
+ Information on traveling, staying, and exploring around the Media Lab
+ </p>
+ </div>
+ <div>
+ <h3>
+ <a href="/conference/2016/schedule">
+ <img src="/images/conference/schedule/schedule.png" alt="schedule" />
+ Schedule
+ </a>
+ </h3>
+ <p>
+ Full schedule of events and sessions
+ </p>
+ </div>
+ </FlexRow>
+ </section>
+ </div>
+ );
+ }
+});
render(<Page><ConferenceSplash /></Page>, document.getElementById('app'));
diff --git a/src/views/conference/2016/plan/plan.jsx b/src/views/conference/2016/plan/plan.jsx
index 1b5931630..b680f7bf1 100644
--- a/src/views/conference/2016/plan/plan.jsx
+++ b/src/views/conference/2016/plan/plan.jsx
@@ -1,29 +1,24 @@
-const bindAll = require('lodash.bindall');
-const React = require('react');
+var React = require('react');
+var render = require('../../../../lib/render.jsx');
-const Button = require('../../../../components/forms/button.jsx');
-const FlexRow = require('../../../../components/flex-row/flex-row.jsx');
-const TitleBanner = require('../../../../components/title-banner/title-banner.jsx');
-
-const Page = require('../../../../components/page/conference/2016/page.jsx');
-const render = require('../../../../lib/render.jsx');
+var Button = require('../../../../components/forms/button.jsx');
+var FlexRow = require('../../../../components/flex-row/flex-row.jsx');
+var Page = require('../../../../components/page/conference/2016/page.jsx');
+var TitleBanner = require('../../../../components/title-banner/title-banner.jsx');
require('./plan.scss');
-class ConferencePlan extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'toggleQuestion'
- ]);
- this.state = {
+var ConferencePlan = React.createClass({
+ type: 'ConferencePlan',
+ getInitialState: function () {
+ return {
dorm: false
};
- }
- toggleQuestion (element) {
+ },
+ toggleQuestion: function (element) {
this.setState({element: !this.state[element]});
- }
- render () {
+ },
+ render: function () {
return (
<div className="plan">
<TitleBanner className="mod-conference">
@@ -31,10 +26,7 @@ class ConferencePlan extends React.Component {
Plan Your Visit
</h1>
<div className="title-icon">
- <img
- alt="plan-image"
- src="/images/conference/plan/plan-your-visit.png"
- />
+ <img src="/images/conference/plan/plan-your-visit.png" alt="plan-image" />
</div>
</TitleBanner>
<div className="inner">
@@ -81,7 +73,7 @@ class ConferencePlan extends React.Component {
</FlexRow>
<p>
To reserve a room, <b>call the hotel and request the{' '}
- "MIT discount"</b> (subject to availability).
+ "MIT discount"</b> (subject to availability).
</p>
<p>
We also suggest the{' '}
@@ -112,10 +104,7 @@ class ConferencePlan extends React.Component {
</p>
</div>
<div className="short">
- <img
- alt="Lodging Illustration"
- src="/images/conference/plan/lodging.png"
- />
+ <img src="/images/conference/plan/lodging.png" alt="Lodging Illustration" />
</div>
</FlexRow>
</section>
@@ -145,10 +134,8 @@ class ConferencePlan extends React.Component {
</p>
</div>
<div className="short">
- <img
- alt="Transportation Illustration"
- src="/images/conference/plan/transportation.png"
- />
+ <img src="/images/conference/plan/transportation.png"
+ alt="Transportation Illustration" />
</div>
</FlexRow>
</section>
@@ -172,7 +159,7 @@ class ConferencePlan extends React.Component {
</li>
<li>
<a href="http://www.bostonteapartyship.com/">
- Boston Tea Party Ship & Museum
+ Boston Tea Party Ship & Museum
</a>
</li>
<li>
@@ -202,7 +189,7 @@ class ConferencePlan extends React.Component {
</li>
<li>
<a href="http://www.jfklibrary.org/">
- John F. Kennedy Library & Museum
+ John F. Kennedy Library & Museum
</a>
</li>
<li>
@@ -333,7 +320,7 @@ class ConferencePlan extends React.Component {
</dt>
<dd>
Contact us at a conference@scratch.mit.edu with your registration number,{' '}
- and we'll take care of it for you.
+ and we'll take care of it for you.
</dd>
</dl>
</div>
@@ -349,6 +336,6 @@ class ConferencePlan extends React.Component {
</div>
);
}
-}
+});
render(<Page><ConferencePlan /></Page>, document.getElementById('app'));
diff --git a/src/views/conference/2016/schedule/schedule.jsx b/src/views/conference/2016/schedule/schedule.jsx
index 2c0ee61d4..71a9a8ef9 100644
--- a/src/views/conference/2016/schedule/schedule.jsx
+++ b/src/views/conference/2016/schedule/schedule.jsx
@@ -1,124 +1,86 @@
-const bindAll = require('lodash.bindall');
-const classNames = require('classnames');
-const connect = require('react-redux').connect;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var connect = require('react-redux').connect;
+var React = require('react');
+var render = require('../../../../lib/render.jsx');
-const scheduleActions = require('../../../../redux/conference-schedule.js');
+var scheduleActions = require('../../../../redux/conference-schedule.js');
-const FlexRow = require('../../../../components/flex-row/flex-row.jsx');
-const SubNavigation = require('../../../../components/subnavigation/subnavigation.jsx');
-const TitleBanner = require('../../../../components/title-banner/title-banner.jsx');
-
-const Page = require('../../../../components/page/conference/2016/page.jsx');
-const render = require('../../../../lib/render.jsx');
+var FlexRow = require('../../../../components/flex-row/flex-row.jsx');
+var Page = require('../../../../components/page/conference/2016/page.jsx');
+var SubNavigation = require('../../../../components/subnavigation/subnavigation.jsx');
+var TitleBanner = require('../../../../components/title-banner/title-banner.jsx');
require('./schedule.scss');
-class ConferenceSchedule extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleScheduleChange',
- 'renderChunkItems'
- ]);
- }
- componentDidMount () {
- const day = window.location.hash.substr(1) || 'thursday';
+var ConferenceSchedule = React.createClass({
+ type: 'ConferenceSchedule',
+ propTypes: {
+ conferenceSchedule: React.PropTypes.object
+ },
+ componentDidMount: function () {
+ var day = window.location.hash.substr(1) || 'thursday';
this.handleScheduleChange(day);
- }
- handleScheduleChange (day) {
- window.history.replaceState(history.state, '', `#${day}`);
+ },
+ handleScheduleChange: function (day) {
+ window.history.replaceState(history.state, '', '#' + day);
this.props.dispatch(scheduleActions.startGetSchedule(day));
- }
- renderChunkItems (timeSlot) {
- return timeSlot.map(item => {
+ },
+ renderChunkItems: function (timeSlot) {
+ return timeSlot.map(function (item) {
if (item.Presenter) {
return (
- <a
- className="item-url"
- href={item.uri}
- >
- <div
- className="agenda-item"
- key={item.rowid}
- >
+ <a href={item.uri} className="item-url">
+ <div key={item.rowid} className="agenda-item">
<h3>{item.Title}</h3>
<FlexRow>
<p>
- <img
- alt="time icon"
- src="/svgs/conference/schedule/time-icon.svg"
- />
+ <img src="/svgs/conference/schedule/time-icon.svg" alt="time icon" />
{item.Start} – {item.End}
</p>
<p>
- <img
- alt="location icon"
- src="/svgs/conference/schedule/location-icon.svg"
- />
+ <img src="/svgs/conference/schedule/location-icon.svg" alt="location icon" />
{item.Location}
</p>
</FlexRow>
<FlexRow>
<p>
- <img
- alt="presenter icon"
- src="/svgs/conference/schedule/presenter-icon.svg"
- />
+ <img src="/svgs/conference/schedule/presenter-icon.svg" alt="presenter icon" />
{item.Presenter}
</p>
<p>
- <img
- alt="event icon"
- src="/svgs/conference/schedule/event-icon.svg"
- />
+ <img src="/svgs/conference/schedule/event-icon.svg" alt="event icon" />
{item.Type}
</p>
</FlexRow>
</div>
</a>
);
+ } else {
+ return (
+ <div key={item.rowid} className="agenda-item no-click">
+ <h3>{item.Title}</h3>
+ <FlexRow>
+ <p>{item.Start} – {item.End}</p>
+ <p>{item.Location}</p>
+ </FlexRow>
+ </div>
+ );
}
- return (
- <div
- className="agenda-item no-click"
- key={item.rowid}
- >
- <h3>{item.Title}</h3>
- <FlexRow>
- <p>{item.Start} – {item.End}</p>
- <p>{item.Location}</p>
- </FlexRow>
- </div>
- );
});
- }
- render () {
- const tabClasses = {
- thursday: classNames({
- selected: (this.props.conferenceSchedule.day === 'thursday')
+ },
+ render: function () {
+ var tabClasses = {
+ 'thursday': classNames({
+ 'selected': (this.props.conferenceSchedule.day === 'thursday')
}),
- friday: classNames({
- selected: (this.props.conferenceSchedule.day === 'friday')
+ 'friday': classNames({
+ 'selected': (this.props.conferenceSchedule.day === 'friday')
}),
- saturday: classNames({
- last: true,
- selected: (this.props.conferenceSchedule.day === 'saturday')
+ 'saturday': classNames({
+ 'last': true,
+ 'selected': (this.props.conferenceSchedule.day === 'saturday')
})
};
- const handleScheduleMethods = {
- thursday: () => {
- this.handleScheduleChange('thursday');
- },
- friday: () => {
- this.handleScheduleChange('friday');
- },
- saturday: () => {
- this.handleScheduleChange('saturday');
- }
- };
-
return (
<div className="schedule">
<TitleBanner className="mod-conference">
@@ -127,63 +89,44 @@ class ConferenceSchedule extends React.Component {
</h1>
</TitleBanner>
<SubNavigation>
- <li
- className={tabClasses.thursday}
- onClick={handleScheduleMethods.thursday}
- >
- <img
- alt="August 4th Icon"
- src="/svgs/conference/expect/aug4-icon.svg"
- />
+ <li className={tabClasses.thursday}
+ onClick={this.handleScheduleChange.bind(this, 'thursday')}>
+ <img src="/svgs/conference/expect/aug4-icon.svg" alt="August 4th Icon" />
<span>Thursday</span>
</li>
- <li
- className={tabClasses.friday}
- onClick={handleScheduleMethods.friday}
- >
- <img
- alt="August 5th Icon"
- src="/svgs/conference/expect/aug5-icon.svg"
- />
+ <li className={tabClasses.friday}
+ onClick={this.handleScheduleChange.bind(this, 'friday')}>
+ <img src="/svgs/conference/expect/aug5-icon.svg" alt="August 5th Icon" />
<span>Friday</span>
</li>
- <li
- className={tabClasses.saturday}
- onClick={handleScheduleMethods.saturday}
- >
- <img
- alt="August 6th Icon"
- src="/svgs/conference/expect/aug6-icon.svg"
- />
+ <li className={tabClasses.saturday}
+ onClick={this.handleScheduleChange.bind(this, 'saturday')}>
+ <img src="/svgs/conference/expect/aug6-icon.svg" alt="August 6th Icon" />
<span>Saturday</span>
</li>
</SubNavigation>
<div className="inner">
- {this.props.conferenceSchedule.timeSlots.map(timeSlot => ([
- <h2
- className="breaking-title"
- key={timeSlot.info.name}
- >
- <span>{timeSlot.info.name} – {timeSlot.info.time}</span>
- </h2>,
- this.renderChunkItems(timeSlot.items)
- ]))}
+ {this.props.conferenceSchedule.timeSlots.map(function (timeSlot) {
+ return ([
+ <h2 key={timeSlot.info.name} className="breaking-title">
+ <span>{timeSlot.info.name} – {timeSlot.info.time}</span>
+ </h2>,
+ this.renderChunkItems(timeSlot.items)
+ ]);
+ }.bind(this))}
</div>
</div>
);
}
-}
-
-ConferenceSchedule.propTypes = {
- conferenceSchedule: PropTypes.object, // eslint-disable-line react/forbid-prop-types
- dispatch: PropTypes.func
-};
-
-const mapStateToProps = state => ({
- conferenceSchedule: state.conferenceSchedule
});
-const ConnectedSchedule = connect(mapStateToProps)(ConferenceSchedule);
+var mapStateToProps = function (state) {
+ return {
+ conferenceSchedule: state.conferenceSchedule
+ };
+};
+
+var ConnectedSchedule = connect(mapStateToProps)(ConferenceSchedule);
render(
<Page><ConnectedSchedule /></Page>,
diff --git a/src/views/conference/2017/index/index.jsx b/src/views/conference/2017/index/index.jsx
index 98fa49c54..2717f2b9a 100644
--- a/src/views/conference/2017/index/index.jsx
+++ b/src/views/conference/2017/index/index.jsx
@@ -1,526 +1,514 @@
-const FormattedDate = require('react-intl').FormattedDate;
-const FormattedMessage = require('react-intl').FormattedMessage;
-const React = require('react');
-const render = require('../../../../lib/render.jsx');
+var FormattedDate = require('react-intl').FormattedDate;
+var FormattedMessage = require('react-intl').FormattedMessage;
+var React = require('react');
+var render = require('../../../../lib/render.jsx');
-const FlexRow = require('../../../../components/flex-row/flex-row.jsx');
-const Page = require('../../../../components/page/conference/2017/page.jsx');
-const TitleBanner = require('../../../../components/title-banner/title-banner.jsx');
+var FlexRow = require('../../../../components/flex-row/flex-row.jsx');
+var Page = require('../../../../components/page/conference/2017/page.jsx');
+var TitleBanner = require('../../../../components/title-banner/title-banner.jsx');
require('../../../../components/forms/button.scss');
require('./index.scss');
-const ConferenceSplash = () => (
- <div className="index mod-2017">
- <TitleBanner className="mod-conference mod-2017">
- <div className="title-banner-image mod-2017" />
- <h1 className="title-banner-h1 mod-2017">
- <FormattedMessage id="conference-2017.title" />
- </h1>
- <h3 className="title-banner-h3 mod-2017">
- <FormattedMessage id="conference-2017.desc" />
- </h3>
- </TitleBanner>
- <h3 className="conf2017-title-band">
- <FormattedMessage id="conference-2017.seeBelow" />
- </h3>
- <div className="inner">
- <section className="conf2017-panel mod-france">
- <FlexRow className="conf2017-panel-title">
- <img
- alt="France Flag"
- className="conf2017-panel-flag"
- src="/svgs/conference/flags/fr.svg"
- />
- <div className="conf2017-panel-title-text">
- <h3><FormattedMessage id="conference-2017.franceTitle" /></h3>
- <h4><FormattedMessage id="conference-2017.franceSubTitle" /></h4>
- </div>
- </FlexRow>
- <p className="conf2017-panel-desc">
- <FormattedMessage id="conference-2017.franceDesc" />
- </p>
- <table className="conf2017-panel-details">
- <tbody>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Calendar Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/calendar-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.date" /></td>
- <td>
- <FormattedDate
- day="2-digit"
- month="long"
- value={new Date(2017, 6, 18)}
- year="numeric"
- />
- {' - '}
- <FormattedDate
- day="2-digit"
- month="long"
- value={new Date(2017, 6, 21)}
- year="numeric"
- />
- </td>
- </tr>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Map Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/map-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.location" /></td>
- <td>{'Bordeaux, France'}</td>
- </tr>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Audience Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/audience-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.audience" /></td>
- <td><FormattedMessage id="conference-2017.franceAudience" /></td>
- </tr>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Language Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/language-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.language" /></td>
- <td>{'English'}</td>
- </tr>
- </tbody>
- </table>
- <a
- className="button mod-2017-panel"
- href="http://scratch2017bdx.org"
- >
- <FormattedMessage id="conference-2017.website" />
- </a>
- </section>
- <section className="conf2017-panel mod-hungary">
- <FlexRow className="conf2017-panel-title">
- <img
- alt="Hungary Flag"
- className="conf2017-panel-flag"
- src="/svgs/conference/flags/hu.svg"
- />
- <div className="conf2017-panel-title-text">
- <h3><FormattedMessage id="conference-2017.hungaryTitle" /></h3>
- </div>
- </FlexRow>
- <p className="conf2017-panel-desc">
- <FormattedMessage id="conference-2017.hungaryDesc" />
- </p>
- <table className="conf2017-panel-details">
- <tbody>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Calendar Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/calendar-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.date" /></td>
- <td>
- <FormattedDate
- day="2-digit"
- month="long"
- value={new Date(2017, 7, 24)}
- year="numeric"
- />
- {' - '}
- <FormattedDate
- day="2-digit"
- month="long"
- value={new Date(2017, 7, 25)}
- year="numeric"
- />
- </td>
- </tr>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Map Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/map-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.location" /></td>
- <td>{'Budapest, Hungary'}</td>
- </tr>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Audience Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/audience-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.audience" /></td>
- <td><FormattedMessage id="conference-2017.hungaryAudience" /></td>
- </tr>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Language Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/language-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.language" /></td>
- <td>{'English'}</td>
- </tr>
- </tbody>
- </table>
- <a
- className="button mod-2017-panel"
- href="https://events.epam.com/events/scratch-2017"
- >
- <FormattedMessage id="conference-2017.website" />
- </a>
- </section>
- <section className="conf2017-panel mod-costarica">
- <FlexRow className="conf2017-panel-title">
- <img
- alt="Costa Rica Flag"
- className="conf2017-panel-flag"
- src="/svgs/conference/flags/cr.svg"
- />
- <div className="conf2017-panel-title-text">
- <h3><FormattedMessage id="conference-2017.costaricaTitle" /></h3>
- <h4><FormattedMessage id="conference-2017.costaricaSubTitle" /></h4>
- </div>
- </FlexRow>
- <p className="conf2017-panel-desc">
- <FormattedMessage id="conference-2017.costaricaDesc" />
- </p>
- <table className="conf2017-panel-details">
- <tbody>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Calendar Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/calendar-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.date" /></td>
- <td>
- <FormattedDate
- day="2-digit"
- month="long"
- value={new Date(2017, 10, 12)}
- year="numeric"
- />
- </td>
- </tr>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Map Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/map-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.location" /></td>
- <td>{'San José, Costa Rica'}</td>
- </tr>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Audience Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/audience-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.audience" /></td>
- <td><FormattedMessage id="conference-2017.costaricaAudience" /></td>
- </tr>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Language Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/language-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.language" /></td>
- <td>{'Español (Spanish)'}</td>
- </tr>
- </tbody>
- </table>
- <a
- className="button mod-2017-panel"
- href="https://scratchcostarica.com/"
- >
- <FormattedMessage id="conference-2017.website" />
- </a>
- </section>
- <section className="conf2017-panel mod-chile">
- <FlexRow className="conf2017-panel-title">
- <img
- alt="Chile Flag"
- className="conf2017-panel-flag"
- src="/svgs/conference/flags/cl.svg"
- />
- <div className="conf2017-panel-title-text">
- <h3><FormattedMessage id="conference-2017.chileTitle" /></h3>
- <h4><FormattedMessage id="conference-2017.chileSubTitle" /></h4>
- </div>
- </FlexRow>
- <p className="conf2017-panel-desc">
- <FormattedMessage id="conference-2017.chileDesc" />
- </p>
- <table className="conf2017-panel-details">
- <tbody>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Calendar Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/calendar-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.date" /></td>
- <td>
- <FormattedDate
- day="2-digit"
- month="long"
- value={new Date(2017, 7, 31)}
- year="numeric"
- />
- {' - '}
- <FormattedDate
- day="2-digit"
- month="long"
- value={new Date(2017, 8, 1)}
- year="numeric"
- />
- </td>
- </tr>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Map Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/map-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.location" /></td>
- <td>{'Santiago, Chile'}</td>
- </tr>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Audience Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/audience-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.audience" /></td>
- <td><FormattedMessage id="conference-2017.chileAudience" /></td>
- </tr>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Language Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/language-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.language" /></td>
- <td>{'Español (Spanish) - simultaneous translation during plenary sessions'}</td>
- </tr>
- </tbody>
- </table>
- <a
- className="button mod-2017-panel"
- href="http://www.scratchalsur.org"
- >
- <FormattedMessage id="conference-2017.website" />
- </a>
- </section>
- <section className="conf2017-panel mod-brasil">
- <FlexRow className="conf2017-panel-title">
- <img
- alt="Brasil Flag"
- className="conf2017-panel-flag"
- src="/svgs/conference/flags/br.svg"
- />
- <div className="conf2017-panel-title-text">
- <h3><FormattedMessage id="conference-2017.brasilTitle" /></h3>
- </div>
- </FlexRow>
- <p className="conf2017-panel-desc">
- <FormattedMessage id="conference-2017.brasilDesc" />
- </p>
- <table className="conf2017-panel-details">
- <tbody>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Calendar Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/calendar-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.date" /></td>
- <td>
- <FormattedDate
- day="2-digit"
- month="long"
- value={new Date(2017, 9, 5)}
- year="numeric"
- />
- {' - '}
- <FormattedDate
- day="2-digit"
- month="long"
- value={new Date(2017, 9, 7)}
- year="numeric"
- />
- </td>
- </tr>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Map Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/map-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.location" /></td>
- <td>{'São Paulo, Brasil'}</td>
- </tr>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Audience Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/audience-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.audience" /></td>
- <td><FormattedMessage id="conference-2017.brasilAudience" /></td>
- </tr>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Language Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/language-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.language" /></td>
- <td>{'Português (Portuguese)'}</td>
- </tr>
- </tbody>
- </table>
- <a
- className="button mod-2017-panel"
- href="http://scratchbrasil.org/"
- >
- <FormattedMessage id="conference-2017.website" />
- </a>
- </section>
- <section className="conf2017-panel mod-china mod-last">
- <FlexRow className="conf2017-panel-title">
- <img
- alt="China Flag"
- className="conf2017-panel-flag"
- src="/svgs/conference/flags/cn.svg"
- />
- <div className="conf2017-panel-title-text">
- <h3><FormattedMessage id="conference-2017.chinaTitle" /></h3>
- </div>
- </FlexRow>
- <p className="conf2017-panel-desc">
- <FormattedMessage id="conference-2017.chinaDesc" />
- </p>
- <table className="conf2017-panel-details">
- <tbody>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Calendar Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/calendar-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.date" /></td>
- <td>
- <FormattedDate
- day="2-digit"
- month="long"
- value={new Date(2017, 4, 20)}
- year="numeric"
- />
- {' - '}
- <FormattedDate
- day="2-digit"
- month="long"
- value={new Date(2017, 4, 21)}
- year="numeric"
- />
- </td>
- </tr>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Map Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/map-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.location" /></td>
- <td>{'Shanghai, China'}</td>
- </tr>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Audience Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/audience-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.audience" /></td>
- <td><FormattedMessage id="conference-2017.chinaAudience" /></td>
- </tr>
- <tr className="conf2017-panel-row">
- <td className="conf2017-panel-row-icon">
- <img
- alt="Language Icon"
- className="conf2017-panel-row-icon-image"
- src="/svgs/conference/index/language-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2017.language" /></td>
- <td>{'中文 (Chinese)'}</td>
- </tr>
- </tbody>
- </table>
- <a
- className="button mod-2017-panel"
- href="http://scratchconference2017.sxl.cn/"
- >
- <FormattedMessage id="conference-2017.website" />
- </a>
- </section>
- </div>
- </div>
-);
+var ConferenceSplash = React.createClass({
+ type: 'ConferenceSplash',
+
+ render: function () {
+ return (
+ <div className='index mod-2017'>
+ <TitleBanner className='mod-conference mod-2017'>
+ <div className='title-banner-image mod-2017'></div>
+ <h1 className='title-banner-h1 mod-2017'>
+ <FormattedMessage id='conference-2017.title' />
+ </h1>
+ <h3 className='title-banner-h3 mod-2017'>
+ <FormattedMessage id='conference-2017.desc' />
+ </h3>
+ </TitleBanner>
+ <h3 className='conf2017-title-band'>
+ <FormattedMessage id='conference-2017.seeBelow' />
+ </h3>
+ <div className='inner'>
+ <section className='conf2017-panel mod-france'>
+ <FlexRow className='conf2017-panel-title'>
+ <img
+ className='conf2017-panel-flag'
+ src='/svgs/conference/flags/fr.svg'
+ alt='France Flag'
+ />
+ <div className='conf2017-panel-title-text'>
+ <h3><FormattedMessage id='conference-2017.franceTitle' /></h3>
+ <h4><FormattedMessage id='conference-2017.franceSubTitle' /></h4>
+ </div>
+ </FlexRow>
+ <p className='conf2017-panel-desc'>
+ <FormattedMessage id='conference-2017.franceDesc' />
+ </p>
+ <table className='conf2017-panel-details'>
+ <tbody>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/calendar-icon.svg'
+ alt='Calendar Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.date' /></td>
+ <td>
+ <FormattedDate
+ value={new Date(2017, 6, 18)}
+ year='numeric'
+ month='long'
+ day='2-digit'
+ />
+ {' - '}
+ <FormattedDate
+ value={new Date(2017, 6, 21)}
+ year='numeric'
+ month='long'
+ day='2-digit'
+ />
+ </td>
+ </tr>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/map-icon.svg'
+ alt='Map Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.location' /></td>
+ <td>{'Bordeaux, France'}</td>
+ </tr>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/audience-icon.svg'
+ alt='Audience Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.audience' /></td>
+ <td><FormattedMessage id='conference-2017.franceAudience' /></td>
+ </tr>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/language-icon.svg'
+ alt='Language Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.language' /></td>
+ <td>{'English'}</td>
+ </tr>
+ </tbody>
+ </table>
+ <a className='button mod-2017-panel' href='http://scratch2017bdx.org'>
+ <FormattedMessage id='conference-2017.website' />
+ </a>
+ </section>
+ <section className='conf2017-panel mod-hungary'>
+ <FlexRow className='conf2017-panel-title'>
+ <img
+ className='conf2017-panel-flag'
+ src='/svgs/conference/flags/hu.svg'
+ alt='Hungary Flag'
+ />
+ <div className='conf2017-panel-title-text'>
+ <h3><FormattedMessage id='conference-2017.hungaryTitle' /></h3>
+ </div>
+ </FlexRow>
+ <p className='conf2017-panel-desc'>
+ <FormattedMessage id='conference-2017.hungaryDesc' />
+ </p>
+ <table className='conf2017-panel-details'>
+ <tbody>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/calendar-icon.svg'
+ alt='Calendar Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.date' /></td>
+ <td>
+ <FormattedDate
+ value={new Date(2017, 7, 24)}
+ year='numeric'
+ month='long'
+ day='2-digit'
+ />
+ {' - '}
+ <FormattedDate
+ value={new Date(2017, 7, 25)}
+ year='numeric'
+ month='long'
+ day='2-digit'
+ />
+ </td>
+ </tr>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/map-icon.svg'
+ alt='Map Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.location' /></td>
+ <td>{'Budapest, Hungary'}</td>
+ </tr>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/audience-icon.svg'
+ alt='Audience Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.audience' /></td>
+ <td><FormattedMessage id='conference-2017.hungaryAudience' /></td>
+ </tr>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/language-icon.svg'
+ alt='Language Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.language' /></td>
+ <td>{'English'}</td>
+ </tr>
+ </tbody>
+ </table>
+ <a className='button mod-2017-panel' href='https://events.epam.com/events/scratch-2017'>
+ <FormattedMessage id='conference-2017.website' />
+ </a>
+ </section>
+ <section className='conf2017-panel mod-costarica'>
+ <FlexRow className='conf2017-panel-title'>
+ <img
+ className='conf2017-panel-flag'
+ src='/svgs/conference/flags/cr.svg'
+ alt='Costa Rica Flag'
+ />
+ <div className='conf2017-panel-title-text'>
+ <h3><FormattedMessage id='conference-2017.costaricaTitle' /></h3>
+ <h4><FormattedMessage id='conference-2017.costaricaSubTitle' /></h4>
+ </div>
+ </FlexRow>
+ <p className='conf2017-panel-desc'>
+ <FormattedMessage id='conference-2017.costaricaDesc' />
+ </p>
+ <table className='conf2017-panel-details'>
+ <tbody>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/calendar-icon.svg'
+ alt='Calendar Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.date' /></td>
+ <td>
+ <FormattedDate
+ value={new Date(2017, 10, 12)}
+ year='numeric'
+ month='long'
+ day='2-digit'
+ />
+ </td>
+ </tr>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/map-icon.svg'
+ alt='Map Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.location' /></td>
+ <td>{'San José, Costa Rica'}</td>
+ </tr>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/audience-icon.svg'
+ alt='Audience Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.audience' /></td>
+ <td><FormattedMessage id='conference-2017.costaricaAudience' /></td>
+ </tr>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/language-icon.svg'
+ alt='Language Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.language' /></td>
+ <td>{'Español (Spanish)'}</td>
+ </tr>
+ </tbody>
+ </table>
+ <a className='button mod-2017-panel' href='https://scratchcostarica.com/'>
+ <FormattedMessage id='conference-2017.website' />
+ </a>
+ </section>
+ <section className='conf2017-panel mod-chile'>
+ <FlexRow className='conf2017-panel-title'>
+ <img
+ className='conf2017-panel-flag'
+ src='/svgs/conference/flags/cl.svg'
+ alt='Chile Flag'
+ />
+ <div className='conf2017-panel-title-text'>
+ <h3><FormattedMessage id='conference-2017.chileTitle' /></h3>
+ <h4><FormattedMessage id='conference-2017.chileSubTitle' /></h4>
+ </div>
+ </FlexRow>
+ <p className='conf2017-panel-desc'>
+ <FormattedMessage id='conference-2017.chileDesc' />
+ </p>
+ <table className='conf2017-panel-details'>
+ <tbody>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/calendar-icon.svg'
+ alt='Calendar Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.date' /></td>
+ <td>
+ <FormattedDate
+ value={new Date(2017, 7, 31)}
+ year='numeric'
+ month='long'
+ day='2-digit'
+ />
+ {' - '}
+ <FormattedDate
+ value={new Date(2017, 8, 1)}
+ year='numeric'
+ month='long'
+ day='2-digit'
+ />
+ </td>
+ </tr>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/map-icon.svg'
+ alt='Map Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.location' /></td>
+ <td>{'Santiago, Chile'}</td>
+ </tr>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/audience-icon.svg'
+ alt='Audience Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.audience' /></td>
+ <td><FormattedMessage id='conference-2017.chileAudience' /></td>
+ </tr>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/language-icon.svg'
+ alt='Language Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.language' /></td>
+ <td>{'Español (Spanish) - simultaneous translation during plenary sessions'}</td>
+ </tr>
+ </tbody>
+ </table>
+ <a className='button mod-2017-panel' href='http://www.scratchalsur.org'>
+ <FormattedMessage id='conference-2017.website' />
+ </a>
+ </section>
+ <section className='conf2017-panel mod-brasil'>
+ <FlexRow className='conf2017-panel-title'>
+ <img
+ className='conf2017-panel-flag'
+ src='/svgs/conference/flags/br.svg'
+ alt='Brasil Flag'
+ />
+ <div className='conf2017-panel-title-text'>
+ <h3><FormattedMessage id='conference-2017.brasilTitle' /></h3>
+ </div>
+ </FlexRow>
+ <p className='conf2017-panel-desc'>
+ <FormattedMessage id='conference-2017.brasilDesc' />
+ </p>
+ <table className='conf2017-panel-details'>
+ <tbody>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/calendar-icon.svg'
+ alt='Calendar Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.date' /></td>
+ <td>
+ <FormattedDate
+ value={new Date(2017, 9, 5)}
+ year='numeric'
+ month='long'
+ day='2-digit'
+ />
+ {' - '}
+ <FormattedDate
+ value={new Date(2017, 9, 7)}
+ year='numeric'
+ month='long'
+ day='2-digit'
+ />
+ </td>
+ </tr>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/map-icon.svg'
+ alt='Map Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.location' /></td>
+ <td>{'São Paulo, Brasil'}</td>
+ </tr>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/audience-icon.svg'
+ alt='Audience Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.audience' /></td>
+ <td><FormattedMessage id='conference-2017.brasilAudience' /></td>
+ </tr>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/language-icon.svg'
+ alt='Language Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.language' /></td>
+ <td>{'Português (Portuguese)'}</td>
+ </tr>
+ </tbody>
+ </table>
+ <a className='button mod-2017-panel' href='http://scratchbrasil.org/'>
+ <FormattedMessage id='conference-2017.website' />
+ </a>
+ </section>
+ <section className='conf2017-panel mod-china mod-last'>
+ <FlexRow className='conf2017-panel-title'>
+ <img
+ className='conf2017-panel-flag'
+ src='/svgs/conference/flags/cn.svg'
+ alt='China Flag'
+ />
+ <div className='conf2017-panel-title-text'>
+ <h3><FormattedMessage id='conference-2017.chinaTitle' /></h3>
+ </div>
+ </FlexRow>
+ <p className='conf2017-panel-desc'>
+ <FormattedMessage id='conference-2017.chinaDesc' />
+ </p>
+ <table className='conf2017-panel-details'>
+ <tbody>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/calendar-icon.svg'
+ alt='Calendar Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.date' /></td>
+ <td>
+ <FormattedDate
+ value={new Date(2017, 4, 20)}
+ year='numeric'
+ month='long'
+ day='2-digit'
+ />
+ {' - '}
+ <FormattedDate
+ value={new Date(2017, 4, 21)}
+ year='numeric'
+ month='long'
+ day='2-digit'
+ />
+ </td>
+ </tr>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/map-icon.svg'
+ alt='Map Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.location' /></td>
+ <td>{'Shanghai, China'}</td>
+ </tr>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/audience-icon.svg'
+ alt='Audience Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.audience' /></td>
+ <td><FormattedMessage id='conference-2017.chinaAudience' /></td>
+ </tr>
+ <tr className='conf2017-panel-row'>
+ <td className='conf2017-panel-row-icon'>
+ <img
+ className='conf2017-panel-row-icon-image'
+ src='/svgs/conference/index/language-icon.svg'
+ alt='Language Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2017.language' /></td>
+ <td>{'中文 (Chinese)'}</td>
+ </tr>
+ </tbody>
+ </table>
+ <a className='button mod-2017-panel' href='http://scratchconference2017.sxl.cn/'>
+ <FormattedMessage id='conference-2017.website' />
+ </a>
+ </section>
+ </div>
+ </div>
+ );
+ }
+});
render(<Page><ConferenceSplash /></Page>, document.getElementById('app'));
diff --git a/src/views/conference/2018/index/index.jsx b/src/views/conference/2018/index/index.jsx
index 00bb4447f..d4bc98064 100644
--- a/src/views/conference/2018/index/index.jsx
+++ b/src/views/conference/2018/index/index.jsx
@@ -1,151 +1,152 @@
-const FormattedDate = require('react-intl').FormattedDate;
-const FormattedMessage = require('react-intl').FormattedMessage;
-const React = require('react');
-const render = require('../../../../lib/render.jsx');
+var FormattedDate = require('react-intl').FormattedDate;
+var FormattedMessage = require('react-intl').FormattedMessage;
+var React = require('react');
+var render = require('../../../../lib/render.jsx');
-const FlexRow = require('../../../../components/flex-row/flex-row.jsx');
-const Page = require('../../../../components/page/conference/2018/page.jsx');
-const TitleBanner = require('../../../../components/title-banner/title-banner.jsx');
+var FlexRow = require('../../../../components/flex-row/flex-row.jsx');
+var Page = require('../../../../components/page/conference/2018/page.jsx');
+var TitleBanner = require('../../../../components/title-banner/title-banner.jsx');
require('../../../../components/forms/button.scss');
require('./index.scss');
-const ConferenceSplash = () => (
- <div className="index mod-2018">
- <TitleBanner className="mod-conference mod-2018">
- <div className="title-banner-image mod-2018" />
- <h1 className="title-banner-h1 mod-2018">
- <center>
- <FormattedMessage id="conference-2018.title" />
- <br />
- <FormattedMessage id="conference-2018.subtitle" />
- </center>
- </h1>
- <h3 className="title-banner-h3 mod-2018">
- <FormattedMessage id="conference-2018.dateDesc" />
- </h3>
- </TitleBanner>
- <div className="inner">
- <section className="conf2018-panel mod-desc">
- <p className="conf2018-panel-desc">
- <FormattedMessage id="conference-2018.desc1" />
- <br />
- <br />
- <FormattedMessage id="conference-2018.desc2" />
- </p>
- <table className="conf2018-panel-details">
- <tbody>
- <tr className="conf2018-panel-row">
- <td className="conf2018-panel-row-icon">
- <img
- alt="Calendar Icon"
- className="conf2018-panel-row-icon-image"
- src="/svgs/conference/index/calendar-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2018.date" /></td>
- <td>
- <FormattedDate
- day="2-digit"
- month="long"
- value={new Date(2018, 6, 26)}
- year="numeric"
- />
- {' - '}
- <FormattedDate
- day="2-digit"
- month="long"
- value={new Date(2018, 6, 28)}
- year="numeric"
- />
- <FormattedMessage id="conference-2018.dateDescMore" />
- </td>
- </tr>
- <tr className="conf2018-panel-row">
- <td className="conf2018-panel-row-icon">
- <img
- alt="Map Icon"
- className="conf2018-panel-row-icon-image"
- src="/svgs/conference/index/map-icon.svg"
- />
- </td>
- <td><FormattedMessage id="conference-2018.location" /></td>
- <td><FormattedMessage id="conference-2018.locationDetails" /></td>
- </tr>
- </tbody>
- </table>
- <p>
- <FormattedMessage id="conference-2018.registrationDate" />
- </p>
- </section>
- <section className="conf2018-panel">
- <p className="conf2018-panel-desc">
- <FormattedMessage id="conference-2018.sessionDesc" />
- </p>
- <p className="conf2018-panel-session">
- <p className="conf2018-panel-session">
- <b>
- <FormattedMessage id="conference-2018.sessionItem1Title" />
- </b>{' '}
- <FormattedMessage id="conference-2018.sessionItem1Desc" />
- </p>
- <p className="conf2018-panel-session">
- <b>
- <FormattedMessage id="conference-2018.sessionItem2Title" />
- </b>{' '}
- <FormattedMessage id="conference-2018.sessionItem2Desc" />
- </p>
- <p className="conf2018-panel-session">
- <b>
- <FormattedMessage id="conference-2018.sessionItem3Title" />
- </b>{' '}
- <FormattedMessage id="conference-2018.sessionItem3Desc" />
- </p>
- <p className="conf2018-panel-session">
- <b>
- <FormattedMessage id="conference-2018.sessionItem4Title" />
- </b>{' '}
- <FormattedMessage id="conference-2018.sessionItem4Desc" />
- </p>
- <p className="conf2018-panel-deadline">
- <FormattedMessage id="conference-2018.deadline" />
- </p>
- </p>
- <a
- className="button mod-2018-panel"
- href="https://docs.google.com/forms/d/e/1FAIpQLSd7SkuQ-dfW-P3aArSQokK9GkKAUKufTVBHod_ElNIiFE9iBQ/viewform?usp=sf_link"
- >
- <FormattedMessage id="conference-2018.proposal" />
- </a>
- </section>
- <section className="conf2018-panel mod-registration">
- <FlexRow className="conf2018-panel-title">
- <div className="conf2018-panel-title-text">
- <h3><FormattedMessage id="conference-2018.registrationTitle" /></h3>
- </div>
- </FlexRow>
- <p className="conf2018-panel-desc">
- <FormattedMessage id="conference-2018.registrationEarly" />
- <br />
- <FormattedMessage id="conference-2018.registrationStandard" />
- </p>
- </section>
- <section className="conf2018-panel mod-questions">
- <p className="conf2018-panel-desc">
- <FormattedMessage
- id="conference-2018.questions"
- values={{
- emailLink: (
- <a href="mailto:conference@scratch.mit.edu">
- conference@scratch.mit.edu
- </a>
- )
- }}
- />
- </p>
- </section>
- </div>
- </div>
-);
+var ConferenceSplash = React.createClass({
+ type: 'ConferenceSplash',
+
+ render: function () {
+ return (
+ <div className='index mod-2018'>
+ <TitleBanner className='mod-conference mod-2018'>
+ <div className='title-banner-image mod-2018'></div>
+ <h1 className='title-banner-h1 mod-2018'>
+ <center>
+ <FormattedMessage id='conference-2018.title' />
+ <br />
+ <FormattedMessage id='conference-2018.subtitle' />
+ </center>
+ </h1>
+ <h3 className='title-banner-h3 mod-2018'>
+ <FormattedMessage id='conference-2018.dateDesc' />
+ </h3>
+ </TitleBanner>
+ <div className='inner'>
+ <section className='conf2018-panel mod-desc'>
+ <p className='conf2018-panel-desc'>
+ <FormattedMessage id='conference-2018.desc1' />
+ <br />
+ <br />
+ <FormattedMessage id='conference-2018.desc2' />
+ </p>
+ <table className='conf2018-panel-details'>
+ <tbody>
+ <tr className='conf2018-panel-row'>
+ <td className='conf2018-panel-row-icon'>
+ <img
+ className='conf2018-panel-row-icon-image'
+ src='/svgs/conference/index/calendar-icon.svg'
+ alt='Calendar Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2018.date' /></td>
+ <td>
+ <FormattedDate
+ value={new Date(2018, 6, 26)}
+ year='numeric'
+ month='long'
+ day='2-digit'
+ />
+ {' - '}
+ <FormattedDate
+ value={new Date(2018, 6, 28)}
+ year='numeric'
+ month='long'
+ day='2-digit'
+ />
+ <FormattedMessage id='conference-2018.dateDescMore' />
+ </td>
+ </tr>
+ <tr className='conf2018-panel-row'>
+ <td className='conf2018-panel-row-icon'>
+ <img
+ className='conf2018-panel-row-icon-image'
+ src='/svgs/conference/index/map-icon.svg'
+ alt='Map Icon'
+ />
+ </td>
+ <td><FormattedMessage id='conference-2018.location' /></td>
+ <td><FormattedMessage id='conference-2018.locationDetails' /></td>
+ </tr>
+ </tbody>
+ </table>
+ <p>
+ <FormattedMessage id='conference-2018.registrationDate' />
+ </p>
+ </section>
+ <section className='conf2018-panel'>
+ <p className='conf2018-panel-desc'>
+ <FormattedMessage id='conference-2018.sessionDesc' />
+ </p>
+ <p className='conf2018-panel-session'>
+ <p className='conf2018-panel-session'>
+ <b>
+ <FormattedMessage id='conference-2018.sessionItem1Title' />
+ </b>{' '}
+ <FormattedMessage id='conference-2018.sessionItem1Desc' />
+ </p>
+ <p className='conf2018-panel-session'>
+ <b>
+ <FormattedMessage id='conference-2018.sessionItem2Title' />
+ </b>{' '}
+ <FormattedMessage id='conference-2018.sessionItem2Desc' />
+ </p>
+ <p className='conf2018-panel-session'>
+ <b>
+ <FormattedMessage id='conference-2018.sessionItem3Title' />
+ </b>{' '}
+ <FormattedMessage id='conference-2018.sessionItem3Desc' />
+ </p>
+ <p className='conf2018-panel-session'>
+ <b>
+ <FormattedMessage id='conference-2018.sessionItem4Title' />
+ </b>{' '}
+ <FormattedMessage id='conference-2018.sessionItem4Desc' />
+ </p>
+ <p className='conf2018-panel-deadline'>
+ <FormattedMessage id='conference-2018.deadline' />
+ </p>
+ </p>
+ <a className='button mod-2018-panel' href='https://docs.google.com/forms/d/e/1FAIpQLSd7SkuQ-dfW-P3aArSQokK9GkKAUKufTVBHod_ElNIiFE9iBQ/viewform?usp=sf_link'>
+ <FormattedMessage id='conference-2018.proposal' />
+ </a>
+ </section>
+ <section className='conf2018-panel mod-registration'>
+ <FlexRow className='conf2018-panel-title'>
+ <div className='conf2018-panel-title-text'>
+ <h3><FormattedMessage id='conference-2018.registrationTitle' /></h3>
+ </div>
+ </FlexRow>
+ <p className='conf2018-panel-desc'>
+ <FormattedMessage id='conference-2018.registrationEarly' />
+ <br/>
+ <FormattedMessage id='conference-2018.registrationStandard' />
+ </p>
+ </section>
+ <section className='conf2018-panel mod-questions'>
+ <p className='conf2018-panel-desc'>
+ <FormattedMessage
+ id='conference-2018.questions'
+ values={{
+ emailLink: <a href='mailto:conference@scratch.mit.edu'>
+ conference@scratch.mit.edu
+ </a>
+ }}
+ />
+ </p>
+ </section>
+ </div>
+ </div>
+ );
+ }
+});
render(<Page><ConferenceSplash /></Page>, document.getElementById('app'));
diff --git a/src/views/credits/credits.jsx b/src/views/credits/credits.jsx
index 727d60c91..a8b894117 100644
--- a/src/views/credits/credits.jsx
+++ b/src/views/credits/credits.jsx
@@ -1,433 +1,321 @@
-const React = require('react');
-const render = require('../../lib/render.jsx');
-const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
-const FormattedMessage = require('react-intl').FormattedMessage;
+var React = require('react');
+var render = require('../../lib/render.jsx');
+var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
+var FormattedMessage = require('react-intl').FormattedMessage;
-const Page = require('../../components/page/www/page.jsx');
+var Page = require('../../components/page/www/page.jsx');
require('./credits.scss');
-const Credits = () => (
- <div className="inner credits">
- <h1><FormattedMessage id="credits.title" /></h1>
- <h2>MIT Scratch Team</h2>
- <p><FormattedMessage id="credits.developers" /></p>
+var Credits = React.createClass({
+ type: 'Credits',
+ render: function () {
+ return (
+ <div className="inner credits">
+ <h1><FormattedMessage id='credits.title' /></h1>
+ <h2>MIT Scratch Team</h2>
+ <p><FormattedMessage id='credits.developers' /></p>
- <ul>
- <li>
- <img
- alt="Christan Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/2755634_170x170.png"
- />
- <span className="name">Christan Balch</span>
- </li>
+ <ul>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/2755634_170x170.png" alt="Christan Avatar" />
+ <span className="name">Christan Balch</span>
+ </li>
- <li>
- <img
- alt="Carl Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/3581881_170x170.png"
- />
- <span className="name">Carl Bowman</span>
- </li>
-
- <li>
- <img
- alt="Karishma Avatar"
- src="//cdn2.scratch.mit.edu/get_image/user/27383273_60x60.png"
- />
- <span className="name">Karishma Chadha</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/3581881_170x170.png" alt="Carl Avatar" />
+ <span className="name">Carl Bowman</span>
+ </li>
+
+ <li>
+ <img src="//cdn2.scratch.mit.edu/get_image/user/27383273_60x60.png" alt="Karishma Avatar" />
+ <span className="name">Karishma Chadha</span>
+ </li>
- <li>
- <img
- alt="Champika Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/900283_170x170.png"
- />
- <span className="name">Champika Fernando</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/900283_170x170.png" alt="Champika Avatar" />
+ <span className="name">Champika Fernando</span>
+ </li>
- <li>
- <img
- alt="Mark Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/24137617_170x170.png"
- />
- <span className="name">Mark Ferrell</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/24137617_170x170.png" alt="Mark Avatar" />
+ <span className="name">Mark Ferrell</span>
+ </li>
- <li>
- <img
- alt="Chris Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/1494_170x170.png"
- />
- <span className="name">Chris Garrity</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/1494_170x170.png" alt="Chris Avatar" />
+ <span className="name">Chris Garrity</span>
+ </li>
- <li>
- <img
- alt="Colby Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/10866958_170x170.png"
- />
- <span className="name">Colby Gutierrez-Kraybill</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/10866958_170x170.png" alt="Colby Avatar" />
+ <span className="name">Colby Gutierrez-Kraybill</span>
+ </li>
- <li>
- <img
- alt="Paul Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/21986973_170x170.png"
- />
- <span className="name">Paul Kaplan</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/21986973_170x170.png" alt="Paul Avatar" />
+ <span className="name">Paul Kaplan</span>
+ </li>
- <li>
- <img
- alt="DD Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/527836_170x170.png"
- />
- <span className="name">DD Liu</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/527836_170x170.png" alt="DD Avatar" />
+ <span className="name">DD Liu</span>
+ </li>
- <li>
- <img
- alt="Shruti Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/3714374_170x170.png"
- />
- <span className="name">Shruti Mohnot</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/3714374_170x170.png" alt="Shruti Avatar" />
+ <span className="name">Shruti Mohnot</span>
+ </li>
- <li>
- <img
- alt="Sarah Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/246290_170x170.png"
- />
- <span className="name">Sarah Otts</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/246290_170x170.png" alt="Sarah Avatar" />
+ <span className="name">Sarah Otts</span>
+ </li>
- <li>
- <img
- alt="Carmelo Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/2286560_170x170.png"
- />
- <span className="name">Carmelo Presicce</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/2286560_170x170.png" alt="Carmelo Avatar" />
+ <span className="name">Carmelo Presicce</span>
+ </li>
- <li>
- <img
- alt="Tina Avatar"
- src="//cdn2.scratch.mit.edu/get_image/user/25500116_170x170.png"
- />
- <span className="name">Tina Quach</span>
- </li>
+ <li>
+ <img src="//cdn2.scratch.mit.edu/get_image/user/25500116_170x170.png" alt="Tina Avatar" />
+ <span className="name">Tina Quach</span>
+ </li>
- <li>
- <img
- alt="Mitchel Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/167_170x170.png"
- />
- <span className="name">Mitchel Resnick</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/167_170x170.png" alt="Mitchel Avatar" />
+ <span className="name">Mitchel Resnick</span>
+ </li>
- <li>
- <img
- alt="ericr Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/159_170x170.png"
- />
- <span className="name">Eric Rosenbaum</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/159_170x170.png" alt="ericr Avatar" />
+ <span className="name">Eric Rosenbaum</span>
+ </li>
- <li>
- <img
- alt="Natalie Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/169_170x170.png"
- />
- <span className="name">Natalie Rusk</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/169_170x170.png" alt="Natalie Avatar" />
+ <span className="name">Natalie Rusk</span>
+ </li>
- <li>
- <img
- alt="Ray Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/2584924_170x170.png"
- />
- <span className="name">Ray Schamp</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/2584924_170x170.png" alt="Ray Avatar" />
+ <span className="name">Ray Schamp</span>
+ </li>
- <li>
- <img
- alt="Eric Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/3484484_170x170.png"
- />
- <span className="name">Eric Schilling</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/3484484_170x170.png" alt="Eric Avatar" />
+ <span className="name">Eric Schilling</span>
+ </li>
- <li>
- <img
- alt="Andrew Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/1709047_170x170.png"
- />
- <span className="name">Andrew Sliwinski</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/1709047_170x170.png" alt="Andrew Avatar" />
+ <span className="name">Andrew Sliwinski</span>
+ </li>
- <li>
- <img
- alt="Tracy Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/18417774_170x170.png"
- />
- <span className="name">Tracy Tang</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/18417774_170x170.png" alt="Tracy Avatar" />
+ <span className="name">Tracy Tang</span>
+ </li>
- <li>
- <img
- alt="Matthew Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/4373707_170x170.png"
- />
- <span className="name">Matthew Taylor</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/4373707_170x170.png" alt="Matthew Avatar" />
+ <span className="name">Matthew Taylor</span>
+ </li>
- <li>
- <img
- alt="Moran Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/2678986_170x170.png"
- />
- <span className="name">Moran Tsur</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/2678986_170x170.png" alt="Moran Avatar" />
+ <span className="name">Moran Tsur</span>
+ </li>
- <li>
- <img
- alt="Chris Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/3532363_170x170.png"
- />
- <span className="name">Chris Willis-Ford</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/3532363_170x170.png" alt="Chris Avatar" />
+ <span className="name">Chris Willis-Ford</span>
+ </li>
- <li>
- <img
- alt="Julia Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/2796185_170x170.png"
- />
- <span className="name">Julia Zimmerman</span>
- </li>
- </ul>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/2796185_170x170.png" alt="Julia Avatar" />
+ <span className="name">Julia Zimmerman</span>
+ </li>
+ </ul>
- <p><FormattedMessage id="credits.moderators" /></p>
+ <p><FormattedMessage id='credits.moderators' /></p>
- <ul>
- <li>
- <img
- alt="Jolie Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/2496866_170x170.png"
- />
- <span className="name">Jolie Castellucci</span>
- </li>
+ <ul>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/2496866_170x170.png" alt="Jolie Avatar" />
+ <span className="name">Jolie Castellucci</span>
+ </li>
- <li>
- <img
- alt="Ellen Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/24164779_170x170.png"
- />
- <span className="name">Ellen Daoust</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/24164779_170x170.png" alt="Ellen Avatar" />
+ <span className="name">Ellen Daoust</span>
+ </li>
- <li>
- <img
- alt="Linda Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/1048810_170x170.png"
- />
- <span className="name">Linda Fernsel</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/1048810_170x170.png" alt="Linda Avatar" />
+ <span className="name">Linda Fernsel</span>
+ </li>
- <li>
- <img
- alt="Mark Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/49156_170x170.png"
- />
- <span className="name">Mark Goff</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/49156_170x170.png" alt="Mark Avatar" />
+ <span className="name">Mark Goff</span>
+ </li>
- <li>
- <img
- alt="Joel Avatar"
- src="//cdn2.scratch.mit.edu/get_image/user/26249744_60x60.png"
- />
- <span className="name">Joel Gritter</span>
- </li>
+ <li>
+ <img src="//cdn2.scratch.mit.edu/get_image/user/26249744_60x60.png" alt="Joel Avatar" />
+ <span className="name">Joel Gritter</span>
+ </li>
- <li>
- <img
- alt="Carolina Avatar"
- src="//cdn2.scratch.mit.edu/get_image/user/5311910_60x60.png"
- />
- <span className="name">Carolina Kaufman</span>
- </li>
+ <li>
+ <img src="//cdn2.scratch.mit.edu/get_image/user/5311910_60x60.png" alt="Carolina Avatar" />
+ <span className="name">Carolina Kaufman</span>
+ </li>
- <li>
- <img
- alt="Dalton Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/373646_170x170.png"
- />
- <span className="name">Dalton Miner</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/373646_170x170.png" alt="Dalton Avatar" />
+ <span className="name">Dalton Miner</span>
+ </li>
- <li>
- <img
- alt="Franchette Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/159139_170x170.png"
- />
- <span className="name">Franchette Viloria</span>
- </li>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/159139_170x170.png" alt="Franchette Avatar" />
+ <span className="name">Franchette Viloria</span>
+ </li>
- <li>
- <img
- alt="Annie Avatar"
- src="//cdn.scratch.mit.edu/get_image/user/4747093_170x170.png"
- />
- <span className="name">Annie Whitehouse</span>
- </li>
- </ul>
+ <li>
+ <img src="//cdn.scratch.mit.edu/get_image/user/4747093_170x170.png" alt="Annie Avatar" />
+ <span className="name">Annie Whitehouse</span>
+ </li>
+ </ul>
- <h2><FormattedMessage id="credits.previousTitle" /></h2>
- <p>
- <FormattedMessage id="credits.previousBody" />
-
- Ben Berg,
- Amos Blanton,
- Karen Brennan,
- Juanita Buitrago,
- Leo Burd,
- Gaia Carini,
- Kasia Chmielinski,
- Michelle Chung,
- Shane Clements,
- Hannah Cole,
- Sayamindu Dasgupta,
- Margarita Dekoli,
- Evelyn Eastmond,
- Dave Feinberg,
- Chris Graves,
- Megan Haddadi,
- Connor Hudson,
- Christina Huang,
- Tony Hwang,
- Abdulrahman Idlbi,
- Randy Jou,
- Lily Kim,
- Tauntaun Kim,
- Saskia Leggett,
- Tim Mickel,
- Amon Millner,
- Ricarose Roque,
- Andrea Saxman,
- Jay Silver,
- Tammy Stern,
- Lis Sylvan,
- Hanako Tjia,
- Claudia Urrea,
- Oren Zuckerman
- </p>
+ <h2><FormattedMessage id='credits.previousTitle' /></h2>
+ <p><FormattedMessage id='credits.previousBody' />
+
+ Ben Berg,
+ Amos Blanton,
+ Karen Brennan,
+ Juanita Buitrago,
+ Leo Burd,
+ Gaia Carini,
+ Kasia Chmielinski,
+ Michelle Chung,
+ Shane Clements,
+ Hannah Cole,
+ Sayamindu Dasgupta,
+ Margarita Dekoli,
+ Evelyn Eastmond,
+ Dave Feinberg,
+ Chris Graves,
+ Megan Haddadi,
+ Connor Hudson,
+ Christina Huang,
+ Tony Hwang,
+ Abdulrahman Idlbi,
+ Randy Jou,
+ Lily Kim,
+ Tauntaun Kim,
+ Saskia Leggett,
+ Tim Mickel,
+ Amon Millner,
+ Ricarose Roque,
+ Andrea Saxman,
+ Jay Silver,
+ Tammy Stern,
+ Lis Sylvan,
+ Hanako Tjia,
+ Claudia Urrea,
+ Oren Zuckerman
+ </p>
- <h2>
- <FormattedMessage id="credits.partnersTitle" />
- </h2>
- <p>
- <FormattedMessage id="credits.partnersBody" />
- </p>
+ <h2><FormattedMessage id='credits.partnersTitle' /></h2>
+ <p><FormattedMessage id='credits.partnersBody' /></p>
- <h2>
- <FormattedMessage id="credits.researchersTitle" />
- </h2>
- <p>
- <FormattedHTMLMessage id="credits.researchersBody" />
- </p>
+ <h2><FormattedMessage id='credits.researchersTitle' /></h2>
+ <p><FormattedHTMLMessage id='credits.researchersBody' /></p>
- <h2>
- <FormattedMessage id="credits.acknowledgementsTitle" />
- </h2>
- <p>
- <FormattedHTMLMessage id="credits.acknowledgementsContributors" />
-
- Susan Abend, Robbie Berg, Lauren Bessen, Keith Braadfladt, Susan Carillo,
- Will Denton, Nathan Dinsmore, Catherine Feldman, Jodi Finch, Ioana Fineberg,
- JT Galla, Rachel Garber, Chris Garrity, Cassy Gibbs, Brian Harvey,
- Roland Hebert, Tracy Ho, Benjamin Howe, Kapaya Katongo, Evan Karatzas,
- Christine Kim, Joren Lauwers, Mike Lee, Jeff Lieberman, Mark Loughridge,
- Kelly Liu, Anthony Lu, Danny Lutz, David Malan, Wayne Marshall,
- John McIntosh, Paul Medlock-Walton, Dongfang (Tian) Mi, Ximena Miranda,
- Jens Moenig, Evan Moore, Geetha Narayanan, Kate Nazemi, Liddy Nevile,
- Wing Ngan, Derek O'Connell, Tim Radvan, Karen Randall, Ian Reynolds,
- Miriam Ruiz, Chinua Shaw, Ed Shems, Cynthia Solomon, Daniel Strimpel,
- Kilmer Sweazy, John Henry Thompson, Ubong Ukoh, Vladimir Vuksan, Han Xu.
-
- <FormattedHTMLMessage id="credits.acknowledgementsTranslators" />
- </p>
- <p>
- <FormattedMessage id="credits.acknowledgementsCommunity" />
- </p>
- <p>
- <FormattedMessage id="credits.acknowledgementsInfluencers" />
- </p>
- <h2>
- <FormattedMessage id="credits.supportersTitle" />
- </h2>
- <p>
- <FormattedMessage id="credits.supportersFinancialHeader" />
- </p>
- <p>
- <a href="http://www.nsf.gov/">National Science Foundation</a>,
- <a href="http://www.scratchfoundation.org/"> Scratch Foundation</a>,
- <a href="http://www.google.org/"> Google</a>,
- <a href="http://www.legofoundation.com/"> LEGO Foundation</a>,
- <a href="http://www.intel.com/"> Intel</a>,
- <a href="http://www.turner.com/company/"> Cartoon Network</a>,
- <a href="http://www.fundacaolemann.org.br/lemann-foundation/"> Lemann Foundation</a>,
- <a href="https://www.macfound.org/"> MacArthur Foundation</a>.
- </p>
+ <h2><FormattedMessage id='credits.acknowledgementsTitle' /></h2>
+ <p>
+ <FormattedHTMLMessage id='credits.acknowledgementsContributors' />
+
+ Susan Abend, Robbie Berg, Lauren Bessen, Keith Braadfladt, Susan Carillo,
+ Will Denton, Nathan Dinsmore, Catherine Feldman, Jodi Finch, Ioana Fineberg,
+ JT Galla, Rachel Garber, Chris Garrity, Cassy Gibbs, Brian Harvey,
+ Roland Hebert, Tracy Ho, Benjamin Howe, Kapaya Katongo, Evan Karatzas,
+ Christine Kim, Joren Lauwers, Mike Lee, Jeff Lieberman, Mark Loughridge,
+ Kelly Liu, Anthony Lu, Danny Lutz, David Malan, Wayne Marshall,
+ John McIntosh, Paul Medlock-Walton, Dongfang (Tian) Mi, Ximena Miranda,
+ Jens Moenig, Evan Moore, Geetha Narayanan, Kate Nazemi, Liddy Nevile,
+ Wing Ngan, Derek O'Connell, Tim Radvan, Karen Randall, Ian Reynolds,
+ Miriam Ruiz, Chinua Shaw, Ed Shems, Cynthia Solomon, Daniel Strimpel,
+ Kilmer Sweazy, John Henry Thompson, Ubong Ukoh, Vladimir Vuksan, Han Xu.
+
+ <FormattedHTMLMessage id='credits.acknowledgementsTranslators' />
+ </p>
+ <p><FormattedMessage id='credits.acknowledgementsCommunity' /></p>
+ <p><FormattedMessage id='credits.acknowledgementsInfluencers' /></p>
+ <h2><FormattedMessage id='credits.supportersTitle' /></h2>
+ <p><FormattedMessage id='credits.supportersFinancialHeader' /></p>
+ <p>
+ <a href="http://www.nsf.gov/">National Science Foundation</a>,
+ <a href="http://www.scratchfoundation.org/"> Scratch Foundation</a>,
+ <a href="http://www.google.org/"> Google</a>,
+ <a href="http://www.legofoundation.com/"> LEGO Foundation</a>,
+ <a href="http://www.intel.com/"> Intel</a>,
+ <a href="http://www.turner.com/company/"> Cartoon Network</a>,
+ <a href="http://www.fundacaolemann.org.br/lemann-foundation/"> Lemann Foundation</a>,
+ <a href="https://www.macfound.org/"> MacArthur Foundation</a>.
+ </p>
- <p><FormattedMessage id="credits.supportersServicesHeader" /></p>
- <p>
- <a href="http://www.advancedinstaller.com/"> Advanced Installer</a>,
- <a href="http://aws.amazon.com/"> Amazon Web Services</a>,
- <a href="https://codetree.com/"> Codetree</a>,
- <a href="https://www.fastly.com/"> Fastly</a>,
- <a href="https://www.geckoboard.com"> Geckoboard</a>,
- <a href="https://github.com/"> Github</a>,
- <a href="https://www.inversoft.com/"> Inversoft</a>,
- <a href="http://mailchimp.com/"> MailChimp</a>,
- <a href="http://mandrill.com/"> Mandrill</a>,
- <a href="http://newrelic.com/"> New Relic</a>,
- <a href="https://www.pagerduty.com/"> PagerDuty</a>,
- <a href="https://www.pingdom.com/"> Pingdom</a>,
- <a href="https://www.rallydev.com/"> Rally</a>,
- <a href="https://saucelabs.com/"> SauceLabs</a>,
- <a href="https://screenhero.com/"> Screenhero</a>,
- <a href="https://getsentry.com/welcome/"> Sentry</a>,
- <a href="http://www.git-tower.com/"> Tower</a>,
- <a href="https://www.transifex.com/"> Transifex</a>,
- <a href="https://travis-ci.org/"> Travis-CI</a>.
- </p>
+ <p><FormattedMessage id='credits.supportersServicesHeader' /></p>
+ <p>
+ <a href="http://www.advancedinstaller.com/"> Advanced Installer</a>,
+ <a href="http://aws.amazon.com/"> Amazon Web Services</a>,
+ <a href="https://codetree.com/"> Codetree</a>,
+ <a href="https://www.fastly.com/"> Fastly</a>,
+ <a href="https://www.geckoboard.com"> Geckoboard</a>,
+ <a href="https://github.com/"> Github</a>,
+ <a href="https://www.inversoft.com/"> Inversoft</a>,
+ <a href="http://mailchimp.com/"> MailChimp</a>,
+ <a href="http://mandrill.com/"> Mandrill</a>,
+ <a href="http://newrelic.com/"> New Relic</a>,
+ <a href="https://www.pagerduty.com/"> PagerDuty</a>,
+ <a href="https://www.pingdom.com/"> Pingdom</a>,
+ <a href="https://www.rallydev.com/"> Rally</a>,
+ <a href="https://saucelabs.com/"> SauceLabs</a>,
+ <a href="https://screenhero.com/"> Screenhero</a>,
+ <a href="https://getsentry.com/welcome/"> Sentry</a>,
+ <a href="http://www.git-tower.com/"> Tower</a>,
+ <a href="https://www.transifex.com/"> Transifex</a>,
+ <a href="https://travis-ci.org/"> Travis-CI</a>.
+ </p>
- <p><FormattedMessage id="credits.supportersOpenHeader" /></p>
- <p>
- <a href="https://www.djangoproject.com/"> Django</a>,
- <a href="http://djangobb.org/"> DjangoBB</a>,
- <a href="https://www.docker.com/"> Docker</a>,
- <a href="https://www.elastic.co/"> Elasticsearch</a>,
- <a href="http://ganglia.sourceforge.net/"> Ganglia</a>,
- <a href="http://gunicorn.org"> Gunicorn</a>,
- <a href="https://jenkins-ci.org/"> Jenkins</a>,
- <a href="http://www.linux.org/"> Linux</a>,
- <a href="http://memcached.org/"> Memcached</a>,
- <a href="https://www.mediawiki.org/wiki/MediaWiki"> MediaWiki</a>,
- <a href="http://www.mysql.com/"> MySQL</a>,
- <a href="https://www.nagios.org/"> Nagios</a>,
- <a href="https://www.nginx.com/resources/wiki/"> Nginx</a>,
- <a href="https://nodejs.org/en/"> Node.js</a>,
- <a href="http://www.postgresql.org/"> PostgreSQL</a>,
- <a href="https://www.python.org/"> Python</a>,
- <a href="http://redis.io/"> Redis</a>,
- <a href="http://saltstack.com/"> SaltStack</a>,
- <a href="https://github.com/etsy/statsd/"> StatsD</a>,
- <a href="http://www.ubuntu.com/"> Ubuntu</a>,
- <a href="https://www.varnish-cache.org/"> Varnish</a>.
- </p>
- </div>
-);
+ <p><FormattedMessage id='credits.supportersOpenHeader' /></p>
+ <p>
+ <a href="https://www.djangoproject.com/"> Django</a>,
+ <a href="http://djangobb.org/"> DjangoBB</a>,
+ <a href="https://www.docker.com/"> Docker</a>,
+ <a href="https://www.elastic.co/"> Elasticsearch</a>,
+ <a href="http://ganglia.sourceforge.net/"> Ganglia</a>,
+ <a href="http://gunicorn.org"> Gunicorn</a>,
+ <a href="https://jenkins-ci.org/"> Jenkins</a>,
+ <a href="http://www.linux.org/"> Linux</a>,
+ <a href="http://memcached.org/"> Memcached</a>,
+ <a href="https://www.mediawiki.org/wiki/MediaWiki"> MediaWiki</a>,
+ <a href="http://www.mysql.com/"> MySQL</a>,
+ <a href="https://www.nagios.org/"> Nagios</a>,
+ <a href="https://www.nginx.com/resources/wiki/"> Nginx</a>,
+ <a href="https://nodejs.org/en/"> Node.js</a>,
+ <a href="http://www.postgresql.org/"> PostgreSQL</a>,
+ <a href="https://www.python.org/"> Python</a>,
+ <a href="http://redis.io/"> Redis</a>,
+ <a href="http://saltstack.com/"> SaltStack</a>,
+ <a href="https://github.com/etsy/statsd/"> StatsD</a>,
+ <a href="http://www.ubuntu.com/"> Ubuntu</a>,
+ <a href="https://www.varnish-cache.org/"> Varnish</a>.
+ </p>
+ </div>
+ );
+ }
+});
render(<Page><Credits /></Page>, document.getElementById('app'));
+
diff --git a/src/views/developers/developers.jsx b/src/views/developers/developers.jsx
index d49bfecb4..3c569244b 100644
--- a/src/views/developers/developers.jsx
+++ b/src/views/developers/developers.jsx
@@ -1,382 +1,363 @@
-const FormattedMessage = require('react-intl').FormattedMessage;
-const React = require('react');
+var React = require('react');
+var render = require('../../lib/render.jsx');
-const FlexRow = require('../../components/flex-row/flex-row.jsx');
-const SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
-const TitleBanner = require('../../components/title-banner/title-banner.jsx');
+var FormattedMessage = require('react-intl').FormattedMessage;
-const render = require('../../lib/render.jsx');
-const Page = require('../../components/page/www/page.jsx');
+var Page = require('../../components/page/www/page.jsx');
+var FlexRow = require('../../components/flex-row/flex-row.jsx');
+var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
+var TitleBanner = require('../../components/title-banner/title-banner.jsx');
require('./developers.scss');
-const Developers = () => (
- <div className="developers">
- <TitleBanner className="masthead">
- <div className="inner">
- <h1 className="title-banner-h1">
- <FormattedMessage id="developers.title" />
- </h1>
- <p className="title-banner-p intro">
- <FormattedMessage
- id="developers.intro"
- values={{
- introLink: (
- <a href="/info/credits">
- <FormattedMessage id="developers.introLinkText" />
- </a>
- )
- }}
- />
- </p>
- </div>
- <div className="band">
- <SubNavigation className="inner">
- <a href="#projects">
- <li>
- <FormattedMessage id="developers.projectsTitle" />
- </li>
- </a>
- <a href="#principles">
- <li>
- <FormattedMessage id="developers.principlesTitle" />
- </li>
- </a>
- <a href="#join">
- <li>
- <FormattedMessage id="developers.joinTitle" />
- </li>
- </a>
- <a href="#donate">
- <li>
- <FormattedMessage id="developers.donateTitle" />
- </li>
- </a>
- <a href="#partners">
- <li>
- <FormattedMessage id="developers.partnersTitle" />
- </li>
- </a>
- <a href="#faq">
- <li>
- <FormattedMessage id="developers.faqTitle" />
- </li>
- </a>
- </SubNavigation>
- </div>
- </TitleBanner>
+var Developers = React.createClass({
+ type: 'Developers',
+ render: function () {
+ return (
+ <div className="developers">
+ <TitleBanner className="masthead">
+ <div className="inner">
+ <h1 className="title-banner-h1">
+ <FormattedMessage id='developers.title' />
+ </h1>
+ <p className="title-banner-p intro">
+ <FormattedMessage
+ id='developers.intro'
+ values={{
+ introLink: (
+ <a href="/info/credits">
+ <FormattedMessage id='developers.introLinkText' />
+ </a>
+ )
+ }}
+ />
+ </p>
+ </div>
+ <div className="band">
+ <SubNavigation className="inner">
+ <a href="#projects">
+ <li>
+ <FormattedMessage id='developers.projectsTitle' />
+ </li>
+ </a>
+ <a href="#principles">
+ <li>
+ <FormattedMessage id='developers.principlesTitle' />
+ </li>
+ </a>
+ <a href="#join">
+ <li>
+ <FormattedMessage id='developers.joinTitle' />
+ </li>
+ </a>
+ <a href="#donate">
+ <li>
+ <FormattedMessage id='developers.donateTitle' />
+ </li>
+ </a>
+ <a href="#partners">
+ <li>
+ <FormattedMessage id='developers.partnersTitle' />
+ </li>
+ </a>
+ <a href="#faq">
+ <li>
+ <FormattedMessage id='developers.faqTitle' />
+ </li>
+ </a>
+ </SubNavigation>
+ </div>
+ </TitleBanner>
- <div className="inner">
- <section id="projects">
- <span className="nav-spacer" />
- <h2><FormattedMessage id="developers.projectsTitle" /></h2>
- <p className="intro">
- <FormattedMessage id="developers.projectsIntro" />
- </p>
- <FlexRow className="sidebar-row">
- <div className="body-copy column">
- <h3><FormattedMessage id="developers.scratchBlocksTitle" /></h3>
+ <div className="inner">
+ <section id="projects">
+ <span className="nav-spacer"></span>
+ <h2><FormattedMessage id='developers.projectsTitle' /></h2>
+ <p className="intro">
+ <FormattedMessage id='developers.projectsIntro' />
+ </p>
+ <FlexRow className="sidebar-row">
+ <div className="body-copy column">
+ <h3><FormattedMessage id='developers.scratchBlocksTitle' /></h3>
+ <p>
+ <FormattedMessage
+ id='developers.scratchBlocksIntro'
+ values={{
+ blocklyLink: (
+ <a href="https://developers.google.com/blockly/">
+ <FormattedMessage
+ id='developers.scratchBlocksIntroBlocklyLinkText'
+ />
+ </a>
+ ),
+ githubLink: (
+ <a href="https://github.com/LLK/scratch-blocks">
+ <FormattedMessage
+ id='developers.hereLinkText'
+ />
+ </a>
+ )
+ }}
+ />
+ </p>
+ <p>
+ <FormattedMessage id='developers.scratchBlocksBody' />
+ </p>
+ </div>
+ <img className="sidebar column" src="/images/developers/block-sketch.png" alt="blocks" />
+ </FlexRow>
+ <FlexRow className="sidebar-row">
+ <div className="body-copy column">
+ <h3><FormattedMessage id='developers.wwwTitle' /></h3>
+ <p>
+ <FormattedMessage
+ id='developers.wwwIntro'
+ values={{
+ wwwIntroLink: (
+ <a href="https://github.com/LLK/scratch-www">
+ GitHub
+ </a>
+ )
+ }}
+ />
+ </p>
+ </div>
+
+ <img className="sidebar column" src="/images/developers/www-sketch.png" alt="www" />
+ </FlexRow>
+ <FlexRow className="sidebar-row">
+ <div className="body-copy column">
+ <h3>ScratchJr</h3>
+ <p>
+ <FormattedMessage
+ id='developers.jrBody'
+ values={{
+ websiteLink: (
+ <a href="https://www.scratchjr.org">
+ <FormattedMessage id='developers.jrBodyWebsiteLinkText' />
+ </a>
+ ),
+ githubLink: (
+ <a href="https://github.com/LLK/scratchjr">
+ GitHub
+ </a>
+ )
+ }}
+ />
+ </p>
+ </div>
+ </FlexRow>
+ </section>
+
+ <section id="principles">
+ <span className="nav-spacer"></span>
+ <h2><FormattedMessage id='developers.principlesTitle' /></h2>
+ <p className="intro">
+ <FormattedMessage
+ id='developers.principlesIntro'
+ values={{
+ learningPrinciples: (
+ <b><FormattedMessage id='developers.LearningPrinciples' /></b>
+ ),
+ designPrinciples: (
+ <b><FormattedMessage id='developers.DesignPrinciples' /></b>
+ )
+ }}
+ />
+ </p>
+
+ <FlexRow className="sidebar-row">
+ <div className="body-copy column">
+ <h3><FormattedMessage id='developers.LearningPrinciples' /></h3>
+ <dl>
+ <dt><FormattedMessage id='developers.projectsTitle' /></dt>
+ <dd>
+ <FormattedMessage id='developers.learningPrinciplesProjectsBody' />
+ </dd>
+ <dt><FormattedMessage id='developers.learningPrinciplesPassionTitle' /></dt>
+ <dd>
+ <FormattedMessage id='developers.learningPrinciplesPassionBody' />
+ </dd>
+ <dt><FormattedMessage id='developers.learningPrinciplesPeersTitle' /></dt>
+ <dd>
+ <FormattedMessage id='developers.learningPrinciplesPeersBody' />
+ </dd>
+ <dt><FormattedMessage id='developers.learningPrinciplesPlayTitle' /></dt>
+ <dd>
+ <FormattedMessage id='developers.learningPrinciplesPlayBody' />
+ </dd>
+ </dl>
+ </div>
+ </FlexRow>
+
+ <FlexRow className="sidebar-row">
+ <div className="body-copy column">
+ <h3><FormattedMessage id='developers.DesignPrinciples' /></h3>
+ <dl>
+ <dt><FormattedMessage id='developers.designPrinciplesRoomTitle' /></dt>
+ <dd>
+ <FormattedMessage id='developers.designPrinciplesRoomBody' />
+ </dd>
+ <dt><FormattedMessage id='developers.designPrinciplesSimpleTitle' /></dt>
+ <dd>
+ <FormattedMessage id='developers.designPrinciplesSimpleBody' />
+ </dd>
+ <dt><FormattedMessage id='developers.designPrinciplesGlobalTitle' /></dt>
+ <dd>
+ <FormattedMessage id='developers.designPrinciplesGlobalBody' />
+ </dd>
+ <dt><FormattedMessage id='developers.designPrinciplesTinkerTitle' /></dt>
+ <dd>
+ <FormattedMessage id='developers.designPrinciplesTinkerBody' />
+ </dd>
+ </dl>
+ </div>
+ </FlexRow>
+ </section>
+
+ <section id="join">
+ <span className="nav-spacer"></span>
+ <h2><FormattedMessage id='developers.joinTitle' /></h2>
<p>
<FormattedMessage
- id="developers.scratchBlocksIntro"
+ id='developers.joinBody'
values={{
- blocklyLink: (
- <a href="https://developers.google.com/blockly/">
- <FormattedMessage
- id="developers.scratchBlocksIntroBlocklyLinkText"
- />
+ jobsPageLink: (
+ <a href="/jobs">
+ <FormattedMessage id='developers.joinBodyJobsLinkText' />
</a>
),
- githubLink: (
- <a href="https://github.com/LLK/scratch-blocks">
- <FormattedMessage
- id="developers.hereLinkText"
- />
+ emailLink: (
+ <a href="mailto:jobs+developers@scratch.mit.edu">
+ jobs+developers@scratch.mit.edu
</a>
)
}}
/>
</p>
- <p>
- <FormattedMessage id="developers.scratchBlocksBody" />
- </p>
- </div>
- <img
- alt="blocks"
- className="sidebar column"
- src="/images/developers/block-sketch.png"
- />
- </FlexRow>
- <FlexRow className="sidebar-row">
- <div className="body-copy column">
- <h3><FormattedMessage id="developers.wwwTitle" /></h3>
+ </section>
+
+ <section id="donate">
+ <span className="nav-spacer"></span>
+ <h2><FormattedMessage id='developers.donateTitle' /></h2>
<p>
<FormattedMessage
- id="developers.wwwIntro"
+ id='developers.donateIntro'
values={{
- wwwIntroLink: (
- <a href="https://github.com/LLK/scratch-www">
- GitHub
+ donateLink: (
+ <a href="https://secure.donationpay.org/scratchfoundation/">
+ <FormattedMessage id='developers.donateIntroLinkText' />
</a>
)
}}
/>
</p>
- </div>
-
- <img
- alt="www"
- className="sidebar column"
- src="/images/developers/www-sketch.png"
- />
- </FlexRow>
- <FlexRow className="sidebar-row">
- <div className="body-copy column">
- <h3>ScratchJr</h3>
<p>
- <FormattedMessage
- id="developers.jrBody"
- values={{
- websiteLink: (
- <a href="https://www.scratchjr.org">
- <FormattedMessage id="developers.jrBodyWebsiteLinkText" />
- </a>
- ),
- githubLink: (
- <a href="https://github.com/LLK/scratchjr">
- GitHub
- </a>
- )
- }}
- />
+ <FormattedMessage id='developers.donateBody' />
</p>
+ <p>
+ <FormattedMessage id='developers.donateThanks' />
+ </p>
+ </section>
+
+ <section id="partners">
+ <span className="nav-spacer"></span>
+ <h3><FormattedMessage id='developers.partnersTitle' /></h3>
+ <p>
+ <FormattedMessage id='developers.partnersIntro' />
+ </p>
+
+ <FlexRow className="logos">
+ <img className="logo" src="/images/developers/google.png" alt="google" />
+ <img className="logo" src="/images/developers/intel.png" alt="intel" />
+ <img className="logo" src="/images/developers/cn.png" alt="cartoon network" />
+ <img className="logo" src="/images/developers/lemann.png" alt="lemann foundation" />
+ </FlexRow>
+ </section>
+ </div>
+
+ <TitleBanner className="faq-banner">
+ <div className="inner">
+ <section id="faq">
+ <span className="nav-spacer"></span>
+ <h3><FormattedMessage id='developers.faqTitle' /></h3>
+ <FlexRow className="three-col-row">
+ <div className="faq column">
+ <h4><FormattedMessage id='developers.faqAboutTitle' /></h4>
+ <p>
+ <FormattedMessage
+ id='developers.faqAboutBody'
+ values={{
+ llkLink: (
+ <a href="https://www.media.mit.edu/groups/lifelong-kindergarten/overview">
+ <FormattedMessage id='developers.faqAboutBodyLLKLinkText' />
+ </a>
+ ),
+ mitLink: (
+ <a href="http://media.mit.edu/">
+ <FormattedMessage id='developers.faqAboutBodyMITLinkText' />
+ </a>
+ ),
+ aboutLink: (
+ <a href="/about">
+ <FormattedMessage id='developers.hereLinkText' />
+ </a>
+ )
+ }}
+ />
+ </p>
+ </div>
+ <div className="faq column">
+ <h4><FormattedMessage id='developers.faqRulesTitle' /></h4>
+ <p>
+ <FormattedMessage id='developers.faqRulesBody' />
+ </p>
+ </div>
+ <div className="faq column">
+ <h4>
+ <FormattedMessage id='developers.faqNameTitle' />
+ </h4>
+ <p>
+ <FormattedMessage id='developers.faqNameBody' />
+ </p>
+ </div>
+ <div className="faq column">
+ <h4><FormattedMessage id='developers.faqReleasesTitle' /></h4>
+ <p>
+ <FormattedMessage id='developers.faqReleasesBody' />
+ </p>
+ </div>
+ <div className="faq column">
+ <h4><FormattedMessage id='developers.faqDifferencesTitle' /></h4>
+ <p>
+ <FormattedMessage id='developers.faqDifferencesBody' />
+ </p>
+ </div>
+ <div className="faq column">
+ <h4><FormattedMessage id='developers.faqCollabTitle' /></h4>
+ <p>
+ <FormattedMessage
+ id='developers.faqCollabBody'
+ values={{
+ githubLink: (
+ <a href="https://github.com/LLK/">GitHub</a>
+ ),
+ emailLink: (
+ <a href="mailto:help@scratch.mit.edu">
+ help@scratch.mit.edu
+ </a>
+ )
+ }}
+ />
+ </p>
+ </div>
+ </FlexRow>
+ </section>
</div>
- </FlexRow>
- </section>
-
- <section id="principles">
- <span className="nav-spacer" />
- <h2><FormattedMessage id="developers.principlesTitle" /></h2>
- <p className="intro">
- <FormattedMessage
- id="developers.principlesIntro"
- values={{
- learningPrinciples: (
- <b><FormattedMessage id="developers.LearningPrinciples" /></b>
- ),
- designPrinciples: (
- <b><FormattedMessage id="developers.DesignPrinciples" /></b>
- )
- }}
- />
- </p>
-
- <FlexRow className="sidebar-row">
- <div className="body-copy column">
- <h3><FormattedMessage id="developers.LearningPrinciples" /></h3>
- <dl>
- <dt><FormattedMessage id="developers.projectsTitle" /></dt>
- <dd>
- <FormattedMessage id="developers.learningPrinciplesProjectsBody" />
- </dd>
- <dt><FormattedMessage id="developers.learningPrinciplesPassionTitle" /></dt>
- <dd>
- <FormattedMessage id="developers.learningPrinciplesPassionBody" />
- </dd>
- <dt><FormattedMessage id="developers.learningPrinciplesPeersTitle" /></dt>
- <dd>
- <FormattedMessage id="developers.learningPrinciplesPeersBody" />
- </dd>
- <dt><FormattedMessage id="developers.learningPrinciplesPlayTitle" /></dt>
- <dd>
- <FormattedMessage id="developers.learningPrinciplesPlayBody" />
- </dd>
- </dl>
- </div>
- </FlexRow>
-
- <FlexRow className="sidebar-row">
- <div className="body-copy column">
- <h3><FormattedMessage id="developers.DesignPrinciples" /></h3>
- <dl>
- <dt><FormattedMessage id="developers.designPrinciplesRoomTitle" /></dt>
- <dd>
- <FormattedMessage id="developers.designPrinciplesRoomBody" />
- </dd>
- <dt><FormattedMessage id="developers.designPrinciplesSimpleTitle" /></dt>
- <dd>
- <FormattedMessage id="developers.designPrinciplesSimpleBody" />
- </dd>
- <dt><FormattedMessage id="developers.designPrinciplesGlobalTitle" /></dt>
- <dd>
- <FormattedMessage id="developers.designPrinciplesGlobalBody" />
- </dd>
- <dt><FormattedMessage id="developers.designPrinciplesTinkerTitle" /></dt>
- <dd>
- <FormattedMessage id="developers.designPrinciplesTinkerBody" />
- </dd>
- </dl>
- </div>
- </FlexRow>
- </section>
-
- <section id="join">
- <span className="nav-spacer" />
- <h2><FormattedMessage id="developers.joinTitle" /></h2>
- <p>
- <FormattedMessage
- id="developers.joinBody"
- values={{
- jobsPageLink: (
- <a href="/jobs">
- <FormattedMessage id="developers.joinBodyJobsLinkText" />
- </a>
- ),
- emailLink: (
- <a href="mailto:jobs+developers@scratch.mit.edu">
- jobs+developers@scratch.mit.edu
- </a>
- )
- }}
- />
- </p>
- </section>
-
- <section id="donate">
- <span className="nav-spacer" />
- <h2><FormattedMessage id="developers.donateTitle" /></h2>
- <p>
- <FormattedMessage
- id="developers.donateIntro"
- values={{
- donateLink: (
- <a href="https://secure.donationpay.org/scratchfoundation/">
- <FormattedMessage id="developers.donateIntroLinkText" />
- </a>
- )
- }}
- />
- </p>
- <p>
- <FormattedMessage id="developers.donateBody" />
- </p>
- <p>
- <FormattedMessage id="developers.donateThanks" />
- </p>
- </section>
-
- <section id="partners">
- <span className="nav-spacer" />
- <h3><FormattedMessage id="developers.partnersTitle" /></h3>
- <p>
- <FormattedMessage id="developers.partnersIntro" />
- </p>
-
- <FlexRow className="logos">
- <img
- alt="google"
- className="logo"
- src="/images/developers/google.png"
- />
- <img
- alt="intel"
- className="logo"
- src="/images/developers/intel.png"
- />
- <img
- alt="cartoon network"
- className="logo"
- src="/images/developers/cn.png"
- />
- <img
- alt="lemann foundation"
- className="logo"
- src="/images/developers/lemann.png"
- />
- </FlexRow>
- </section>
- </div>
-
- <TitleBanner className="faq-banner">
- <div className="inner">
- <section id="faq">
- <span className="nav-spacer" />
- <h3><FormattedMessage id="developers.faqTitle" /></h3>
- <FlexRow className="three-col-row">
- <div className="faq column">
- <h4><FormattedMessage id="developers.faqAboutTitle" /></h4>
- <p>
- <FormattedMessage
- id="developers.faqAboutBody"
- values={{
- llkLink: (
- <a href="https://www.media.mit.edu/groups/lifelong-kindergarten/overview">
- <FormattedMessage id="developers.faqAboutBodyLLKLinkText" />
- </a>
- ),
- mitLink: (
- <a href="http://media.mit.edu/">
- <FormattedMessage id="developers.faqAboutBodyMITLinkText" />
- </a>
- ),
- aboutLink: (
- <a href="/about">
- <FormattedMessage id="developers.hereLinkText" />
- </a>
- )
- }}
- />
- </p>
- </div>
- <div className="faq column">
- <h4><FormattedMessage id="developers.faqRulesTitle" /></h4>
- <p>
- <FormattedMessage id="developers.faqRulesBody" />
- </p>
- </div>
- <div className="faq column">
- <h4>
- <FormattedMessage id="developers.faqNameTitle" />
- </h4>
- <p>
- <FormattedMessage id="developers.faqNameBody" />
- </p>
- </div>
- <div className="faq column">
- <h4><FormattedMessage id="developers.faqReleasesTitle" /></h4>
- <p>
- <FormattedMessage id="developers.faqReleasesBody" />
- </p>
- </div>
- <div className="faq column">
- <h4><FormattedMessage id="developers.faqDifferencesTitle" /></h4>
- <p>
- <FormattedMessage id="developers.faqDifferencesBody" />
- </p>
- </div>
- <div className="faq column">
- <h4><FormattedMessage id="developers.faqCollabTitle" /></h4>
- <p>
- <FormattedMessage
- id="developers.faqCollabBody"
- values={{
- githubLink: (
- <a href="https://github.com/LLK/">GitHub</a>
- ),
- emailLink: (
- <a href="mailto:help@scratch.mit.edu">
- help@scratch.mit.edu
- </a>
- )
- }}
- />
- </p>
- </div>
- </FlexRow>
- </section>
+ </TitleBanner>
</div>
- </TitleBanner>
- </div>
-);
+ );
+ }
+});
render(<Page><Developers /></Page>, document.getElementById('app'));
diff --git a/src/views/dmca/dmca.jsx b/src/views/dmca/dmca.jsx
index 65ab940e6..9f3bbcd24 100644
--- a/src/views/dmca/dmca.jsx
+++ b/src/views/dmca/dmca.jsx
@@ -1,29 +1,33 @@
-const React = require('react');
-const FormattedMessage = require('react-intl').FormattedMessage;
+var React = require('react');
+var FormattedMessage = require('react-intl').FormattedMessage;
+var render = require('../../lib/render.jsx');
-const Page = require('../../components/page/www/page.jsx');
-const render = require('../../lib/render.jsx');
+var InformationPage = require('../../components/informationpage/informationpage.jsx');
+var Page = require('../../components/page/www/page.jsx');
-const InformationPage = require('../../components/informationpage/informationpage.jsx');
-
-const Dmca = () => (
- <InformationPage title={'DMCA'}>
- <div className="inner info-inner">
- <p><FormattedMessage id="dmca.intro" /></p>
- <p>
- Copyright Agent / Mitchel Resnick<br />
- MIT Media Laboratory<br />
- 77 Massachusetts Ave<br />
- Room E14-445A<br />
- Cambridge, MA 02139<br />
- Tel: (617) 253-9783
- </p>
- <p><FormattedMessage id="dmca.llkresponse" /></p>
- <p><FormattedMessage id="dmca.assessment" /></p>
- <p><FormattedMessage id="dmca.eyetoeye" /></p>
- <p><FormattedMessage id="dmca.afterfiling" /></p>
- </div>
- </InformationPage>
-);
+var Dmca = React.createClass({
+ type: 'Dmca',
+ render: function () {
+ return (
+ <InformationPage title={'DMCA'}>
+ <div className="inner info-inner">
+ <p><FormattedMessage id='dmca.intro' /></p>
+ <p>
+ Copyright Agent / Mitchel Resnick<br/>
+ MIT Media Laboratory<br/>
+ 77 Massachusetts Ave<br/>
+ Room E14-445A<br/>
+ Cambridge, MA 02139<br/>
+ Tel: (617) 253-9783
+ </p>
+ <p><FormattedMessage id='dmca.llkresponse' /></p>
+ <p><FormattedMessage id='dmca.assessment' /></p>
+ <p><FormattedMessage id='dmca.eyetoeye' /></p>
+ <p><FormattedMessage id='dmca.afterfiling' /></p>
+ </div>
+ </InformationPage>
+ );
+ }
+});
render(<Page><Dmca /></Page>, document.getElementById('app'));
diff --git a/src/views/download/download.jsx b/src/views/download/download.jsx
index 1a9b905bd..e607512fa 100644
--- a/src/views/download/download.jsx
+++ b/src/views/download/download.jsx
@@ -1,62 +1,59 @@
-const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
-const FormattedMessage = require('react-intl').FormattedMessage;
-const injectIntl = require('react-intl').injectIntl;
-const intlShape = require('react-intl').intlShape;
-const React = require('react');
+var React = require('react');
+var render = require('../../lib/render.jsx');
-const api = require('../../lib/api');
-const FlexRow = require('../../components/flex-row/flex-row.jsx');
-const SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
-const TitleBanner = require('../../components/title-banner/title-banner.jsx');
+var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
+var FormattedMessage = require('react-intl').FormattedMessage;
+var injectIntl = require('react-intl').injectIntl;
-const Page = require('../../components/page/www/page.jsx');
-const render = require('../../lib/render.jsx');
+var api = require('../../lib/api');
+var Page = require('../../components/page/www/page.jsx');
+var TitleBanner = require('../../components/title-banner/title-banner.jsx');
+var FlexRow = require('../../components/flex-row/flex-row.jsx');
+var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
require('./download.scss');
require('../../components/forms/button.scss');
-class Download extends React.Component {
- constructor (props) {
- super(props);
- this.state = {
+var Download = injectIntl(React.createClass({
+ type: 'Download',
+ getInitialState: function () {
+ return {
swfVersion: ''
};
- }
- componentDidMount () {
- let uri = '/scratchr2/static/sa/version.xml';
+ },
+ componentDidMount: function () {
+ var uri = '/scratchr2/static/sa/version.xml';
if (this.props.intl.locale === 'pt-br') {
uri = '/scratchr2/static/sa/pt-br/version.xml';
}
-
api({
host: '',
uri: uri,
responseType: 'string'
- }, (err, body, res) => {
+ }, function (err, body, res) {
if (err || res.statusCode >= 400) {
return this.setState({
swfVersion: -1
});
}
- const doc = new DOMParser().parseFromString(body, 'text/xml');
+ var doc = new DOMParser().parseFromString(body, 'text/xml');
return this.setState({
swfVersion: doc.getElementsByTagName('versionNumber')[0].childNodes[0].nodeValue
});
- });
- }
- render () {
- let downloadPath = '/scratchr2/static/sa/Scratch-';
- let downloadUrls = null;
+ }.bind(this));
+ },
+ render: function () {
+ var downloadPath = '/scratchr2/static/sa/Scratch-';
if (this.props.intl.locale === 'pt-br') {
downloadPath = '/scratchr2/static/sa/pt-br/Scratch-';
}
if (this.state.swfVersion.length > 0 && this.state.swfVersion !== -1) {
- downloadUrls = {
- mac: `${downloadPath}${this.state.swfVersion}.dmg`,
- mac105: `${downloadPath}${this.state.swfVersion}.air`,
- windows: `${downloadPath}${this.state.swfVersion}.exe`,
- linux: `${downloadPath}${this.state.swfVersion}.air`
+ var downloadUrls = {
+ mac: downloadPath + this.state.swfVersion + '.dmg',
+ mac105: downloadPath + this.state.swfVersion + '.air',
+ windows: downloadPath + this.state.swfVersion + '.exe',
+ linux: downloadPath + this.state.swfVersion + '.air'
};
}
@@ -65,88 +62,73 @@ class Download extends React.Component {
<TitleBanner className="masthead">
<div className="inner">
<h1 className="title-banner-h1">
- <FormattedMessage id="download.title" />
+ <FormattedMessage id='download.title' />
</h1>
<p className="title-banner-p intro">
- <FormattedMessage id="download.intro" />
+ <FormattedMessage id='download.intro' />
</p>
</div>
<div className="band">
<SubNavigation className="inner">
- <a
- className="sub-nav-item"
- href="#installation"
- >
+ <a href="#installation" className="sub-nav-item">
<li>
- <FormattedMessage id="download.installation" />
+ <FormattedMessage id='download.installation' />
</li>
</a>
- <a
- className="sub-nav-item"
- href="#updates"
- >
+ <a href="#updates" className="sub-nav-item">
<li>
- <FormattedMessage id="download.updatesTitle" />
+ <FormattedMessage id='download.updatesTitle' />
</li>
</a>
- <a
- className="sub-nav-item"
- href="#other"
- >
+ <a href="#other" className="sub-nav-item">
<li>
- <FormattedMessage id="download.otherVersionsTitle" />
+ <FormattedMessage id='download.otherVersionsTitle' />
</li>
</a>
- <a
- className="sub-nav-item"
- href="#issues"
- >
+ <a href="#issues" className="sub-nav-item">
<li>
- <FormattedMessage id="download.knownIssuesTitle" />
+ <FormattedMessage id='download.knownIssuesTitle' />
</li>
</a>
</SubNavigation>
</div>
</TitleBanner>
<div className="download-content">
- <section
- className="installation"
- id="installation"
- >
+ <section id="installation" className="installation">
<div className="inner">
<p className="callout">
- <FormattedHTMLMessage id="download.introMac" />
+ <FormattedHTMLMessage id='download.introMac' />
</p>
<FlexRow className="three-col-row">
<div className="installation-column">
<div className="installation-column-number">
<h2 className="installation-column-number-text">{'1'}</h2>
</div>
- <h3><FormattedMessage id="download.airTitle" /></h3>
- <p><FormattedHTMLMessage id="download.airBody" /></p>
+ <h3><FormattedMessage id='download.airTitle' /></h3>
+ <p><FormattedHTMLMessage id='download.airBody' /></p>
<ul className="installation-downloads">
<li className="installation-downloads-item">
- <FormattedMessage id="download.macOSX" /> -
+ <FormattedMessage id='download.macOSX' /> -
{' '}<a href="http://get.adobe.com/air/">
- <FormattedMessage id="download.download" />
+ <FormattedMessage id='download.download' />
</a>
</li>
<li className="installation-downloads-item">
- <FormattedMessage id="download.macOlder" /> -
+ <FormattedMessage id='download.macOlder' /> -
{' '}<a href="http://airdownload.adobe.com/air/mac/download/2.6/AdobeAIR.zip">
- <FormattedMessage id="download.download" />
+ <FormattedMessage id='download.download' />
</a>
</li>
<li className="installation-downloads-item">
- <FormattedMessage id="download.windows" /> -
+ <FormattedMessage id='download.windows' /> -
{' '}<a href="http://get.adobe.com/air/">
- <FormattedMessage id="download.download" />
+ <FormattedMessage id='download.download' />
</a>
</li>
<li className="installation-downloads-item">
- <FormattedMessage id="download.linux" /> -
+ <FormattedMessage id='download.linux' /> -
{' '}<a href="http://airdownload.adobe.com/air/lin/download/2.6/AdobeAIRInstaller.bin">
- <FormattedMessage id="download.download" />
+ <FormattedMessage id='download.download' />
</a>
</li>
</ul>
@@ -155,68 +137,63 @@ class Download extends React.Component {
<div className="installation-column-number">
<h2 className="installation-column-number-text">{'2'}</h2>
</div>
- <h3><FormattedMessage id="download.offlineEditorTitle" /></h3>
- <p><FormattedMessage id="download.offlineEditorBody" /></p>
- {downloadUrls === null ? [] : [
- <ul
- className="installation-downloads"
- key="installation-downloads"
- >
+ <h3><FormattedMessage id='download.offlineEditorTitle' /></h3>
+ <p><FormattedMessage id='download.offlineEditorBody' /></p>
+ {downloadUrls ? [
+ <ul className="installation-downloads">
<li className="installation-downloads-item">
- <FormattedMessage id="download.macOSX" /> -
+ <FormattedMessage id='download.macOSX' /> -
{' '}<a href={downloadUrls.mac}>
- <FormattedMessage id="download.download" />
+ <FormattedMessage id='download.download' />
</a>
</li>
<li className="installation-downloads-item">
- <FormattedMessage id="download.macOlder" /> -
+ <FormattedMessage id='download.macOlder' /> -
{' '}<a href={downloadUrls.mac105}>
- <FormattedMessage id="download.download" />
+ <FormattedMessage id='download.download' />
</a>
</li>
<li className="installation-downloads-item">
- <FormattedMessage id="download.windows" /> -
+ <FormattedMessage id='download.windows' /> -
{' '}<a href={downloadUrls.windows}>
- <FormattedMessage id="download.download" />
+ <FormattedMessage id='download.download' />
</a>
</li>
<li className="installation-downloads-item">
- <FormattedMessage id="download.linux" /> -
+ <FormattedMessage id='download.linux' /> -
{' '}<a href={downloadUrls.linux}>
- <FormattedMessage id="download.download" />
+ <FormattedMessage id='download.download' />
</a>
</li>
</ul>
- ]}
+ ] : []}
{this.state.swfVersion === -1 ? [
- <p key="not-available">
- <i><FormattedMessage id="download.notAvailable" /></i>
- </p>
+ <p><i><FormattedMessage id='download.notAvailable' /></i></p>
] : []}
</div>
<div className="installation-column">
<div className="installation-column-number">
<h2 className="installation-column-number-text">{'3'}</h2>
</div>
- <h3><FormattedMessage id="download.supportMaterialsTitle" /></h3>
- <p><FormattedMessage id="download.supportMaterialsBody" /></p>
+ <h3><FormattedMessage id='download.supportMaterialsTitle' /></h3>
+ <p><FormattedMessage id='download.supportMaterialsBody' /></p>
<ul className="installation-downloads">
<li className="installation-downloads-item">
- <FormattedMessage id="download.starterProjects" /> -
+ <FormattedMessage id='download.starterProjects' /> -
{' '}<a href="https://scratch.mit.edu/scratchr2/static/sa/Scratch2StarterProjects.zip">
- <FormattedMessage id="download.download" />
+ <FormattedMessage id='download.download' />
</a>
</li>
<li className="installation-downloads-item">
- <FormattedMessage id="download.gettingStarted" /> -
+ <FormattedMessage id='download.gettingStarted' /> -
{' '}<a href="https://cdn.scratch.mit.edu/scratchr2/static/__709da8e5f3d72129538a4ccdbcbf5f2a__/pdfs/help/Getting-Started-Guide-Scratch2.pdf">
- <FormattedMessage id="download.download" />
+ <FormattedMessage id='download.download' />
</a>
</li>
<li className="installation-downloads-item">
- <FormattedMessage id="download.scratchCards" /> -
+ <FormattedMessage id='download.scratchCards' /> -
{' '}<a href="https://cdn.scratch.mit.edu/scratchr2/static/__709da8e5f3d72129538a4ccdbcbf5f2a__/pdfs/help/Scratch2Cards.pdf">
- <FormattedMessage id="download.download" />
+ <FormattedMessage id='download.download' />
</a>
</li>
</ul>
@@ -226,40 +203,37 @@ class Download extends React.Component {
</section>
<div className="inner">
<section id="updates">
- <span className="nav-spacer" />
- <h2><FormattedMessage id="download.updatesTitle" /></h2>
- <p><FormattedMessage id="download.updatesBody" /></p>
- {this.state.swfVersion === -1 ? [] : [
- <p key="current-version">
+ <span className="nav-spacer"></span>
+ <h2><FormattedMessage id='download.updatesTitle' /></h2>
+ <p><FormattedMessage id='download.updatesBody' /></p>
+ {this.state.swfVersion !== -1 ? [
+ <p>
<FormattedMessage
- id="download.currentVersion"
+ id='download.currentVersion'
values={{
version: this.state.swfVersion
}}
/>
</p>
- ]}
+ ] : []}
</section>
<section id="other">
- <span className="nav-spacer" />
- <h2><FormattedMessage id="download.otherVersionsTitle" /></h2>
- <p><FormattedHTMLMessage id="download.otherVersionsOlder" /></p>
- <p><FormattedHTMLMessage id="download.otherVersionsAdmin" /></p>
+ <span className="nav-spacer"></span>
+ <h2><FormattedMessage id='download.otherVersionsTitle' /></h2>
+ <p><FormattedHTMLMessage id='download.otherVersionsOlder' /></p>
+ <p><FormattedHTMLMessage id='download.otherVersionsAdmin' /></p>
</section>
<section id="issues">
- <span className="nav-spacer" />
- <h2><FormattedMessage id="download.knownIssuesTitle" /></h2>
- <p><FormattedMessage id="download.knownIssuesOne" /></p>
- <p><FormattedMessage id="download.knownIssuesTwo" /></p>
- <p><FormattedHTMLMessage id="download.knownIssuesThree" /></p>
- <p><FormattedMessage id="download.knownIssuesFour" /></p>
- <a
- className="button mod-link"
- href="https://scratch.mit.edu/discuss/3/"
- >
- <FormattedMessage id="download.reportBugs" />
+ <span className="nav-spacer"></span>
+ <h2><FormattedMessage id='download.knownIssuesTitle' /></h2>
+ <p><FormattedMessage id='download.knownIssuesOne' /></p>
+ <p><FormattedMessage id='download.knownIssuesTwo' /></p>
+ <p><FormattedHTMLMessage id='download.knownIssuesThree' /></p>
+ <p><FormattedMessage id='download.knownIssuesFour' /></p>
+ <a href="https://scratch.mit.edu/discuss/3/" className='button mod-link'>
+ <FormattedMessage id='download.reportBugs' />
</a>
</section>
</div>
@@ -267,12 +241,6 @@ class Download extends React.Component {
</div>
);
}
-}
+}));
-Download.propTypes = {
- intl: intlShape
-};
-
-const WrappedDownload = injectIntl(Download);
-
-render(<Page><WrappedDownload /></Page>, document.getElementById('app'));
+render(<Page><Download /></Page>, document.getElementById('app'));
diff --git a/src/views/explore/explore.jsx b/src/views/explore/explore.jsx
index d8621e0be..1c6ac3ca0 100644
--- a/src/views/explore/explore.jsx
+++ b/src/views/explore/explore.jsx
@@ -1,45 +1,27 @@
-const bindAll = require('lodash.bindall');
-const classNames = require('classnames');
-const injectIntl = require('react-intl').injectIntl;
-const intlShape = require('react-intl').intlShape;
-const FormattedMessage = require('react-intl').FormattedMessage;
-const React = require('react');
-const render = require('../../lib/render.jsx');
+var classNames = require('classnames');
+var injectIntl = require('react-intl').injectIntl;
+var FormattedMessage = require('react-intl').FormattedMessage;
+var React = require('react');
+var render = require('../../lib/render.jsx');
-const api = require('../../lib/api');
+var api = require('../../lib/api');
-const Page = require('../../components/page/www/page.jsx');
-const Tabs = require('../../components/tabs/tabs.jsx');
-const TitleBanner = require('../../components/title-banner/title-banner.jsx');
-const Button = require('../../components/forms/button.jsx');
-const Form = require('../../components/forms/form.jsx');
-const Select = require('../../components/forms/select.jsx');
-const SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
-const Grid = require('../../components/grid/grid.jsx');
+var Page = require('../../components/page/www/page.jsx');
+var Tabs = require('../../components/tabs/tabs.jsx');
+var TitleBanner = require('../../components/title-banner/title-banner.jsx');
+var Button = require('../../components/forms/button.jsx');
+var Form = require('../../components/forms/form.jsx');
+var Select = require('../../components/forms/select.jsx');
+var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
+var Grid = require('../../components/grid/grid.jsx');
require('./explore.scss');
-class Explore extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'getExploreState',
- 'handleGetExploreMore',
- 'changeItemType',
- 'handleChangeSortMode',
- 'getBubble',
- 'getTab'
- ]);
-
- this.state = this.getExploreState();
- this.state.loaded = [];
- this.state.offset = 0;
- }
- componentDidMount () {
- this.handleGetExploreMore();
- }
- getExploreState () {
- const categoryOptions = {
+// @todo migrate to React-Router once available
+var Explore = injectIntl(React.createClass({
+ type: 'Explore',
+ getDefaultProps: function () {
+ var categoryOptions = {
all: '*',
animations: 'animations',
art: 'art',
@@ -48,22 +30,21 @@ class Explore extends React.Component {
stories: 'stories',
tutorials: 'tutorial'
};
- const typeOptions = ['projects', 'studios'];
- const modeOptions = ['trending', 'popular', 'recent', ''];
+ var typeOptions = ['projects','studios'];
+ var modeOptions = ['trending', 'popular', 'recent', ''];
- let pathname = window.location.pathname.toLowerCase();
+ var pathname = window.location.pathname.toLowerCase();
if (pathname[pathname.length - 1] === '/') {
pathname = pathname.substring(0, pathname.length - 1);
}
-
- const options = pathname.split('/');
- const type = options[2];
- const currentCategory = options[3];
- const currentMode = options.length > 4 ? options[4] : '';
+ var options = pathname.split('/');
+ var type = options[2];
+ var currentCategory = options[3];
+ var currentMode = options.length > 4 ? options[4] : '';
if (Object.keys(categoryOptions).indexOf(currentCategory) === -1 ||
typeOptions.indexOf(type) === -1 ||
modeOptions.indexOf(currentMode) === -1){
- window.location = `${window.location.origin}/explore/projects/all/`;
+ window.location = window.location.origin + '/explore/projects/all/';
}
return {
@@ -75,88 +56,89 @@ class Explore extends React.Component {
mode: currentMode,
loadNumber: 16
};
- }
- handleGetExploreMore () {
- const qText = `&q=${this.state.acceptableTabs[this.state.category]}` || '*';
- const mode = `&mode=${(this.state.mode ? this.state.mode : 'trending')}`;
- const locale = this.props.intl.locale;
- const queryString =
- `limit=${this.state.loadNumber}&offset=${this.state.offset}&language=${locale}${mode}${qText}`;
+ },
+ getInitialState: function () {
+ return {
+ loaded: [],
+ offset: 0
+ };
+ },
+ componentDidMount: function () {
+ this.getExploreMore();
+ },
+ getExploreMore: function () {
+ var qText = '&q=' + this.props.acceptableTabs[this.props.category] || '*';
api({
- uri: `/explore/${this.state.itemType}?${queryString}`
- }, (err, body) => {
+ uri: '/explore/' + this.props.itemType +
+ '?limit=' + this.props.loadNumber +
+ '&offset=' + this.state.offset +
+ '&language=' + this.props.intl.locale +
+ '&mode=' + (this.props.mode ? this.props.mode : 'trending') +
+ qText
+ }, function (err, body) {
if (!err) {
- const loadedSoFar = this.state.loaded;
- Array.prototype.push.apply(loadedSoFar, body);
+ var loadedSoFar = this.state.loaded;
+ Array.prototype.push.apply(loadedSoFar,body);
this.setState({loaded: loadedSoFar});
- const currentOffset = this.state.offset + this.state.loadNumber;
+ var currentOffset = this.state.offset + this.props.loadNumber;
this.setState({offset: currentOffset});
}
- });
- }
- changeItemType () {
- let newType;
- for (const t of this.state.acceptableTypes) {
- if (this.state.itemType !== t) {
+ }.bind(this));
+ },
+ changeItemType: function () {
+ var newType;
+ for (var t in this.props.acceptableTypes) {
+ if (this.props.itemType !== t) {
newType = t;
break;
}
}
- window.location = `${window.location.origin}/explore/${newType}/${this.state.tab}/${this.state.mode}`;
- }
- handleChangeSortMode (name, value) {
- if (this.state.acceptableModes.indexOf(value) !== -1) {
- window.location =
- `${window.location.origin}/explore/${this.state.itemType}/${this.state.category}/${value}`;
+ window.location = window.location.origin + '/explore/' + newType + '/' + this.props.tab + '/' + this.props.mode;
+ },
+ changeSortMode: function (name, value) {
+ if (this.props.acceptableModes.indexOf(value) !== -1) {
+ window.location = window.location.origin + '/explore/' +
+ this.props.itemType + '/' + this.props.category + '/' + value;
}
- }
- getBubble (type) {
- const classes = classNames({
- active: (this.state.category === type)
+ },
+ getBubble: function (type) {
+ var classes = classNames({
+ active: (this.props.category === type)
});
return (
- <a href={`/explore/${this.state.itemType}/${type}/${this.state.mode}`}>
+ <a href={'/explore/' + this.props.itemType + '/' + type + '/' + this.props.mode}>
<li className={classes}>
- <FormattedMessage id={`general.${type}`} />
+ <FormattedMessage id={'general.' + type} />
</li>
</a>
);
- }
- getTab (type) {
- const classes = classNames({
- active: (this.state.itemType === type)
+ },
+ getTab: function (type) {
+ var classes = classNames({
+ active: (this.props.itemType === type)
});
return (
- <a href={`/explore/${type}/${this.state.category}/${this.state.mode}`}>
+ <a href={'/explore/' + type + '/' + this.props.category + '/' + this.props.mode}>
<li className={classes}>
- {this.state.itemType === type ? [
- <img
- className={`tab-icon ${type}`}
- key={`tab-${type}`}
- src={`/svgs/tabs/${type}-active.svg`}
- />
+ {this.props.itemType === type ? [
+ <img src={'/svgs/tabs/' + type + '-active.svg'} className={'tab-icon ' + type} />
] : [
- <img
- className={`tab-icon ${type}`}
- key={`tab-${type}`}
- src={`/svgs/tabs/${type}-inactive.svg`}
- />
+ <img src={'/svgs/tabs/' + type + '-inactive.svg'} className={'tab-icon ' + type} />
]}
- <FormattedMessage id={`general.${type}`} />
+ <FormattedMessage id={'general.' + type} />
</li>
</a>
);
- }
- render () {
+ },
+ render: function () {
+
return (
<div>
- <div className="outer">
+ <div className='outer'>
<TitleBanner className="masthead">
<div className="inner">
- <h1 className="title-banner-h1">
- <FormattedMessage id="general.explore" />
- </h1>
+ <h1 className="title-banner-h1"><FormattedMessage id='general.explore' /></h1>
</div>
</TitleBanner>
<Tabs>
@@ -164,7 +146,7 @@ class Explore extends React.Component {
{this.getTab('studios')}
</Tabs>
<div className="sort-controls">
- <SubNavigation className="categories">
+ <SubNavigation className='categories'>
{this.getBubble('all')}
{this.getBubble('animations')}
{this.getBubble('art')}
@@ -173,46 +155,27 @@ class Explore extends React.Component {
{this.getBubble('stories')}
{this.getBubble('tutorials')}
</SubNavigation>
- <Form className="sort-mode">
- <Select
- name="sort"
- options={[
- {
- value: 'trending',
- label: this.props.intl.formatMessage({id: 'explore.trending'})
- },
- {
- value: 'popular',
- label: this.props.intl.formatMessage({id: 'explore.popular'})
- },
- {
- value: 'recent',
- label: this.props.intl.formatMessage({id: 'explore.recent'})
- }
- ]}
- value={this.state.mode}
- onChange={this.handleChangeSortMode}
- />
+ <Form className='sort-mode'>
+ <Select name="sort"
+ options={[
+ {value: 'trending', label: <FormattedMessage id='explore.trending' />},
+ {value: 'popular', label: <FormattedMessage id='explore.popular' />},
+ {value: 'recent', label: <FormattedMessage id='explore.recent' />}
+ ]}
+ value={this.props.mode}
+ onChange={this.changeSortMode}/>
</Form>
</div>
- <div
- id="projectBox"
- key="projectBox"
- >
- <Grid
- cards
- showAvatar
- itemType={this.state.itemType}
- items={this.state.loaded}
- showFavorites={false}
- showLoves={false}
- showViews={false}
- />
- <Button
- className="white"
- onClick={this.handleGetExploreMore}
- >
- <FormattedMessage id="general.loadMore" />
+ <div id='projectBox' key='projectBox'>
+ <Grid items={this.state.loaded}
+ itemType={this.props.itemType}
+ cards={true}
+ showLoves={false}
+ showFavorites={false}
+ showViews={false}
+ showAvatar={true}/>
+ <Button onClick={this.getExploreMore} className="white">
+ <FormattedMessage id='general.loadMore' />
</Button>
</div>
</div>
@@ -220,12 +183,6 @@ class Explore extends React.Component {
);
}
-}
+}));
-Explore.propTypes = {
- intl: intlShape
-};
-
-const WrappedExplore = injectIntl(Explore);
-
-render(<Page><WrappedExplore /></Page>, document.getElementById('app'));
+render(<Page><Explore /></Page>, document.getElementById('app'));
diff --git a/src/views/faq/faq.jsx b/src/views/faq/faq.jsx
index d24160e7a..b11adaa5f 100644
--- a/src/views/faq/faq.jsx
+++ b/src/views/faq/faq.jsx
@@ -1,223 +1,223 @@
-const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
-const FormattedMessage = require('react-intl').FormattedMessage;
-const injectIntl = require('react-intl').injectIntl;
-const intlShape = require('react-intl').intlShape;
-const React = require('react');
+var React = require('react');
+var injectIntl = require('react-intl').injectIntl;
+var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
+var FormattedMessage = require('react-intl').FormattedMessage;
+var render = require('../../lib/render.jsx');
-const Page = require('../../components/page/www/page.jsx');
-const render = require('../../lib/render.jsx');
+var Page = require('../../components/page/www/page.jsx');
+var InformationPage = require('../../components/informationpage/informationpage.jsx');
-const InformationPage = require('../../components/informationpage/informationpage.jsx');
+var Faq = injectIntl(React.createClass({
+ type: 'Faq',
+ render: function () {
+ var formatMessage = this.props.intl.formatMessage;
+ return (
+ <InformationPage title={formatMessage({id: 'faq.title'})}>
+ <div className="inner info-inner">
+ <section id="about-scratch">
+ <span className="nav-spacer"></span>
+ <h2><FormattedMessage id='faq.aboutTitle' /></h2>
+ <dl>
+ <dt><FormattedMessage id='faq.aboutScratchTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.aboutScratchBody' /></dd>
-const Faq = injectIntl(props => (
- <InformationPage title={props.intl.formatMessage({id: 'faq.title'})}>
- <div className="inner info-inner">
- <section id="about-scratch">
- <span className="nav-spacer" />
- <h2><FormattedMessage id="faq.aboutTitle" /></h2>
- <dl>
- <dt><FormattedMessage id="faq.aboutScratchTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.aboutScratchBody" /></dd>
+ <dt><FormattedMessage id='faq.makeGameTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.makeGameBody' /></dd>
- <dt><FormattedMessage id="faq.makeGameTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.makeGameBody" /></dd>
+ <dt><FormattedMessage id='faq.requirementsTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.requirementsBody' /></dd>
- <dt><FormattedMessage id="faq.requirementsTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.requirementsBody" /></dd>
+ <dt><FormattedMessage id='faq.offlineTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.offlineBody' /></dd>
- <dt><FormattedMessage id="faq.offlineTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.offlineBody" /></dd>
+ <dt><FormattedMessage id='faq.uploadOldTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.uploadOldBody' /></dd>
- <dt><FormattedMessage id="faq.uploadOldTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.uploadOldBody" /></dd>
+ <dt><FormattedMessage id='faq.recordVideoTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.recordVideoBody' /></dd>
- <dt><FormattedMessage id="faq.recordVideoTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.recordVideoBody" /></dd>
+ <dt><FormattedMessage id='faq.scratchCostTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.scratchCostBody' /></dd>
- <dt><FormattedMessage id="faq.scratchCostTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.scratchCostBody" /></dd>
-
- <dt><FormattedMessage id="faq.mediaLabTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.mediaLabBody" /></dd>
- </dl>
- </section>
- <section id="privacy">
- <span className="nav-spacer" />
- <h2><FormattedMessage id="faq.privacyTitle" /></h2>
- <dl>
- <dt><FormattedMessage id="faq.accountInfoTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.accountInfoList" /></dd>
- <ul>
- <li><FormattedHTMLMessage id="faq.privacyUsername" /></li>
- <li><FormattedHTMLMessage id="faq.privacyCountry" /></li>
- <li><FormattedHTMLMessage id="faq.privacyBirthdate" /></li>
- <li><FormattedHTMLMessage id="faq.privacyGender" /></li>
- <li><FormattedHTMLMessage id="faq.privacyEmail" /></li>
- </ul>
- <dd><FormattedHTMLMessage id="faq.accountPublicInfo" /></dd>
- <dt><FormattedMessage id="faq.dataCollectionTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.dataCollectionOne" /></dd>
- <dt><FormattedMessage id="faq.rentInfoTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.rentInfoBody" /></dd>
- <dt><FormattedMessage id="faq.viewUnsharedTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.viewUnsharedBody" /></dd>
- </dl>
- </section>
- <section id="remix">
- <span className="nav-spacer" />
- <h2><FormattedMessage id="faq.remixTitle" /></h2>
- <dl>
- <dt><FormattedMessage id="faq.remixDefinitionTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.remixDefinitionBody" /></dd>
- <dt><FormattedMessage id="faq.remixableTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.remixableBody" /></dd>
- <dt><FormattedMessage id="faq.creativeCommonsTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.creativeCommonsBody" /></dd>
- <dt><FormattedMessage id="faq.fairUseTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.fairUseBody" /></dd>
- </dl>
- </section>
- <section id="accounts">
- <span className="nav-spacer" />
- <h2><FormattedMessage id="faq.accountsTitle" /></h2>
- <dl>
- <dt><FormattedMessage id="faq.confirmedAccountTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.confirmedAccountBody" /></dd>
- <dt><FormattedMessage id="faq.checkConfirmedTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.checkConfirmedBody" /></dd>
- <dt><FormattedMessage id="faq.howToConfirmTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.howToConfirmBody" /></dd>
- <dt><FormattedMessage id="faq.requireConfirmTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.requireConfirmBody" /></dd>
- <dt><FormattedMessage id="faq.forgotPasswordTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.forgotPasswordBody" /></dd>
- <dt><FormattedMessage id="faq.changePasswordTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.changePasswordBody" /></dd>
- <dt><FormattedMessage id="faq.changeEmailTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.changeEmailBody" /></dd>
- <dt><FormattedMessage id="faq.newScratcherTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.newScratcherBody" /></dd>
- <dt><FormattedMessage id="faq.multipleAccountTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.multipleAccountBody" /></dd>
- <dt><FormattedMessage id="faq.multipleLoginTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.multipleLoginBody" /></dd>
- <dt><FormattedMessage id="faq.changeUsernameTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.changeUsernameBody" /></dd>
- <dt><FormattedMessage id="faq.shareInfoTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.shareInfoBody" /></dd>
- <dt><FormattedMessage id="faq.deleteAccountTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.deleteAccountBody" /></dd>
- </dl>
- </section>
- <section id="permissions">
- <span className="nav-spacer" />
- <h2><FormattedMessage id="faq.permissionsTitle" /></h2>
- <dl>
- <dt><FormattedMessage id="faq.scratchFreeTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.scratchFreeBody" /></dd>
- <dt><FormattedMessage id="faq.scratchScreenshotTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.scratchScreenshotBody" /></dd>
- <dt><FormattedMessage id="faq.scratchDescriptionTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.scratchDescriptionBody" /></dd>
- <dt><FormattedMessage id="faq.presentScratchTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.presentScratchBody" /></dd>
- <dt><FormattedMessage id="faq.supportMaterialTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.supportMaterialBody" /></dd>
- <dt><FormattedMessage id="faq.sellProjectsTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.sellProjectsBody" /></dd>
- <dt><FormattedMessage id="faq.sourceCodeTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.sourceCodeBody" /></dd>
- </dl>
- </section>
- <section id="inappropriate-content">
- <span className="nav-spacer" />
- <h2><FormattedMessage id="faq.inappropriateContentTitle" /></h2>
- <dl>
- <dt><FormattedMessage id="faq.okayToShareTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.okayToShareBody" /></dd>
- <dt><FormattedMessage id="faq.reportContentTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.reportContentBody" /></dd>
- <dt><FormattedMessage id="faq.noFlameTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.noFlameBody" /></dd>
- <dt><FormattedMessage id="faq.reviewContentTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.reviewContentBody" /></dd>
- <dt><FormattedMessage id="faq.blockedAccountTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.blockedAccountBody" /></dd>
- <dt><FormattedMessage id="faq.stolenAccountTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.stolenAccountBody" /></dd>
- </dl>
- </section>
- <section id="clouddata">
- <span className="nav-spacer" />
- <h2><FormattedMessage id="faq.cloudDataTitle" /></h2>
- <dl>
- <dt><FormattedMessage id="faq.cloudDataInfoTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.cloudDataInfoBody" /></dd>
- <dt><FormattedMessage id="faq.storedCloudInfoTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.storedCloudInfoBody" /></dd>
- <dt><FormattedMessage id="faq.onlyNumbersTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.onlyNumbersBody" /></dd>
- <dt><FormattedMessage id="faq.reportCloudTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.reportCloudBody" /></dd>
- <dt><FormattedMessage id="faq.chatRoomTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.chatRoomBody" /></dd>
- <dt><FormattedMessage id="faq.makeCloudVarTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.makeCloudVarBody" /></dd>
- <dt><FormattedMessage id="faq.changeCloudVarTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.changeCloudVarBody" /></dd>
- <dt><FormattedMessage id="faq.newScratcherCloudTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.newScratcherCloudBody" /></dd>
- <dt><FormattedMessage id="faq.multiplayerTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.multiplayerBody" /></dd>
- <dt><FormattedMessage id="faq.cloudLagTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.cloudLagBody" /></dd>
- </dl>
- </section>
- <section id="schools">
- <span className="nav-spacer" />
- <h2><FormattedMessage id="faq.schoolsTitle" /></h2>
- <dl>
- <dt><FormattedMessage id="faq.howTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.howBody" /></dd>
- <dt><FormattedMessage id="faq.ageTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.ageBody" /></dd>
- <dt><FormattedMessage id="faq.noInternetTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.noInternetBody" /></dd>
- <dt><FormattedMessage id="faq.communityTitle" /></dt>
- <dd><FormattedMessage id="faq.communityBody" /></dd>
- <dt><FormattedMessage id="faq.teacherAccountTitle" /></dt>
- <dd><FormattedMessage id="faq.teacherAccountBody" /></dd>
- <dt><FormattedMessage id="faq.requestTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.requestBody" /></dd>
- <dt><FormattedMessage id="faq.edTitle" /></dt>
- <dd><FormattedHTMLMessage id="faq.edBody" /></dd>
- <dt><FormattedMessage id="faq.dataTitle" /></dt>
- <dd><FormattedMessage id="faq.dataBody" /></dd>
- <dt><FormattedMessage id="faq.lawComplianceTitle" /></dt>
- <dd><FormattedMessage id="faq.lawComplianceBody" /></dd>
- </dl>
- <i><FormattedHTMLMessage id="faq.schoolsMoreInfo" /></i>
- </section>
- </div>
- <nav>
- <ol>
- <li><a href="#about-scratch"><FormattedMessage id="faq.aboutTitle" /></a></li>
- <li><a href="#privacy"><FormattedMessage id="faq.privacyTitle" /></a></li>
- <li><a href="#remix"><FormattedMessage id="faq.remixTitle" /></a></li>
- <li><a href="#accounts"><FormattedMessage id="faq.accountsTitle" /></a></li>
- <li><a href="#permissions"><FormattedMessage id="faq.permissionsTitle" /></a></li>
- <li><a href="#inappropriate-content">
- <FormattedMessage id="faq.inappropriateContentTitle" />
- </a></li>
- <li><a href="#clouddata"><FormattedMessage id="faq.cloudDataTitle" /></a></li>
- <li><a href="#schools"><FormattedMessage id="faq.schoolsTitle" /></a></li>
- </ol>
- </nav>
- </InformationPage>
-));
-
-Faq.propTypes = {
- intl: intlShape
-};
+ <dt><FormattedMessage id='faq.mediaLabTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.mediaLabBody' /></dd>
+ </dl>
+ </section>
+ <section id="privacy">
+ <span className="nav-spacer"></span>
+ <h2><FormattedMessage id='faq.privacyTitle' /></h2>
+ <dl>
+ <dt><FormattedMessage id='faq.accountInfoTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.accountInfoList' /></dd>
+ <ul>
+ <li><FormattedHTMLMessage id='faq.privacyUsername' /></li>
+ <li><FormattedHTMLMessage id='faq.privacyCountry' /></li>
+ <li><FormattedHTMLMessage id='faq.privacyBirthdate' /></li>
+ <li><FormattedHTMLMessage id='faq.privacyGender' /></li>
+ <li><FormattedHTMLMessage id='faq.privacyEmail' /></li>
+ </ul>
+ <dd><FormattedHTMLMessage id='faq.accountPublicInfo' /></dd>
+ <dt><FormattedMessage id='faq.dataCollectionTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.dataCollectionOne' /></dd>
+ <dt><FormattedMessage id='faq.rentInfoTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.rentInfoBody' /></dd>
+ <dt><FormattedMessage id='faq.viewUnsharedTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.viewUnsharedBody' /></dd>
+ </dl>
+ </section>
+ <section id="remix">
+ <span className="nav-spacer"></span>
+ <h2><FormattedMessage id='faq.remixTitle' /></h2>
+ <dl>
+ <dt><FormattedMessage id='faq.remixDefinitionTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.remixDefinitionBody' /></dd>
+ <dt><FormattedMessage id='faq.remixableTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.remixableBody' /></dd>
+ <dt><FormattedMessage id='faq.creativeCommonsTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.creativeCommonsBody' /></dd>
+ <dt><FormattedMessage id='faq.fairUseTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.fairUseBody' /></dd>
+ </dl>
+ </section>
+ <section id="accounts">
+ <span className="nav-spacer"></span>
+ <h2><FormattedMessage id='faq.accountsTitle' /></h2>
+ <dl>
+ <dt><FormattedMessage id='faq.confirmedAccountTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.confirmedAccountBody' /></dd>
+ <dt><FormattedMessage id='faq.checkConfirmedTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.checkConfirmedBody' /></dd>
+ <dt><FormattedMessage id='faq.howToConfirmTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.howToConfirmBody' /></dd>
+ <dt><FormattedMessage id='faq.requireConfirmTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.requireConfirmBody' /></dd>
+ <dt><FormattedMessage id='faq.forgotPasswordTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.forgotPasswordBody' /></dd>
+ <dt><FormattedMessage id='faq.changePasswordTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.changePasswordBody' /></dd>
+ <dt><FormattedMessage id='faq.changeEmailTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.changeEmailBody' /></dd>
+ <dt><FormattedMessage id='faq.newScratcherTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.newScratcherBody' /></dd>
+ <dt><FormattedMessage id='faq.multipleAccountTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.multipleAccountBody' /></dd>
+ <dt><FormattedMessage id='faq.multipleLoginTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.multipleLoginBody' /></dd>
+ <dt><FormattedMessage id='faq.changeUsernameTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.changeUsernameBody' /></dd>
+ <dt><FormattedMessage id='faq.shareInfoTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.shareInfoBody' /></dd>
+ <dt><FormattedMessage id='faq.deleteAccountTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.deleteAccountBody' /></dd>
+ </dl>
+ </section>
+ <section id="permissions">
+ <span className="nav-spacer"></span>
+ <h2><FormattedMessage id='faq.permissionsTitle' /></h2>
+ <dl>
+ <dt><FormattedMessage id='faq.scratchFreeTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.scratchFreeBody' /></dd>
+ <dt><FormattedMessage id='faq.scratchScreenshotTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.scratchScreenshotBody' /></dd>
+ <dt><FormattedMessage id='faq.scratchDescriptionTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.scratchDescriptionBody' /></dd>
+ <dt><FormattedMessage id='faq.presentScratchTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.presentScratchBody' /></dd>
+ <dt><FormattedMessage id='faq.supportMaterialTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.supportMaterialBody' /></dd>
+ <dt><FormattedMessage id='faq.sellProjectsTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.sellProjectsBody' /></dd>
+ <dt><FormattedMessage id='faq.sourceCodeTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.sourceCodeBody' /></dd>
+ </dl>
+ </section>
+ <section id="inappropriate-content">
+ <span className="nav-spacer"></span>
+ <h2><FormattedMessage id='faq.inappropriateContentTitle' /></h2>
+ <dl>
+ <dt><FormattedMessage id='faq.okayToShareTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.okayToShareBody' /></dd>
+ <dt><FormattedMessage id='faq.reportContentTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.reportContentBody' /></dd>
+ <dt><FormattedMessage id='faq.noFlameTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.noFlameBody' /></dd>
+ <dt><FormattedMessage id='faq.reviewContentTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.reviewContentBody' /></dd>
+ <dt><FormattedMessage id='faq.blockedAccountTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.blockedAccountBody' /></dd>
+ <dt><FormattedMessage id='faq.stolenAccountTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.stolenAccountBody' /></dd>
+ </dl>
+ </section>
+ <section id="clouddata">
+ <span className="nav-spacer"></span>
+ <h2><FormattedMessage id='faq.cloudDataTitle' /></h2>
+ <dl>
+ <dt><FormattedMessage id='faq.cloudDataInfoTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.cloudDataInfoBody' /></dd>
+ <dt><FormattedMessage id='faq.storedCloudInfoTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.storedCloudInfoBody' /></dd>
+ <dt><FormattedMessage id='faq.onlyNumbersTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.onlyNumbersBody' /></dd>
+ <dt><FormattedMessage id='faq.reportCloudTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.reportCloudBody' /></dd>
+ <dt><FormattedMessage id='faq.chatRoomTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.chatRoomBody' /></dd>
+ <dt><FormattedMessage id='faq.makeCloudVarTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.makeCloudVarBody' /></dd>
+ <dt><FormattedMessage id='faq.changeCloudVarTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.changeCloudVarBody' /></dd>
+ <dt><FormattedMessage id='faq.newScratcherCloudTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.newScratcherCloudBody' /></dd>
+ <dt><FormattedMessage id='faq.multiplayerTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.multiplayerBody' /></dd>
+ <dt><FormattedMessage id='faq.cloudLagTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.cloudLagBody' /></dd>
+ </dl>
+ </section>
+ <section id="schools">
+ <span className="nav-spacer"></span>
+ <h2><FormattedMessage id="faq.schoolsTitle" /></h2>
+ <dl>
+ <dt><FormattedMessage id='faq.howTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.howBody' /></dd>
+ <dt><FormattedMessage id='faq.ageTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.ageBody' /></dd>
+ <dt><FormattedMessage id='faq.noInternetTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.noInternetBody' /></dd>
+ <dt><FormattedMessage id='faq.communityTitle' /></dt>
+ <dd><FormattedMessage id='faq.communityBody' /></dd>
+ <dt><FormattedMessage id='faq.teacherAccountTitle' /></dt>
+ <dd><FormattedMessage id='faq.teacherAccountBody' /></dd>
+ <dt><FormattedMessage id='faq.requestTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.requestBody' /></dd>
+ <dt><FormattedMessage id='faq.edTitle' /></dt>
+ <dd><FormattedHTMLMessage id='faq.edBody' /></dd>
+ <dt><FormattedMessage id='faq.dataTitle' /></dt>
+ <dd><FormattedMessage id='faq.dataBody' /></dd>
+ <dt><FormattedMessage id='faq.lawComplianceTitle' /></dt>
+ <dd><FormattedMessage id='faq.lawComplianceBody' /></dd>
+ </dl>
+ <i><FormattedHTMLMessage id='faq.schoolsMoreInfo' /></i>
+ </section>
+ </div>
+ <nav>
+ <ol>
+ <li><a href="#about-scratch"><FormattedMessage id='faq.aboutTitle' /></a></li>
+ <li><a href="#privacy"><FormattedMessage id='faq.privacyTitle' /></a></li>
+ <li><a href="#remix"><FormattedMessage id='faq.remixTitle' /></a></li>
+ <li><a href="#accounts"><FormattedMessage id='faq.accountsTitle' /></a></li>
+ <li><a href="#permissions"><FormattedMessage id='faq.permissionsTitle' /></a></li>
+ <li><a href="#inappropriate-content">
+ <FormattedMessage id='faq.inappropriateContentTitle' />
+ </a></li>
+ <li><a href="#clouddata"><FormattedMessage id='faq.cloudDataTitle' /></a></li>
+ <li><a href="#schools"><FormattedMessage id='faq.schoolsTitle' /></a></li>
+ </ol>
+ </nav>
+ </InformationPage>
+ );
+ }
+}));
render(<Page><Faq /></Page>, document.getElementById('app'));
diff --git a/src/views/guidelines/guidelines.jsx b/src/views/guidelines/guidelines.jsx
index 0ff09e6b2..5470148a7 100644
--- a/src/views/guidelines/guidelines.jsx
+++ b/src/views/guidelines/guidelines.jsx
@@ -1,49 +1,42 @@
-const FormattedMessage = require('react-intl').FormattedMessage;
-const React = require('react');
+var React = require('react');
+var FormattedMessage = require('react-intl').FormattedMessage;
-const Box = require('../../components/box/box.jsx');
-
-const Page = require('../../components/page/www/page.jsx');
-const render = require('../../lib/render.jsx');
+var render = require('../../lib/render.jsx');
+var Page = require('../../components/page/www/page.jsx');
+var Box = require('../../components/box/box.jsx');
require('./guidelines.scss');
-const Guidelines = () => (
- <div className="inner guidelines">
- <Box
- title={
- <FormattedMessage id="guidelines.title" />
- }
- >
- <p>
- <FormattedMessage
- className="intro"
- id="guidelines.header"
- />
- </p>
- <dl>
- <dt><FormattedMessage id="guidelines.respectheader" /></dt>
- <dd><FormattedMessage id="guidelines.respectbody" /></dd>
- <dt><FormattedMessage id="guidelines.constructiveheader" /></dt>
- <dd><FormattedMessage id="guidelines.constructivebody" /></dd>
- <dt><FormattedMessage id="guidelines.shareheader" /></dt>
- <dd><FormattedMessage id="guidelines.sharebody" /></dd>
- <dt><FormattedMessage id="guidelines.privacyheader" /></dt>
- <dd><FormattedMessage id="guidelines.privacybody" /></dd>
- <dt><FormattedMessage id="guidelines.honestyheader" /></dt>
- <dd><FormattedMessage id="guidelines.honestybody" /></dd>
- <dt><FormattedMessage id="guidelines.friendlyheader" /></dt>
- <dd><FormattedMessage id="guidelines.friendlybody" /></dd>
- </dl>
- <div className="guidelines-footer">
- <p><FormattedMessage id="guidelines.footer" /></p>
- <img
- alt="sprites"
- src="//cdn.scratch.mit.edu/scratchr2/static/images/help/spritesforcommunityguid.png"
- />
+var Guidelines = React.createClass({
+ type: 'Guidelines',
+ render: function () {
+ return (
+ <div className="inner guidelines">
+ <Box title={<FormattedMessage id='guidelines.title' />}>
+ <p><FormattedMessage id='guidelines.header' className="intro" /></p>
+ <dl>
+ <dt><FormattedMessage id='guidelines.respectheader' /></dt>
+ <dd><FormattedMessage id='guidelines.respectbody' /></dd>
+ <dt><FormattedMessage id='guidelines.constructiveheader' /></dt>
+ <dd><FormattedMessage id='guidelines.constructivebody' /></dd>
+ <dt><FormattedMessage id='guidelines.shareheader' /></dt>
+ <dd><FormattedMessage id='guidelines.sharebody' /></dd>
+ <dt><FormattedMessage id='guidelines.privacyheader' /></dt>
+ <dd><FormattedMessage id='guidelines.privacybody' /></dd>
+ <dt><FormattedMessage id='guidelines.honestyheader' /></dt>
+ <dd><FormattedMessage id='guidelines.honestybody' /></dd>
+ <dt><FormattedMessage id='guidelines.friendlyheader' /></dt>
+ <dd><FormattedMessage id='guidelines.friendlybody' /></dd>
+ </dl>
+ <div className="guidelines-footer">
+ <p><FormattedMessage id='guidelines.footer' /></p>
+ <img src="//cdn.scratch.mit.edu/scratchr2/static/images/help/spritesforcommunityguid.png"
+ alt="sprites"/>
+ </div>
+ </Box>
</div>
- </Box>
- </div>
-);
+ );
+ }
+});
render(<Page><Guidelines /></Page>, document.getElementById('app'));
diff --git a/src/views/jobs/jobs.jsx b/src/views/jobs/jobs.jsx
index ac8e68445..ff1a6f681 100644
--- a/src/views/jobs/jobs.jsx
+++ b/src/views/jobs/jobs.jsx
@@ -1,68 +1,73 @@
-const React = require('react');
-const render = require('../../lib/render.jsx');
-const FormattedMessage = require('react-intl').FormattedMessage;
+var React = require('react');
+var render = require('../../lib/render.jsx');
+var FormattedMessage = require('react-intl').FormattedMessage;
-const Page = require('../../components/page/www/page.jsx');
+var Page = require('../../components/page/www/page.jsx');
require('./jobs.scss');
-const Jobs = () => (
- <div className="jobs">
- <div className="top">
- <div className="inner">
- <img src="/images/jobs.png" />
- <h2><FormattedMessage id="jobs.titleQuestion" /></h2>
- </div>
- </div>
+var Jobs = React.createClass({
+ type: 'Jobs',
+ render: function () {
+ return (
+ <div className="jobs">
+ <div className="top">
+ <div className="inner">
+ <img src="/images/jobs.png" />
+ <h2><FormattedMessage id='jobs.titleQuestion' /></h2>
+ </div>
+ </div>
- <div className="middle">
- <div className="inner">
- <h3><FormattedMessage id="jobs.joinScratchTeam" /></h3>
- <p><FormattedMessage id="jobs.info" /></p>
- <p><FormattedMessage id="jobs.workEnvironment" /></p>
- </div>
- </div>
+ <div className="middle">
+ <div className="inner">
+ <h3><FormattedMessage id='jobs.joinScratchTeam' /></h3>
+ <p><FormattedMessage id='jobs.info' /></p>
+ <p><FormattedMessage id='jobs.workEnvironment' /></p>
+ </div>
+ </div>
- <div className="bottom">
- <div className="inner">
- <h3><FormattedMessage id="jobs.openings" /></h3>
- <ul>
- <li>
- <a href="https://www.media.mit.edu/about/job-opportunities/web-designer-scratch/">
- Designer
- </a>
- <span>
- MIT Media Lab, Cambridge, MA
- </span>
- </li>
- <li>
- <a href="https://www.media.mit.edu/about/job-opportunities/qa-engineer-scratch/">
- QA Engineer
- </a>
- <span>
- MIT Media Lab, Cambridge, MA
- </span>
- </li>
- <li>
- <a href="https://www.media.mit.edu/about/job-opportunities/senior-backend-engineer-scratch-1/">
- Senior Backend Engineer
- </a>
- <span>
- MIT Media Lab, Cambridge, MA
- </span>
- </li>
- <li>
- <a href="https://www.media.mit.edu/about/job-opportunities/learning-resources/">
- Learning Resource Designer
- </a>
- <span>
- MIT Media Lab, Cambridge, MA
- </span>
- </li>
- </ul>
+ <div className="bottom">
+ <div className="inner">
+ <h3><FormattedMessage id='jobs.openings' /></h3>
+ <ul>
+ <li>
+ <a href="https://www.media.mit.edu/about/job-opportunities/web-designer-scratch/">
+ Designer
+ </a>
+ <span>
+ MIT Media Lab, Cambridge, MA
+ </span>
+ </li>
+ <li>
+ <a href="https://www.media.mit.edu/about/job-opportunities/qa-engineer-scratch/">
+ QA Engineer
+ </a>
+ <span>
+ MIT Media Lab, Cambridge, MA
+ </span>
+ </li>
+ <li>
+ <a href="https://www.media.mit.edu/about/job-opportunities/senior-backend-engineer-scratch-1/">
+ Senior Backend Engineer
+ </a>
+ <span>
+ MIT Media Lab, Cambridge, MA
+ </span>
+ </li>
+ <li>
+ <a href="https://www.media.mit.edu/about/job-opportunities/learning-resources/">
+ Learning Resource Designer
+ </a>
+ <span>
+ MIT Media Lab, Cambridge, MA
+ </span>
+ </li>
+ </ul>
+ </div>
+ </div>
</div>
- </div>
- </div>
-);
+ );
+ }
+});
render(<Page><Jobs /></Page>, document.getElementById('app'));
diff --git a/src/views/jobs/moderator/moderator.jsx b/src/views/jobs/moderator/moderator.jsx
index af5fc7e2f..a6af73d3c 100644
--- a/src/views/jobs/moderator/moderator.jsx
+++ b/src/views/jobs/moderator/moderator.jsx
@@ -1,89 +1,94 @@
-const React = require('react');
+var React = require('react');
+var render = require('../../../lib/render.jsx');
-const InformationPage = require('../../../components/informationpage/informationpage.jsx');
+var Page = require('../../../components/page/www/page.jsx');
+var InformationPage = require('../../../components/informationpage/informationpage.jsx');
-const Page = require('../../../components/page/www/page.jsx');
-const render = require('../../../lib/render.jsx');
-
-const Moderator = () => (
- <InformationPage title={'Community Moderator'}>
- <div className="inner info-inner">
- <p>
- Interested in kids, creativity, and online communities?
- We're seeking community moderators to work with the Scratch
- Team. Moderators will support creative activities and
- positive interactions on Scratch — a free online community
- where young people program and share interactive stories,
- games, and animations. Scratch has grown to more than 20
- million registered members (ages 8 and up), creating and
- sharing thousands of projects each day. Moderators will
- gain valuable experience working online with youth in a
- creative, interest driven setting.
- </p>
- <h3>Responsibilities:</h3>
- <ul>
- <li>
- Participate actively in the Scratch online community as
- a mentor and resource for youth
- </li>
- <li>
- Help moderate projects, studios, and comments on the
- website
- </li>
- <li>
- Support youth volunteer programs in the online community
- </li>
- <li>
- Promote the values and core ideas of the Scratch project
- (such as remixing, creative collaboration, and
- constructive feedback)
- </li>
- </ul>
- <br />
- <h3>Qualifications:</h3>
- <ul>
- <li>
- Active participation in online communities, forums, or
- other web-based media
- </li>
- <li>
- Excellent writing and communication skills
- </li>
- <li>
- Good at considering issues from multiple perspectives
- </li>
- <li>
- Able to work independently and as part of a team
- </li>
- <li>
- Interest in visual arts, programming, or teaching
- </li>
- <li>
- Not required, but would be cool: Ability to speak another
- language
- </li>
- </ul>
- <br />
- <p>
- This position is part-time (10-12 hours per week) under contract.
- All candidates must be at least 18 years old and have
- authorization to work in the United States.
- </p>
- <p><b>(MIT Media Lab, Cambridge, MA or Remote)</b></p>
- <p>
- Send a copy of your resume, links to one or more of your online
- presences, and cover letter to{' '}
- <a href="mailto:jobs+moderator@scratch.mit.edu">jobs+moderator@scratch.mit.edu</a>.
- </p>
- <p>
- <i>
- Really want the gig? <a href="/create">Create</a> an
- awesome Scratch project to introduce yourself, share
- it on the Scratch website, and send us a link.
- </i>
- </p>
- </div>
- </InformationPage>
-);
+var Moderator = React.createClass({
+ type: 'Moderator',
+ render: function () {
+ return (
+ <InformationPage title={'Community Moderator'}>
+ <div className="inner info-inner">
+ <p>
+ Interested in kids, creativity, and online communities?
+ We're seeking community moderators to work with the Scratch
+ Team. Moderators will support creative activities and
+ positive interactions on Scratch — a free online community
+ where young people program and share interactive stories,
+ games, and animations. Scratch has grown to more than 20
+ million registered members (ages 8 and up), creating and
+ sharing thousands of projects each day. Moderators will
+ gain valuable experience working online with youth in a
+ creative, interest driven setting.
+ </p>
+ <h3>Responsibilities:</h3>
+ <ul>
+ <li>
+ Participate actively in the Scratch online community as
+ a mentor and resource for youth
+ </li>
+ <li>
+ Help moderate projects, studios, and comments on the
+ website
+ </li>
+ <li>
+ Support youth volunteer programs in the online community
+ </li>
+ <li>
+ Promote the values and core ideas of the Scratch project
+ (such as remixing, creative collaboration, and
+ constructive feedback)
+ </li>
+ </ul>
+ <br/>
+ <h3>Qualifications:</h3>
+ <ul>
+ <li>
+ Active participation in online communities, forums, or
+ other web-based media
+ </li>
+ <li>
+ Excellent writing and communication skills
+ </li>
+ <li>
+ Good at considering issues from multiple perspectives
+ </li>
+ <li>
+ Able to work independently and as part of a team
+ </li>
+ <li>
+ Interest in visual arts, programming, or teaching
+ </li>
+ <li>
+ Not required, but would be cool: Ability to speak another
+ language
+ </li>
+ </ul>
+ <br/>
+ <p>
+ This position is part-time (10-12 hours per week) under contract.
+ All candidates must be at least 18 years old and have
+ authorization to work in the United States.
+ </p>
+ <p><b>(MIT Media Lab, Cambridge, MA or Remote)</b></p>
+ <p>
+ Send a copy of your resume, links to one or more of your online
+ presences, and cover letter to{' '}
+ <a href="mailto:jobs+moderator@scratch.mit.edu">
+ jobs+moderator@scratch.mit.edu</a>.
+ </p>
+ <p>
+ <i>
+ Really want the gig? <a href="/create">Create</a> an
+ awesome Scratch project to introduce yourself, share
+ it on the Scratch website, and send us a link.
+ </i>
+ </p>
+ </div>
+ </InformationPage>
+ );
+ }
+});
render(<Page><Moderator /></Page>, document.getElementById('app'));
diff --git a/src/views/messages/container.jsx b/src/views/messages/container.jsx
index 3daca553a..c747ef15e 100644
--- a/src/views/messages/container.jsx
+++ b/src/views/messages/container.jsx
@@ -1,52 +1,30 @@
-const bindAll = require('lodash.bindall');
-const connect = require('react-redux').connect;
-const PropTypes = require('prop-types');
-const React = require('react');
+var connect = require('react-redux').connect;
+var React = require('react');
-const Page = require('../../components/page/www/page.jsx');
-const render = require('../../lib/render.jsx');
+var messageActions = require('../../redux/messages.js');
+var render = require('../../lib/render.jsx');
+var sessionActions = require('../../redux/session.js');
-const MessagesPresentation = require('./presentation.jsx');
+var Page = require('../../components/page/www/page.jsx');
+var MessagesPresentation = require('./presentation.jsx');
-const messageActions = require('../../redux/messages.js');
-const sessionActions = require('../../redux/session.js');
-
-class Messages extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleFilterClick',
- 'handleMessageDismiss',
- 'handleLoadMoreMessages'
- ]);
- this.state = {
+var Messages = React.createClass({
+ type: 'ConnectedMessages',
+ getInitialState: function () {
+ return {
filter: ''
};
- }
- componentDidMount () {
- if (this.props.user.token) {
- this.props.dispatch(
- messageActions.getMessages(
- this.props.user.username,
- this.props.user.token,
- {
- messages: this.props.messages,
- offset: this.props.messageOffset,
- filter: this.state.filter
- }
- )
- );
- this.props.dispatch(
- messageActions.getAdminMessages(
- this.props.user.username, this.props.user.token, this.props.messageOffset
- )
- );
- this.props.dispatch(
- messageActions.getScractherInvite(this.props.user.username, this.props.user.token)
- );
- }
- }
- componentDidUpdate (prevProps) {
+ },
+ getDefaultProps: function () {
+ return {
+ sessionStatus: sessionActions.Status.NOT_FETCHED,
+ user: {},
+ flags: {},
+ messageOffset: 0,
+ numNewMessages: 0
+ };
+ },
+ componentDidUpdate: function (prevProps) {
if (this.props.user.username !== prevProps.user.username) {
if (this.props.user.token) {
this.props.dispatch(
@@ -76,8 +54,31 @@ class Messages extends React.Component {
this.props.dispatch(messageActions.setMessagesOffset(0));
}
}
- }
- handleFilterClick (field, choice) {
+ },
+ componentDidMount: function () {
+ if (this.props.user.token) {
+ this.props.dispatch(
+ messageActions.getMessages(
+ this.props.user.username,
+ this.props.user.token,
+ {
+ messages: this.props.messages,
+ offset: this.props.messageOffset,
+ filter: this.state.filter
+ }
+ )
+ );
+ this.props.dispatch(
+ messageActions.getAdminMessages(
+ this.props.user.username, this.props.user.token, this.props.messageOffset
+ )
+ );
+ this.props.dispatch(
+ messageActions.getScractherInvite(this.props.user.username, this.props.user.token)
+ );
+ }
+ },
+ handleFilterClick: function (field, choice) {
if (this.props.user.token) {
this.props.dispatch(
messageActions.getMessages(
@@ -91,9 +92,9 @@ class Messages extends React.Component {
);
}
this.setState({filter: choice});
- }
- handleMessageDismiss (messageType, messageId) {
- let adminMessages = null;
+ },
+ handleMessageDismiss: function (messageType, messageId) {
+ var adminMessages = null;
if (messageType === 'notification') {
adminMessages = this.props.adminMessages;
}
@@ -102,8 +103,8 @@ class Messages extends React.Component {
messageType, messageId, this.props.numNewMessages, adminMessages
)
);
- }
- handleLoadMoreMessages () {
+ },
+ handleLoadMoreMessages: function () {
this.props.dispatch(
messageActions.getMessages(
this.props.user.username,
@@ -116,79 +117,47 @@ class Messages extends React.Component {
}
)
);
- }
- render () {
- let loadMore = true;
+ },
+ render: function () {
+ var loadMore = true;
if (this.props.messageOffset > this.props.messages.length && this.props.messageOffset > 0) {
loadMore = false;
}
- return (
+ return(
<MessagesPresentation
- adminMessages={this.props.adminMessages}
- filter={this.props.filter}
- loadMore={loadMore}
- messages={this.props.messages}
- numNewMessages={this.props.numNewMessages}
- requestStatus={this.props.requestStatus}
- scratcherInvite={this.props.invite}
sessionStatus={this.props.sessionStatus}
user={this.props.user}
- onAdminDismiss={this.handleMessageDismiss}
- onFilterClick={this.handleFilterClick}
- onLoadMoreMethod={this.handleLoadMoreMessages}
+ messages={this.props.messages}
+ adminMessages={this.props.adminMessages}
+ scratcherInvite={this.props.invite}
+ numNewMessages={this.props.numNewMessages}
+ handleFilterClick={this.handleFilterClick}
+ handleAdminDismiss={this.handleMessageDismiss}
+ loadMore={loadMore}
+ loadMoreMethod={this.handleLoadMoreMessages}
+ requestStatus={this.props.requestStatus}
+ filter={this.props.filter}
/>
);
}
-}
-
-Messages.propTypes = {
- adminMessages: PropTypes.arrayOf(PropTypes.object),
- dispatch: PropTypes.func.isRequired,
- filter: PropTypes.string,
- invite: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
- messageOffset: PropTypes.number.isRequired,
- messages: PropTypes.arrayOf(PropTypes.object),
- numNewMessages: PropTypes.number.isRequired,
- requestStatus: PropTypes.shape({
- admin: PropTypes.string,
- clear: PropTypes.string,
- message: PropTypes.string,
- delete: PropTypes.string
- }).isRequired,
- sessionStatus: PropTypes.string.isRequired,
- user: PropTypes.shape({
- id: PropTypes.number,
- banned: PropTypes.bool,
- username: PropTypes.string,
- token: PropTypes.string,
- thumbnailUrl: PropTypes.string,
- dateJoined: PropTypes.string,
- email: PropTypes.string,
- classroomId: PropTypes.string
- }).isRequired
-};
-
-Messages.defaultProps = {
- messageOffset: 0,
- numNewMessages: 0,
- sessionStatus: sessionActions.Status.NOT_FETCHED,
- user: {}
-};
-
-const mapStateToProps = state => ({
- sessionStatus: state.session.status,
- user: state.session.session.user,
- numNewMessages: state.messageCount.messageCount,
- messages: state.messages.messages.social,
- adminMessages: state.messages.messages.admin,
- invite: state.messages.messages.invite,
- messageOffset: state.messages.messages.socialOffset,
- requestStatus: state.messages.status
});
-const ConnectedMessages = connect(mapStateToProps)(Messages);
+var mapStateToProps = function (state) {
+ return {
+ sessionStatus: state.session.status,
+ user: state.session.session.user,
+ flags: state.session.session.flags,
+ numNewMessages: state.messageCount.messageCount,
+ messages: state.messages.messages.social,
+ adminMessages: state.messages.messages.admin,
+ invite: state.messages.messages.invite,
+ messageOffset: state.messages.messages.socialOffset,
+ requestStatus: state.messages.status
+ };
+};
+var ConnectedMessages = connect(mapStateToProps)(Messages);
render(
<Page><ConnectedMessages /></Page>,
document.getElementById('app'),
diff --git a/src/views/messages/message-rows/admin-message.jsx b/src/views/messages/message-rows/admin-message.jsx
index e803a1177..2d34372ec 100644
--- a/src/views/messages/message-rows/admin-message.jsx
+++ b/src/views/messages/message-rows/admin-message.jsx
@@ -1,38 +1,42 @@
-const FormattedDate = require('react-intl').FormattedDate;
-const PropTypes = require('prop-types');
-const React = require('react');
+var FormattedDate = require('react-intl').FormattedDate;
+var React = require('react');
-const Button = require('../../../components/forms/button.jsx');
-const FlexRow = require('../../../components/flex-row/flex-row.jsx');
+var Button = require('../../../components/forms/button.jsx');
+var FlexRow = require('../../../components/flex-row/flex-row.jsx');
-const AdminMessage = props => (
- <li className="admin-message">
- <FlexRow className="admin-message-header">
- <span className="admin-message-date">
- <FormattedDate value={new Date(props.datetimeCreated)} />
- </span>
- <Button
- className="mod-admin-message-dismiss"
- onClick={props.onDismiss}
- >
- <img
- alt="close-icon"
- className="admin-message-icon"
- src="/svgs/modal/close-x.svg"
+var AdminMessage = React.createClass({
+ type: 'AdminMessage',
+ propTypes: {
+ id: React.PropTypes.number.isRequired,
+ message: React.PropTypes.string.isRequired,
+ datetimeCreated: React.PropTypes.string.isRequired,
+ onDismiss: React.PropTypes.func.isRequired
+ },
+ render: function () {
+ return (
+ <li className="admin-message">
+ <FlexRow className="admin-message-header">
+ <span className="admin-message-date">
+ <FormattedDate value={new Date(this.props.datetimeCreated)} />
+ </span>
+ <Button
+ className="mod-admin-message-dismiss"
+ onClick={this.props.onDismiss}
+ >
+ <img
+ className="admin-message-icon"
+ src="/svgs/modal/close-x.svg"
+ alt="close-icon"
+ />
+ </Button>
+ </FlexRow>
+ <p
+ className="admin-message-content"
+ dangerouslySetInnerHTML={{__html: this.props.message}}
/>
- </Button>
- </FlexRow>
- <p
- className="admin-message-content"
- dangerouslySetInnerHTML={{__html: props.message}} // eslint-disable-line react/no-danger
- />
- </li>
-);
-
-AdminMessage.propTypes = {
- datetimeCreated: PropTypes.string.isRequired,
- message: PropTypes.string.isRequired,
- onDismiss: PropTypes.func.isRequired
-};
+ </li>
+ );
+ }
+});
module.exports = AdminMessage;
diff --git a/src/views/messages/message-rows/become-manager.jsx b/src/views/messages/message-rows/become-manager.jsx
index 1f5a61747..2ee8f29ba 100644
--- a/src/views/messages/message-rows/become-manager.jsx
+++ b/src/views/messages/message-rows/become-manager.jsx
@@ -1,47 +1,47 @@
-const classNames = require('classnames');
-const FormattedMessage = require('react-intl').FormattedMessage;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var FormattedMessage = require('react-intl').FormattedMessage;
+var React = require('react');
-const SocialMessage = require('../../../components/social-message/social-message.jsx');
+var SocialMessage = require('../../../components/social-message/social-message.jsx');
-const BecomeManagerMessage = props => (
- <SocialMessage
- className={classNames(
+var BecomeManagerMessage = React.createClass({
+ type: 'BecomeManagerMessage',
+ propTypes: {
+ actorUsername: React.PropTypes.string.isRequired,
+ studioId: React.PropTypes.number.isRequired,
+ studioTitle: React.PropTypes.string.isRequired,
+ datetimePromoted: React.PropTypes.string.isRequired
+ },
+ render: function () {
+ var actorUri = '/users/' + this.props.actorUsername + '/';
+ var studioUri = '/studios/' + this.props.studioId + '/';
+
+ var classes = classNames(
'mod-become-manager',
- props.className
- )}
- datetime={props.datetimePromoted}
- iconAlt="become owner notification image"
- iconSrc="/svgs/messages/owner-invite.svg"
- >
- <FormattedMessage
- id="messages.becomeManagerText"
- values={{
- username: (
- <a
- className="social-messages-profile-link"
- href={`/users/${props.actorUsername}/`}
- >
- {props.actorUsername}
- </a>
- ),
- studio: (
- <a href={`/studios/${props.studioId}/`}>
- {props.studioTitle}
- </a>
- )
- }}
- />
- </SocialMessage>
-);
-
-BecomeManagerMessage.propTypes = {
- actorUsername: PropTypes.string.isRequired,
- className: PropTypes.string,
- datetimePromoted: PropTypes.string.isRequired,
- studioId: PropTypes.number.isRequired,
- studioTitle: PropTypes.string.isRequired
-};
+ this.props.className
+ );
+ return (
+ <SocialMessage
+ className={classes}
+ datetime={this.props.datetimePromoted}
+ iconSrc="/svgs/messages/owner-invite.svg"
+ iconAlt="become owner notification image"
+ >
+ <FormattedMessage
+ id='messages.becomeManagerText'
+ values={{
+ username: <a
+ href={actorUri}
+ className="social-messages-profile-link"
+ >
+ {this.props.actorUsername}
+ </a>,
+ studio: <a href={studioUri}>{this.props.studioTitle}</a>
+ }}
+ />
+ </SocialMessage>
+ );
+ }
+});
module.exports = BecomeManagerMessage;
diff --git a/src/views/messages/message-rows/comment-message.jsx b/src/views/messages/message-rows/comment-message.jsx
index f6df6da67..9981efeb7 100644
--- a/src/views/messages/message-rows/comment-message.jsx
+++ b/src/views/messages/message-rows/comment-message.jsx
@@ -1,170 +1,158 @@
-const bindAll = require('lodash.bindall');
-const classNames = require('classnames');
-const connect = require('react-redux').connect;
-const FormattedMessage = require('react-intl').FormattedMessage;
-const injectIntl = require('react-intl').injectIntl;
-const intlShape = require('react-intl').intlShape;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var connect = require('react-redux').connect;
+var FormattedMessage = require('react-intl').FormattedMessage;
+var injectIntl = require('react-intl').injectIntl;
+var React = require('react');
-const Comment = require('../../../components/comment/comment.jsx');
-const FlexRow = require('../../../components/flex-row/flex-row.jsx');
-const SocialMessage = require('../../../components/social-message/social-message.jsx');
+var Comment = require('../../../components/comment/comment.jsx');
+var FlexRow = require('../../../components/flex-row/flex-row.jsx');
+var SocialMessage = require('../../../components/social-message/social-message.jsx');
-class CommentMessage extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'getObjectLink',
- 'getMessageText'
- ]);
- }
- getObjectLink (objectType, commentId, objectId) {
+var CommentMessage = injectIntl(React.createClass({
+ type: 'CommentMessage',
+ propTypes: {
+ actorUsername: React.PropTypes.string.isRequired,
+ actorId: React.PropTypes.number.isRequired,
+ objectType: React.PropTypes.oneOf([0, 1, 2]).isRequired,
+ objectId: React.PropTypes.number.isRequired,
+ commentId: React.PropTypes.number.isRequired,
+ commentText: React.PropTypes.string.isRequired,
+ commentDateTime: React.PropTypes.string.isRequired,
+ objectTitle: React.PropTypes.string,
+ commentee: React.PropTypes.string
+ },
+ getObjectLink: function (objectType, commentId, objectId) {
switch (objectType) {
case 0:
- return `/projects/${objectId}/#comments-${commentId}`;
+ return '/projects/' + objectId + '/#comments-' + commentId;
case 1:
- return `/users/${objectId}/#comments-${commentId}`;
+ return '/users/' + objectId + '/#comments-' + commentId;
case 2:
- return `/studios/${objectId}/comments/#comments-${commentId}`;
+ return '/studios/' + objectId + '/comments/#comments-' + commentId;
}
- }
- getMessageText (objectType, commentee) {
- const actorLink = `/users/${this.props.actorUsername}/`;
+ },
+ getMessageText: function (objectType, commentee) {
+ var actorLink = '/users/' + this.props.actorUsername + '/';
if (objectType === 2) {
// studio comment notifications only occur for direct replies
if (typeof commentee !== 'undefined' && commentee === this.props.user.username) {
- const commentLink = `/studios/${this.props.objectId}/comments/#comments-${this.props.commentId}`;
- return (
- <FormattedMessage
- id="messages.studioCommentReply"
- values={{
- profileLink: (
- <a
- className="social-messages-profile-link"
- href={actorLink}
- >
- {this.props.actorUsername}
- </a>
- ),
- commentLink: <a href={commentLink}>{this.props.objectTitle}</a>
- }}
- />
- );
+ var commentLink = '/studios/' + this.props.objectId + '/comments/#comments-' + this.props.commentId;
+ return <FormattedMessage
+ id='messages.studioCommentReply'
+ values={{
+ profileLink: <a
+ href={actorLink}
+ className="social-messages-profile-link"
+ >
+ {this.props.actorUsername}
+ </a>,
+ commentLink: <a href={commentLink}>{this.props.objectTitle}</a>
+ }}
+ />;
}
} else if (objectType === 1) {
- const profileLink = `/users/${this.props.objectTitle}/#comments-${this.props.commentId}`;
- let linkText = '';
+ var profileLink = '/users/' + this.props.objectTitle + '/#comments-' + this.props.commentId;
+ var linkText = '';
if (typeof commentee !== 'undefined' && commentee === this.props.user.username) {
// is a profile comment, and is a reply
if (this.props.objectTitle === this.props.user.username) {
- linkText = (<FormattedMessage id="messages.profileSelf" />);
+ linkText = <FormattedMessage
+ id='messages.profileSelf'
+ />;
} else {
- linkText = (
- <FormattedMessage
- id="messages.profileOther"
- values={{
- username: this.props.objectTitle
- }}
- />
- );
- }
- return (
- <FormattedMessage
- id="messages.commentReply"
+ linkText = <FormattedMessage
+ id='messages.profileOther'
values={{
- profileLink: (
- <a
- className="social-messages-profile-link"
- href={actorLink}
- >
- {this.props.actorUsername}
- </a>
- ),
- commentLink: <a href={profileLink}>{linkText}</a>
+ username: this.props.objectTitle
}}
- />
- );
- }
- // is a profile comment and not a reply, must be own profile
- linkText = this.props.intl.formatMessage({
- id: 'messages.profileSelf'
- });
- return (
- <FormattedMessage
- id="messages.profileComment"
+ />;
+ }
+ return <FormattedMessage
+ id='messages.commentReply'
values={{
- profileLink: (
- <a
- className="social-messages-profile-link"
- href={actorLink}
- >
- {this.props.actorUsername}
- </a>
- ),
+ profileLink: <a
+ href={actorLink}
+ className="social-messages-profile-link"
+ >
+ {this.props.actorUsername}
+ </a>,
commentLink: <a href={profileLink}>{linkText}</a>
}}
- />
- );
+ />;
+ } else {
+ // is a profile comment and not a reply, must be own profile
+ linkText = this.props.intl.formatMessage({
+ id: 'messages.profileSelf'
+ });
+ return <FormattedMessage
+ id='messages.profileComment'
+ values={{
+ profileLink: <a
+ href={actorLink}
+ className="social-messages-profile-link"
+ >
+ {this.props.actorUsername}
+ </a>,
+ commentLink: <a href={profileLink}>{linkText}</a>
+ }}
+ />;
+ }
} else {
- const projectLink = `/projects/${this.props.objectId}/#comments-${this.props.commentId}`;
+ var projectLink = '/projects/' + this.props.objectId + '/#comments-' + this.props.commentId;
// must be a project comment, since it's not the other two, and the strict prop type reqs
if (typeof commentee !== 'undefined' && commentee === this.props.user.username) {
- return (
- <FormattedMessage
- id="messages.commentReply"
- values={{
- profileLink: (
- <a
- className="social-messages-profile-link"
- href={actorLink}
- >
- {this.props.actorUsername}
- </a>
- ),
- commentLink: <a href={projectLink}>{this.props.objectTitle}</a>
- }}
- />
- );
- }
- return (
- <FormattedMessage
- id="messages.projectComment"
+ return <FormattedMessage
+ id='messages.commentReply'
values={{
- profileLink: (
- <a
- className="social-messages-profile-link"
- href={actorLink}
- >
- {this.props.actorUsername}
- </a>
- ),
+ profileLink: <a
+ href={actorLink}
+ className="social-messages-profile-link"
+ >
+ {this.props.actorUsername}
+ </a>,
commentLink: <a href={projectLink}>{this.props.objectTitle}</a>
}}
- />
- );
+ />;
+ } else {
+ return <FormattedMessage
+ id='messages.projectComment'
+ values={{
+ profileLink: <a
+ href={actorLink}
+ className="social-messages-profile-link"
+ >
+ {this.props.actorUsername}
+ </a>,
+ commentLink: <a href={projectLink}>{this.props.objectTitle}</a>
+ }}
+ />;
+ }
}
- }
- render () {
+ },
+ render: function () {
+ var messageText = this.getMessageText(this.props.objectType, this.props.commentee);
+ var commentorAvatar = 'https://cdn2.scratch.mit.edu/get_image/user/' + this.props.actorId + '_32x32.png';
+ var commentorAvatarAlt = this.props.actorUsername + '\'s avatar';
+ var url = '/users/' + this.props.actorUsername;
+
+ var classes = classNames(
+ 'mod-comment-message',
+ this.props.className
+ );
return (
<SocialMessage
- className={classNames(
- 'mod-comment-message',
- this.props.className
- )}
+ className={classes}
datetime={this.props.commentDateTime}
- iconAlt="comment notification image"
iconSrc="/svgs/messages/comment.svg"
+ iconAlt="comment notification image"
>
- <p className="comment-message-info">
- {this.getMessageText(this.props.objectType, this.props.commentee)}
- </p>
+ <p className="comment-message-info">{messageText}</p>
<FlexRow className="mod-comment-message">
- <a href={`/users/${this.props.actorUsername}`}>
+ <a href={url}>
<img
- alt={`${this.props.actorUsername}'s avatar`}
className="comment-message-info-img"
- src={`https://cdn2.scratch.mit.edu/get_image/user/${this.props.actorId}_32x32.png`}
+ src={commentorAvatar}
+ alt={commentorAvatarAlt}
/>
</a>
<Comment
@@ -174,38 +162,13 @@ class CommentMessage extends React.Component {
</SocialMessage>
);
}
-}
+}));
-CommentMessage.propTypes = {
- actorId: PropTypes.number.isRequired,
- actorUsername: PropTypes.string.isRequired,
- className: PropTypes.string,
- commentDateTime: PropTypes.string.isRequired,
- commentId: PropTypes.number.isRequired,
- commentText: PropTypes.string.isRequired,
- commentee: PropTypes.string,
- intl: intlShape.isRequired,
- objectId: PropTypes.number.isRequired,
- objectTitle: PropTypes.string,
- objectType: PropTypes.oneOf([0, 1, 2]).isRequired,
- user: PropTypes.shape({
- id: PropTypes.number,
- banned: PropTypes.bool,
- username: PropTypes.string,
- token: PropTypes.string,
- thumbnailUrl: PropTypes.string,
- dateJoined: PropTypes.string,
- email: PropTypes.string,
- classroomId: PropTypes.string
- }).isRequired
+var mapStateToProps = function (state) {
+ return {
+ user: state.session.session.user
+ };
};
-const WrappedCommentMessage = injectIntl(CommentMessage);
-
-const mapStateToProps = state => ({
- user: state.session.session.user
-});
-
-const ConnectedCommentMessage = connect(mapStateToProps)(WrappedCommentMessage);
-
+var ConnectedCommentMessage = connect(mapStateToProps)(CommentMessage);
module.exports = ConnectedCommentMessage;
diff --git a/src/views/messages/message-rows/curator-invite.jsx b/src/views/messages/message-rows/curator-invite.jsx
index 1461391f5..4c9515a44 100644
--- a/src/views/messages/message-rows/curator-invite.jsx
+++ b/src/views/messages/message-rows/curator-invite.jsx
@@ -1,55 +1,51 @@
-const classNames = require('classnames');
-const FormattedMessage = require('react-intl').FormattedMessage;
-const injectIntl = require('react-intl').injectIntl;
-const intlShape = require('react-intl').intlShape;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var FormattedMessage = require('react-intl').FormattedMessage;
+var injectIntl = require('react-intl').injectIntl;
+var React = require('react');
-const SocialMessage = require('../../../components/social-message/social-message.jsx');
+var SocialMessage = require('../../../components/social-message/social-message.jsx');
-const CuratorInviteMessage = props => (
- <SocialMessage
- className={classNames(
+var CuratorInviteMessage = injectIntl(React.createClass({
+ type: 'CuratorInviteMessage',
+ propTypes: {
+ actorUsername: React.PropTypes.string.isRequired,
+ studioId: React.PropTypes.number.isRequired,
+ studioTitle: React.PropTypes.string.isRequired,
+ datetimePromoted: React.PropTypes.string.isRequired
+ },
+ render: function () {
+ var studioLink = '/studios/' + this.props.studioId + '/';
+ var tabLink = '/studios/' + this.props.studioId + '/curators/';
+ var actorLink = '/users/' + this.props.actorUsername + '/';
+ var tabText = this.props.intl.formatMessage({id: 'messages.curatorTabText'});
+
+ var classes = classNames(
'mod-curator-invite',
- props.className
- )}
- datetime={props.datetimePromoted}
- iconAlt="curator invite notification image"
- iconSrc="/svgs/messages/curator-invite.svg"
- >
- <FormattedMessage
- id="messages.curatorInviteText"
- values={{
- actorLink: (
- <a
- className="social-messages-profile-link"
- href={`/users/${props.actorUsername}/`}
- >
- {props.actorUsername}
- </a>
- ),
- studioLink: (
- <a href={`/studios/${props.studioId}/`}>
- {props.studioTitle}
- </a>
- ),
- tabLink: (
- <a href={`/studios/${props.studioId}/curators/`}>
- {props.intl.formatMessage({id: 'messages.curatorTabText'})}
- </a>
- )
- }}
- />
- </SocialMessage>
-);
+ this.props.className
+ );
+ return (
+ <SocialMessage
+ className={classes}
+ datetime={this.props.datetimePromoted}
+ iconSrc="/svgs/messages/curator-invite.svg"
+ iconAlt="curator invite notification image"
+ >
+ <FormattedMessage
+ id='messages.curatorInviteText'
+ values={{
+ actorLink: <a
+ href={actorLink}
+ className="social-messages-profile-link"
+ >
+ {this.props.actorUsername}
+ </a>,
+ studioLink: <a href={studioLink}>{this.props.studioTitle}</a>,
+ tabLink: <a href={tabLink}>{tabText}</a>
+ }}
+ />
+ </SocialMessage>
+ );
+ }
+}));
-CuratorInviteMessage.propTypes = {
- actorUsername: PropTypes.string.isRequired,
- className: PropTypes.string,
- datetimePromoted: PropTypes.string.isRequired,
- intl: intlShape,
- studioId: PropTypes.number.isRequired,
- studioTitle: PropTypes.string.isRequired
-};
-
-module.exports = injectIntl(CuratorInviteMessage);
+module.exports = CuratorInviteMessage;
diff --git a/src/views/messages/message-rows/favorite-project.jsx b/src/views/messages/message-rows/favorite-project.jsx
index b75534eaf..a8459a63f 100644
--- a/src/views/messages/message-rows/favorite-project.jsx
+++ b/src/views/messages/message-rows/favorite-project.jsx
@@ -1,47 +1,47 @@
-const classNames = require('classnames');
-const FormattedMessage = require('react-intl').FormattedMessage;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var FormattedMessage = require('react-intl').FormattedMessage;
+var React = require('react');
-const SocialMessage = require('../../../components/social-message/social-message.jsx');
+var SocialMessage = require('../../../components/social-message/social-message.jsx');
-const FavoriteProjectMessage = props => (
- <SocialMessage
- className={classNames(
+var FavoriteProjectMessage = React.createClass({
+ type: 'FavoriteProjectMessage',
+ propTypes: {
+ actorUsername: React.PropTypes.string.isRequired,
+ projectId: React.PropTypes.number.isRequired,
+ projectTitle: React.PropTypes.string.isRequired,
+ favoriteDateTime: React.PropTypes.string.isRequired
+ },
+ render: function () {
+ var projectLink = '/projects/' + this.props.projectId;
+ var profileLink = '/users/' + this.props.actorUsername;
+
+ var classes = classNames(
'mod-love-favorite',
- props.className
- )}
- datetime={props.favoriteDateTime}
- iconAlt="favorite notification image"
- iconSrc="/svgs/messages/favorite.svg"
- >
- <FormattedMessage
- id="messages.favoriteText"
- values={{
- profileLink: (
- <a
- className="social-messages-profile-link"
- href={`/users/${props.actorUsername}`}
- >
- {props.actorUsername}
- </a>
- ),
- projectLink: (
- <a href={`/projects/${props.projectId}`}>
- {props.projectTitle}
- </a>
- )
- }}
- />
- </SocialMessage>
-);
-
-FavoriteProjectMessage.propTypes = {
- actorUsername: PropTypes.string.isRequired,
- className: PropTypes.string,
- favoriteDateTime: PropTypes.string.isRequired,
- projectId: PropTypes.number.isRequired,
- projectTitle: PropTypes.string.isRequired
-};
+ this.props.className
+ );
+ return (
+ <SocialMessage
+ className={classes}
+ datetime={this.props.favoriteDateTime}
+ iconSrc="/svgs/messages/favorite.svg"
+ iconAlt="favorite notification image"
+ >
+ <FormattedMessage
+ id='messages.favoriteText'
+ values={{
+ profileLink: <a
+ href={profileLink}
+ className="social-messages-profile-link"
+ >
+ {this.props.actorUsername}
+ </a>,
+ projectLink: <a href={projectLink}>{this.props.projectTitle}</a>
+ }}
+ />
+ </SocialMessage>
+ );
+ }
+});
module.exports = FavoriteProjectMessage;
diff --git a/src/views/messages/message-rows/follow-user.jsx b/src/views/messages/message-rows/follow-user.jsx
index 2cf67ed24..32d282255 100644
--- a/src/views/messages/message-rows/follow-user.jsx
+++ b/src/views/messages/message-rows/follow-user.jsx
@@ -1,40 +1,43 @@
-const classNames = require('classnames');
-const FormattedMessage = require('react-intl').FormattedMessage;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var FormattedMessage = require('react-intl').FormattedMessage;
+var React = require('react');
-const SocialMessage = require('../../../components/social-message/social-message.jsx');
+var SocialMessage = require('../../../components/social-message/social-message.jsx');
-const FollowUserMessage = props => (
- <SocialMessage
- className={classNames(
+var FollowUserMessage = React.createClass({
+ type: 'FollowUserMessage',
+ propTypes: {
+ followerUsername: React.PropTypes.string.isRequired,
+ followDateTime: React.PropTypes.string.isRequired
+ },
+ render: function () {
+ var profileLink = '/users/' + this.props.followerUsername; + '/';
+
+ var classes = classNames(
'mod-follow-user',
- props.className
- )}
- datetime={props.followDateTime}
- iconAlt="follow notification image"
- iconSrc="/svgs/messages/follow.svg"
- >
- <FormattedMessage
- id="messages.followText"
- values={{
- profileLink: (
- <a
- className="social-messages-profile-link"
- href={`/users/${props.followerUsername}/`}
- >
- {props.followerUsername}
- </a>
- )
- }}
- />
- </SocialMessage>
-);
-
-FollowUserMessage.propTypes = {
- className: PropTypes.string,
- followDateTime: PropTypes.string.isRequired,
- followerUsername: PropTypes.string.isRequired
-};
+ this.props.className
+ );
+ return (
+ <SocialMessage
+ className={classes}
+ datetime={this.props.followDateTime}
+ iconSrc="/svgs/messages/follow.svg"
+ iconAlt="follow notification image"
+ >
+ <FormattedMessage
+ id='messages.followText'
+ values={{
+ profileLink: <a
+ href={profileLink}
+ className="social-messages-profile-link"
+ >
+ {this.props.followerUsername}
+ </a>
+ }}
+ />
+ </SocialMessage>
+ );
+ }
+});
module.exports = FollowUserMessage;
diff --git a/src/views/messages/message-rows/forum-topic-post.jsx b/src/views/messages/message-rows/forum-topic-post.jsx
index 6827c7aea..5d25dc382 100644
--- a/src/views/messages/message-rows/forum-topic-post.jsx
+++ b/src/views/messages/message-rows/forum-topic-post.jsx
@@ -1,38 +1,40 @@
-const classNames = require('classnames');
-const FormattedMessage = require('react-intl').FormattedMessage;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var FormattedMessage = require('react-intl').FormattedMessage;
+var React = require('react');
-const SocialMessage = require('../../../components/social-message/social-message.jsx');
+var SocialMessage = require('../../../components/social-message/social-message.jsx');
-const ForumPostMessage = props => (
- <SocialMessage
- className={classNames(
+var ForumPostMessage = React.createClass({
+ type: 'ForumPostMessage',
+ propTypes: {
+ actorUsername: React.PropTypes.string.isRequired,
+ topicId: React.PropTypes.number.isRequired,
+ topicTitle: React.PropTypes.string.isRequired,
+ datetimeCreated: React.PropTypes.string.isRequired
+ },
+ render: function () {
+ var topicLink = '/discuss/topic/' + this.props.topicId + '/unread/';
+
+ var classes = classNames(
'mod-forum-activity',
- props.className
- )}
- datetime={props.datetimeCreated}
- iconAlt="forum activity notification image"
- iconSrc="/svgs/messages/forum-activity.svg"
- >
- <FormattedMessage
- id="messages.forumPostText"
- values={{
- topicLink: (
- <a href={`/discuss/topic/${props.topicId}/unread/`}>
- {props.topicTitle}
- </a>
- )
- }}
- />
- </SocialMessage>
-);
-
-ForumPostMessage.propTypes = {
- className: PropTypes.string,
- datetimeCreated: PropTypes.string.isRequired,
- topicId: PropTypes.number.isRequired,
- topicTitle: PropTypes.string.isRequired
-};
+ this.props.className
+ );
+ return (
+ <SocialMessage
+ className={classes}
+ datetime={this.props.datetimeCreated}
+ iconSrc="/svgs/messages/forum-activity.svg"
+ iconAlt="forum activity notification image"
+ >
+ <FormattedMessage
+ id='messages.forumPostText'
+ values={{
+ topicLink: <a href={topicLink}>{this.props.topicTitle}</a>
+ }}
+ />
+ </SocialMessage>
+ );
+ }
+});
module.exports = ForumPostMessage;
diff --git a/src/views/messages/message-rows/love-project.jsx b/src/views/messages/message-rows/love-project.jsx
index 3d5409aff..02b536b15 100644
--- a/src/views/messages/message-rows/love-project.jsx
+++ b/src/views/messages/message-rows/love-project.jsx
@@ -1,47 +1,47 @@
-const classNames = require('classnames');
-const FormattedMessage = require('react-intl').FormattedMessage;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var FormattedMessage = require('react-intl').FormattedMessage;
+var React = require('react');
-const SocialMessage = require('../../../components/social-message/social-message.jsx');
+var SocialMessage = require('../../../components/social-message/social-message.jsx');
-const LoveProjectMessage = props => (
- <SocialMessage
- className={classNames(
+var LoveProjectMessage = React.createClass({
+ type: 'LoveProjectMessage',
+ propTypes: {
+ actorUsername: React.PropTypes.string.isRequired,
+ projectId: React.PropTypes.number.isRequired,
+ projectTitle: React.PropTypes.string.isRequired,
+ loveDateTime: React.PropTypes.string.isRequired
+ },
+ render: function () {
+ var projectLink = '/projects/' + this.props.projectId;
+ var profileLink = '/users/' + this.props.actorUsername;
+
+ var classes = classNames(
'mod-love-project',
- props.className
- )}
- datetime={props.loveDateTime}
- iconAlt="love notification image"
- iconSrc="/svgs/messages/love.svg"
- >
- <FormattedMessage
- id="messages.loveText"
- values={{
- profileLink: (
- <a
- className="social-messages-profile-link"
- href={`/users/${props.actorUsername}`}
- >
- {props.actorUsername}
- </a>
- ),
- projectLink: (
- <a href={`/projects/${props.projectId}`}>
- {props.projectTitle}
- </a>
- )
- }}
- />
- </SocialMessage>
-);
-
-LoveProjectMessage.propTypes = {
- actorUsername: PropTypes.string.isRequired,
- className: PropTypes.string,
- loveDateTime: PropTypes.string.isRequired,
- projectId: PropTypes.number.isRequired,
- projectTitle: PropTypes.string.isRequired
-};
+ this.props.className
+ );
+ return (
+ <SocialMessage
+ className={classes}
+ datetime={this.props.loveDateTime}
+ iconSrc="/svgs/messages/love.svg"
+ iconAlt="love notification image"
+ >
+ <FormattedMessage
+ id='messages.loveText'
+ values={{
+ profileLink: <a
+ href={profileLink}
+ className="social-messages-profile-link"
+ >
+ {this.props.actorUsername}
+ </a>,
+ projectLink: <a href={projectLink}>{this.props.projectTitle}</a>
+ }}
+ />
+ </SocialMessage>
+ );
+ }
+});
module.exports = LoveProjectMessage;
diff --git a/src/views/messages/message-rows/remix-project.jsx b/src/views/messages/message-rows/remix-project.jsx
index 356e6f6b5..e3d603870 100644
--- a/src/views/messages/message-rows/remix-project.jsx
+++ b/src/views/messages/message-rows/remix-project.jsx
@@ -1,54 +1,51 @@
-const classNames = require('classnames');
-const FormattedMessage = require('react-intl').FormattedMessage;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var FormattedMessage = require('react-intl').FormattedMessage;
+var React = require('react');
-const SocialMessage = require('../../../components/social-message/social-message.jsx');
+var SocialMessage = require('../../../components/social-message/social-message.jsx');
-const RemixProjectMessage = props => (
- <SocialMessage
- className={classNames(
+var RemixProjectMessage = React.createClass({
+ type: 'RemixProjectMessage',
+ propTypes: {
+ actorUsername: React.PropTypes.string.isRequired,
+ projectId: React.PropTypes.number.isRequired,
+ projectTitle: React.PropTypes.string.isRequired,
+ parentId: React.PropTypes.number.isRequired,
+ parentTitle: React.PropTypes.string.isRequired,
+ remixDate: React.PropTypes.string.isRequired
+ },
+ render: function () {
+ var projectLink = '/projects/' + this.props.projectId;
+ var profileLink = '/users/' + this.props.actorUsername;
+ var remixedProjectLink = '/projects/' + this.props.parentId;
+
+ var classes = classNames(
'mod-remix-project',
- props.className
- )}
- datetime={props.remixDate}
- iconAlt="remix notification image"
- iconSrc="/svgs/messages/remix.svg"
- >
- <FormattedMessage
- id="messages.remixText"
- values={{
- profileLink: (
- <a
- className="social-messages-profile-link"
- href={`/users/${props.actorUsername}`}
- >
- {props.actorUsername}
- </a>
- ),
- projectLink: (
- <a href={`/projects/${props.projectId}`}>
- {props.projectTitle}
- </a>
- ),
- remixedProjectLink: (
- <a href={`/projects/${props.parentId}`}>
- {props.parentTitle}
- </a>
- )
- }}
- />
- </SocialMessage>
-);
-
-RemixProjectMessage.propTypes = {
- actorUsername: PropTypes.string.isRequired,
- className: PropTypes.string,
- parentId: PropTypes.number.isRequired,
- parentTitle: PropTypes.string.isRequired,
- projectId: PropTypes.number.isRequired,
- projectTitle: PropTypes.string.isRequired,
- remixDate: PropTypes.string.isRequired
-};
+ this.props.className
+ );
+ return (
+ <SocialMessage
+ className={classes}
+ datetime={this.props.remixDate}
+ iconSrc="/svgs/messages/remix.svg"
+ iconAlt="remix notification image"
+ >
+ <FormattedMessage
+ id='messages.remixText'
+ values={{
+ profileLink: <a
+ href={profileLink}
+ className="social-messages-profile-link"
+ >
+ {this.props.actorUsername}
+ </a>,
+ projectLink: <a href={projectLink}>{this.props.projectTitle}</a>,
+ remixedProjectLink: <a href={remixedProjectLink}>{this.props.parentTitle}</a>
+ }}
+ />
+ </SocialMessage>
+ );
+ }
+});
module.exports = RemixProjectMessage;
diff --git a/src/views/messages/message-rows/scratcher-invite.jsx b/src/views/messages/message-rows/scratcher-invite.jsx
index f64641065..17d32c69f 100644
--- a/src/views/messages/message-rows/scratcher-invite.jsx
+++ b/src/views/messages/message-rows/scratcher-invite.jsx
@@ -1,50 +1,50 @@
-const FormattedDate = require('react-intl').FormattedDate;
-const FormattedMessage = require('react-intl').FormattedMessage;
-const injectIntl = require('react-intl').injectIntl;
-const intlShape = require('react-intl').intlShape;
-const PropTypes = require('prop-types');
-const React = require('react');
+var FormattedDate = require('react-intl').FormattedDate;
+var FormattedMessage = require('react-intl').FormattedMessage;
+var injectIntl = require('react-intl').injectIntl;
+var React = require('react');
-const Button = require('../../../components/forms/button.jsx');
-const FlexRow = require('../../../components/flex-row/flex-row.jsx');
+var Button = require('../../../components/forms/button.jsx');
+var FlexRow = require('../../../components/flex-row/flex-row.jsx');
-const AdminMessage = props => (
- <li className="admin-message">
- <FlexRow className="admin-message-header">
- <span className="admin-message-date">
- <FormattedDate value={new Date(props.datetimeCreated)} />
- </span>
- <Button
- className="mod-scratcher-invite-dismiss"
- onClick={props.onDismiss}
- >
- <img
- alt="close-icon"
- className="mod-scratcher-invite-icon"
- src="/svgs/modal/close-x.svg"
- />
- </Button>
- </FlexRow>
- <p className="admin-message-content">
- <FormattedMessage
- id="messages.scratcherInvite"
- values={{
- learnMore: (
- <a href={`/users/${props.username}#promote`}>
- {props.intl.formatMessage({id: 'messages.learnMore'})}
- </a>
- )
- }}
- />
- </p>
- </li>
-);
+var AdminMessage = injectIntl(React.createClass({
+ type: 'AdminMessage',
+ propTypes: {
+ id: React.PropTypes.number.isRequired,
+ username: React.PropTypes.string.isRequired,
+ datetimeCreated: React.PropTypes.string.isRequired,
+ onDismiss: React.PropTypes.func.isRequired
+ },
+ render: function () {
+ var learnMoreLink = '/users/' + this.props.username + '#promote';
+ var learnMoreMessage = this.props.intl.formatMessage({id: 'messages.learnMore'});
+ return (
+ <li className="admin-message">
+ <FlexRow className="admin-message-header">
+ <span className="admin-message-date">
+ <FormattedDate value={new Date(this.props.datetimeCreated)} />
+ </span>
+ <Button
+ className="mod-scratcher-invite-dismiss"
+ onClick={this.props.onDismiss}
+ >
+ <img
+ className="mod-scratcher-invite-icon"
+ src="/svgs/modal/close-x.svg"
+ alt="close-icon"
+ />
+ </Button>
+ </FlexRow>
+ <p className="admin-message-content">
+ <FormattedMessage
+ id='messages.scratcherInvite'
+ values={{
+ learnMore: <a href={learnMoreLink}>{learnMoreMessage}</a>
+ }}
+ />
+ </p>
+ </li>
+ );
+ }
+}));
-AdminMessage.propTypes = {
- datetimeCreated: PropTypes.string.isRequired,
- intl: intlShape,
- onDismiss: PropTypes.func.isRequired,
- username: PropTypes.string.isRequired
-};
-
-module.exports = injectIntl(AdminMessage);
+module.exports = AdminMessage;
diff --git a/src/views/messages/message-rows/studio-activity.jsx b/src/views/messages/message-rows/studio-activity.jsx
index d63c36e8f..62fd50d3e 100644
--- a/src/views/messages/message-rows/studio-activity.jsx
+++ b/src/views/messages/message-rows/studio-activity.jsx
@@ -1,38 +1,39 @@
-const classNames = require('classnames');
-const FormattedMessage = require('react-intl').FormattedMessage;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var FormattedMessage = require('react-intl').FormattedMessage;
+var React = require('react');
-const SocialMessage = require('../../../components/social-message/social-message.jsx');
+var SocialMessage = require('../../../components/social-message/social-message.jsx');
-const StudioActivityMessage = props => (
- <SocialMessage
- className={classNames(
+var StudioActivityMessage = React.createClass({
+ type: 'StudioActivityMessage',
+ propTypes: {
+ studioId: React.PropTypes.number.isRequired,
+ studioTitle: React.PropTypes.string.isRequired,
+ datetimeCreated: React.PropTypes.string.isRequired
+ },
+ render: function () {
+ var studioLink = '/studios/' + this.props.studioId + '/activity';
+
+ var classes = classNames(
'mod-studio-activity',
- props.className
- )}
- datetime={props.datetimeCreated}
- iconAlt="studio activity notification image"
- iconSrc="/svgs/messages/studio-activity.svg"
- >
- <FormattedMessage
- id="messages.studioActivityText"
- values={{
- studioLink: (
- <a href={`/studios/${props.studioId}/activity`}>
- {props.studioTitle}
- </a>
- )
- }}
- />
- </SocialMessage>
-);
-
-StudioActivityMessage.propTypes = {
- className: PropTypes.string,
- datetimeCreated: PropTypes.string.isRequired,
- studioId: PropTypes.number.isRequired,
- studioTitle: PropTypes.string.isRequired
-};
+ this.props.className
+ );
+ return (
+ <SocialMessage
+ className={classes}
+ datetime={this.props.datetimeCreated}
+ iconSrc="/svgs/messages/studio-activity.svg"
+ iconAlt="studio activity notification image"
+ >
+ <FormattedMessage
+ id='messages.studioActivityText'
+ values={{
+ studioLink: <a href={studioLink}>{this.props.studioTitle}</a>
+ }}
+ />
+ </SocialMessage>
+ );
+ }
+});
module.exports = StudioActivityMessage;
diff --git a/src/views/messages/message-rows/user-join.jsx b/src/views/messages/message-rows/user-join.jsx
index 31b88644b..a64b4fa1b 100644
--- a/src/views/messages/message-rows/user-join.jsx
+++ b/src/views/messages/message-rows/user-join.jsx
@@ -1,42 +1,38 @@
-const classNames = require('classnames');
-const FormattedMessage = require('react-intl').FormattedMessage;
-const injectIntl = require('react-intl').injectIntl;
-const intlShape = require('react-intl').intlShape;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var FormattedMessage = require('react-intl').FormattedMessage;
+var injectIntl = require('react-intl').injectIntl;
+var React = require('react');
-const SocialMessage = require('../../../components/social-message/social-message.jsx');
+var SocialMessage = require('../../../components/social-message/social-message.jsx');
-const UserJoinMessage = props => (
- <SocialMessage
- className={classNames(
+var UserJoinMessage = injectIntl(React.createClass({
+ type: 'UserJoinMessage',
+ propTypes: {
+ datetimeJoined: React.PropTypes.string.isRequired
+ },
+ render: function () {
+ var exploreText = this.props.intl.formatMessage({id: 'general.explore'});
+ var projectText = this.props.intl.formatMessage({id: 'messages.userJoinMakeProject'});
+
+ var classes = classNames(
'mod-user-join',
- props.className
- )}
- datetime={props.datetimeJoined}
- >
- <FormattedMessage
- id="messages.userJoinText"
- values={{
- exploreLink: (
- <a href="/explore">
- {props.intl.formatMessage({id: 'general.explore'})}
- </a>
- ),
- makeProjectLink: (
- <a href="/projects/editor/?tip_bar=getStarted">
- {props.intl.formatMessage({id: 'messages.userJoinMakeProject'})}
- </a>
- )
- }}
- />
- </SocialMessage>
-);
+ this.props.className
+ );
+ return (
+ <SocialMessage
+ className={classes}
+ datetime={this.props.datetimeJoined}
+ >
+ <FormattedMessage
+ id='messages.userJoinText'
+ values={{
+ exploreLink: <a href="/explore">{exploreText}</a>,
+ makeProjectLink: <a href="/projects/editor/?tip_bar=getStarted">{projectText}</a>
+ }}
+ />
+ </SocialMessage>
+ );
+ }
+}));
-UserJoinMessage.propTypes = {
- className: PropTypes.string,
- datetimeJoined: PropTypes.string.isRequired,
- intl: intlShape
-};
-
-module.exports = injectIntl(UserJoinMessage);
+module.exports = UserJoinMessage;
diff --git a/src/views/messages/presentation.jsx b/src/views/messages/presentation.jsx
index 49bed31cf..89cabefd4 100644
--- a/src/views/messages/presentation.jsx
+++ b/src/views/messages/presentation.jsx
@@ -1,210 +1,186 @@
-const bindAll = require('lodash.bindall');
-const FormattedMessage = require('react-intl').FormattedMessage;
-const FormattedNumber = require('react-intl').FormattedNumber;
-const injectIntl = require('react-intl').injectIntl;
-const intlShape = require('react-intl').intlShape;
-const PropTypes = require('prop-types');
-const React = require('react');
+var FormattedMessage = require('react-intl').FormattedMessage;
+var FormattedNumber = require('react-intl').FormattedNumber;
+var injectIntl = require('react-intl').injectIntl;
+var React = require('react');
-const Button = require('../../components/forms/button.jsx');
-const FlexRow = require('../../components/flex-row/flex-row.jsx');
-const Form = require('../../components/forms/form.jsx');
-const Select = require('../../components/forms/select.jsx');
-const TitleBanner = require('../../components/title-banner/title-banner.jsx');
+var Button = require('../../components/forms/button.jsx');
+var FlexRow = require('../../components/flex-row/flex-row.jsx');
+var Form = require('../../components/forms/form.jsx');
+var Select = require('../../components/forms/select.jsx');
+var TitleBanner = require('../../components/title-banner/title-banner.jsx');
-const messageStatuses = require('../../redux/messages').Status;
+var messageStatuses = require('../../redux/messages').Status;
// Message Components
-const AdminMessage = require('./message-rows/admin-message.jsx');
-const BecomeManagerMessage = require('./message-rows/become-manager.jsx');
-const CommentMessage = require('./message-rows/comment-message.jsx');
-const CuratorInviteMessage = require('./message-rows/curator-invite.jsx');
-const FavoriteProjectMessage = require('./message-rows/favorite-project.jsx');
-const FollowUserMessage = require('./message-rows/follow-user.jsx');
-const ForumPostMessage = require('./message-rows/forum-topic-post.jsx');
-const LoveProjectMessage = require('./message-rows/love-project.jsx');
-const RemixProjectMessage = require('./message-rows/remix-project.jsx');
-const ScratcherInvite = require('./message-rows/scratcher-invite.jsx');
-const StudioActivityMessage = require('./message-rows/studio-activity.jsx');
-const UserJoinMessage = require('./message-rows/user-join.jsx');
+var AdminMessage = require('./message-rows/admin-message.jsx');
+var BecomeManagerMessage = require('./message-rows/become-manager.jsx');
+var CommentMessage = require('./message-rows/comment-message.jsx');
+var CuratorInviteMessage = require('./message-rows/curator-invite.jsx');
+var FavoriteProjectMessage = require('./message-rows/favorite-project.jsx');
+var FollowUserMessage = require('./message-rows/follow-user.jsx');
+var ForumPostMessage= require('./message-rows/forum-topic-post.jsx');
+var LoveProjectMessage = require('./message-rows/love-project.jsx');
+var RemixProjectMessage = require('./message-rows/remix-project.jsx');
+var ScratcherInvite = require('./message-rows/scratcher-invite.jsx');
+var StudioActivityMessage = require('./message-rows/studio-activity.jsx');
+var UserJoinMessage = require('./message-rows/user-join.jsx');
require('./messages.scss');
-class SocialMessagesList extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'getComponentForMessage',
- 'renderSocialMessages',
- 'renderLoadMore',
- 'renderMessageCounter'
- ]);
- }
- getComponentForMessage (message, unread) {
- const className = (unread) ? 'mod-unread' : '';
- const key = `${message.type}_ ${message.id}`;
+var SocialMessagesList = React.createClass({
+ type: 'SocialMessagesList',
+ propTypes: {
+ loadStatus: React.PropTypes.string,
+ messages: React.PropTypes.array.isRequired,
+ numNewMessages: React.PropTypes.number,
+ loadMore: React.PropTypes.bool.isRequired,
+ loadMoreMethod: React.PropTypes.func
+ },
+ getDefaultProps: function () {
+ return {
+ loadStatus: messageStatuses.FETCHING,
+ numNewMessages: 0
+ };
+ },
+ getComponentForMessage: function (message, unread) {
+ var className = (unread) ? 'mod-unread' : '';
+ var key = message.type + '_' + message.id;
switch (message.type) {
case 'followuser':
- return (
- <FollowUserMessage
- className={className}
- followDateTime={message.datetime_created}
- followerUsername={message.actor_username}
- key={key}
- />
- );
+ return <FollowUserMessage
+ key={key}
+ className={className}
+ followerUsername={message.actor_username}
+ followDateTime={message.datetime_created}
+ />;
case 'loveproject':
- return (
- <LoveProjectMessage
- actorUsername={message.actor_username}
- className={className}
- key={key}
- loveDateTime={message.datetime_created}
- projectId={message.project_id}
- projectTitle={message.title}
- />
- );
+ return <LoveProjectMessage
+ key={key}
+ className={className}
+ actorUsername={message.actor_username}
+ projectId={message.project_id}
+ projectTitle={message.title}
+ loveDateTime={message.datetime_created}
+ />;
case 'favoriteproject':
- return (
- <FavoriteProjectMessage
- actorUsername={message.actor_username}
- className={className}
- favoriteDateTime={message.datetime_created}
- key={key}
- projectId={message.project_id}
- projectTitle={message.project_title}
- />
- );
+ return <FavoriteProjectMessage
+ key={key}
+ className={className}
+ actorUsername={message.actor_username}
+ projectId={message.project_id}
+ projectTitle={message.project_title}
+ favoriteDateTime={message.datetime_created}
+ />;
case 'addcomment':
- return (
- <CommentMessage
- actorId={message.actor_id}
- actorUsername={message.actor_username}
- className={className}
- commentDateTime={message.datetime_created}
- commentId={message.comment_id}
- commentText={message.comment_fragment}
- commentee={message.commentee_username}
- key={key}
- objectId={message.comment_obj_id}
- objectTitle={message.comment_obj_title}
- objectType={message.comment_type}
- />
- );
+ return <CommentMessage
+ key={key}
+ className={className}
+ actorUsername={message.actor_username}
+ actorId={message.actor_id}
+ objectType={message.comment_type}
+ objectId={message.comment_obj_id}
+ commentId={message.comment_id}
+ commentText={message.comment_fragment}
+ commentDateTime={message.datetime_created}
+ objectTitle={message.comment_obj_title}
+ commentee={message.commentee_username}
+ />;
case 'curatorinvite':
- return (
- <CuratorInviteMessage
- actorUsername={message.actor_username}
- className={className}
- datetimePromoted={message.datetime_created}
- key={key}
- studioId={message.gallery_id}
- studioTitle={message.title}
- />
- );
+ return <CuratorInviteMessage
+ key={key}
+ className={className}
+ actorUsername={message.actor_username}
+ studioId={message.gallery_id}
+ studioTitle={message.title}
+ datetimePromoted={message.datetime_created}
+ />;
case 'remixproject':
- return (
- <RemixProjectMessage
- actorUsername={message.actor_username}
- className={className}
- key={key}
- parentId={message.parent_id}
- parentTitle={message.parent_title}
- projectId={message.project_id}
- projectTitle={message.title}
- remixDate={message.datetime_created}
- />
- );
+ return <RemixProjectMessage
+ key={key}
+ className={className}
+ actorUsername={message.actor_username}
+ projectId={message.project_id}
+ projectTitle={message.title}
+ parentId={message.parent_id}
+ parentTitle={message.parent_title}
+ remixDate={message.datetime_created}
+ />;
case 'studioactivity':
- return (
- <StudioActivityMessage
- className={className}
- datetimeCreated={message.datetime_created}
- key={key}
- studioId={message.gallery_id}
- studioTitle={message.title}
- />
- );
+ return <StudioActivityMessage
+ key={key}
+ className={className}
+ studioId={message.gallery_id}
+ studioTitle={message.title}
+ datetimeCreated={message.datetime_created}
+ />;
case 'forumpost':
- return (
- <ForumPostMessage
- actorUsername={message.actor_username}
- className={className}
- datetimeCreated={message.datetime_created}
- key={key}
- topicId={message.topic_id}
- topicTitle={message.topic_title}
- />
- );
+ return <ForumPostMessage
+ key={key}
+ className={className}
+ actorUsername={message.actor_username}
+ topicId={message.topic_id}
+ topicTitle={message.topic_title}
+ datetimeCreated={message.datetime_created}
+ />;
case 'becomeownerstudio':
- return (
- <BecomeManagerMessage
- actorUsername={message.actor_username}
- className={className}
- datetimePromoted={message.datetime_created}
- key={key}
- studioId={message.gallery_id}
- studioTitle={message.gallery_title}
- />
- );
+ return <BecomeManagerMessage
+ key={key}
+ className={className}
+ actorUsername={message.actor_username}
+ studioId={message.gallery_id}
+ studioTitle={message.gallery_title}
+ datetimePromoted={message.datetime_created}
+ />;
case 'userjoin':
- return (
- <UserJoinMessage
- className={className}
- datetimeJoined={message.datetime_created}
- key={key}
- />
- );
+ return <UserJoinMessage
+ key={key}
+ className={className}
+ datetimeJoined={message.datetime_created}
+ />;
}
- }
- renderSocialMessages (messages, unreadCount) {
- const messageList = [];
- let counter = 0;
- for (const message of messages) {
- if (counter <= unreadCount) {
- messageList.push(this.getComponentForMessage(message, true));
+ },
+ renderSocialMessages: function (messages, unreadCount) {
+ var messageList = [];
+ for (var i in messages) {
+ if (i <= unreadCount) {
+ messageList.push(this.getComponentForMessage(messages[i], true));
} else {
- messageList.push(this.getComponentForMessage(message, false));
+ messageList.push(this.getComponentForMessage(messages[i], false));
}
- counter++;
}
return messageList;
- }
- renderLoadMore (loadMore) {
+ },
+ renderLoadMore: function (loadMore) {
if (loadMore) {
- return (
- <Button
- className="messages-social-loadmore white"
- key="load-more"
- onClick={this.props.onLoadMoreMethod}
- >
- <FormattedMessage id="general.loadMore" />
- </Button>
- );
+ return <Button
+ onClick={this.props.loadMoreMethod}
+ className="messages-social-loadmore white"
+ key="load-more"
+ >
+ <FormattedMessage id='general.loadMore' />
+ </Button>;
}
return null;
- }
- renderMessageCounter (numNewMessages) {
+ },
+ renderMessageCounter: function (numNewMessages) {
if (numNewMessages > 0) {
- return (
- <div className="messages-header-unread">
- <FormattedNumber value={numNewMessages} />
- </div>
- );
+ return <div className="messages-header-unread">
+ <FormattedNumber value={numNewMessages} />
+ </div>;
}
return null;
- }
- render () {
+ },
+ render: function () {
if (this.props.loadStatus === messageStatuses.MESSAGES_ERROR) {
return (
<section className="messages-social">
<div className="messages-social-title">
<h4>
- <FormattedMessage id="messages.messageTitle" />
+ <FormattedMessage id='messages.messageTitle' />
</h4>
</div>
- <p><FormattedMessage id="messages.requestError" /></p>
+ <p><FormattedMessage id='messages.requestError' /></p>
</section>
);
}
@@ -212,19 +188,13 @@ class SocialMessagesList extends React.Component {
return (
<section className="messages-social">
{this.props.messages.length > 0 ? [
- <div
- className="messages-social-title"
- key="messages-social-title"
- >
+ <div className="messages-social-title" key="messages-social-title">
<h4 className="messages-header">
- <FormattedMessage id="messages.messageTitle" />
+ <FormattedMessage id='messages.messageTitle' />
{this.renderMessageCounter(this.props.numNewMessages)}
</h4>
</div>,
- <ul
- className="messages-social-list"
- key="messages-social-list"
- >
+ <ul className="messages-social-list" key="messages-social-list">
{this.renderSocialMessages(this.props.messages, (this.props.numNewMessages - 1))}
</ul>
] : []}
@@ -232,168 +202,137 @@ class SocialMessagesList extends React.Component {
</section>
);
}
-}
+});
-SocialMessagesList.propTypes = {
- loadMore: PropTypes.bool.isRequired,
- loadStatus: PropTypes.string,
- messages: PropTypes.arrayOf(PropTypes.object).isRequired,
- numNewMessages: PropTypes.number,
- onLoadMoreMethod: PropTypes.func
-};
+var MessagesPresentation = injectIntl(React.createClass({
+ type: 'MessagesPresentation',
+ propTypes: {
+ sessionStatus: React.PropTypes.string.isRequired,
+ user: React.PropTypes.object.isRequired,
+ messages: React.PropTypes.array.isRequired,
+ adminMessages: React.PropTypes.array.isRequired,
+ scratcherInvite: React.PropTypes.object.isRequired,
+ numNewMessages: React.PropTypes.number,
+ handleFilterClick: React.PropTypes.func.isRequired,
+ handleAdminDismiss: React.PropTypes.func.isRequired,
+ loadMore: React.PropTypes.bool.isRequired,
+ loadMoreMethod: React.PropTypes.func,
+ requestStatus: React.PropTypes.object.isRequired,
+ filter: React.PropTypes.string
+ },
+ getDefaultProps: function () {
+ return {
+ numNewMessages: 0,
+ filterOpen: false,
+ filter: ''
+ };
+ },
+ render: function () {
+ var adminMessageLength = this.props.adminMessages.length;
+ if (Object.keys(this.props.scratcherInvite).length > 0) {
+ adminMessageLength = adminMessageLength + 1;
+ }
+ var numNewSocialMessages = this.props.numNewMessages - adminMessageLength;
+ if (numNewSocialMessages < 0) {
+ numNewSocialMessages = 0;
+ }
-SocialMessagesList.defaultProps = {
- loadStatus: messageStatuses.FETCHING,
- numNewMessages: 0
-};
-
-const MessagesPresentation = props => {
- let adminMessageLength = props.adminMessages.length;
- if (Object.keys(props.scratcherInvite).length > 0) {
- adminMessageLength = adminMessageLength + 1;
- }
- let numNewSocialMessages = props.numNewMessages - adminMessageLength;
- if (numNewSocialMessages < 0) {
- numNewSocialMessages = 0;
- }
-
- return (
- <div className="messages">
- <TitleBanner className="mod-messages">
- <FlexRow className="inner mod-messages-title">
- <h1 className="title-banner-h1 mod-messages">
- <FormattedMessage id="messages.messageTitle" />
- </h1>
- <div className="messages-title-filter">
- <Form>
- <Select
- label={props.intl.formatMessage({id: 'messages.filterBy'})}
- name="messages.filter"
- options={[
- {
- label: props.intl.formatMessage({id: 'messages.activityAll'}),
- value: ''
- },
- {
- label: props.intl.formatMessage({id: 'messages.activityComments'}),
- value: 'comments'
- },
- {
- label: props.intl.formatMessage({id: 'messages.activityProjects'}),
- value: 'projects'
- },
- {
- label: props.intl.formatMessage({id: 'messages.activityStudios'}),
- value: 'studios'
- },
- {
- label: props.intl.formatMessage({id: 'messages.activityForums'}),
- value: 'forums'
- }
- ]}
- value={props.filter}
- onChange={props.onFilterClick}
- />
- </Form>
- </div>
- </FlexRow>
- </TitleBanner>
- <div className="messages-details inner">
- {props.adminMessages.length > 0 || Object.keys(props.scratcherInvite).length > 0 ? [
- <section
- className="messages-admin"
- key="messages-admin"
- >
- <div className="messages-admin-title">
- <h4 className="messages-header">
- <FormattedMessage id="messages.scratchTeamTitle" />
- <div className="messages-header-unread">
- <FormattedNumber value={adminMessageLength} />
- </div>
- </h4>
+ return (
+ <div className="messages">
+ <TitleBanner className="mod-messages">
+ <FlexRow className="inner mod-messages-title">
+ <h1 className="title-banner-h1 mod-messages">
+ <FormattedMessage id='messages.messageTitle' />
+ </h1>
+ <div className="messages-title-filter">
+ <Form>
+ <Select
+ label={this.props.intl.formatMessage({id: 'messages.filterBy'})}
+ name="messages.filter"
+ onChange={this.props.handleFilterClick}
+ options={[
+ {
+ label: this.props.intl.formatMessage({id: 'messages.activityAll'}),
+ value: ''
+ },
+ {
+ label: this.props.intl.formatMessage({id: 'messages.activityComments'}),
+ value: 'comments'
+ },
+ {
+ label: this.props.intl.formatMessage({id: 'messages.activityProjects'}),
+ value: 'projects'
+ },
+ {
+ label: this.props.intl.formatMessage({id: 'messages.activityStudios'}),
+ value: 'studios'
+ },
+ {
+ label: this.props.intl.formatMessage({id: 'messages.activityForums'}),
+ value: 'forums'
+ }
+ ]}
+ value={this.props.filter}
+ />
+ </Form>
</div>
- <ul className="messages-admin-list">
- {Object.keys(props.scratcherInvite).length > 0 ? [
- <ScratcherInvite
- datetimeCreated={props.scratcherInvite.datetime_created}
- id={props.scratcherInvite.id}
- key={`invite${props.scratcherInvite.id}`}
- username={props.user.username}
- onDismiss={() => { // eslint-disable-line react/jsx-no-bind
- props.onAdminDismiss('invite', props.scratcherInvite.id);
- }}
- />
- ] : []}
- {props.adminMessages.map(item => (
- <AdminMessage
- datetimeCreated={item.datetime_created}
- id={item.id}
- key={`adminmessage${item.id}`}
- message={item.message}
- onDismiss={() => { // eslint-disable-line react/jsx-no-bind
- props.onAdminDismiss('notification', item.id);
- }}
- />
- ))}
- </ul>
- </section>
- ] : []}
- {props.requestStatus.admin === messageStatuses.ADMIN_ERROR ? [
- <section
- className="messages-admin"
- key="messages-admin-error"
- >
- <h4>
- <FormattedMessage id="messages.scratchTeamTitle" />
- </h4>
- <p><FormattedMessage id="messages.requestError" /></p>
- </section>
- ] : []}
- <SocialMessagesList
- loadMore={props.loadMore}
- loadStatus={props.requestStatus.message}
- messages={props.messages}
- numNewMessages={numNewSocialMessages}
- onLoadMoreMethod={props.onLoadMoreMethod}
- />
+ </FlexRow>
+ </TitleBanner>
+ <div className="messages-details inner">
+ {this.props.adminMessages.length > 0 || Object.keys(this.props.scratcherInvite).length > 0 ? [
+ <section className="messages-admin">
+ <div className="messages-admin-title">
+ <h4 className="messages-header">
+ <FormattedMessage id='messages.scratchTeamTitle' />
+ <div className="messages-header-unread">
+ <FormattedNumber value={adminMessageLength} />
+ </div>
+ </h4>
+ </div>
+ <ul className="messages-admin-list">
+ {Object.keys(this.props.scratcherInvite).length > 0 ? [
+ <ScratcherInvite
+ id={this.props.scratcherInvite.id}
+ username={this.props.user.username}
+ datetimeCreated={this.props.scratcherInvite.datetime_created}
+ onDismiss={function () {
+ this.props.handleAdminDismiss('invite', this.props.scratcherInvite.id);
+ }.bind(this)}
+ />
+ ] : []}
+ {this.props.adminMessages.map(function (item) {
+ return <AdminMessage
+ key={'adminmessage' + item.id}
+ id={item.id}
+ message={item.message}
+ datetimeCreated={item.datetime_created}
+ onDismiss={function () {
+ this.props.handleAdminDismiss('notification', item.id);
+ }.bind(this)}
+ />;
+ }.bind(this))}
+ </ul>
+ </section>
+ ] : []}
+ {this.props.requestStatus.admin === messageStatuses.ADMIN_ERROR ? [
+ <section className="messages-admin">
+ <h4>
+ <FormattedMessage id='messages.scratchTeamTitle' />
+ </h4>
+ <p><FormattedMessage id='messages.requestError' /></p>
+ </section>
+ ] : []}
+ <SocialMessagesList
+ loadStatus={this.props.requestStatus.messages}
+ messages={this.props.messages}
+ numNewMessages={numNewSocialMessages}
+ loadMore={this.props.loadMore}
+ loadMoreMethod={this.props.loadMoreMethod}
+ />
+ </div>
</div>
- </div>
- );
-};
+ );
+ }
+}));
-MessagesPresentation.propTypes = {
- adminMessages: PropTypes.arrayOf(PropTypes.object).isRequired,
- filter: PropTypes.string,
- intl: intlShape,
- loadMore: PropTypes.bool.isRequired,
- messages: PropTypes.arrayOf(PropTypes.object).isRequired,
- numNewMessages: PropTypes.number,
- onAdminDismiss: PropTypes.func.isRequired,
- onFilterClick: PropTypes.func.isRequired,
- onLoadMoreMethod: PropTypes.func,
- requestStatus: PropTypes.shape({
- admin: PropTypes.string,
- clear: PropTypes.string,
- message: PropTypes.string,
- delete: PropTypes.string
- }).isRequired,
- scratcherInvite: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
- user: PropTypes.shape({
- id: PropTypes.number,
- banned: PropTypes.bool,
- username: PropTypes.string,
- token: PropTypes.string,
- thumbnailUrl: PropTypes.string,
- dateJoined: PropTypes.string,
- email: PropTypes.string,
- classroomId: PropTypes.string
- }).isRequired
-};
-
-MessagesPresentation.defaultProps = {
- filter: '',
- filterOpen: false,
- numNewMessages: 0
-};
-
-module.exports = injectIntl(MessagesPresentation);
+module.exports = MessagesPresentation;
diff --git a/src/views/microworld/art/art.jsx b/src/views/microworld/art/art.jsx
index d70d60e48..62678a605 100644
--- a/src/views/microworld/art/art.jsx
+++ b/src/views/microworld/art/art.jsx
@@ -1,10 +1,8 @@
-const React = require('react'); // eslint-disable-line
+var React = require('react'); // eslint-disable-line
+var render = require('../../../lib/render.jsx');
+var Microworld = require('../../../components/microworld/microworld.jsx');
+var Page = require('../../../components/page/www/page.jsx');
-const Microworld = require('../../../components/microworld/microworld.jsx');
-
-const Page = require('../../../components/page/www/page.jsx');
-const render = require('../../../lib/render.jsx');
-
-const microworldData = require('./art.json');
+var microworldData = require('./art.json');
render(<Page><Microworld microworldData={microworldData} /></Page>, document.getElementById('app'));
diff --git a/src/views/microworld/fashion/fashion.jsx b/src/views/microworld/fashion/fashion.jsx
index 17d37b470..0097fb9ad 100644
--- a/src/views/microworld/fashion/fashion.jsx
+++ b/src/views/microworld/fashion/fashion.jsx
@@ -1,10 +1,8 @@
-const React = require('react'); // eslint-disable-line
+var React = require('react'); // eslint-disable-line
+var render = require('../../../lib/render.jsx');
+var Microworld = require('../../../components/microworld/microworld.jsx');
+var Page = require('../../../components/page/www/page.jsx');
-const Microworld = require('../../../components/microworld/microworld.jsx');
-
-const Page = require('../../../components/page/www/page.jsx');
-const render = require('../../../lib/render.jsx');
-
-const microworldData = require('./fashion.json');
+var microworldData = require('./fashion.json');
render(<Page><Microworld microworldData={microworldData} /></Page>, document.getElementById('app'));
diff --git a/src/views/microworld/hiphop/hiphop.jsx b/src/views/microworld/hiphop/hiphop.jsx
index 0408aae29..ed4ce62aa 100644
--- a/src/views/microworld/hiphop/hiphop.jsx
+++ b/src/views/microworld/hiphop/hiphop.jsx
@@ -1,10 +1,8 @@
-const React = require('react'); // eslint-disable-line
+var React = require('react'); // eslint-disable-line
+var render = require('../../../lib/render.jsx');
+var Microworld = require('../../../components/microworld/microworld.jsx');
+var Page = require('../../../components/page/www/page.jsx');
-const Microworld = require('../../../components/microworld/microworld.jsx');
-
-const Page = require('../../../components/page/www/page.jsx');
-const render = require('../../../lib/render.jsx');
-
-const microworldData = require('./hiphop.json');
+var microworldData = require('./hiphop.json');
render(<Page><Microworld microworldData={microworldData} /></Page>, document.getElementById('app'));
diff --git a/src/views/microworld/soccer/soccer.jsx b/src/views/microworld/soccer/soccer.jsx
index 5b71c1e78..0aada133b 100644
--- a/src/views/microworld/soccer/soccer.jsx
+++ b/src/views/microworld/soccer/soccer.jsx
@@ -1,10 +1,8 @@
-const React = require('react'); // eslint-disable-line
+var React = require('react'); // eslint-disable-line
+var render = require('../../../lib/render.jsx');
+var Microworld = require('../../../components/microworld/microworld.jsx');
+var Page = require('../../../components/page/www/page.jsx');
-const Microworld = require('../../../components/microworld/microworld.jsx');
-
-const Page = require('../../../components/page/www/page.jsx');
-const render = require('../../../lib/render.jsx');
-
-const microworldData = require('./soccer.json');
+var microworldData = require('./soccer.json');
render(<Page><Microworld microworldData={microworldData} /></Page>, document.getElementById('app'));
diff --git a/src/views/microworldshomepage/microworldshomepage.jsx b/src/views/microworldshomepage/microworldshomepage.jsx
index 8c2cb4a33..f68520ac6 100644
--- a/src/views/microworldshomepage/microworldshomepage.jsx
+++ b/src/views/microworldshomepage/microworldshomepage.jsx
@@ -1,49 +1,47 @@
-const injectIntl = require('react-intl').injectIntl;
-const intlShape = require('react-intl').intlShape;
-const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
-const FormattedMessage = require('react-intl').FormattedMessage;
-const React = require('react');
+var React = require('react');
+var injectIntl = require('react-intl').injectIntl;
+var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
+var FormattedMessage = require('react-intl').FormattedMessage;
+var render = require('../../lib/render.jsx');
-const MasonryGrid = require('../../components/masonrygrid/masonrygrid.jsx');
-const TitleBanner = require('../../components/title-banner/title-banner.jsx');
-const TTTTile = require('../../components/ttt-tile/ttt-tile.jsx');
-
-const Page = require('../../components/page/www/page.jsx');
-const render = require('../../lib/render.jsx');
-
-const Tiles = require('./microworlds.json');
+var MasonryGrid = require('../../components/masonrygrid/masonrygrid.jsx');
+var Page = require('../../components/page/www/page.jsx');
+var TitleBanner = require('../../components/title-banner/title-banner.jsx');
+var TTTTile = require('../../components/ttt-tile/ttt-tile.jsx');
+var Tiles = require('./microworlds.json');
require('./microworldshomepage.scss');
-const MicroworldsHomepage = props => (
- <div className="microworlds">
- <TitleBanner className="masthead mod-blue-bg">
- <h1 className="title-banner-h1">
- <FormattedMessage id="microworlds.title" />
- </h1>
- <p className="intro title-banner-p">
- <FormattedHTMLMessage id="microworlds.subTitle" />
- </p>
- </TitleBanner>
- <div className="inner">
- <MasonryGrid >
- {Tiles.map((tile, key) => (
- <TTTTile
- key={key}
- thumbUrl={tile.thumbUrl}
- title={props.intl.formatMessage({id: tile.title})}
- tutorialLoc={tile.tutorialLoc}
- />
- ))}
- </MasonryGrid>
- </div>
- </div>
-);
+var MicroworldsHomepage = injectIntl(React.createClass({
+ type: 'MicroworldsHomepage',
+ render: function () {
+ return (
+ <div className="microworlds">
+ <TitleBanner className="masthead mod-blue-bg">
+ <h1 className="title-banner-h1">
+ <FormattedMessage id="microworlds.title" />
+ </h1>
+ <p className="intro title-banner-p">
+ <FormattedHTMLMessage id="microworlds.subTitle" />
+ </p>
+ </TitleBanner>
+ <div className="inner">
+ <MasonryGrid >
+ {Tiles.map(
+ function (tile, key) {
+ return <TTTTile
+ key={key}
+ title={this.props.intl.formatMessage({id: tile.title})}
+ tutorialLoc={tile.tutorialLoc}
+ thumbUrl={tile.thumbUrl}
+ />;
+ }, this)
+ }
+ </MasonryGrid>
+ </div>
+ </div>
+ );
+ }
+}));
-MicroworldsHomepage.propTypes = {
- intl: intlShape
-};
-
-const WrappedMicroworldsHomepage = injectIntl(MicroworldsHomepage);
-
-render(<Page><WrappedMicroworldsHomepage /></Page>, document.getElementById('app'));
+render(<Page><MicroworldsHomepage /></Page>, document.getElementById('app'));
diff --git a/src/views/preview-faq/preview-faq.jsx b/src/views/preview-faq/preview-faq.jsx
index d272ee327..d054ec5ae 100644
--- a/src/views/preview-faq/preview-faq.jsx
+++ b/src/views/preview-faq/preview-faq.jsx
@@ -1,50 +1,42 @@
-const cheerio = require('cheerio');
-const injectIntl = require('react-intl').injectIntl;
-const intlShape = require('react-intl').intlShape;
-const React = require('react');
-const xhr = require('xhr');
+var cheerio = require('cheerio');
+var injectIntl = require('react-intl').injectIntl;
+var React = require('react');
+var xhr = require('xhr');
-const InformationPage = require('../../components/informationpage/informationpage.jsx');
-
-const Page = require('../../components/page/www/page.jsx');
-const render = require('../../lib/render.jsx');
+var InformationPage = require('../../components/informationpage/informationpage.jsx');
+var Page = require('../../components/page/www/page.jsx');
+var render = require('../../lib/render.jsx');
require('./preview-faq.scss');
-class PreviewFaq extends React.Component {
- constructor (props) {
- super(props);
- this.state = {
+var PreviewFaq = injectIntl(React.createClass({
+ type: 'PreviewFaq',
+ getInitialState: function () {
+ return {
faqDoc: {__html: ''}
};
- }
- componentDidMount () {
+ },
+ componentDidMount: function () {
xhr({
method: 'GET',
uri: 'https://docs.google.com/document/d/e/2PACX-1vQZFrpOagYqEwcrBBCplIomiyguPAodIJVnCq9Sr11WDI_aa2b-JtDWak-Aiu-cwWobTXftRMF6wBbd/pub?embedded=true'
- }, (error, response, body) => {
- const $ = cheerio.load(body);
+ }, function (error, response, body) {
+ var $ = cheerio.load(body);
this.setState({faqDoc: {__html: $('html').html()}});
- });
- }
- render () {
+ }.bind(this));
+ },
+ render: function () {
return (
<InformationPage title={this.props.intl.formatMessage({id: 'preview-faq.title'})}>
<div className="inner">
<div
className="preview-faq"
- dangerouslySetInnerHTML={this.state.faqDoc} // eslint-disable-line react/no-danger
+ dangerouslySetInnerHTML={this.state.faqDoc}
/>
</div>
</InformationPage>
);
}
-}
+}));
-PreviewFaq.propTypes = {
- intl: intlShape
-};
-
-const WrappedPreviewFAQ = injectIntl(PreviewFaq);
-
-render(<Page><WrappedPreviewFAQ /></Page>, document.getElementById('app'));
+render(<Page><PreviewFaq /></Page>, document.getElementById('app'));
diff --git a/src/views/privacypolicy/privacypolicy.jsx b/src/views/privacypolicy/privacypolicy.jsx
index a883dbbd4..69ab4eac7 100644
--- a/src/views/privacypolicy/privacypolicy.jsx
+++ b/src/views/privacypolicy/privacypolicy.jsx
@@ -1,224 +1,228 @@
-const React = require('react');
+var React = require('react');
+var render = require('../../lib/render.jsx');
-const Page = require('../../components/page/www/page.jsx');
-const render = require('../../lib/render.jsx');
+var Page = require('../../components/page/www/page.jsx');
+var InformationPage = require('../../components/informationpage/informationpage.jsx');
-const InformationPage = require('../../components/informationpage/informationpage.jsx');
-
-const Privacypolicy = () => (
- <InformationPage title={'Privacy Policy'}>
- <div className="inner info-inner">
- <section>
- <p className="intro">
- We made Scratch so people like you could create projects,
- share ideas, and build a community. To make this happen,
- we collect some information for our users. The Scratch Team
- understands how important privacy is to our community,
- especially kids and parents. We wrote this privacy policy
- to explain what information we collect, how we use it,
- and what we're doing to keep it safe. If you have any
- questions regarding this privacy policy, you can{' '}
- <a href="/contact-us">contact us</a>.
- </p>
- <p className="callout">
- Please do not share personal contact information, such as
- your name, physical address, email address, phone number,
- or anything else that can be used to make contact outside
- of the Scratch website. Please report projects, comments,
- or forum posts that contain this kind of information so
- the Scratch team can remove it, and please remind the
- author of our policy.
- </p>
- </section>
- <section id="collection">
- <dl>
- <span className="nav-spacer" />
- <h3>What information does the Scratch Team collect about me?</h3>
- <dt>Account Information: </dt>
- <dd>
- In order to build projects or comment on other users' projects,
- you need to make an account. During account creation, we ask you
- for a username, your country, birth month and year, gender, and
- your email address (or your parent or guardian's email address if
- you are under 13 years old). We ask that you select a user name
- that does not disclose your real name or other information that
- could identify you. Other users can see your username and country,
- but not your age, gender, or email address.
- </dd>
- <dt>User-generated Content: </dt>
- <dd>
- All of your Scratch projects, comments, and forum posts are stored
- on the Scratch servers. Other users can see your shared projects,
- comments, and forum posts, along with your username. Because the
- Scratch Team is responsible for moderation, we have access to all
- content stored on the Scratch website, including unshared projects.
- If you prefer to work on projects in complete privacy, you can use
- either the <a href="/download">Scratch 2 offline editor</a>{' '}
- or <a href="/scratch_1.4">Scratch 1.4</a>.
- </dd>
- <dt>Usage Information: </dt>
- <dd>
- When you use Scratch, our servers will automatically store a limited
- amount of information about how you use the website. This information
- includes a number that identifies your computer (the IP address), which
- pages you visited, and what browser you are using.
- </dd>
- <dt>Google Analytics: </dt>
- <dd>
- We also collect some data on where you click and which parts of the
- site you visit using Google Analytics. This "click data" helps us figure
- out ways to improve the website. Information collected and processed by
- Google Analytics includes the user's IP address, network location, and
- geographic location. Google Analytics acquires all its information
- directly from the user, by installing a cookie (see below) on your
- computer, if you have enabled JavaScript. Scratch does not share any
- information it collects with Google, and Google does not collect any
- personal identifying information about you.
- </dd>
- <dt>Cookies: </dt>
- <dd>
- When you log in, the Scratch website asks your browser to put an http
- "cookie" on your computer. The cookie is actually a small text file
- that our site can send to your browser for storage on your computer.
- This allows the website to remember that you are logged in when you
- go to a different page.
- </dd>
- </dl>
- </section>
- <section id="usage">
- <span className="nav-spacer" />
- <h3>How does the Scratch Team use my information?</h3>
- <ul>
- <li>
- We collect age and gender data so that we know who is using our
- website.
- </li>
- <li>
- If you forget your password, we will ask you to disclose to us
- your birth month and year so that we can verify your account, and
- your email address so that we can send you a new password.
- </li>
- <li>
- We will use your email address to respond to messages you send us
- or to communicate with you about the Scratch service or your account.
- </li>
- <li>
- We send out occasional email updates about Scratch to the confirmed
- email address on your account. Scratch will never sell or share your
- email address without your permission. You can unsubscribe from these
- updates by clicking the unsubscribe link found at the bottom of the
- email.
- </li>
- <li>
- Parents and guardians who register their under-13 year olds for
- Scratch may also receive additional updates from the{' '}
- <a href="http://www.scratchfoundation.org/">Scratch Foundation</a>,
- a non-profit that supports Scratch educational initiatives.
- The Scratch Foundation will never sell or share your email
- address without your permission. You can unsubscribe from these
- updates by clicking the unsubscribe link found at the bottom of
- the email.
- </li>
- <li>
- If we detect repeated abusive behavior from your account, IP address,
- or email address, we may share your account name, IP address, and the
- time and content of the abusive behavior with the IP address owner
- (such as a school or internet service provider).
- </li>
- <li>
- We may use de-identified location, age, gender, and usage data
- in research studies intended to improve our understanding of
- how people learn with Scratch. The results of this research are
- shared with educators and researchers through conferences,
- journals, and other publications. You can find out more on our{' '}
- <a href="/info/research">Research page</a>.
- </li>
- <li>
- We may disclose some of the information we collect to third-party
- service providers that help us manage communications to and from
- the Scratch website and improve website performance. We are
- satisfied that these service providers have privacy policies that
- restrict them from further disclosing any of your information.
- </li>
- <li>
- Other than as described above, we will never share personally
- identifiable information about you with any other person,
- company, or organization, except:
+var Privacypolicy = React.createClass({
+ type: 'Privacypolicy',
+ render: function () {
+ return (
+ <InformationPage title={'Privacy Policy'}>
+ <div className="inner info-inner">
+ <section>
+ <p className="intro">
+ We made Scratch so people like you could create projects,
+ share ideas, and build a community. To make this happen,
+ we collect some information for our users. The Scratch Team
+ understands how important privacy is to our community,
+ especially kids and parents. We wrote this privacy policy
+ to explain what information we collect, how we use it,
+ and what we're doing to keep it safe. If you have any
+ questions regarding this privacy policy, you can{' '}
+ <a href="/contact-us">contact us</a>.
+ </p>
+ <p className="callout">
+ Please do not share personal contact information, such as
+ your name, physical address, email address, phone number,
+ or anything else that can be used to make contact outside
+ of the Scratch website. Please report projects, comments,
+ or forum posts that contain this kind of information so
+ the Scratch team can remove it, and please remind the
+ author of our policy.
+ </p>
+ </section>
+ <section id="collection">
+ <dl>
+ <span className="nav-spacer"></span>
+ <h3>What information does the Scratch Team collect about me?</h3>
+ <dt>Account Information: </dt>
+ <dd>
+ In order to build projects or comment on other users' projects,
+ you need to make an account. During account creation, we ask you
+ for a username, your country, birth month and year, gender, and
+ your email address (or your parent or guardian's email address if
+ you are under 13 years old). We ask that you select a user name
+ that does not disclose your real name or other information that
+ could identify you. Other users can see your username and country,
+ but not your age, gender, or email address.
+ </dd>
+ <dt>User-generated Content: </dt>
+ <dd>
+ All of your Scratch projects, comments, and forum posts are stored
+ on the Scratch servers. Other users can see your shared projects,
+ comments, and forum posts, along with your username. Because the
+ Scratch Team is responsible for moderation, we have access to all
+ content stored on the Scratch website, including unshared projects.
+ If you prefer to work on projects in complete privacy, you can use
+ either the <a href="/download">Scratch 2 offline editor</a>{' '}
+ or <a href="/scratch_1.4">Scratch 1.4</a>.
+ </dd>
+ <dt>Usage Information: </dt>
+ <dd>
+ When you use Scratch, our servers will automatically store a limited
+ amount of information about how you use the website. This information
+ includes a number that identifies your computer (the IP address), which
+ pages you visited, and what browser you are using.
+ </dd>
+ <dt>Google Analytics: </dt>
+ <dd>
+ We also collect some data on where you click and which parts of the
+ site you visit using Google Analytics. This "click data" helps us figure
+ out ways to improve the website. Information collected and processed by
+ Google Analytics includes the user's IP address, network location, and
+ geographic location. Google Analytics acquires all its information
+ directly from the user, by installing a cookie (see below) on your
+ computer, if you have enabled JavaScript. Scratch does not share any
+ information it collects with Google, and Google does not collect any
+ personal identifying information about you.
+ </dd>
+ <dt>Cookies: </dt>
+ <dd>
+ When you log in, the Scratch website asks your browser to put an http
+ "cookie" on your computer. The cookie is actually a small text file
+ that our site can send to your browser for storage on your computer.
+ This allows the website to remember that you are logged in when you
+ go to a different page.
+ </dd>
+ </dl>
+ </section>
+ <section id="usage">
+ <span className="nav-spacer"></span>
+ <h3>How does the Scratch Team use my information?</h3>
<ul>
<li>
- As required to comply with our obligations under the law.
+ We collect age and gender data so that we know who is using our
+ website.
</li>
<li>
- For technical reasons, if we are required to transfer the
- data on our servers to another location or organization.
+ If you forget your password, we will ask you to disclose to us
+ your birth month and year so that we can verify your account, and
+ your email address so that we can send you a new password.
+ </li>
+ <li>
+ We will use your email address to respond to messages you send us
+ or to communicate with you about the Scratch service or your account.
+ </li>
+ <li>
+ We send out occasional email updates about Scratch to the confirmed
+ email address on your account. Scratch will never sell or share your
+ email address without your permission. You can unsubscribe from these
+ updates by clicking the unsubscribe link found at the bottom of the
+ email.
+ </li>
+ <li>
+ Parents and guardians who register their under-13 year olds for
+ Scratch may also receive additional updates from the{' '}
+ <a href="http://www.scratchfoundation.org/">Scratch Foundation</a>,
+ a non-profit that supports Scratch educational initiatives.
+ The Scratch Foundation will never sell or share your email
+ address without your permission. You can unsubscribe from these
+ updates by clicking the unsubscribe link found at the bottom of
+ the email.
+ </li>
+ <li>
+ If we detect repeated abusive behavior from your account, IP address,
+ or email address, we may share your account name, IP address, and the
+ time and content of the abusive behavior with the IP address owner
+ (such as a school or internet service provider).
+ </li>
+ <li>
+ We may use de-identified location, age, gender, and usage data
+ in research studies intended to improve our understanding of
+ how people learn with Scratch. The results of this research are
+ shared with educators and researchers through conferences,
+ journals, and other publications. You can find out more on our{' '}
+ <a href="/info/research">Research page</a>.
+ </li>
+ <li>
+ We may disclose some of the information we collect to third-party
+ service providers that help us manage communications to and from
+ the Scratch website and improve website performance. We are
+ satisfied that these service providers have privacy policies that
+ restrict them from further disclosing any of your information.
+ </li>
+ <li>
+ Other than as described above, we will never share personally
+ identifiable information about you with any other person,
+ company, or organization, except:
+ <ul>
+ <li>
+ As required to comply with our obligations under the law.
+ </li>
+ <li>
+ For technical reasons, if we are required to transfer the
+ data on our servers to another location or organization.
+ </li>
+ </ul>
+ </li>
+ <li>
+ Scratch reserves the right to share user information with the
+ appropriate authorities (including schools, school districts,
+ and law enforcement, when necessary) for the purposes of protecting
+ the safety of users, other individuals, or the security of the site.
</li>
</ul>
- </li>
- <li>
- Scratch reserves the right to share user information with the
- appropriate authorities (including schools, school districts,
- and law enforcement, when necessary) for the purposes of protecting
- the safety of users, other individuals, or the security of the site.
- </li>
- </ul>
- </section>
- <section id="update">
- <span className="nav-spacer" />
- <h3>How can I update my personal information?</h3>
- <p>
- You can update your password, email address, and country through
- the <a href="/account/password_change">Account Settings</a> page.
- You can also reset your password through the{' '}
- <a href="/account/password_reset">Account Reset</a>{' '}
- page. You cannot change your username, but you can make a new
- account and manually copy your projects to the new account.
- </p>
- <p>
- If you want to delete your account entirely, log in to Scratch,
- and then click your username in the top right-hand corner. Select
- "Account Settings," then click the "I want to delete my account"
- link at the bottom of the page.
- </p>
- </section>
- <section id="protection">
- <span className="nav-spacer" />
- <h3>How does the Scratch Team protect my information?</h3>
- <p>
- The Scratch Team has in place physical and electronic procedures
- to protect the information we collect on the Scratch website. We
- strictly limit individual access to the Scratch servers and the
- data we store on them. However, as effective as these measures
- are, no security system is impenetrable. We cannot completely
- guarantee the security of our database, nor can we guarantee that
- the information you supply will not be intercepted while being
- transmitted to us over the Internet.
- </p>
- </section>
- <section id="changes">
- <span className="nav-spacer" />
- <h3>Notifications of Changes to the Privacy Policy</h3>
- <p>
- We review our security measures and Privacy Policy on a periodic
- basis, and we may modify our policies as appropriate. We may also
- change or update our Privacy Policy if we add new services or
- features. If we make any changes to our privacy practices, we will
- amend this Privacy Policy accordingly and post the amended policy
- on the Scratch website. We encourage you to review our Privacy
- Policy on a regular basis.
- </p>
- </section>
- <p>The Scratch Privacy Policy was last updated: November 2016</p>
- </div>
- <nav>
- <ol>
- <li><a href="#collection">What information does the Scratch Team collect about me?</a></li>
- <li><a href="#usage">How does the Scratch Team use my information?</a></li>
- <li><a href="#update">How can I update my personal information?</a></li>
- <li><a href="#protection">How does the Scratch Team protect my information?</a></li>
- <li><a href="#changes">Notifications of Changes to the Privacy Policy</a></li>
- </ol>
- </nav>
- </InformationPage>
-);
+ </section>
+ <section id="update">
+ <span className="nav-spacer"></span>
+ <h3>How can I update my personal information?</h3>
+ <p>
+ You can update your password, email address, and country through
+ the <a href="/account/password_change">Account Settings</a> page.
+ You can also reset your password through the{' '}
+ <a href="/account/password_reset">Account Reset</a>{' '}
+ page. You cannot change your username, but you can make a new
+ account and manually copy your projects to the new account.
+ </p>
+ <p>
+ If you want to delete your account entirely, log in to Scratch,
+ and then click your username in the top right-hand corner. Select
+ "Account Settings," then click the "I want to delete my account"
+ link at the bottom of the page.
+ </p>
+ </section>
+ <section id="protection">
+ <span className="nav-spacer"></span>
+ <h3>How does the Scratch Team protect my information?</h3>
+ <p>
+ The Scratch Team has in place physical and electronic procedures
+ to protect the information we collect on the Scratch website. We
+ strictly limit individual access to the Scratch servers and the
+ data we store on them. However, as effective as these measures
+ are, no security system is impenetrable. We cannot completely
+ guarantee the security of our database, nor can we guarantee that
+ the information you supply will not be intercepted while being
+ transmitted to us over the Internet.
+ </p>
+ </section>
+ <section id="changes">
+ <span className="nav-spacer"></span>
+ <h3>Notifications of Changes to the Privacy Policy</h3>
+ <p>
+ We review our security measures and Privacy Policy on a periodic
+ basis, and we may modify our policies as appropriate. We may also
+ change or update our Privacy Policy if we add new services or
+ features. If we make any changes to our privacy practices, we will
+ amend this Privacy Policy accordingly and post the amended policy
+ on the Scratch website. We encourage you to review our Privacy
+ Policy on a regular basis.
+ </p>
+ </section>
+ <p>The Scratch Privacy Policy was last updated: November 2016</p>
+ </div>
+ <nav>
+ <ol>
+ <li><a href="#collection">What information does the Scratch Team collect about me?</a></li>
+ <li><a href="#usage">How does the Scratch Team use my information?</a></li>
+ <li><a href="#update">How can I update my personal information?</a></li>
+ <li><a href="#protection">How does the Scratch Team protect my information?</a></li>
+ <li><a href="#changes">Notifications of Changes to the Privacy Policy</a></li>
+ </ol>
+ </nav>
+ </InformationPage>
+ );
+ }
+});
render(<Page><Privacypolicy /></Page>, document.getElementById('app'));
diff --git a/src/views/search/search.jsx b/src/views/search/search.jsx
index a0b2c4dd1..be30ee8ab 100644
--- a/src/views/search/search.jsx
+++ b/src/views/search/search.jsx
@@ -1,40 +1,45 @@
-const bindAll = require('lodash.bindall');
-const connect = require('react-redux').connect;
-const FormattedMessage = require('react-intl').FormattedMessage;
-const injectIntl = require('react-intl').injectIntl;
-const intlShape = require('react-intl').intlShape;
-const PropTypes = require('prop-types');
-const React = require('react');
+var injectIntl = require('react-intl').injectIntl;
+var FormattedMessage = require('react-intl').FormattedMessage;
+var React = require('react');
+var connect = require('react-redux').connect;
+var render = require('../../lib/render.jsx');
-const api = require('../../lib/api');
-const Button = require('../../components/forms/button.jsx');
-const Grid = require('../../components/grid/grid.jsx');
-const navigationActions = require('../../redux/navigation.js');
-const TitleBanner = require('../../components/title-banner/title-banner.jsx');
-const Tabs = require('../../components/tabs/tabs.jsx');
+var api = require('../../lib/api');
-const Page = require('../../components/page/www/page.jsx');
-const render = require('../../lib/render.jsx');
+var Page = require('../../components/page/www/page.jsx');
+var TitleBanner = require('../../components/title-banner/title-banner.jsx');
+var Button = require('../../components/forms/button.jsx');
+var Tabs = require('../../components/tabs/tabs.jsx');
+var Grid = require('../../components/grid/grid.jsx');
+var navigationActions = require('../../redux/navigation.js');
require('./search.scss');
-class Search extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'getSearchState',
- 'handleGetSearchMore',
- 'getTab'
- ]);
- this.state = this.getSearchState();
- this.state.loaded = [];
- this.state.loadNumber = 16;
- this.state.offset = 0;
- }
- componentDidMount () {
- const query = window.location.search;
- const q = query.lastIndexOf('q=');
- let term = '';
+// @todo migrate to React-Router once available
+var Search = injectIntl(React.createClass({
+ type: 'Search',
+ getDefaultProps: function () {
+ var pathname = window.location.pathname.toLowerCase();
+ if (pathname[pathname.length - 1] === '/') {
+ pathname = pathname.substring(0, pathname.length - 1);
+ }
+ var start = pathname.lastIndexOf('/');
+ var type = pathname.substring(start + 1, pathname.length);
+ return {
+ tab: type,
+ loadNumber: 16
+ };
+ },
+ getInitialState: function () {
+ return {
+ loaded: [],
+ offset: 0
+ };
+ },
+ componentDidMount: function () {
+ var query = window.location.search;
+ var q = query.lastIndexOf('q=');
+ var term = '';
if (q !== -1) {
term = query.substring(q + 2, query.length).toLowerCase();
}
@@ -46,130 +51,89 @@ class Search extends React.Component {
}
term = decodeURI(term.split('+').join(' '));
this.props.dispatch(navigationActions.setSearchTerm(term));
- }
- componentDidUpdate (prevProps) {
- if (this.props.searchTerm !== prevProps.searchTerm) {
- this.handleGetSearchMore();
- }
- }
- getSearchState () {
- let pathname = window.location.pathname.toLowerCase();
- if (pathname[pathname.length - 1] === '/') {
- pathname = pathname.substring(0, pathname.length - 1);
- }
- const start = pathname.lastIndexOf('/');
- const type = pathname.substring(start + 1, pathname.length);
- return {
- tab: type,
- loadNumber: 16
- };
- }
- handleGetSearchMore () {
- let termText = '';
+ },
+ componentDidUpdate: function (prevProps) {
+ if (this.props.searchTerm !== prevProps.searchTerm) this.getSearchMore();
+ },
+ getSearchMore: function () {
+ var termText = '';
if (this.props.searchTerm !== '') {
- termText = `&q=${encodeURIComponent(this.props.searchTerm.split(' ').join('+'))}`;
+ termText = '&q=' + encodeURIComponent(this.props.searchTerm.split(' ').join('+'));
}
- const locale = this.props.intl.locale;
- const loadNumber = this.state.loadNumber;
- const offset = this.state.offset;
- const queryString = `limit=${loadNumber}&offset=${offset}&language=${locale}&mode=popular${termText}`;
-
api({
- uri: `/search/${this.state.tab}?${queryString}`
- }, (err, body) => {
- const loadedSoFar = this.state.loaded;
+ uri: '/search/' + this.props.tab +
+ '?limit=' + this.props.loadNumber +
+ '&offset=' + this.state.offset +
+ '&language=' + this.props.intl.locale +
+ '&mode=popular' +
+ termText
+ }, function (err, body) {
+ var loadedSoFar = this.state.loaded;
Array.prototype.push.apply(loadedSoFar, body);
- const currentOffset = this.state.offset + this.props.loadNumber;
-
- this.setState({
- loaded: loadedSoFar,
- offset: currentOffset
- });
- });
- }
- getTab (type) {
- const term = this.props.searchTerm.split(' ').join('+');
- let allTab = (
- <a href={`/search/${type}?q=${term}/`}>
- <li>
- <img
- className={`tab-icon ${type}`}
- src={`/svgs/tabs/${type}-inactive.svg`}
- />
- <FormattedMessage id={`general.${type}`} />
- </li>
- </a>
- );
- if (this.props.tab === type) {
- allTab = (
- <a href={`/search/${type}?q=${term}/`}>
- <li className="active">
- <img
- className={`tab-icon ${type}`}
- src={`/svgs/tabs/${type}-active.svg`}
- />
- <FormattedMessage id={`general.${type}`} />
- </li>
- </a>
- );
+ this.setState({loaded: loadedSoFar});
+ var currentOffset = this.state.offset + this.props.loadNumber;
+ this.setState({offset: currentOffset});
+ }.bind(this));
+ },
+ onSearchSubmit: function (formData) {
+ window.location.href = '/search/projects?q=' + encodeURIComponent(formData.q);
+ },
+ getTab: function (type) {
+ var term = this.props.searchTerm.split(' ').join('+');
+ var allTab = <a href={'/search/' + type + '?q=' + term + '/'}>
+ <li>
+ <img src={'/svgs/tabs/' + type + '-inactive.svg'} className={'tab-icon ' + type} />
+ <FormattedMessage id={'general.' + type} />
+ </li>
+ </a>;
+ if (this.props.tab == type) {
+ allTab = <a href={'/search/' + type + '?q=' + term + '/'}>
+ <li className='active'>
+ <img src={'/svgs/tabs/' + type + '-active.svg'} className={'tab-icon ' + type} />
+ <FormattedMessage id={'general.' + type} />
+ </li>
+ </a>;
}
return allTab;
- }
- render () {
+ },
+ render: function () {
return (
<div>
- <div className="outer">
- <TitleBanner className="masthead">
- <div className="inner">
- <h1 className="title-banner-h1">
- <FormattedMessage id="general.search" />
- </h1>
- </div>
- </TitleBanner>
- <Tabs>
- {this.getTab('projects')}
- {this.getTab('studios')}
- </Tabs>
- <div
- id="projectBox"
- key="projectBox"
- >
- <Grid
- cards
- showAvatar
- itemType={this.props.tab}
- items={this.state.loaded}
- showFavorites={false}
- showLoves={false}
- showViews={false}
- />
- <Button
- className="white"
- onClick={this.handleGetSearchMore}
- >
- <FormattedMessage id="general.loadMore" />
+ <div className='outer'>
+ <TitleBanner className="masthead">
+ <div className="inner">
+ <h1 className="title-banner-h1"><FormattedMessage id="general.search" /></h1>
+ </div>
+ </TitleBanner>
+ <Tabs>
+ {this.getTab('projects')}
+ {this.getTab('studios')}
+ </Tabs>
+ <div id='projectBox' key='projectBox'>
+ <Grid items={this.state.loaded}
+ itemType={this.props.tab}
+ cards={true}
+ showAvatar={true}
+ showLoves={false}
+ showFavorites={false}
+ showViews={false} />
+ <Button onClick={this.getSearchMore} className="white">
+ <FormattedMessage id='general.loadMore' />
</Button>
- </div>
+ </div>
</div>
</div>
);
}
-}
+}));
-Search.propTypes = {
- dispatch: PropTypes.func,
- intl: intlShape,
- loadNumber: PropTypes.number,
- searchTerm: PropTypes.string,
- tab: PropTypes.string
+var mapStateToProps = function (state) {
+ return {
+ searchTerm: state.navigation
+ };
};
-const mapStateToProps = state => ({
- searchTerm: state.navigation
-});
-
-const WrappedSearch = injectIntl(Search);
-const ConnectedSearch = connect(mapStateToProps)(WrappedSearch);
+var ConnectedSearch = connect(mapStateToProps)(Search);
render(
<Page><ConnectedSearch /></Page>,
diff --git a/src/views/splash/activity-rows/become-curator.jsx b/src/views/splash/activity-rows/become-curator.jsx
index c220c92ff..9ca360739 100644
--- a/src/views/splash/activity-rows/become-curator.jsx
+++ b/src/views/splash/activity-rows/become-curator.jsx
@@ -1,43 +1,49 @@
-const classNames = require('classnames');
-const FormattedMessage = require('react-intl').FormattedMessage;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var FormattedMessage = require('react-intl').FormattedMessage;
+var React = require('react');
-const SocialMessage = require('../../../components/social-message/social-message.jsx');
+var SocialMessage = require('../../../components/social-message/social-message.jsx');
-const BecomeCuratorMessage = props => (
- <SocialMessage
- as="div"
- className={classNames(
+var BecomeCuratorMessage = React.createClass({
+ type: 'BecomeCuratorMessage',
+ propTypes: {
+ actorUsername: React.PropTypes.string.isRequired,
+ studioId: React.PropTypes.number.isRequired,
+ studioTitle: React.PropTypes.string.isRequired,
+ datetimePromoted: React.PropTypes.string.isRequired
+ },
+ render: function () {
+ var actorUri = '/users/' + this.props.actorUsername + '/';
+ var studioUri = '/studios/' + this.props.studioId + '/';
+
+ var classes = classNames(
'mod-become-curator',
- props.className
- )}
- datetime={props.datetimePromoted}
- >
- <FormattedMessage
- id="messages.becomeCuratorText"
- values={{
- username: (
- <a href={`/users/${props.actorUsername}/`}>
- {props.actorUsername}
- </a>
- ),
- studio: (
- <a href={`/studios/${props.studioId}/`}>
- {props.studioTitle}
- </a>
- )
- }}
- />
- </SocialMessage>
-);
-
-BecomeCuratorMessage.propTypes = {
- actorUsername: PropTypes.string.isRequired,
- className: PropTypes.string,
- datetimePromoted: PropTypes.string.isRequired,
- studioId: PropTypes.number.isRequired,
- studioTitle: PropTypes.string.isRequired
-};
+ this.props.className
+ );
+ return (
+ <SocialMessage
+ as="div"
+ className={classes}
+ datetime={this.props.datetimePromoted}
+ >
+ <FormattedMessage
+ id='messages.becomeCuratorText'
+ values={{
+ username: (
+ <a
+ href={actorUri}
+ >
+ {this.props.actorUsername}
+ </a>
+ ),
+ studio: (
+ <a href={studioUri}>{this.props.studioTitle}</a>
+ )
+ }}
+ />
+ </SocialMessage>
+ );
+ }
+});
module.exports = BecomeCuratorMessage;
diff --git a/src/views/splash/activity-rows/become-manager.jsx b/src/views/splash/activity-rows/become-manager.jsx
index 5dee06fe9..7e75adb38 100644
--- a/src/views/splash/activity-rows/become-manager.jsx
+++ b/src/views/splash/activity-rows/become-manager.jsx
@@ -1,43 +1,49 @@
-const classNames = require('classnames');
-const FormattedMessage = require('react-intl').FormattedMessage;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var FormattedMessage = require('react-intl').FormattedMessage;
+var React = require('react');
-const SocialMessage = require('../../../components/social-message/social-message.jsx');
+var SocialMessage = require('../../../components/social-message/social-message.jsx');
-const BecomeManagerMessage = props => (
- <SocialMessage
- as="div"
- className={classNames(
+var BecomeManagerMessage = React.createClass({
+ type: 'BecomeManagerMessage',
+ propTypes: {
+ recipientUsername: React.PropTypes.string.isRequired,
+ studioId: React.PropTypes.number.isRequired,
+ studioTitle: React.PropTypes.string.isRequired,
+ datetimePromoted: React.PropTypes.string.isRequired
+ },
+ render: function () {
+ var recipientUri = '/users/' + this.props.recipientUsername + '/';
+ var studioUri = '/studios/' + this.props.studioId + '/';
+
+ var classes = classNames(
'mod-become-manager',
- props.className
- )}
- datetime={props.datetimePromoted}
- >
- <FormattedMessage
- id="messages.becomeManagerText"
- values={{
- username: (
- <a href={`/users/${props.recipientUsername}/`}>
- {props.recipientUsername}
- </a>
- ),
- studio: (
- <a href={`/studios/${props.studioId}/`}>
- {props.studioTitle}
- </a>
- )
- }}
- />
- </SocialMessage>
-);
-
-BecomeManagerMessage.propTypes = {
- className: PropTypes.string,
- datetimePromoted: PropTypes.string.isRequired,
- recipientUsername: PropTypes.string.isRequired,
- studioId: PropTypes.number.isRequired,
- studioTitle: PropTypes.string.isRequired
-};
+ this.props.className
+ );
+ return (
+ <SocialMessage
+ as="div"
+ className={classes}
+ datetime={this.props.datetimePromoted}
+ >
+ <FormattedMessage
+ id='messages.becomeManagerText'
+ values={{
+ username: (
+ <a
+ href={recipientUri}
+ >
+ {this.props.recipientUsername}
+ </a>
+ ),
+ studio: (
+ <a href={studioUri}>{this.props.studioTitle}</a>
+ )
+ }}
+ />
+ </SocialMessage>
+ );
+ }
+});
module.exports = BecomeManagerMessage;
diff --git a/src/views/splash/activity-rows/favorite-project.jsx b/src/views/splash/activity-rows/favorite-project.jsx
index 8775fd024..41b14c55c 100644
--- a/src/views/splash/activity-rows/favorite-project.jsx
+++ b/src/views/splash/activity-rows/favorite-project.jsx
@@ -1,43 +1,49 @@
-const classNames = require('classnames');
-const FormattedMessage = require('react-intl').FormattedMessage;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var FormattedMessage = require('react-intl').FormattedMessage;
+var React = require('react');
-const SocialMessage = require('../../../components/social-message/social-message.jsx');
+var SocialMessage = require('../../../components/social-message/social-message.jsx');
-const FavoriteProjectMessage = props => (
- <SocialMessage
- as="div"
- className={classNames(
+var FavoriteProjectMessage = React.createClass({
+ type: 'FavoriteProjectMessage',
+ propTypes: {
+ actorUsername: React.PropTypes.string.isRequired,
+ projectId: React.PropTypes.number.isRequired,
+ projectTitle: React.PropTypes.string.isRequired,
+ favoriteDateTime: React.PropTypes.string.isRequired
+ },
+ render: function () {
+ var projectLink = '/projects/' + this.props.projectId;
+ var profileLink = '/users/' + this.props.actorUsername;
+
+ var classes = classNames(
'mod-love-favorite',
- props.className
- )}
- datetime={props.favoriteDateTime}
- >
- <FormattedMessage
- id="messages.favoriteText"
- values={{
- profileLink: (
- <a href={`/users/${props.actorUsername}`}>
- {props.actorUsername}
- </a>
- ),
- projectLink: (
- <a href={`/projects/${props.projectId}`}>
- {props.projectTitle}
- </a>
- )
- }}
- />
- </SocialMessage>
-);
-
-FavoriteProjectMessage.propTypes = {
- actorUsername: PropTypes.string.isRequired,
- className: PropTypes.string,
- favoriteDateTime: PropTypes.string.isRequired,
- projectId: PropTypes.number.isRequired,
- projectTitle: PropTypes.string.isRequired
-};
+ this.props.className
+ );
+ return (
+ <SocialMessage
+ as="div"
+ className={classes}
+ datetime={this.props.favoriteDateTime}
+ >
+ <FormattedMessage
+ id='messages.favoriteText'
+ values={{
+ profileLink: (
+ <a
+ href={profileLink}
+ >
+ {this.props.actorUsername}
+ </a>
+ ),
+ projectLink: (
+ <a href={projectLink}>{this.props.projectTitle}</a>
+ )
+ }}
+ />
+ </SocialMessage>
+ );
+ }
+});
module.exports = FavoriteProjectMessage;
diff --git a/src/views/splash/activity-rows/follow.jsx b/src/views/splash/activity-rows/follow.jsx
index bb1f13baa..addf202f1 100644
--- a/src/views/splash/activity-rows/follow.jsx
+++ b/src/views/splash/activity-rows/follow.jsx
@@ -1,55 +1,62 @@
-const classNames = require('classnames');
-const FormattedMessage = require('react-intl').FormattedMessage;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var FormattedMessage = require('react-intl').FormattedMessage;
+var React = require('react');
-const SocialMessage = require('../../../components/social-message/social-message.jsx');
+var SocialMessage = require('../../../components/social-message/social-message.jsx');
-const FollowMessage = props => {
- let followeeLink = '';
- let followeeTitle = '';
- if (typeof props.followeeTitle === 'undefined') {
- followeeLink = `/users/${props.followeeId}`;
- followeeTitle = props.followeeId;
- } else {
- followeeLink = `/studios/${props.followeeId}`;
- followeeTitle = props.followeeTitle;
- }
+var FollowMessage = React.createClass({
+ type: 'FollowMessage',
+ propTypes: {
+ followerUsername: React.PropTypes.string.isRequired,
+ followeeId: React.PropTypes.string.isRequired,
+ followeeTitle: React.PropTypes.string,
+ followDateTime: React.PropTypes.string.isRequired
+ },
+ render: function () {
+ var profileLink = '/users/' + this.props.followerUsername; + '/';
- return (
- <SocialMessage
- as="div"
- className={classNames(
- 'mod-follow-user',
- props.className
- )}
- datetime={props.followDateTime}
- >
- <FormattedMessage
- id="messages.followText"
- values={{
- profileLink: (
- <a href={`/users/${props.followerUsername}/`}>
- {props.followerUsername}
- </a>
- ),
- followeeLink: (
- <a href={followeeLink}>
- {followeeTitle}
- </a>
- )
- }}
- />
- </SocialMessage>
- );
-};
-
-FollowMessage.propTypes = {
- className: PropTypes.string,
- followDateTime: PropTypes.string.isRequired,
- followeeId: PropTypes.string.isRequired,
- followeeTitle: PropTypes.string,
- followerUsername: PropTypes.string.isRequired
-};
+ var followeeLink = '';
+ var followeeTitle = '';
+ if (typeof this.props.followeeTitle !== 'undefined') {
+ followeeLink = '/studios/' + this.props.followeeId;
+ followeeTitle = this.props.followeeTitle;
+ } else {
+ followeeLink = '/users/' + this.props.followeeId;
+ followeeTitle = this.props.followeeId;
+ }
+
+ var classes = classNames(
+ 'mod-follow-user',
+ this.props.className
+ );
+ return (
+ <SocialMessage
+ as="div"
+ className={classes}
+ datetime={this.props.followDateTime}
+ >
+ <FormattedMessage
+ id='messages.followText'
+ values={{
+ profileLink: (
+ <a
+ href={profileLink}
+ >
+ {this.props.followerUsername}
+ </a>
+ ),
+ followeeLink: (
+ <a
+ href={followeeLink}
+ >
+ {followeeTitle}
+ </a>
+ )
+ }}
+ />
+ </SocialMessage>
+ );
+ }
+});
module.exports = FollowMessage;
diff --git a/src/views/splash/activity-rows/love-project.jsx b/src/views/splash/activity-rows/love-project.jsx
index 0783c0cb3..5bab6d38d 100644
--- a/src/views/splash/activity-rows/love-project.jsx
+++ b/src/views/splash/activity-rows/love-project.jsx
@@ -1,43 +1,49 @@
-const classNames = require('classnames');
-const FormattedMessage = require('react-intl').FormattedMessage;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var FormattedMessage = require('react-intl').FormattedMessage;
+var React = require('react');
-const SocialMessage = require('../../../components/social-message/social-message.jsx');
+var SocialMessage = require('../../../components/social-message/social-message.jsx');
-const LoveProjectMessage = props => (
- <SocialMessage
- as="div"
- className={classNames(
+var LoveProjectMessage = React.createClass({
+ type: 'LoveProjectMessage',
+ propTypes: {
+ actorUsername: React.PropTypes.string.isRequired,
+ projectId: React.PropTypes.number.isRequired,
+ projectTitle: React.PropTypes.string.isRequired,
+ loveDateTime: React.PropTypes.string.isRequired
+ },
+ render: function () {
+ var projectLink = '/projects/' + this.props.projectId;
+ var profileLink = '/users/' + this.props.actorUsername;
+
+ var classes = classNames(
'mod-love-project',
- props.className
- )}
- datetime={props.loveDateTime}
- >
- <FormattedMessage
- id="messages.loveText"
- values={{
- profileLink: (
- <a href={`/users/${props.actorUsername}`}>
- {props.actorUsername}
- </a>
- ),
- projectLink: (
- <a href={`/projects/${props.projectId}`}>
- {props.projectTitle}
- </a>
- )
- }}
- />
- </SocialMessage>
-);
-
-LoveProjectMessage.propTypes = {
- actorUsername: PropTypes.string.isRequired,
- className: PropTypes.string,
- loveDateTime: PropTypes.string.isRequired,
- projectId: PropTypes.number.isRequired,
- projectTitle: PropTypes.string.isRequired
-};
+ this.props.className
+ );
+ return (
+ <SocialMessage
+ as="div"
+ className={classes}
+ datetime={this.props.loveDateTime}
+ >
+ <FormattedMessage
+ id='messages.loveText'
+ values={{
+ profileLink: (
+ <a
+ href={profileLink}
+ >
+ {this.props.actorUsername}
+ </a>
+ ),
+ projectLink: (
+ <a href={projectLink}>{this.props.projectTitle}</a>
+ )
+ }}
+ />
+ </SocialMessage>
+ );
+ }
+});
module.exports = LoveProjectMessage;
diff --git a/src/views/splash/activity-rows/remix-project.jsx b/src/views/splash/activity-rows/remix-project.jsx
index 67b8b1f4b..b00f5e2da 100644
--- a/src/views/splash/activity-rows/remix-project.jsx
+++ b/src/views/splash/activity-rows/remix-project.jsx
@@ -1,50 +1,55 @@
-const classNames = require('classnames');
-const FormattedMessage = require('react-intl').FormattedMessage;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var FormattedMessage = require('react-intl').FormattedMessage;
+var React = require('react');
-const SocialMessage = require('../../../components/social-message/social-message.jsx');
+var SocialMessage = require('../../../components/social-message/social-message.jsx');
-const RemixProjectMessage = props => (
- <SocialMessage
- as="div"
- className={classNames(
+var RemixProjectMessage = React.createClass({
+ type: 'RemixProjectMessage',
+ propTypes: {
+ actorUsername: React.PropTypes.string.isRequired,
+ projectId: React.PropTypes.number.isRequired,
+ projectTitle: React.PropTypes.string.isRequired,
+ parentId: React.PropTypes.number.isRequired,
+ parentTitle: React.PropTypes.string.isRequired,
+ remixDate: React.PropTypes.string.isRequired
+ },
+ render: function () {
+ var projectLink = '/projects/' + this.props.projectId;
+ var profileLink = '/users/' + this.props.actorUsername;
+ var remixedProjectLink = '/projects/' + this.props.parentId;
+
+ var classes = classNames(
'mod-remix-project',
- props.className
- )}
- datetime={props.remixDate}
- >
- <FormattedMessage
- id="messages.remixText"
- values={{
- profileLink: (
- <a href={`/users/${props.actorUsername}`}>
- {props.actorUsername}
- </a>
- ),
- projectLink: (
- <a href={`/projects/${props.projectId}`}>
- {props.projectTitle}
- </a>
- ),
- remixedProjectLink: (
- <a href={`/projects/${props.parentId}`}>
- {props.parentTitle}
- </a>
- )
- }}
- />
- </SocialMessage>
-);
-
-RemixProjectMessage.propTypes = {
- actorUsername: PropTypes.string.isRequired,
- className: PropTypes.string,
- parentId: PropTypes.number.isRequired,
- parentTitle: PropTypes.string.isRequired,
- projectId: PropTypes.number.isRequired,
- projectTitle: PropTypes.string.isRequired,
- remixDate: PropTypes.string.isRequired
-};
+ this.props.className
+ );
+ return (
+ <SocialMessage
+ as="div"
+ className={classes}
+ datetime={this.props.remixDate}
+ >
+ <FormattedMessage
+ id='messages.remixText'
+ values={{
+ profileLink: (
+ <a
+ href={profileLink}
+ >
+ {this.props.actorUsername}
+ </a>
+ ),
+ projectLink: (
+ <a href={projectLink}>{this.props.projectTitle}</a>
+ ),
+ remixedProjectLink: (
+ <a href={remixedProjectLink}>{this.props.parentTitle}</a>
+ )
+ }}
+ />
+ </SocialMessage>
+ );
+ }
+});
module.exports = RemixProjectMessage;
diff --git a/src/views/splash/activity-rows/share-project.jsx b/src/views/splash/activity-rows/share-project.jsx
index 71ed56ef1..a1a820f6e 100644
--- a/src/views/splash/activity-rows/share-project.jsx
+++ b/src/views/splash/activity-rows/share-project.jsx
@@ -1,43 +1,49 @@
-const classNames = require('classnames');
-const FormattedMessage = require('react-intl').FormattedMessage;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var FormattedMessage = require('react-intl').FormattedMessage;
+var React = require('react');
-const SocialMessage = require('../../../components/social-message/social-message.jsx');
+var SocialMessage = require('../../../components/social-message/social-message.jsx');
-const ShareProjectMessage = props => (
- <SocialMessage
- as="div"
- className={classNames(
+var ShareProjectMessage = React.createClass({
+ type: 'ShareProjectMessage',
+ propTypes: {
+ actorUsername: React.PropTypes.string.isRequired,
+ projectId: React.PropTypes.number.isRequired,
+ projectTitle: React.PropTypes.string.isRequired,
+ loveDateTime: React.PropTypes.string.isRequired
+ },
+ render: function () {
+ var projectLink = '/projects/' + this.props.projectId;
+ var profileLink = '/users/' + this.props.actorUsername;
+
+ var classes = classNames(
'mod-love-project',
- props.className
- )}
- datetime={props.loveDateTime}
- >
- <FormattedMessage
- id="messages.shareText"
- values={{
- profileLink: (
- <a href={`/users/${props.actorUsername}`}>
- {props.actorUsername}
- </a>
- ),
- projectLink: (
- <a href={`/projects/${props.projectId}`}>
- {props.projectTitle}
- </a>
- )
- }}
- />
- </SocialMessage>
-);
-
-ShareProjectMessage.propTypes = {
- actorUsername: PropTypes.string.isRequired,
- className: PropTypes.string,
- loveDateTime: PropTypes.string.isRequired,
- projectId: PropTypes.number.isRequired,
- projectTitle: PropTypes.string.isRequired
-};
+ this.props.className
+ );
+ return (
+ <SocialMessage
+ as="div"
+ className={classes}
+ datetime={this.props.loveDateTime}
+ >
+ <FormattedMessage
+ id='messages.shareText'
+ values={{
+ profileLink: (
+ <a
+ href={profileLink}
+ >
+ {this.props.actorUsername}
+ </a>
+ ),
+ projectLink: (
+ <a href={projectLink}>{this.props.projectTitle}</a>
+ )
+ }}
+ />
+ </SocialMessage>
+ );
+ }
+});
module.exports = ShareProjectMessage;
diff --git a/src/views/splash/l10n.json b/src/views/splash/l10n.json
index b93e11336..9094ea7bb 100644
--- a/src/views/splash/l10n.json
+++ b/src/views/splash/l10n.json
@@ -1,7 +1,7 @@
{
"splash.featuredProjects": "Featured Projects",
"splash.featuredStudios": "Featured Studios",
- "splash.projectsCuratedBy": "Projects Curated by {curatorId}",
+ "splash.projectsCuratedBy": "Projects Curated by",
"splash.scratchDesignStudioTitle": "Scratch Design Studio",
"splash.visitTheStudio": "Visit the studio",
"splash.recentlySharedProjects": "Recently Shared Projects",
diff --git a/src/views/splash/presentation.jsx b/src/views/splash/presentation.jsx
index b74537deb..91baf5d7c 100644
--- a/src/views/splash/presentation.jsx
+++ b/src/views/splash/presentation.jsx
@@ -1,158 +1,135 @@
-const bindAll = require('lodash.bindall');
-const FormattedMessage = require('react-intl').FormattedMessage;
-const injectIntl = require('react-intl').injectIntl;
-const intlShape = require('react-intl').intlShape;
-const MediaQuery = require('react-responsive').default;
-const PropTypes = require('prop-types');
-const React = require('react');
+var FormattedMessage = require('react-intl').FormattedMessage;
+var injectIntl = require('react-intl').injectIntl;
+var React = require('react');
-const frameless = require('../../lib/frameless');
-const sessionActions = require('../../redux/session.js');
-const shuffle = require('../../lib/shuffle.js').shuffle;
+var sessionActions = require('../../redux/session.js');
+var shuffle = require('../../lib/shuffle.js').shuffle;
-const AdminPanel = require('../../components/adminpanel/adminpanel.jsx');
-const Box = require('../../components/box/box.jsx');
-const Button = require('../../components/forms/button.jsx');
-const Carousel = require('../../components/carousel/carousel.jsx');
-const DropdownBanner = require('../../components/dropdown-banner/banner.jsx');
-const IframeModal = require('../../components/modal/iframe/modal.jsx');
-const Intro = require('../../components/intro/intro.jsx');
-const LegacyCarousel = require('../../components/carousel/legacy-carousel.jsx');
-const News = require('../../components/news/news.jsx');
-const TeacherBanner = require('../../components/teacher-banner/teacher-banner.jsx');
-const Welcome = require('../../components/welcome/welcome.jsx');
+var AdminPanel = require('../../components/adminpanel/adminpanel.jsx');
+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 LegacyCarousel = require('../../components/carousel/legacy-carousel.jsx');
+var Intro = require('../../components/intro/intro.jsx');
+var IframeModal = require('../../components/modal/iframe/modal.jsx');
+var News = require('../../components/news/news.jsx');
+var TeacherBanner = require('../../components/teacher-banner/teacher-banner.jsx');
+var Welcome = require('../../components/welcome/welcome.jsx');
// Activity Components
-const BecomeCuratorMessage = require('./activity-rows/become-curator.jsx');
-const BecomeManagerMessage = require('./activity-rows/become-manager.jsx');
-const FavoriteProjectMessage = require('./activity-rows/favorite-project.jsx');
-const FollowMessage = require('./activity-rows/follow.jsx');
-const LoveProjectMessage = require('./activity-rows/love-project.jsx');
-const RemixProjectMessage = require('./activity-rows/remix-project.jsx');
-const ShareProjectMessage = require('./activity-rows/share-project.jsx');
+var BecomeCuratorMessage = require('./activity-rows/become-curator.jsx');
+var BecomeManagerMessage = require('./activity-rows/become-manager.jsx');
+var FavoriteProjectMessage = require('./activity-rows/favorite-project.jsx');
+var FollowMessage = require('./activity-rows/follow.jsx');
+var LoveProjectMessage = require('./activity-rows/love-project.jsx');
+var RemixProjectMessage = require('./activity-rows/remix-project.jsx');
+var ShareProjectMessage = require('./activity-rows/share-project.jsx');
+
+var MediaQuery = require('react-responsive');
+var frameless = require('../../lib/frameless');
require('./splash.scss');
-class ActivityList extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'getComponentForMessage'
- ]);
- }
- getComponentForMessage (message) {
- const key = `${message.type}_${message.datetime_created}`;
+var ActivityList = injectIntl(React.createClass({
+ propTypes: {
+ items: React.PropTypes.array
+ },
+ getComponentForMessage: function (message) {
+ var key = message.type + '_' + message.id;
switch (message.type) {
case 'followuser':
- return (
- <FollowMessage
- followDateTime={message.datetime_created}
- followeeId={message.followed_username}
- followerUsername={message.actor_username}
- key={key}
- />
- );
+ return <FollowMessage
+ key={key}
+ followerUsername={message.actor_username}
+ followeeId={message.followed_username}
+ followDateTime={message.datetime_created}
+ />;
case 'followstudio':
- return (
- <FollowMessage
- followDateTime={message.datetime_created}
- followeeId={message.gallery_id}
- followeeTitle={message.title}
- followerUsername={message.actor_username}
- key={key}
- />
- );
+ return <FollowMessage
+ key={key}
+ followerUsername={message.actor_username}
+ followeeId={message.gallery_id}
+ followeeTitle={message.title}
+ followDateTime={message.datetime_created}
+ />;
case 'loveproject':
- return (
- <LoveProjectMessage
- actorUsername={message.actor_username}
- key={key}
- loveDateTime={message.datetime_created}
- projectId={message.project_id}
- projectTitle={message.title}
- />
- );
+ return <LoveProjectMessage
+ key={key}
+ actorUsername={message.actor_username}
+ projectId={message.project_id}
+ projectTitle={message.title}
+ loveDateTime={message.datetime_created}
+ />;
case 'favoriteproject':
- return (
- <FavoriteProjectMessage
- actorUsername={message.actor_username}
- favoriteDateTime={message.datetime_created}
- key={key}
- projectId={message.project_id}
- projectTitle={message.project_title}
- />
- );
+ return <FavoriteProjectMessage
+ key={key}
+ actorUsername={message.actor_username}
+ projectId={message.project_id}
+ projectTitle={message.project_title}
+ favoriteDateTime={message.datetime_created}
+ />;
case 'remixproject':
- return (
- <RemixProjectMessage
- actorUsername={message.actor_username}
- key={key}
- parentId={message.parent_id}
- parentTitle={message.parent_title}
- projectId={message.project_id}
- projectTitle={message.title}
- remixDate={message.datetime_created}
- />
- );
+ return <RemixProjectMessage
+ key={key}
+ actorUsername={message.actor_username}
+ projectId={message.project_id}
+ projectTitle={message.title}
+ parentId={message.parent_id}
+ parentTitle={message.parent_title}
+ remixDate={message.datetime_created}
+ />;
case 'becomecurator':
- return (
- <BecomeCuratorMessage
- actorUsername={message.actor_username}
- datetimePromoted={message.datetime_created}
- key={key}
- studioId={message.gallery_id}
- studioTitle={message.title}
- />
- );
+ return <BecomeCuratorMessage
+ key={key}
+ actorUsername={message.actor_username}
+ studioId={message.gallery_id}
+ studioTitle={message.title}
+ datetimePromoted={message.datetime_created}
+ />;
case 'becomeownerstudio':
- return (
- <BecomeManagerMessage
- datetimePromoted={message.datetime_created}
- key={key}
- recipientUsername={message.recipient_username}
- studioId={message.gallery_id}
- studioTitle={message.gallery_title}
- />
- );
+ return <BecomeManagerMessage
+ key={key}
+ recipientUsername={message.recipient_username}
+ studioId={message.gallery_id}
+ studioTitle={message.gallery_title}
+ datetimePromoted={message.datetime_created}
+ />;
case 'shareproject':
- return (
- <ShareProjectMessage
- actorUsername={message.actor_username}
- key={key}
- loveDateTime={message.datetime_created}
- projectId={message.project_id}
- projectTitle={message.title}
- />
- );
+ return <ShareProjectMessage
+ key={key}
+ actorUsername={message.actor_username}
+ projectId={message.project_id}
+ projectTitle={message.title}
+ loveDateTime={message.datetime_created}
+ />;
}
- }
- render () {
+ },
+ render: function () {
+ var formatMessage = this.props.intl.formatMessage;
return (
<Box
className="activity"
- title={this.props.intl.formatMessage({
- id: 'general.whatsHappening'
- })}
+ title={formatMessage({id: 'general.whatsHappening'})}
>
{this.props.items && this.props.items.length > 0 ? [
<ul
className="activity-ul"
key="activity-ul"
>
- {this.props.items.map(item => {
- let profileLink = `/users/${item.actor_username}/`;
- let profileThumbUrl = `//uploads.scratch.mit.edu/users/avatars/${item.actor_id}.png`;
+ {this.props.items.map(function (item) {
+ var profileLink = '/users/' + item.actor_username; + '/';
+ var profileThumbUrl = '//uploads.scratch.mit.edu/users/avatars/' + item.actor_id + '.png';
if (item.type === 'becomeownerstudio') {
- profileLink = `/users/${item.recipient_username}/`;
- profileThumbUrl = `//uploads.scratch.mit.edu/users/avatars/${item.recipient_id}.png`;
+ profileLink = '/users/' + item.recipient_username; + '/';
+ profileThumbUrl = '//uploads.scratch.mit.edu/users/avatars/'
+ + item.recipient_id
+ + '.png';
}
return (
- <li
- className="activity-li"
- key={`${item.type}_${item.datetime_created}`}
- >
+ <li className="activity-li">
<a href={profileLink}>
<img
alt=""
@@ -163,89 +140,88 @@ class ActivityList extends React.Component {
{this.getComponentForMessage(item)}
</li>
);
- })}
+ }.bind(this))}
</ul>
] : [
- <div
- className="empty"
- key="activity-empty"
- >
+ <div className="empty" key="activity-empty">
<h4>
<FormattedMessage
- defaultMessage="This is where you will see updates from Scratchers you follow"
id="activity.seeUpdates"
- />
+ defaultMessage="This is where you will see updates from Scratchers you follow" />
</h4>
<a href="/studios/146521/">
<FormattedMessage
- defaultMessage="Check out some Scratchers you might like to follow"
id="activity.checkOutScratchers"
- />
+ defaultMessage="Check out some Scratchers you might like to follow" />
</a>
</div>
]}
</Box>
);
}
-}
+}));
-ActivityList.propTypes = {
- intl: intlShape,
- items: PropTypes.arrayOf(PropTypes.object)
-};
-
-const WrappedActivityList = injectIntl(ActivityList);
-
-// Splash page
-class SplashPresentation extends React.Component { // eslint-disable-line react/no-multi-comp
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleMessage',
- 'renderHomepageRows'
- ]);
- }
- componentDidMount () {
- if (this.props.shouldShowEmailConfirmation) window.addEventListener('message', this.handleMessage);
- }
- componentWillUnmount () {
- window.removeEventListener('message', this.handleMessage);
- }
- handleMessage (e) {
- if (e.origin !== window.location.origin) return;
- if (e.source !== this.emailConfirmationiFrame.contentWindow) return;
- if (e.data === 'resend-done') {
- this.props.onHideEmailConfirmationModal();
+var SplashPresentation = injectIntl(React.createClass({
+ type: 'Splash',
+ propTypes: {
+ sessionStatus: React.PropTypes.string.isRequired,
+ user: React.PropTypes.object.isRequired,
+ isEducator: React.PropTypes.bool.isRequired,
+ isAdmin: React.PropTypes.bool.isRequired,
+ handleDismiss: React.PropTypes.func.isRequired,
+ refreshHomepageCache: React.PropTypes.func.isRequired,
+ shouldShowEmailConfirmation: React.PropTypes.bool.isRequired,
+ emailConfirmationModalOpen: React.PropTypes.bool.isRequired,
+ showEmailConfirmationModal: React.PropTypes.func.isRequired,
+ hideEmailConfirmationModal: React.PropTypes.func.isRequired,
+ shouldShowWelcome: React.PropTypes.bool.isRequired,
+ refreshCacheStatus: React.PropTypes.object.isRequired
+ },
+ getDefaultProps: function () {
+ return {
+ projectCount: 20000000, // gets the shared project count
+ activity: [], // recent social actions taken by users someone is following
+ news: [], // gets news posts from the scratch Tumblr
+ sharedByFollowing: [], // "Projects by Scratchers I'm Following"
+ lovedByFollowing: [], // "Projects Loved by Scratchers I'm Following"
+ inStudiosFollowing: [], // "Projects in Studios I'm Following"
+ featuredGlobal: {} // global homepage rows, such as "Featured Projects"
+ };
+ },
+ componentDidMount: function () {
+ if (this.props.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.emailConfirmationiFrame.contentWindow) return;
+ if (e.data == 'resend-done') {
+ this.hideEmailConfirmationModal();
} else {
- const data = JSON.parse(e.data);
- if (data.action === 'leave-page') {
- window.location.href = data.uri;
+ var data = JSON.parse(e.data);
+ if (data['action'] === 'leave-page') {
+ window.location.href = data['uri'];
}
}
- }
- renderHomepageRows () {
- const rows = [
+ },
+ renderHomepageRows: function () {
+ var formatMessage = this.props.intl.formatMessage;
+ var rows = [
<Box
+ title={formatMessage({id: 'splash.featuredProjects'})}
key="community_featured_projects"
- title={this.props.intl.formatMessage({
- id: 'splash.featuredProjects'
- })}
>
<LegacyCarousel items={this.props.featuredGlobal.community_featured_projects} />
</Box>,
<Box
+ title={formatMessage({id: 'splash.featuredStudios'})}
key="community_featured_studios"
- title={this.props.intl.formatMessage({
- id: 'splash.featuredStudios'
- })}
>
<LegacyCarousel
items={this.props.featuredGlobal.community_featured_studios}
- settings={{
- slidesToShow: 4,
- slidesToScroll: 4,
- lazyLoad: false
- }}
+ settings={{slidesToShow: 4, slidesToScroll: 4, lazyLoad: false}}
/>
</Box>
];
@@ -253,18 +229,14 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
if (this.props.featuredGlobal.curator_top_projects &&
this.props.featuredGlobal.curator_top_projects.length > 4) {
- const curatorName = this.props.featuredGlobal.curator_top_projects[0].curator_name;
rows.push(
<Box
key="curator_top_projects"
+ title={
+ formatMessage({id: 'splash.projectsCuratedBy'}) + ' ' +
+ this.props.featuredGlobal.curator_top_projects[0].curator_name}
+ moreTitle={formatMessage({id: 'general.learnMore'})}
moreHref="/studios/386359/"
- moreTitle={this.props.intl.formatMessage({
- id: 'general.learnMore'
- })}
- title={this.props.intl.formatMessage(
- {id: 'splash.projectsCuratedBy'},
- {curatorId: curatorName}
- )}
>
<LegacyCarousel items={this.props.featuredGlobal.curator_top_projects} />
</Box>
@@ -274,15 +246,14 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
if (this.props.featuredGlobal.scratch_design_studio &&
this.props.featuredGlobal.scratch_design_studio.length > 4) {
- const galleryTitle = this.props.featuredGlobal.scratch_design_studio[0].gallery_title;
rows.push(
<Box
key="scratch_design_studio"
- moreHref={`/studios/${this.props.featuredGlobal.scratch_design_studio[0].gallery_id}/`}
- moreTitle={this.props.intl.formatMessage({id: 'splash.visitTheStudio'})}
title={
- `${this.props.intl.formatMessage({id: 'splash.scratchDesignStudioTitle'})} - ${galleryTitle}`
- }
+ formatMessage({id: 'splash.scratchDesignStudioTitle'})
+ + ' - ' + this.props.featuredGlobal.scratch_design_studio[0].gallery_title}
+ moreTitle={formatMessage({id: 'splash.visitTheStudio'})}
+ moreHref={'/studios/' + this.props.featuredGlobal.scratch_design_studio[0].gallery_id + '/'}
>
<LegacyCarousel items={this.props.featuredGlobal.scratch_design_studio} />
</Box>
@@ -295,8 +266,8 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
rows.push(
<Box
+ title={formatMessage({id: 'splash.recentlySharedProjects'})}
key="community_newest_projects"
- title={this.props.intl.formatMessage({id: 'splash.recentlySharedProjects'})}
>
<LegacyCarousel items={this.props.featuredGlobal.community_newest_projects} />
</Box>
@@ -306,8 +277,8 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
if (this.props.sharedByFollowing && this.props.sharedByFollowing.length > 0) {
rows.push(
<Box
+ title={formatMessage({id: 'splash.projectsByScratchersFollowing'})}
key="custom_projects_by_following"
- title={this.props.intl.formatMessage({id: 'splash.projectsByScratchersFollowing'})}
>
<Carousel items={this.props.sharedByFollowing} />
</Box>
@@ -317,8 +288,8 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
if (this.props.lovedByFollowing && this.props.lovedByFollowing.length > 0) {
rows.push(
<Box
+ title={formatMessage({id: 'splash.projectsLovedByScratchersFollowing'})}
key="custom_projects_loved_by_following"
- title={this.props.intl.formatMessage({id: 'splash.projectsLovedByScratchersFollowing'})}
>
<Carousel items={this.props.lovedByFollowing} />
</Box>
@@ -328,8 +299,8 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
if (this.props.inStudiosFollowing && this.props.inStudiosFollowing.length > 0) {
rows.push(
<Box
+ title={formatMessage({id:'splash.projectsInStudiosFollowing'})}
key="custom_projects_in_studios_following"
- title={this.props.intl.formatMessage({id: 'splash.projectsInStudiosFollowing'})}
>
<Carousel items={this.props.inStudiosFollowing} />
</Box>
@@ -338,34 +309,34 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
rows.push(
<Box
+ title={formatMessage({id: 'splash.communityRemixing'})}
key="community_most_remixed_projects"
- title={this.props.intl.formatMessage({id: 'splash.communityRemixing'})}
>
<LegacyCarousel
- showRemixes
items={shuffle(this.props.featuredGlobal.community_most_remixed_projects)}
+ showRemixes={true}
/>
</Box>,
<Box
+ title={formatMessage({id: 'splash.communityLoving'})}
key="community_most_loved_projects"
- title={this.props.intl.formatMessage({id: 'splash.communityLoving'})}
>
<LegacyCarousel
- showLoves
items={shuffle(this.props.featuredGlobal.community_most_loved_projects)}
+ showLoves={true}
/>
</Box>
);
return rows;
- }
- render () {
- const featured = this.renderHomepageRows();
+ },
+ render: function () {
+ var featured = this.renderHomepageRows();
- const formatHTMLMessage = this.props.intl.formatHTMLMessage;
- const formatNumber = this.props.intl.formatNumber;
- const formatMessage = this.props.intl.formatMessage;
- const messages = {
+ var formatHTMLMessage = this.props.intl.formatHTMLMessage;
+ var formatNumber = this.props.intl.formatNumber;
+ var formatMessage = this.props.intl.formatMessage;
+ var messages = {
'general.viewAll': formatMessage({id: 'general.viewAll'}),
'news.scratchNews': formatMessage({id: 'news.scratchNews'}),
'welcome.welcomeToScratch': formatMessage({id: 'welcome.welcomeToScratch'}),
@@ -389,7 +360,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
if (this.props.projectCount === 20000000) {
messages['intro.description'] = formatHTMLMessage({id: 'intro.defaultDescription'});
} else {
- const count = formatNumber(this.props.projectCount);
+ var count = formatNumber(this.props.projectCount);
messages['intro.description'] = formatHTMLMessage({id: 'intro.description'}, {value: count});
}
@@ -397,78 +368,47 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
<div className="splash">
{this.props.shouldShowEmailConfirmation ? [
<DropdownBanner
- className="warning"
key="confirmedEmail"
- onRequestDismiss={() => { // eslint-disable-line react/jsx-no-bind
- this.props.onDismiss('confirmed_email');
- }}
+ className="warning"
+ onRequestDismiss={this.props.handleDismiss.bind(this, 'confirmed_email')}
>
- <a
- href="#"
- onClick={this.props.onShowEmailConfirmationModal}
- >
- Confirm your email
- </a>{' '}to enable sharing.{' '}
- <a href="/info/faq/#accounts">
- Having trouble?
- </a>
+ <a href="#" onClick={this.props.showEmailConfirmationModal}>Confirm your email</a>
+ {' '}to enable sharing.{' '}
+ <a href="/info/faq/#accounts">Having trouble?</a>
</DropdownBanner>,
<IframeModal
- className="mod-confirmation"
- componentRef={iframe => { // eslint-disable-line react/jsx-no-bind
- this.emailConfirmationiFrame = iframe;
- }}
isOpen={this.props.emailConfirmationModalOpen}
- key="iframe-modal"
+ onRequestClose={this.props.hideEmailConfirmationModal}
+ className="mod-confirmation"
+ componentRef={
+ function (iframe) {
+ this.emailConfirmationiFrame = iframe;
+ }.bind(this)
+ }
src="/accounts/email_resend_standalone/"
- onRequestClose={this.props.onHideEmailConfirmationModal}
/>
] : []}
{this.props.isEducator ? [
- <TeacherBanner
- key="teacherbanner"
- messages={messages}
- />
+ <TeacherBanner key="teacherbanner" messages={messages} />
] : []}
- <div
- className="inner mod-splash"
- key="inner"
- >
+ <div key="inner" className="inner mod-splash">
{this.props.sessionStatus === sessionActions.Status.FETCHED ? (
- Object.keys(this.props.user).length > 0 ? [
- <div
- className="splash-header"
- key="header"
- >
+ Object.keys(this.props.user).length !== 0 ? [
+ <div key="header" className="splash-header">
{this.props.shouldShowWelcome ? [
<Welcome
key="welcome"
+ onDismiss={this.props.handleDismiss.bind(this, 'welcome')}
messages={messages}
- onDismiss={() => { // eslint-disable-line react/jsx-no-bind
- this.props.onDismiss('welcome');
- }}
/>
] : [
- <WrappedActivityList
- items={this.props.activity}
- key="activity"
- />
+ <ActivityList key="activity" items={this.props.activity} />
]}
- <News
- items={this.props.news}
- messages={messages}
- />
+ <News items={this.props.news} messages={messages} />
</div>
] : [
- <MediaQuery
- key="frameless-desktop"
- minWidth={frameless.desktop}
- >
- <Intro
- key="intro"
- messages={messages}
- projectCount={this.props.projectCount}
- />
+ <MediaQuery minWidth={frameless.desktop}>
+ <Intro projectCount={this.props.projectCount} messages={messages} key="intro"/>
</MediaQuery>
]) : []
}
@@ -476,7 +416,7 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
{featured}
{this.props.isAdmin ? [
- <AdminPanel key="admin-panel">
+ <AdminPanel>
<dt>Tools</dt>
<dd>
<ul>
@@ -497,11 +437,9 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
<li>
<div className="button-row">
<span>Refresh row data:</span>
- <Button
- className={this.props.refreshCacheStatus.status}
- disabled={this.props.refreshCacheStatus.disabled}
- onClick={this.props.onRefreshHomepageCache}
- >
+ <Button onClick={this.props.refreshHomepageCache}
+ className={this.props.refreshCacheStatus.status}
+ disabled={this.props.refreshCacheStatus.disabled}>
<span>{this.props.refreshCacheStatus.content}</span>
</Button>
</div>
@@ -514,47 +452,6 @@ class SplashPresentation extends React.Component { // eslint-disable-line react/
</div>
);
}
-}
+}));
-SplashPresentation.propTypes = {
- activity: PropTypes.arrayOf(PropTypes.object),
- emailConfirmationModalOpen: PropTypes.bool.isRequired,
- featuredGlobal: PropTypes.shape({
- community_featured_projects: PropTypes.array,
- community_featured_studios: PropTypes.array,
- curator_top_projects: PropTypes.array,
- scratch_design_studio: PropTypes.array,
- community_newest_projects: PropTypes.array,
- community_most_remixed_projects: PropTypes.array,
- community_most_loved_projects: PropTypes.array
- }),
- inStudiosFollowing: PropTypes.arrayOf(PropTypes.object),
- intl: intlShape,
- isAdmin: PropTypes.bool.isRequired,
- isEducator: PropTypes.bool.isRequired,
- lovedByFollowing: PropTypes.arrayOf(PropTypes.object),
- news: PropTypes.object, // eslint-disable-line react/forbid-prop-types
- onDismiss: PropTypes.func.isRequired,
- onHideEmailConfirmationModal: PropTypes.func.isRequired,
- onRefreshHomepageCache: PropTypes.func.isRequired,
- onShowEmailConfirmationModal: PropTypes.func.isRequired,
- projectCount: PropTypes.number,
- refreshCacheStatus: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
- sessionStatus: PropTypes.string.isRequired,
- sharedByFollowing: PropTypes.arrayOf(PropTypes.object),
- shouldShowEmailConfirmation: PropTypes.bool.isRequired,
- shouldShowWelcome: PropTypes.bool.isRequired,
- user: PropTypes.object.isRequired // eslint-disable-line react/forbid-prop-types
-};
-
-SplashPresentation.defaultProps = {
- activity: [], // recent social actions taken by users someone is following
- featuredGlobal: {}, // global homepage rows, such as "Featured Projects"
- inStudiosFollowing: [], // "Projects in Studios I'm Following"
- lovedByFollowing: [], // "Projects Loved by Scratchers I'm Following"
- news: [], // gets news posts from the scratch Tumblr
- projectCount: 20000000, // gets the shared project count
- sharedByFollowing: [] // "Projects by Scratchers I'm Following"
-};
-
-module.exports = injectIntl(SplashPresentation);
+module.exports = SplashPresentation;
diff --git a/src/views/splash/splash.jsx b/src/views/splash/splash.jsx
index f4f3aac24..85e74717e 100644
--- a/src/views/splash/splash.jsx
+++ b/src/views/splash/splash.jsx
@@ -1,52 +1,37 @@
-const bindAll = require('lodash.bindall');
-const connect = require('react-redux').connect;
-const PropTypes = require('prop-types');
-const React = require('react');
+var connect = require('react-redux').connect;
+var injectIntl = require('react-intl').injectIntl;
+var React = require('react');
-const api = require('../../lib/api');
-const log = require('../../lib/log');
-const render = require('../../lib/render.jsx');
-const sessionActions = require('../../redux/session.js');
-const splashActions = require('../../redux/splash.js');
+var api = require('../../lib/api');
+var log = require('../../lib/log');
+var render = require('../../lib/render.jsx');
+var sessionActions = require('../../redux/session.js');
+var splashActions = require('../../redux/splash.js');
-const Page = require('../../components/page/www/page.jsx');
-const SplashPresentation = require('./presentation.jsx');
+var Page = require('../../components/page/www/page.jsx');
+var SplashPresentation = require('./presentation.jsx');
-class Splash extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'getNews',
- 'getProjectCount',
- 'handleRefreshHomepageCache',
- 'getHomepageRefreshStatus',
- 'handleShowEmailConfirmationModal',
- 'handleHideEmailConfirmationModal',
- 'handleDismiss',
- 'shouldShowWelcome',
- 'shouldShowEmailConfirmation'
- ]);
- this.state = {
+var Splash = injectIntl(React.createClass({
+ type: 'Splash',
+ getInitialState: function () {
+ return {
projectCount: 20000000, // gets the shared project count
news: [], // gets news posts from the scratch Tumblr
emailConfirmationModalOpen: false, // flag that determines whether to show banner to request email conf.
refreshCacheStatus: 'notrequested'
};
- }
- componentDidMount () {
- this.props.getFeaturedGlobal();
- if (this.props.user.username) {
- this.props.getActivity(this.props.user.username, this.props.user.token);
- this.props.getSharedByFollowing(this.props.user.username, this.props.user.token);
- this.props.getInStudiosFollowing(this.props.user.username, this.props.user.token);
- this.props.getLovedByFollowing(this.props.user.username, this.props.user.token);
- this.getNews();
- } else {
- this.getProjectCount();
- }
- }
- componentDidUpdate (prevProps) {
- if (this.props.user.username !== prevProps.user.username) {
+ },
+ getDefaultProps: function () {
+ return {
+ sessionStatus: sessionActions.Status.NOT_FETCHED,
+ user: {},
+ flags: {},
+ isEducator: false,
+ isAdmin: false
+ };
+ },
+ componentDidUpdate: function (prevProps) {
+ if (this.props.user != prevProps.user) {
if (this.props.user.username) {
this.props.getActivity(this.props.user.username, this.props.user.token);
this.props.getSharedByFollowing(this.props.user.username, this.props.user.token);
@@ -58,7 +43,7 @@ class Splash extends React.Component {
this.props.setRows('loved', []);
this.props.setRows('studios', []);
this.props.setRows('activity', []);
- this.setState({news: []}); // eslint-disable-line react/no-did-update-set-state
+ this.setState({news: []});
this.getProjectCount();
}
if (this.shouldShowEmailConfirmation()) {
@@ -67,38 +52,50 @@ class Splash extends React.Component {
window.removeEventListener('message', this.onMessage);
}
}
- }
- getNews () {
+ },
+ componentDidMount: function () {
+ this.props.getFeaturedGlobal();
+ if (this.props.user.username) {
+ this.props.getActivity(this.props.user.username, this.props.user.token);
+ this.props.getSharedByFollowing(this.props.user.username, this.props.user.token);
+ this.props.getInStudiosFollowing(this.props.user.username, this.props.user.token);
+ this.props.getLovedByFollowing(this.props.user.username, this.props.user.token);
+ this.getNews();
+ } else {
+ this.getProjectCount();
+ }
+ },
+ getNews: function () {
api({
uri: '/news?limit=3'
- }, (err, body) => {
+ }, function (err, body) {
if (!body) return log.error('No response body');
if (!err) return this.setState({news: body});
- });
- }
- getProjectCount () {
+ }.bind(this));
+ },
+ getProjectCount: function () {
api({
uri: '/projects/count/all'
- }, (err, body) => {
+ }, function (err, body) {
if (!body) return log.error('No response body');
if (!err) return this.setState({projectCount: body.count});
- });
- }
- handleRefreshHomepageCache () {
+ }.bind(this));
+ },
+ refreshHomepageCache: function () {
api({
host: '',
uri: '/scratch_admin/homepage/clear-cache/',
method: 'post',
useCsrf: true
- }, (err, body) => {
+ }, function (err, body) {
if (err) return this.setState({refreshCacheStatus: 'fail'});
if (!body) return log.error('No response body');
if (!body.success) return this.setState({refreshCacheStatus: 'inprogress'});
return this.setState({refreshCacheStatus: 'pass'});
- });
- }
- getHomepageRefreshStatus () {
- const status = {
+ }.bind(this));
+ },
+ getHomepageRefreshStatus: function () {
+ var status = {
status: this.state.refreshCacheStatus,
disabled: false,
content: 'Refresh'
@@ -109,163 +106,111 @@ class Splash extends React.Component {
} else if (this.state.refreshCacheStatus === 'pass') {
status.disabled = true;
status.content = 'Requested';
- } else if (this.state.refreshCacheStatus === 'fail') {
+ } else if (this.state.refreshCacheStatus == 'fail') {
status.disabled = false;
status.content = 'Error';
}
return status;
- }
- handleShowEmailConfirmationModal () {
+ },
+ showEmailConfirmationModal: function () {
this.setState({emailConfirmationModalOpen: true});
- }
- handleHideEmailConfirmationModal () {
+ },
+ hideEmailConfirmationModal: function () {
this.setState({emailConfirmationModalOpen: false});
- }
- handleDismiss (cue) {
+ },
+ handleDismiss: function (cue) {
api({
host: '',
uri: '/site-api/users/set-template-cue/',
method: 'post',
useCsrf: true,
json: {cue: cue, value: false}
- }, err => {
- if (!err) this.props.refreshSession();
- });
- }
- shouldShowWelcome () {
+ }, function (err) {
+ if (!err) this.props.dispatch(sessionActions.refreshSession());
+ }.bind(this));
+ },
+ shouldShowWelcome: function () {
if (!this.props.user || !this.props.flags.show_welcome) return false;
return (
new Date(this.props.user.dateJoined) >
- new Date(new Date() - (2 * 7 * 24 * 60 * 60 * 1000)) // Two weeks ago
+ new Date(new Date - 2*7*24*60*60*1000) // Two weeks ago
);
- }
- shouldShowEmailConfirmation () {
+ },
+ shouldShowEmailConfirmation: function () {
return (
this.props.user && this.props.flags.has_outstanding_email_confirmation &&
- this.props.flags.confirm_email_banner
- );
- }
- render () {
- const showEmailConfirmation = this.shouldShowEmailConfirmation() || false;
- const showWelcome = this.shouldShowWelcome();
- const homepageRefreshStatus = this.getHomepageRefreshStatus();
+ this.props.flags.confirm_email_banner);
+ },
+ render: function () {
+ var showEmailConfirmation = this.shouldShowEmailConfirmation() || false;
+ var showWelcome = this.shouldShowWelcome();
+ var homepageRefreshStatus = this.getHomepageRefreshStatus();
return (
<SplashPresentation
- activity={this.props.activity}
- emailConfirmationModalOpen={this.state.emailConfirmationModalOpen}
- featuredGlobal={this.props.featured}
- inStudiosFollowing={this.props.studios}
- isAdmin={this.props.isAdmin}
- isEducator={this.props.isEducator}
- lovedByFollowing={this.props.loved}
- news={this.state.news}
- projectCount={this.state.projectCount}
- refreshCacheStatus={homepageRefreshStatus}
sessionStatus={this.props.sessionStatus}
- sharedByFollowing={this.props.shared}
- shouldShowEmailConfirmation={showEmailConfirmation}
- shouldShowWelcome={showWelcome}
user={this.props.user}
- onDismiss={this.handleDismiss}
- onHideEmailConfirmationModal={this.handleHideEmailConfirmationModal}
- onRefreshHomepageCache={this.handleRefreshHomepageCache}
- onShowEmailConfirmationModal={this.handleShowEmailConfirmationModal}
+ isEducator={this.props.isEducator}
+ isAdmin={this.props.isAdmin}
+ handleDismiss={this.handleDismiss}
+ refreshHomepageCache={this.refreshHomepageCache}
+ shouldShowEmailConfirmation={showEmailConfirmation}
+ emailConfirmationModalOpen={this.state.emailConfirmationModalOpen}
+ showEmailConfirmationModal={this.showEmailConfirmationModal}
+ hideEmailConfirmationModal={this.hideEmailConfirmationModal}
+ shouldShowWelcome={showWelcome}
+ projectCount={this.state.projectCount}
+ activity={this.props.activity}
+ news={this.state.news}
+ sharedByFollowing={this.props.shared}
+ lovedByFollowing={this.props.loved}
+ inStudiosFollowing={this.props.studios}
+ featuredGlobal={this.props.featured}
+ refreshCacheStatus={homepageRefreshStatus}
/>
);
}
-}
+}));
-Splash.propTypes = {
- activity: PropTypes.arrayOf(PropTypes.object).isRequired,
- featured: PropTypes.shape({
- community_featured_projects: PropTypes.array,
- community_featured_studios: PropTypes.array,
- curator_top_projects: PropTypes.array,
- scratch_design_studio: PropTypes.array,
- community_newest_projects: PropTypes.array,
- community_most_remixed_projects: PropTypes.array,
- community_most_loved_projects: PropTypes.array
- }),
- flags: PropTypes.shape({
- must_reset_password: PropTypes.bool,
- must_complete_registration: PropTypes.bool,
- has_outstanding_email_confirmation: PropTypes.bool,
- show_welcome: PropTypes.bool,
- confirm_email_banner: PropTypes.bool,
- unsupported_browser_banner: PropTypes.bool
- }),
- getActivity: PropTypes.func.isRequired,
- getFeaturedGlobal: PropTypes.func.isRequired,
- getInStudiosFollowing: PropTypes.func.isRequired,
- getLovedByFollowing: PropTypes.func.isRequired,
- getSharedByFollowing: PropTypes.func.isRequired,
- isAdmin: PropTypes.bool,
- isEducator: PropTypes.bool,
- loved: PropTypes.arrayOf(PropTypes.object).isRequired,
- refreshSession: PropTypes.func.isRequired,
- sessionStatus: PropTypes.string,
- setRows: PropTypes.func.isRequired,
- shared: PropTypes.arrayOf(PropTypes.object).isRequired,
- studios: PropTypes.arrayOf(PropTypes.object).isRequired,
- user: PropTypes.shape({
- id: PropTypes.number,
- banned: PropTypes.bool,
- username: PropTypes.string,
- token: PropTypes.string,
- thumbnailUrl: PropTypes.string,
- dateJoined: PropTypes.string,
- email: PropTypes.string,
- classroomId: PropTypes.string
- })
+var mapStateToProps = function (state) {
+ return {
+ sessionStatus: state.session.status,
+ user: state.session.session.user,
+ flags: state.session.session.flags,
+ isEducator: state.permissions.educator,
+ isAdmin: state.permissions.admin,
+ activity: state.splash.activity.rows,
+ featured: state.splash.featured.rows,
+ shared: state.splash.shared.rows,
+ loved: state.splash.loved.rows,
+ studios: state.splash.studios.rows
+ };
};
-Splash.defaultProps = {
- flags: {},
- isAdmin: false,
- isEducator: false,
- sessionStatus: sessionActions.Status.NOT_FETCHED,
- user: {}
+var mapDispatchToProps = function (dispatch) {
+ return {
+ getFeaturedGlobal: function () {
+ dispatch(splashActions.getFeaturedGlobal());
+ },
+ getActivity: function (username, token) {
+ dispatch(splashActions.getActivity(username, token));
+ },
+ getSharedByFollowing: function (username, token) {
+ dispatch(splashActions.getSharedByFollowing(username, token));
+ },
+ getInStudiosFollowing: function (username, token) {
+ dispatch(splashActions.getInStudiosFollowing(username, token));
+ },
+ getLovedByFollowing: function (username, token) {
+ dispatch(splashActions.getLovedByFollowing(username, token));
+ },
+ setRows: function (type, rows) {
+ dispatch(splashActions.setRows(type, rows));
+ }
+ };
};
-const mapStateToProps = state => ({
- activity: state.splash.activity.rows,
- featured: state.splash.featured.rows,
- flags: state.session.session.flags,
- isAdmin: state.permissions.admin,
- isEducator: state.permissions.educator,
- loved: state.splash.loved.rows,
- sessionStatus: state.session.status,
- shared: state.splash.shared.rows,
- studios: state.splash.studios.rows,
- user: state.session.session.user
-});
-
-const mapDispatchToProps = dispatch => ({
- getFeaturedGlobal: () => {
- dispatch(splashActions.getFeaturedGlobal());
- },
- getActivity: (username, token) => {
- dispatch(splashActions.getActivity(username, token));
- },
- getSharedByFollowing: (username, token) => {
- dispatch(splashActions.getSharedByFollowing(username, token));
- },
- getInStudiosFollowing: (username, token) => {
- dispatch(splashActions.getInStudiosFollowing(username, token));
- },
- getLovedByFollowing: (username, token) => {
- dispatch(splashActions.getLovedByFollowing(username, token));
- },
- refreshSession: () => {
- dispatch(sessionActions.refreshSession());
- },
- setRows: (type, rows) => {
- dispatch(splashActions.setRows(type, rows));
- }
-});
-
-const ConnectedSplash = connect(
+var ConnectedSplash = connect(
mapStateToProps,
mapDispatchToProps
)(Splash);
diff --git a/src/views/studentcompleteregistration/studentcompleteregistration.jsx b/src/views/studentcompleteregistration/studentcompleteregistration.jsx
index 6724ac87b..e337470d7 100644
--- a/src/views/studentcompleteregistration/studentcompleteregistration.jsx
+++ b/src/views/studentcompleteregistration/studentcompleteregistration.jsx
@@ -1,47 +1,44 @@
-const bindAll = require('lodash.bindall');
-const connect = require('react-redux').connect;
-const defaults = require('lodash.defaultsdeep');
-const PropTypes = require('prop-types');
-const React = require('react');
+var connect = require('react-redux').connect;
+var defaults = require('lodash.defaultsdeep');
+var React = require('react');
+var render = require('../../lib/render.jsx');
-const api = require('../../lib/api');
-const injectIntl = require('../../lib/intl.jsx').injectIntl;
-const intlShape = require('../../lib/intl.jsx').intlShape;
-const log = require('../../lib/log.js');
-const sessionStatus = require('../../redux/session').Status;
+var sessionStatus = require('../../redux/session').Status;
+var api = require('../../lib/api');
+var intl = require('../../lib/intl.jsx');
+var log = require('../../lib/log.js');
-const Deck = require('../../components/deck/deck.jsx');
-const Progression = require('../../components/progression/progression.jsx');
-const Spinner = require('../../components/spinner/spinner.jsx');
-const Steps = require('../../components/registration/steps.jsx');
-
-const render = require('../../lib/render.jsx');
+var Deck = require('../../components/deck/deck.jsx');
+var Progression = require('../../components/progression/progression.jsx');
+var Spinner = require('../../components/spinner/spinner.jsx');
+var Steps = require('../../components/registration/steps.jsx');
require('./studentcompleteregistration.scss');
-class StudentCompleteRegistration extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleAdvanceStep',
- 'handleLogOut',
- 'handleRegister',
- 'handleGoToClass'
- ]);
- this.state = {
+var StudentCompleteRegistration = intl.injectIntl(React.createClass({
+ type: 'StudentCompleteRegistration',
+ getInitialState: function () {
+ return {
classroom: null,
formData: {},
registrationErrors: null,
step: 0,
waiting: false
};
- }
- componentDidUpdate (prevProps) {
+ },
+ advanceStep: function (formData) {
+ formData = formData || {};
+ this.setState({
+ step: this.state.step + 1,
+ formData: defaults({}, formData, this.state.formData)
+ });
+ },
+ componentDidUpdate: function (prevProps) {
if (prevProps.studentUsername !== this.props.studentUsername && this.props.newStudent) {
- this.setState({waiting: true}); // eslint-disable-line react/no-did-update-set-state
+ this.setState({waiting: true});
api({
- uri: `/classrooms/${this.props.classroomId}`
- }, (err, body, res) => {
+ uri: '/classrooms/' + this.props.classroomId
+ }, function (err, body, res) {
this.setState({waiting: false});
if (err || res.statusCode !== 200) {
return this.setState({
@@ -51,90 +48,81 @@ class StudentCompleteRegistration extends React.Component {
});
}
this.setState({classroom: body});
- });
+ }.bind(this));
}
- }
- handleAdvanceStep (formData) {
- formData = formData || {};
- this.setState({
- step: this.state.step + 1,
- formData: defaults({}, formData, this.state.formData)
- });
- }
- handleLogOut (e) {
+ },
+ handleLogOut: function (e) {
e.preventDefault();
api({
host: '',
method: 'post',
uri: '/accounts/logout/',
useCsrf: true
- }, err => {
+ }, function (err) {
if (err) return log.error(err);
window.location = '/';
- });
- }
- handleRegister (formData) {
+ }.bind(this));
+ },
+ register: function (formData) {
this.setState({waiting: true});
-
formData = defaults({}, formData || {}, this.state.formData);
- const submittedData = {
+ var submittedData = {
birth_month: formData.user.birth.month,
birth_year: formData.user.birth.year,
- gender: (formData.user.gender === 'other' ? formData.user.genderOther : formData.user.gender),
+ gender: (
+ formData.user.gender === 'other' ?
+ formData.user.genderOther :
+ formData.user.gender
+ ),
country: formData.user.country,
is_robot: formData.user.isRobot
};
if (this.props.must_reset_password) {
submittedData.password = formData.user.password;
}
-
api({
host: '',
uri: '/classes/student_update_registration/',
method: 'post',
useCsrf: true,
formData: submittedData
- }, (err, body, res) => {
+ }, function (err, body, res) {
this.setState({waiting: false});
if (err) return this.setState({registrationError: err});
- if (body.success) return this.handleAdvanceStep(formData);
+ if (body.success) return this.advanceStep(formData);
this.setState({
- registrationErrors: body.errors || {
- __all__:
- `${this.props.intl.formatMessage({id: 'registration.generalError'})} (${res.statusCode})`
- }
+ registrationErrors:
+ body.errors || {
+ __all__:
+ this.props.intl.formatMessage({id: 'registration.generalError'}) +
+ ' (' + res.statusCode + ')'
+ }
});
- });
- }
- handleGoToClass () {
- window.location = `/classes/${this.state.classroom.id}/`;
- }
- render () {
- const demographicsDescription = this.props.intl.formatMessage({
- id: 'registration.studentPersonalStepDescription'
- });
- let registrationErrors = this.state.registrationErrors;
+ }.bind(this));
+ },
+ goToClass: function () {
+ window.location = '/classes/' + this.state.classroom.id + '/';
+ },
+ render: function () {
+ var demographicsDescription = this.props.intl.formatMessage({
+ id: 'registration.studentPersonalStepDescription'});
+ var registrationErrors = this.state.registrationErrors;
if (!this.props.newStudent) {
registrationErrors = {
__all__: this.props.intl.formatMessage({id: 'registration.mustBeNewStudent'})
};
}
-
return (
<Deck className="student-registration">
{registrationErrors ? (
<Steps.RegistrationError>
<ul>
- {Object.keys(registrationErrors).map(field => {
- let label = `${field}: `;
+ {Object.keys(registrationErrors).map(function (field) {
+ var label = field + ': ';
if (field === '__all__') {
label = '';
}
- return (
- <li key={field}>
- {label}{registrationErrors[field]}
- </li>
- );
+ return (<li>{label}{registrationErrors[field]}</li>);
})}
</ul>
</Steps.RegistrationError>
@@ -143,62 +131,46 @@ class StudentCompleteRegistration extends React.Component {
<Spinner />
) : (
<Progression {... this.state}>
- <Steps.ClassInviteExistingStudentStep
- classroom={this.state.classroom}
- studentUsername={this.props.studentUsername}
- waiting={this.state.waiting}
- onHandleLogOut={this.handleLogOut}
- onNextStep={this.handleAdvanceStep}
- />
+ <Steps.ClassInviteExistingStudentStep classroom={this.state.classroom}
+ onHandleLogOut={this.handleLogOut}
+ onNextStep={this.advanceStep}
+ studentUsername={this.props.studentUsername}
+ waiting={this.state.waiting} />
{this.props.must_reset_password ?
- <Steps.ChoosePasswordStep
- showPassword
- username={this.props.studentUsername}
- waiting={this.state.waiting}
- onNextStep={this.handleAdvanceStep}
- /> : []
+ <Steps.ChoosePasswordStep onNextStep={this.advanceStep}
+ showPassword={true}
+ waiting={this.state.waiting}
+ username={this.props.studentUsername} />
+ :
+ []
}
- <Steps.DemographicsStep
- description={demographicsDescription}
- waiting={this.state.waiting}
- onNextStep={this.handleRegister}
- />
- <Steps.ClassWelcomeStep
- classroom={this.state.classroom}
- waiting={this.state.waiting}
- onNextStep={this.handleGoToClass}
- />
+ <Steps.DemographicsStep description={demographicsDescription}
+ onNextStep={this.register}
+ waiting={this.state.waiting} />
+ <Steps.ClassWelcomeStep classroom={this.state.classroom}
+ onNextStep={this.goToClass}
+ waiting={this.state.waiting} />
</Progression>
)
)}
</Deck>
);
}
-}
+}));
-StudentCompleteRegistration.propTypes = {
- classroomId: PropTypes.number.isRequired,
- intl: intlShape,
- must_reset_password: PropTypes.bool.isRequired,
- newStudent: PropTypes.bool.isRequired,
- sessionFetched: PropTypes.bool.isRequired,
- studentUsername: PropTypes.string.isRequired
+var mapStateToProps = function (state) {
+ return {
+ classroomId: state.session.session.user && state.session.session.user.classroomId,
+ must_reset_password: state.session.session.flags && state.session.session.flags.must_reset_password,
+ newStudent: (
+ state.session.session.permissions &&
+ state.session.session.permissions.student &&
+ state.session.session.flags.must_complete_registration),
+ sessionFetched: state.session.status === sessionStatus.FETCHED,
+ studentUsername: state.session.session.user && state.session.session.user.username
+ };
};
-const IntlStudentCompleteRegistration = injectIntl(StudentCompleteRegistration);
-
-const mapStateToProps = state => ({
- classroomId: state.session.session.user && state.session.session.user.classroomId,
- must_reset_password: state.session.session.flags && state.session.session.flags.must_reset_password,
- newStudent: (
- state.session.session.permissions &&
- state.session.session.permissions.student &&
- state.session.session.flags.must_complete_registration
- ),
- sessionFetched: state.session.status === sessionStatus.FETCHED,
- studentUsername: state.session.session.user && state.session.session.user.username
-});
-
-const ConnectedStudentCompleteRegistration = connect(mapStateToProps)(IntlStudentCompleteRegistration);
+var ConnectedStudentCompleteRegistration = connect(mapStateToProps)(StudentCompleteRegistration);
render(<ConnectedStudentCompleteRegistration />, document.getElementById('app'));
diff --git a/src/views/studentregistration/studentregistration.jsx b/src/views/studentregistration/studentregistration.jsx
index 2a548d809..e20428dc5 100644
--- a/src/views/studentregistration/studentregistration.jsx
+++ b/src/views/studentregistration/studentregistration.jsx
@@ -1,43 +1,45 @@
-const bindAll = require('lodash.bindall');
-const defaults = require('lodash.defaultsdeep');
-const PropTypes = require('prop-types');
-const React = require('react');
+var defaults = require('lodash.defaultsdeep');
+var React = require('react');
+var render = require('../../lib/render.jsx');
-const api = require('../../lib/api');
-const injectIntl = require('../../lib/intl.jsx').injectIntl;
-const intlShape = require('../../lib/intl.jsx').intlShape;
+var api = require('../../lib/api');
+var intl = require('../../lib/intl.jsx');
-const Deck = require('../../components/deck/deck.jsx');
-const Progression = require('../../components/progression/progression.jsx');
-const Steps = require('../../components/registration/steps.jsx');
-
-const render = require('../../lib/render.jsx');
+var Deck = require('../../components/deck/deck.jsx');
+var Progression = require('../../components/progression/progression.jsx');
+var Steps = require('../../components/registration/steps.jsx');
require('./studentregistration.scss');
-class StudentRegistration extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleRegister',
- 'handleAdvanceStep',
- 'handleGoToClass'
- ]);
- this.state = {
+var StudentRegistration = intl.injectIntl(React.createClass({
+ type: 'StudentRegistration',
+ getDefaultProps: function () {
+ return {
+ classroomId: null,
+ classroomToken: null
+ };
+ },
+ getInitialState: function () {
+ return {
formData: {},
registrationError: null,
step: 0,
waiting: false
};
- }
- componentDidMount () {
- this.setState({waiting: true}); // eslint-disable-line react/no-did-mount-set-state
+ },
+ advanceStep: function (formData) {
+ formData = formData || {};
+ this.setState({
+ step: this.state.step + 1,
+ formData: defaults({}, formData, this.state.formData)
+ });
+ },
+ componentDidMount: function () {
+ this.setState({waiting: true});
api({
- uri: `/classrooms/${this.props.classroomId}`,
- params: {
- token: this.props.classroomToken
- }
- }, (err, body, res) => {
+ uri: '/classrooms/' + this.props.classroomId,
+ params: {token: this.props.classroomToken}
+ }, function (err, body, res) {
this.setState({waiting: false});
if (err) {
return this.setState({
@@ -48,17 +50,13 @@ class StudentRegistration extends React.Component {
}
if (res.statusCode === 404) {
// TODO: Use react-router for this
- window.location = '/404';
+ return window.location = '/404';
}
- this.setState({
- classroom: body
- });
- });
- }
- handleRegister (formData) {
- this.setState({
- waiting: true
- });
+ this.setState({classroom: body});
+ }.bind(this));
+ },
+ register: function (formData) {
+ this.setState({waiting: true});
formData = defaults({}, formData || {}, this.state.formData);
api({
host: '',
@@ -70,7 +68,8 @@ class StudentRegistration extends React.Component {
password: formData.user.password,
birth_month: formData.user.birth.month,
birth_year: formData.user.birth.year,
- gender: (formData.user.gender === 'other' ?
+ gender: (
+ formData.user.gender === 'other' ?
formData.user.genderOther :
formData.user.gender
),
@@ -79,98 +78,66 @@ class StudentRegistration extends React.Component {
classroom_id: this.props.classroomId,
classroom_token: this.props.classroomToken
}
- }, (err, body, res) => {
- this.setState({
- waiting: false
- });
+ }, function (err, body, res) {
+ this.setState({waiting: false});
if (err) return this.setState({registrationError: err});
- if (body[0] && body[0].success) return this.handleAdvanceStep(formData);
+ if (body[0] && body[0].success) return this.advanceStep(formData);
this.setState({
registrationError:
(body[0] && body[0].msg) ||
- `${this.props.intl.formatMessage({id: 'registration.generalError'})} (${res.statusCode})`
+ this.props.intl.formatMessage({id: 'registration.generalError'}) + ' (' + res.statusCode + ')'
});
- });
- }
- handleAdvanceStep (formData) {
- formData = formData || {};
- this.setState({
- step: this.state.step + 1,
- formData: defaults({}, formData, this.state.formData)
- });
- }
- handleGoToClass () {
- window.location = `/classes/${this.props.classroomId}/`;
- }
- render () {
- const usernameDescription = this.props.intl.formatMessage({id: 'registration.studentUsernameStepDescription'});
- const usernameHelp = this.props.intl.formatMessage({id: 'registration.studentUsernameStepHelpText'});
+ }.bind(this));
+ },
+ goToClass: function () {
+ window.location = '/classes/' + this.props.classroomId + '/';
+ },
+ render: function () {
+ var demographicsDescription = this.props.intl.formatMessage({
+ id: 'registration.studentPersonalStepDescription'});
+ var usernameTitle = this.props.intl.formatMessage({id: 'registration.usernameStepTitleScratcher'});
+ var usernameHelp = this.props.intl.formatMessage({id: 'registration.studentUsernameFieldHelpText'});
+ var usernameDescription = (
+ this.props.intl.formatMessage({id: 'registration.studentUsernameStepDescription'}) + ' ' +
+ this.props.intl.formatMessage({id: 'registration.studentUsernameStepHelpText'})
+ );
+ var usernameTooltip = this.props.intl.formatMessage({id: 'registration.studentUsernameStepTooltip'});
return (
<Deck className="student-registration">
{this.state.registrationError ?
<Steps.RegistrationError>
{this.state.registrationError}
- </Steps.RegistrationError> :
- <Progression {...this.state}>
- <Steps.ClassInviteNewStudentStep
- classroom={this.state.classroom}
- waiting={this.state.waiting || !this.state.classroom}
- onNextStep={this.handleAdvanceStep}
- />
- <Steps.UsernameStep
- description={`${usernameDescription} ${usernameHelp}`}
- title={this.props.intl.formatMessage({
- id: 'registration.usernameStepTitleScratcher'
- })}
- tooltip={this.props.intl.formatMessage({
- id: 'registration.studentUsernameStepTooltip'
- })}
- usernameHelp={this.props.intl.formatMessage({
- id: 'registration.studentUsernameFieldHelpText'
- })}
- waiting={this.state.waiting}
- onNextStep={this.handleAdvanceStep}
- />
- <Steps.DemographicsStep
- description={this.props.intl.formatMessage({
- id: 'registration.studentPersonalStepDescription'
- })}
- waiting={this.state.waiting}
- onNextStep={this.handleRegister}
- />
- <Steps.ClassWelcomeStep
- classroom={this.state.classroom}
- waiting={this.state.waiting || !this.state.classroom}
- onNextStep={this.handleGoToClass}
- />
+ </Steps.RegistrationError>
+ :
+ <Progression {... this.state}>
+ <Steps.ClassInviteNewStudentStep classroom={this.state.classroom}
+ onNextStep={this.advanceStep}
+ waiting={this.state.waiting || !this.state.classroom} />
+ <Steps.UsernameStep onNextStep={this.advanceStep}
+ title={usernameTitle}
+ description={usernameDescription}
+ tooltip={usernameTooltip}
+ usernameHelp={usernameHelp}
+ waiting={this.state.waiting} />
+ <Steps.DemographicsStep description={demographicsDescription}
+ onNextStep={this.register}
+ waiting={this.state.waiting} />
+ <Steps.ClassWelcomeStep classroom={this.state.classroom}
+ onNextStep={this.goToClass}
+ waiting={this.state.waiting || !this.state.classroom} />
</Progression>
}
</Deck>
);
}
-}
+}));
-StudentRegistration.propTypes = {
- classroomId: PropTypes.number.isRequired,
- classroomToken: PropTypes.string.isRequired,
- intl: intlShape
-};
-
-StudentRegistration.defaultProps = {
- classroomId: null,
- classroomToken: null
-};
-
-const IntlStudentRegistration = injectIntl(StudentRegistration);
-
-const [classroomId, _, classroomToken] = document.location.pathname.split('/').filter(p => {
- if (p) {
- return p;
- }
- return null;
-})
+var [classroomId, _, classroomToken] = document.location.pathname.split('/')
+ .filter(function (p) {
+ if (p) return p;
+ })
.slice(-3);
-const props = {classroomId, classroomToken};
+var props = {classroomId, classroomToken};
-render(<IntlStudentRegistration {...props} />, document.getElementById('app'));
+render(<StudentRegistration {... props} />, document.getElementById('app'));
diff --git a/src/views/teacherregistration/teacherregistration.jsx b/src/views/teacherregistration/teacherregistration.jsx
index a276f3b42..23fa0a3b3 100644
--- a/src/views/teacherregistration/teacherregistration.jsx
+++ b/src/views/teacherregistration/teacherregistration.jsx
@@ -1,45 +1,37 @@
-const bindAll = require('lodash.bindall');
-const connect = require('react-redux').connect;
-const defaults = require('lodash.defaultsdeep');
-const PropTypes = require('prop-types');
-const React = require('react');
+var connect = require('react-redux').connect;
+var defaults = require('lodash.defaultsdeep');
+var React = require('react');
+var render = require('../../lib/render.jsx');
-const api = require('../../lib/api');
-const injectIntl = require('../../lib/intl.jsx').injectIntl;
-const intlShape = require('../../lib/intl.jsx').intlShape;
-const sessionActions = require('../../redux/session.js');
+var api = require('../../lib/api');
+var intl = require('../../lib/intl.jsx');
+var sessionActions = require('../../redux/session.js');
-const Deck = require('../../components/deck/deck.jsx');
-const Progression = require('../../components/progression/progression.jsx');
-const Steps = require('../../components/registration/steps.jsx');
-
-const render = require('../../lib/render.jsx');
+var Deck = require('../../components/deck/deck.jsx');
+var Progression = require('../../components/progression/progression.jsx');
+var Steps = require('../../components/registration/steps.jsx');
require('./teacherregistration.scss');
-class TeacherRegistration extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleAdvanceStep',
- 'handleRegister'
- ]);
- this.state = {
+var TeacherRegistration = intl.injectIntl(React.createClass({
+ type: 'TeacherRegistration',
+ getInitialState: function () {
+ return {
formData: {},
registrationError: null,
step: 0,
waiting: false
};
- }
- handleAdvanceStep (formData) {
+ },
+ advanceStep: function (formData) {
formData = formData || {};
this.setState({
step: this.state.step + 1,
formData: defaults({}, formData, this.state.formData)
});
- }
- handleRegister (formData) {
+ },
+ register: function (formData) {
this.setState({waiting: true});
api({
host: '',
@@ -54,8 +46,8 @@ class TeacherRegistration extends React.Component {
birth_year: this.state.formData.user.birth.year,
gender: (
this.state.formData.user.gender === 'other' ?
- this.state.formData.user.genderOther :
- this.state.formData.user.gender
+ this.state.formData.user.genderOther :
+ this.state.formData.user.gender
),
country: this.state.formData.user.country,
subscribe: formData.subscribe,
@@ -76,107 +68,70 @@ class TeacherRegistration extends React.Component {
address_zip: this.state.formData.address.zip,
how_use_scratch: this.state.formData.useScratch
}
- }, (err, body, res) => {
+ }, function (err, body, res) {
this.setState({waiting: false});
if (err) return this.setState({registrationError: err});
if (body[0] && body[0].success) {
this.props.dispatch(sessionActions.refreshSession());
- return this.handleAdvanceStep(formData);
+ return this.advanceStep(formData);
}
this.setState({
registrationError:
(body[0] && body[0].msg) ||
- `${this.props.intl.formatMessage({id: 'registration.generalError'})} (${res.statusCode})`
+ this.props.intl.formatMessage({id: 'registration.generalError'}) + ' (' + res.statusCode + ')'
});
- });
- }
- render () {
- const permissions = this.props.session.permissions || {};
-
+ }.bind(this));
+ },
+ render: function () {
+ var permissions = this.props.session.permissions || {};
return (
<Deck className="teacher-registration">
{this.state.registrationError ?
<Steps.RegistrationError>
{this.state.registrationError}
- </Steps.RegistrationError> :
- <Progression step={this.state.step}>
- <Steps.UsernameStep
- waiting={this.state.waiting}
- onNextStep={this.handleAdvanceStep}
- />
- <Steps.DemographicsStep
- birthOffset={13}
- waiting={this.state.waiting}
- onNextStep={this.handleAdvanceStep}
- />
- <Steps.NameStep
- waiting={this.state.waiting}
- onNextStep={this.handleAdvanceStep}
- />
- <Steps.PhoneNumberStep
- defaultCountry={
- this.state.formData.user && this.state.formData.user.country
- }
- waiting={this.state.waiting}
- onNextStep={this.handleAdvanceStep}
- />
- <Steps.OrganizationStep
- waiting={this.state.waiting}
- onNextStep={this.handleAdvanceStep}
- />
- <Steps.AddressStep
- defaultCountry={
- this.state.formData.user && this.state.formData.user.country
- }
- waiting={this.state.waiting}
- onNextStep={this.handleAdvanceStep}
- />
- <Steps.UseScratchStep
- waiting={this.state.waiting}
- onNextStep={this.handleAdvanceStep}
- />
- <Steps.EmailStep
- waiting={this.state.waiting}
- onNextStep={this.handleRegister}
- />
- <Steps.TeacherApprovalStep
- confirmed={permissions.social}
- educator={permissions.educator}
- email={this.state.formData.user && this.state.formData.user.email}
- invited={permissions.educator_invitee}
- />
+ </Steps.RegistrationError>
+ :
+ <Progression {... this.state}>
+ <Steps.UsernameStep onNextStep={this.advanceStep}
+ waiting={this.state.waiting} />
+ <Steps.DemographicsStep onNextStep={this.advanceStep}
+ waiting={this.state.waiting}
+ birthOffset={13} />
+ <Steps.NameStep onNextStep={this.advanceStep}
+ waiting={this.state.waiting} />
+ <Steps.PhoneNumberStep onNextStep={this.advanceStep}
+ waiting={this.state.waiting}
+ defaultCountry={
+ this.state.formData.user && this.state.formData.user.country
+ } />
+ <Steps.OrganizationStep onNextStep={this.advanceStep}
+ waiting={this.state.waiting} />
+ <Steps.AddressStep onNextStep={this.advanceStep}
+ waiting={this.state.waiting}
+ defaultCountry={
+ this.state.formData.user && this.state.formData.user.country
+ } />
+ <Steps.UseScratchStep onNextStep={this.advanceStep}
+ waiting={this.state.waiting} />
+ <Steps.EmailStep onNextStep={this.register}
+ waiting={this.state.waiting} />
+ <Steps.TeacherApprovalStep email={this.state.formData.user && this.state.formData.user.email}
+ confirmed={permissions.social}
+ invited={permissions.educator_invitee}
+ educator={permissions.educator} />
</Progression>
}
</Deck>
);
}
-}
+}));
-TeacherRegistration.propTypes = {
- dispatch: PropTypes.func,
- intl: intlShape,
- session: PropTypes.shape({
- user: PropTypes.shape({
- classroomId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
- thumbnailUrl: PropTypes.string,
- username: PropTypes.string
- }),
- permissions: PropTypes.shape({
- admin: PropTypes.bool,
- social: PropTypes.bool,
- educator: PropTypes.bool,
- educator_invitee: PropTypes.bool,
- student: PropTypes.bool
- })
- })
+var mapStateToProps = function (state) {
+ return {
+ session: state.session.session
+ };
};
-const IntlTeacherRegistration = injectIntl(TeacherRegistration);
-
-const mapStateToProps = state => ({
- session: state.session.session
-});
-
-const ConnectedTeacherRegistration = connect(mapStateToProps)(IntlTeacherRegistration);
+var ConnectedTeacherRegistration = connect(mapStateToProps)(TeacherRegistration);
render(<ConnectedTeacherRegistration />, document.getElementById('app'));
diff --git a/src/views/teachers/faq/faq.jsx b/src/views/teachers/faq/faq.jsx
index de99b3029..828a7fbbc 100644
--- a/src/views/teachers/faq/faq.jsx
+++ b/src/views/teachers/faq/faq.jsx
@@ -1,113 +1,104 @@
-const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
-const FormattedMessage = require('react-intl').FormattedMessage;
-const injectIntl = require('react-intl').injectIntl;
-const intlShape = require('react-intl').intlShape;
-const React = require('react');
+var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
+var FormattedMessage = require('react-intl').FormattedMessage;
+var injectIntl = require('react-intl').injectIntl;
+var React = require('react');
+var render = require('../../../lib/render.jsx');
-const Page = require('../../../components/page/www/page.jsx');
-const render = require('../../../lib/render.jsx');
+var Page = require('../../../components/page/www/page.jsx');
+var InformationPage = require('../../../components/informationpage/informationpage.jsx');
-const InformationPage = require('../../../components/informationpage/informationpage.jsx');
+var TeacherFaq = injectIntl(React.createClass({
+ type: 'TeacherFaq',
+ render: function () {
+ var formatMessage = this.props.intl.formatMessage;
+ return (
+ <InformationPage title={formatMessage({id: 'teacherfaq.title'})}>
+ <div className="inner info-inner">
+ <section id="teacher-accounts">
+ <span className="nav-spacer"></span>
+ <h2><FormattedMessage id='teacherfaq.title' /></h2>
+ <dl>
+ <dt><FormattedMessage id='teacherfaq.teacherWhatTitle' /></dt>
+ <dd><FormattedHTMLMessage id='teacherfaq.teacherWhatBody' /></dd>
+ <iframe width="565" height="318" src="https://www.youtube.com/embed/7Hl9GxA1zwQ"
+ frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+ <dt><FormattedMessage id='teacherfaq.teacherSignUpTitle' /></dt>
+ <dd><FormattedHTMLMessage id='teacherfaq.teacherSignUpBody' /></dd>
+ <dt><FormattedMessage id='teacherfaq.teacherWaitTitle' /></dt>
+ <dd><FormattedHTMLMessage id='teacherfaq.teacherWaitBody' /></dd>
+ <dt><FormattedMessage id='teacherfaq.teacherPersonalTitle' /></dt>
+ <dd><FormattedHTMLMessage id='teacherfaq.teacherPersonalBody' /></dd>
+ <dt><FormattedMessage id='teacherfaq.teacherGoogleTitle' /></dt>
+ <dd><FormattedHTMLMessage id='teacherfaq.teacherGoogleBody' /></dd>
+ <dt><FormattedMessage id='teacherfaq.teacherEdTitle' /></dt>
+ <dd><FormattedHTMLMessage id='teacherfaq.teacherEdBody' /></dd>
+ <dt><FormattedMessage id='teacherfaq.teacherMultipleTitle' /></dt>
+ <dd><FormattedHTMLMessage id='teacherfaq.teacherMultipleBody' /></dd>
+ <dt><FormattedMessage id='teacherfaq.teacherQuestionsTitle' /></dt>
+ <dd><FormattedHTMLMessage id='teacherfaq.teacherQuestionsBody' /></dd>
+ </dl>
+ </section>
+ <section id="student-accounts">
+ <span className="nav-spacer"></span>
+ <h2><FormattedMessage id='teacherfaq.studentAccountsTitle' /></h2>
+ <dl>
+ <dt><FormattedMessage id='teacherfaq.studentVerifyTitle' /></dt>
+ <dd><FormattedHTMLMessage id='teacherfaq.studentVerifyBody' /></dd>
+ <dt><FormattedMessage id='teacherfaq.studentEndTitle' /></dt>
+ <dd><FormattedHTMLMessage id='teacherfaq.studentEndBody' /></dd>
+ <dt><FormattedMessage id='teacherfaq.studentForgetTitle' /></dt>
+ <dd><FormattedHTMLMessage id='teacherfaq.studentForgetBody' /></dd>
+ <dt><FormattedMessage id='teacherfaq.studentUnsharedTitle' /></dt>
+ <dd><FormattedHTMLMessage id='teacherfaq.studentUnsharedBody' /></dd>
+ <dt><FormattedMessage id='teacherfaq.studentDeleteTitle' /></dt>
+ <dd><FormattedHTMLMessage id='teacherfaq.studentDeleteBody' /></dd>
+ <dt><FormattedMessage id='teacherfaq.studentAddTitle' /></dt>
+ <dd><FormattedHTMLMessage id='teacherfaq.studentAddBody' /></dd>
+ <dt><FormattedMessage id='teacherfaq.studentMultipleTitle' /></dt>
+ <dd><FormattedHTMLMessage id='teacherfaq.studentMultipleBody' /></dd>
+ <dt><FormattedMessage id='teacherfaq.studentDiscussTitle' /></dt>
+ <dd><FormattedHTMLMessage id='teacherfaq.studentDiscussBody' /></dd>
+ <dt><FormattedMessage id='teacherfaq.studentDataTitle' /></dt>
+ <dd><FormattedMessage id='teacherfaq.studentDataBody' /></dd>
+ <dt><FormattedMessage id='teacherfaq.studentPrivacyLawsTitle' /></dt>
+ <dd><FormattedMessage id='teacherfaq.studentPrivacyLawsBody' /></dd>
+ </dl>
+ </section>
+ <section id="community">
+ <span className="nav-spacer"></span>
+ <h2><FormattedMessage id='teacherfaq.commTitle' /></h2>
+ <dl>
+ <dt><FormattedMessage id='teacherfaq.commHiddenTitle' /></dt>
+ <dd><FormattedHTMLMessage id='teacherfaq.commHiddenBody' /></dd>
+ <dt><FormattedMessage id='teacherfaq.commWhoTitle' /></dt>
+ <dd><FormattedHTMLMessage id='teacherfaq.commWhoBody' /></dd>
+ <dt><FormattedMessage id='teacherfaq.commInappropriateTitle' /></dt>
+ <dd><FormattedHTMLMessage id='teacherfaq.commInappropriateBody' /></dd>
+ </dl>
+ </section>
+ </div>
+ <nav>
+ <ol>
+ <li>
+ <a href="#teacher-accounts">
+ <FormattedMessage id='teacherfaq.title' />
+ </a>
+ </li>
+ <li>
+ <a href="#student-accounts">
+ <FormattedMessage id='teacherfaq.studentAccountsTitle' />
+ </a>
+ </li>
+ <li>
+ <a href="#community">
+ <FormattedMessage id='teacherfaq.commTitle' />
+ </a>
+ </li>
+ </ol>
+ </nav>
+ </InformationPage>
+ );
+ }
+}));
-const TeacherFaq = props => (
- <InformationPage title={props.intl.formatMessage({id: 'teacherfaq.title'})}>
- <div className="inner info-inner">
- <section id="teacher-accounts">
- <span className="nav-spacer" />
- <h2><FormattedMessage id="teacherfaq.title" /></h2>
- <dl>
- <dt><FormattedMessage id="teacherfaq.teacherWhatTitle" /></dt>
- <dd><FormattedHTMLMessage id="teacherfaq.teacherWhatBody" /></dd>
- <iframe
- allowFullscreen
- mozallowfullscreen
- webkitallowfullscreen
- frameBorder="0"
- height="318"
- src="https://www.youtube.com/embed/7Hl9GxA1zwQ"
- width="565"
- />
- <dt><FormattedMessage id="teacherfaq.teacherSignUpTitle" /></dt>
- <dd><FormattedHTMLMessage id="teacherfaq.teacherSignUpBody" /></dd>
- <dt><FormattedMessage id="teacherfaq.teacherWaitTitle" /></dt>
- <dd><FormattedHTMLMessage id="teacherfaq.teacherWaitBody" /></dd>
- <dt><FormattedMessage id="teacherfaq.teacherPersonalTitle" /></dt>
- <dd><FormattedHTMLMessage id="teacherfaq.teacherPersonalBody" /></dd>
- <dt><FormattedMessage id="teacherfaq.teacherGoogleTitle" /></dt>
- <dd><FormattedHTMLMessage id="teacherfaq.teacherGoogleBody" /></dd>
- <dt><FormattedMessage id="teacherfaq.teacherEdTitle" /></dt>
- <dd><FormattedHTMLMessage id="teacherfaq.teacherEdBody" /></dd>
- <dt><FormattedMessage id="teacherfaq.teacherMultipleTitle" /></dt>
- <dd><FormattedHTMLMessage id="teacherfaq.teacherMultipleBody" /></dd>
- <dt><FormattedMessage id="teacherfaq.teacherQuestionsTitle" /></dt>
- <dd><FormattedHTMLMessage id="teacherfaq.teacherQuestionsBody" /></dd>
- </dl>
- </section>
- <section id="student-accounts">
- <span className="nav-spacer" />
- <h2><FormattedMessage id="teacherfaq.studentAccountsTitle" /></h2>
- <dl>
- <dt><FormattedMessage id="teacherfaq.studentVerifyTitle" /></dt>
- <dd><FormattedHTMLMessage id="teacherfaq.studentVerifyBody" /></dd>
- <dt><FormattedMessage id="teacherfaq.studentEndTitle" /></dt>
- <dd><FormattedHTMLMessage id="teacherfaq.studentEndBody" /></dd>
- <dt><FormattedMessage id="teacherfaq.studentForgetTitle" /></dt>
- <dd><FormattedHTMLMessage id="teacherfaq.studentForgetBody" /></dd>
- <dt><FormattedMessage id="teacherfaq.studentUnsharedTitle" /></dt>
- <dd><FormattedHTMLMessage id="teacherfaq.studentUnsharedBody" /></dd>
- <dt><FormattedMessage id="teacherfaq.studentDeleteTitle" /></dt>
- <dd><FormattedHTMLMessage id="teacherfaq.studentDeleteBody" /></dd>
- <dt><FormattedMessage id="teacherfaq.studentAddTitle" /></dt>
- <dd><FormattedHTMLMessage id="teacherfaq.studentAddBody" /></dd>
- <dt><FormattedMessage id="teacherfaq.studentMultipleTitle" /></dt>
- <dd><FormattedHTMLMessage id="teacherfaq.studentMultipleBody" /></dd>
- <dt><FormattedMessage id="teacherfaq.studentDiscussTitle" /></dt>
- <dd><FormattedHTMLMessage id="teacherfaq.studentDiscussBody" /></dd>
- <dt><FormattedMessage id="teacherfaq.studentDataTitle" /></dt>
- <dd><FormattedMessage id="teacherfaq.studentDataBody" /></dd>
- <dt><FormattedMessage id="teacherfaq.studentPrivacyLawsTitle" /></dt>
- <dd><FormattedMessage id="teacherfaq.studentPrivacyLawsBody" /></dd>
- </dl>
- </section>
- <section id="community">
- <span className="nav-spacer" />
- <h2><FormattedMessage id="teacherfaq.commTitle" /></h2>
- <dl>
- <dt><FormattedMessage id="teacherfaq.commHiddenTitle" /></dt>
- <dd><FormattedHTMLMessage id="teacherfaq.commHiddenBody" /></dd>
- <dt><FormattedMessage id="teacherfaq.commWhoTitle" /></dt>
- <dd><FormattedHTMLMessage id="teacherfaq.commWhoBody" /></dd>
- <dt><FormattedMessage id="teacherfaq.commInappropriateTitle" /></dt>
- <dd><FormattedHTMLMessage id="teacherfaq.commInappropriateBody" /></dd>
- </dl>
- </section>
- </div>
- <nav>
- <ol>
- <li>
- <a href="#teacher-accounts">
- <FormattedMessage id="teacherfaq.title" />
- </a>
- </li>
- <li>
- <a href="#student-accounts">
- <FormattedMessage id="teacherfaq.studentAccountsTitle" />
- </a>
- </li>
- <li>
- <a href="#community">
- <FormattedMessage id="teacherfaq.commTitle" />
- </a>
- </li>
- </ol>
- </nav>
- </InformationPage>
-);
-
-TeacherFaq.propTypes = {
- intl: intlShape
-};
-
-const IntlTeacherFaq = injectIntl(TeacherFaq);
-
-render(<Page><IntlTeacherFaq /></Page>, document.getElementById('app'));
+render(<Page><TeacherFaq /></Page>, document.getElementById('app'));
diff --git a/src/views/teachers/landing/landing.jsx b/src/views/teachers/landing/landing.jsx
index b398e2823..2b36903bb 100644
--- a/src/views/teachers/landing/landing.jsx
+++ b/src/views/teachers/landing/landing.jsx
@@ -1,159 +1,134 @@
-const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
-const FormattedMessage = require('react-intl').FormattedMessage;
-const React = require('react');
+var React = require('react');
+var render = require('../../../lib/render.jsx');
-const FlexRow = require('../../../components/flex-row/flex-row.jsx');
-const SubNavigation = require('../../../components/subnavigation/subnavigation.jsx');
-const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
+var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
+var FormattedMessage = require('react-intl').FormattedMessage;
+var injectIntl = require('react-intl').injectIntl;
-const Page = require('../../../components/page/www/page.jsx');
-const render = require('../../../lib/render.jsx');
+var Page = require('../../../components/page/www/page.jsx');
+var FlexRow = require('../../../components/flex-row/flex-row.jsx');
+var SubNavigation = require('../../../components/subnavigation/subnavigation.jsx');
+var TitleBanner = require('../../../components/title-banner/title-banner.jsx');
require('./landing.scss');
-const Landing = () => (
- <div className="educators">
- <TitleBanner className="masthead">
- <div className="inner">
- <h1 className="title-banner-h1">
- <FormattedMessage id="teacherlanding.title" />
- </h1>
- <FlexRow className="masthead-info">
- <p className="title-banner-p intro">
- <FormattedMessage id="teacherlanding.intro" />
- </p>
- <div className="ted-talk">
- <iframe
- allowFullScreen
- frameBorder="0"
- src="https://www.youtube.com/embed/uPSuG063jhA?border=0&wmode=transparent"
- />
+var Landing = injectIntl(React.createClass({
+ type: 'Landing',
+ render: function () {
+ return (
+ <div className="educators">
+ <TitleBanner className="masthead">
+ <div className="inner">
+ <h1 className="title-banner-h1">
+ <FormattedMessage id="teacherlanding.title" />
+ </h1>
+ <FlexRow className="masthead-info">
+ <p className="title-banner-p intro">
+ <FormattedMessage id="teacherlanding.intro" />
+ </p>
+ <div className="ted-talk">
+ <iframe src="https://www.youtube.com/embed/uPSuG063jhA?border=0&wmode=transparent"
+ frameBorder="0" allowFullScreen></iframe>
+ </div>
+ </FlexRow>
</div>
- </FlexRow>
- </div>
- <div className="band">
- <SubNavigation className="inner">
- <a href="#in-practice">
- <li>
- <FormattedMessage id="teacherlanding.inPracticeTitle" />
- </li>
- </a>
- <a href="#resources">
- <li>
- <FormattedMessage id="teacherlanding.resourcesAnchor" />
- </li>
- </a>
- <a href="#teacher-accounts">
- <li>
- <FormattedMessage id="general.teacherAccounts" />
- </li>
- </a>
- </SubNavigation>
- </div>
- </TitleBanner>
+ <div className="band">
+ <SubNavigation className="inner">
+ <a href="#in-practice">
+ <li>
+ <FormattedMessage id="teacherlanding.inPracticeTitle" />
+ </li>
+ </a>
+ <a href="#resources">
+ <li>
+ <FormattedMessage id="teacherlanding.resourcesAnchor" />
+ </li>
+ </a>
+ <a href="#teacher-accounts">
+ <li>
+ <FormattedMessage id="general.teacherAccounts" />
+ </li>
+ </a>
+ </SubNavigation>
+ </div>
+ </TitleBanner>
- <div className="inner">
- <section id="in-practice">
- <span className="nav-spacer" />
- <h2>
- <FormattedMessage id="teacherlanding.inPracticeTitle" />
- </h2>
- <p className="intro">
- <FormattedMessage id="teacherlanding.inPracticeIntro" />
- </p>
- <FlexRow className="general-usage">
- <p><FormattedHTMLMessage id="teacherlanding.generalUsageSettings" /></p>
- <p><FormattedHTMLMessage id="teacherlanding.generalUsageGradeLevels" /></p>
- <p><FormattedHTMLMessage id="teacherlanding.generalUsageSubjectAreas" /></p>
- </FlexRow>
- </section>
- <section id="resources">
- <span className="nav-spacer" />
- <h2><FormattedMessage id="general.resourcesTitle" /></h2>
- <FlexRow className="educator-community">
- <div>
- <h3>
- <FormattedMessage id="teacherlanding.scratchEdTitle" />
- </h3>
- <p>
- <FormattedHTMLMessage id="teacherlanding.scratchEdDescription" />
- </p>
- </div>
- <div>
- <h3>
- <FormattedMessage id="teacherlanding.meetupTitle" />
- </h3>
- <p>
- <FormattedHTMLMessage id="teacherlanding.meetupDescription" />
- </p>
- </div>
- </FlexRow>
- <h3 id="guides-header">
- <FormattedMessage id="teacherlanding.guidesTitle" />
- </h3>
- <FlexRow className="guides-and-tutorials">
- <div>
- <a href="/tips">
- <img
- alt="cards icon"
- src="/svgs/teachers/v2-cards.svg"
- />
- </a>
- <p>
- <FormattedHTMLMessage id="teacherlanding.tttPage" />
- </p>
- </div>
- <div>
- <a href="/projects/editor/?tip_bar=home">
- <img
- alt="tips window icon"
- src="/svgs/teachers/tips-window.svg"
- />
- </a>
- <p>
- <FormattedHTMLMessage id="teacherlanding.tipsWindow" />
- </p>
- </div>
- <div>
- <a href="http://scratched.gse.harconstd.edu/guide/">
- <img
- alt="creative computing icon"
- src="/svgs/teachers/creative-computing.svg"
- />
- </a>
- <p>
- <FormattedHTMLMessage id="teacherlanding.creativeComputing" />
- </p>
- </div>
- </FlexRow>
- </section>
- </div>
- <div id="teacher-accounts">
- <div className="inner account-flex">
- <div id="left">
- <h2>
- <FormattedMessage id="teacherlanding.accountsTitle" />
- </h2>
- <p>
- <FormattedHTMLMessage id="teacherlanding.accountsDescription" />
- </p>
- <SubNavigation
- align="left"
- className="teacher-account-buttons"
- >
- <a href="/educators/register">
- <li><FormattedMessage id="teacherlanding.requestAccount" /></li>
- </a>
- </SubNavigation>
+ <div className="inner">
+ <section id="in-practice">
+ <span className="nav-spacer"></span>
+ <h2><FormattedMessage id="teacherlanding.inPracticeTitle" /></h2>
+ <p className="intro"><FormattedMessage id="teacherlanding.inPracticeIntro" /></p>
+ <FlexRow className="general-usage">
+ <p><FormattedHTMLMessage id="teacherlanding.generalUsageSettings" /></p>
+ <p><FormattedHTMLMessage id="teacherlanding.generalUsageGradeLevels" /></p>
+ <p><FormattedHTMLMessage id="teacherlanding.generalUsageSubjectAreas"/></p>
+ </FlexRow>
+ </section>
+ <section id="resources">
+ <span className="nav-spacer"></span>
+ <h2><FormattedMessage id="general.resourcesTitle" /></h2>
+ <FlexRow className="educator-community">
+ <div>
+ <h3><FormattedMessage id="teacherlanding.scratchEdTitle" /></h3>
+ <p>
+ <FormattedHTMLMessage id="teacherlanding.scratchEdDescription" />
+ </p>
+ </div>
+ <div>
+ <h3><FormattedMessage id="teacherlanding.meetupTitle" /></h3>
+ <p>
+ <FormattedHTMLMessage id="teacherlanding.meetupDescription" />
+ </p>
+ </div>
+ </FlexRow>
+ <h3 id="guides-header"><FormattedMessage id="teacherlanding.guidesTitle" /></h3>
+ <FlexRow className="guides-and-tutorials">
+ <div>
+ <a href="/tips">
+ <img src="/svgs/teachers/v2-cards.svg" alt="cards icon" />
+ </a>
+ <p>
+ <FormattedHTMLMessage id="teacherlanding.tttPage" />
+ </p>
+ </div>
+ <div>
+ <a href="/projects/editor/?tip_bar=home">
+ <img src="/svgs/teachers/tips-window.svg" alt="tips window icon" />
+ </a>
+ <p>
+ <FormattedHTMLMessage id="teacherlanding.tipsWindow" />
+ </p>
+ </div>
+ <div>
+ <a href="http://scratched.gse.harvard.edu/guide/">
+ <img src="/svgs/teachers/creative-computing.svg" alt="creative computing icon" />
+ </a>
+ <p>
+ <FormattedHTMLMessage id="teacherlanding.creativeComputing" />
+ </p>
+ </div>
+ </FlexRow>
+ </section>
+ </div>
+ <div id="teacher-accounts">
+ <div className="inner account-flex">
+ <div id="left">
+ <h2><FormattedMessage id="teacherlanding.accountsTitle" /></h2>
+ <p>
+ <FormattedHTMLMessage id="teacherlanding.accountsDescription" />
+ </p>
+ <SubNavigation className="teacher-account-buttons" align="left">
+ <a href="/educators/register">
+ <li><FormattedMessage id="teacherlanding.requestAccount" /></li>
+ </a>
+ </SubNavigation>
+ </div>
+ <img src="/images/teachers/teacher-account.png" alt="teacher account" id="teacher-icon"/>
+ </div>
</div>
- <img
- alt="teacher account"
- id="teacher-icon"
- src="/images/teachers/teacher-account.png"
- />
</div>
- </div>
- </div>
-);
+ );
+ }
+}));
render(<Page><Landing /></Page>, document.getElementById('app'));
diff --git a/src/views/teacherwaitingroom/teacherwaitingroom.jsx b/src/views/teacherwaitingroom/teacherwaitingroom.jsx
index 0c50dea8e..94c0660b3 100644
--- a/src/views/teacherwaitingroom/teacherwaitingroom.jsx
+++ b/src/views/teacherwaitingroom/teacherwaitingroom.jsx
@@ -1,38 +1,32 @@
-const classNames = require('classnames');
-const connect = require('react-redux').connect;
-const PropTypes = require('prop-types');
-const React = require('react');
+var classNames = require('classnames');
+var connect = require('react-redux').connect;
+var React = require('react');
+var render = require('../../lib/render.jsx');
-const Deck = require('../../components/deck/deck.jsx');
-const TeacherApprovalStep = require('../../components/registration/steps.jsx').TeacherApprovalStep;
-
-const render = require('../../lib/render.jsx');
+var Deck = require ('../../components/deck/deck.jsx');
+var TeacherApprovalStep = require('../../components/registration/steps.jsx').TeacherApprovalStep;
require('./teacherwaitingroom.scss');
-class TeacherWaitingRoom extends React.Component {
- componentWillReceiveProps (nextProps) {
+var TeacherWaitingRoom = React.createClass({
+ displayName: 'TeacherWaitingRoom',
+ componentWillReceiveProps: function (nextProps) {
if (nextProps.approved) {
window.location.href = '/educators/classes/';
}
- }
- render () {
+ },
+ render: function () {
return (
<Deck className={classNames('teacher-waitingroom', this.props.className)}>
- <TeacherApprovalStep {...this.props} />
+ <TeacherApprovalStep {... this.props} />
</Deck>
);
}
-}
+});
-TeacherWaitingRoom.propTypes = {
- approved: PropTypes.bool,
- className: PropTypes.string
-};
-
-const mapStateToProps = state => {
- const permissions = state.session.session.permissions || {};
- const user = state.session.session.user || {};
+var mapStateToProps = function (state) {
+ var permissions = state.session.session.permissions || {};
+ var user = state.session.session.user || {};
return {
approved: permissions && permissions.educator && !permissions.educator_invitee && permissions.social,
confirmed: permissions && permissions.social,
@@ -42,6 +36,6 @@ const mapStateToProps = state => {
};
};
-const ConnectedTeacherWaitingRoom = connect(mapStateToProps)(TeacherWaitingRoom);
+var ConnectedTeacherWaitingRoom = connect(mapStateToProps)(TeacherWaitingRoom);
render(<ConnectedTeacherWaitingRoom />, document.getElementById('app'));
diff --git a/src/views/terms/terms.jsx b/src/views/terms/terms.jsx
index 63e223e1d..9bc31ccfa 100644
--- a/src/views/terms/terms.jsx
+++ b/src/views/terms/terms.jsx
@@ -1,571 +1,575 @@
-const React = require('react');
+var React = require('react');
+var render = require('../../lib/render.jsx');
-const Page = require('../../components/page/www/page.jsx');
-const render = require('../../lib/render.jsx');
+var Page = require('../../components/page/www/page.jsx');
+var InformationPage = require('../../components/informationpage/informationpage.jsx');
-const InformationPage = require('../../components/informationpage/informationpage.jsx');
-
-const Terms = () => (
- <InformationPage title={'Scratch Terms of Use'}>
- <div className="inner info-inner">
- <section id="user-agreement">
- <span className="nav-spacer" />
- <h3>1. User Agreement</h3>
- <p>
- 1.1 These Terms of Use constitute an agreement between
- you and the Scratch Team that governs your use of{' '}
- <a href="https://scratch.mit.edu">scratch.mit.edu</a>{' '}
- and all associated services, including but not limited
- to the <a href="http://day.scratch.mit.edu">Scratch Day</a>{' '}
- and <a href="http://scratchx.org">ScratchX</a> websites
- (collectively "Scratch"). The Scratch Team is part of the
- Lifelong Kindergarten Group in the Media Laboratory at the
- Massachusetts Institute of Technology ("MIT"). Please
- read the Terms of Use carefully. By using Scratch you
- affirm that you have read, understood, and accepted
- the terms and conditions in the Terms of Use. If you
- do not agree with any of these conditions, please do not
- use Scratch.
- </p>
- <p>
- 1.2 Your privacy is important to us. Please read our{' '}
- <a href="/privacy_policy">Privacy Policy</a>, which identifies
- how the Scratch Team uses, collects, and stores information
- it collects through the Services. By using Scratch, you
- additionally agree that you are comfortable with Scratch's
- Privacy Policy.
- </p>
- <p>
- 1.3 Scratch is open to children and adults of all ages, and
- we ask that you keep this in mind when using the Scratch
- services. When you use Scratch, you agree to abide by the{' '}
- <a href="/community_guidelines">Scratch Community Guidelines</a>.
- </p>
- <p>
- 1.4 The Scratch Team may change the Terms of Use from time to
- time. You can always find the latest version of the Terms of Use
- at <a href="/terms_of_use">http://scratch.mit.edu/terms_of_use</a>.
- The date of the most recent revisions will appear on this page.
- Your continued use of the Services constitutes your acceptance
- of any changes to or revisions of the Terms of Use.
- </p>
- </section>
- <section id="account-creation">
- <span className="nav-spacer" />
- <h3>2. Account Creation and Maintenance</h3>
- <p>
- 2.1 In order to use some features of the Services, you will need to
- register with Scratch and create an account. Creating an account is
- optional, but without an account you will not be able to save or
- publish projects or comments on Scratch. When registering for a
- personal account, you will be asked to provide certain personal
- information, such as your email address, gender, birth month and
- year, and country. Please see Scratch's{' '}
- <a href="/privacy_policy">Privacy Policy</a> for Scratch's data
- retention and usage policies.
- </p>
- <p>
- 2.2 You are responsible for keeping your password secret and your
- account secure. You are solely responsible for any use of your
- account, even if your account is used by another person. If any use
- of your account violates the Terms of Service, your account may be
- suspended or deleted.
- </p>
- <p>
- 2.3 You may not use another person's Scratch account without permission.
- </p>
- <p>
- 2.4 Account names cannot be changed. If you want a different account name,
- create a new account and copy your existing projects over by hand.
- </p>
- <p>
- 2.5 If you have reason to believe that your account is no longer secure
- (for example, in the event of a loss, theft, or unauthorized disclosure
- of your password), promptly change your password. If you cannot access
- your account to change your password, notify us at{' '}
- <a href="mailto:help@scratch.mit.edu">help@scratch.mit.edu</a>.
- </p>
- </section>
- <section id="rules-of-usage">
- <span className="nav-spacer" />
- <h3>3. Rules of Usage</h3>
- <p>
- 3.1 The Scratch Team supports freedom of expression. However, Scratch is
- intended for a wide audience, and some content is inappropriate for the
- Scratch community. You may not use the Scratch service in any way, that:
+var Terms = React.createClass({
+ type: 'Terms',
+ render: function () {
+ return (
+ <InformationPage title={'Scratch Terms of Use'}>
+ <div className="inner info-inner">
+ <section id="user-agreement">
+ <span className="nav-spacer"></span>
+ <h3>1. User Agreement</h3>
+ <p>
+ 1.1 These Terms of Use constitute an agreement between
+ you and the Scratch Team that governs your use of{' '}
+ <a href="https://scratch.mit.edu">scratch.mit.edu</a>{' '}
+ and all associated services, including but not limited
+ to the <a href="http://day.scratch.mit.edu">Scratch Day</a>{' '}
+ and <a href="http://scratchx.org">ScratchX</a> websites
+ (collectively "Scratch"). The Scratch Team is part of the
+ Lifelong Kindergarten Group in the Media Laboratory at the
+ Massachusetts Institute of Technology ("MIT"). Please
+ read the Terms of Use carefully. By using Scratch you
+ affirm that you have read, understood, and accepted
+ the terms and conditions in the Terms of Use. If you
+ do not agree with any of these conditions, please do not
+ use Scratch.
+ </p>
+ <p>
+ 1.2 Your privacy is important to us. Please read our{' '}
+ <a href="/privacy_policy">Privacy Policy</a>, which identifies
+ how the Scratch Team uses, collects, and stores information
+ it collects through the Services. By using Scratch, you
+ additionally agree that you are comfortable with Scratch's
+ Privacy Policy.
+ </p>
+ <p>
+ 1.3 Scratch is open to children and adults of all ages, and
+ we ask that you keep this in mind when using the Scratch
+ services. When you use Scratch, you agree to abide by the{' '}
+ <a href="/community_guidelines">Scratch Community Guidelines</a>.
+ </p>
+ <p>
+ 1.4 The Scratch Team may change the Terms of Use from time to
+ time. You can always find the latest version of the Terms of Use
+ at <a href="/terms_of_use">http://scratch.mit.edu/terms_of_use</a>.
+ The date of the most recent revisions will appear on this page.
+ Your continued use of the Services constitutes your acceptance
+ of any changes to or revisions of the Terms of Use.
+ </p>
+ </section>
+ <section id="account-creation">
+ <span className="nav-spacer"></span>
+ <h3>2. Account Creation and Maintenance</h3>
+ <p>
+ 2.1 In order to use some features of the Services, you will need to
+ register with Scratch and create an account. Creating an account is
+ optional, but without an account you will not be able to save or
+ publish projects or comments on Scratch. When registering for a
+ personal account, you will be asked to provide certain personal
+ information, such as your email address, gender, birth month and
+ year, and country. Please see Scratch's{' '}
+ <a href="/privacy_policy">Privacy Policy</a> for Scratch's data
+ retention and usage policies.
+ </p>
+ <p>
+ 2.2 You are responsible for keeping your password secret and your
+ account secure. You are solely responsible for any use of your
+ account, even if your account is used by another person. If any use
+ of your account violates the Terms of Service, your account may be
+ suspended or deleted.
+ </p>
+ <p>
+ 2.3 You may not use another person's Scratch account without permission.
+ </p>
+ <p>
+ 2.4 Account names cannot be changed. If you want a different account name,
+ create a new account and copy your existing projects over by hand.
+ </p>
+ <p>
+ 2.5 If you have reason to believe that your account is no longer secure
+ (for example, in the event of a loss, theft, or unauthorized disclosure
+ of your password), promptly change your password. If you cannot access
+ your account to change your password, notify us at{' '}
+ <a href="mailto:help@scratch.mit.edu">help@scratch.mit.edu</a>.
+ </p>
+ </section>
+ <section id="rules-of-usage">
+ <span className="nav-spacer"></span>
+ <h3>3. Rules of Usage</h3>
+ <p>
+ 3.1 The Scratch Team supports freedom of expression. However, Scratch is
+ intended for a wide audience, and some content is inappropriate for the
+ Scratch community. You may not use the Scratch service in any way, that:
+ <ol>
+ <li>
+ Promotes bigotry, discrimination, hatred, or violence against any
+ individual or group;
+ </li>
+ <li>
+ Threatens, harasses, or intimidates any other person, whether that
+ person is a Scratch user or not;
+ </li>
+ <li>Contains foul language or personal attacks;</li>
+ <li>Contains sexually explicit or graphically violent material;</li>
+ <li>
+ Provides instructions on how to commit illegal activities or obtain
+ illegal products;
+ </li>
+ <li>
+ Except in connection with organizing Scratch day events, asks any
+ other user for personally identifying information, contact
+ information, or passwords; or
+ </li>
+ <li>
+ Exposes any others person's personally identifying information,
+ contact information, or passwords without that person's permission.
+ </li>
+ </ol>
+ </p>
+ <p>
+ 3.3 You agree to comply with all applicable laws and regulations when you use
+ Scratch. You may not use Scratch in any unlawful way, including to harass,
+ stalk, or defame any other person.
+ </p>
+ <p>
+ 3.4 You may not impersonate, imitate or pretend to be somebody else when using
+ the Services.
+ </p>
+ <p>
+ 3.5 You agree not to use Scratch in any way intended to disrupt the service,
+ gain unauthorized access to the service, or interfere with any other user's
+ ability to use the service. Prohibited activities include, but are not limited
+ to:
+ <ol>
+ <li>
+ Posting content deliberately designed to crash the Scratch
+ website or editor;
+ </li>
+ <li>
+ Linking to pages containing viruses or malware;
+ </li>
+ <li>
+ Using administrator passwords or pretending to be an administrator;
+ </li>
+ <li>
+ Repeatedly posting the same material, or "spamming";
+ </li>
+ <li>
+ Using alternate accounts or organizing voting groups to manipulate
+ site statistics, such as purposely trying to get on the "What the
+ Community is Loving/Remixing" rows of the front page.
+ </li>
+ </ol>
+ </p>
+ <p>
+ 3.6 Commercial use of Scratch, user-generated content, and support
+ materials is permitted under the{' '}
+ <a href="https://creativecommons.org/licenses/by-sa/2.0/">
+ Creative Commons Attribution-ShareAlike 2.0 license</a>. However,
+ the Scratch Team reserves the right to block any commercial use
+ of Scratch that, in the Scratch Team's sole discretion, is harmful
+ to the community. Harmful commercial use includes spamming or
+ repeated advertisement through projects, comments, or forum posts.
+ </p>
+ <p>
+ 3.7 You agree not to post links to any content outside of the
+ Scratch website, if to do so would violate any part of the Terms of Use.
+ </p>
+ </section>
+ <section id="user-content">
+ <span className="nav-spacer"></span>
+ <h3>4. User-Generated Content and Licensing</h3>
+ <p>
+ 4.1 For the purposes of the Terms of Use, "user-generated content"
+ includes any projects, comments, forum posts, or links to third
+ party websites that a user submits to Scratch.
+ </p>
+ <p>
+ 4.2 The Scratch Team encourages everyone to foster creativity by
+ freely sharing code, art, music, and other works. However, we
+ also understand the need for individuals and companies to protect
+ their intellectual property rights. You are responsible for making
+ sure you have the necessary rights, licenses, or permission for
+ any user-generated content you submit to Scratch.
+ </p>
+ <p>
+ 4.3 All user-generated content you submit to Scratch is licensed
+ to and through Scratch under the{' '}
+ <a href="https://creativecommons.org/licenses/by-sa/2.0/">
+ Creative Commons Attribution-ShareAlike 2.0 license</a>. This
+ allows others to view and remix your content. This license also
+ allows the Scratch Team to display, distribute, and reproduce
+ your content on the Scratch website, through social media
+ channels, and elsewhere. If you do not want to license your
+ content under this license, then do not share it on Scratch.
+ </p>
+ <p>
+ 4.4 You may only submit user-generated projects that were created
+ with (1) the Scratch website editor or (2) an unmodified copy of
+ the Scratch editor compiled from the source code described in
+ Section 5.3. You may not upload any projects that were created, by
+ you or by anyone else, with a modified version of the Scratch editor.
+ </p>
+ <p>
+ 4.5 Although the Scratch Team requires all users to comply with
+ these Terms of Use, some inappropriate user-generated content
+ may be submitted and displayed on the Scratch website. You
+ understand that when you use Scratch you may be exposed to
+ user-generated content that you find objectionable or offensive.
+ If you see any content that violates the Community Guidelines
+ or Terms of Use, please let us know by using the "Report this"
+ button. You only need to report an item once. The Scratch Team
+ reviews reported content every day.
+ </p>
+ <p>
+ 4.6 In addition to reviewing reported user-generated content, the
+ Scratch Team reserves the right, but is not obligated, to monitor
+ all uses of the Scratch service. The Scratch Team may edit, move,
+ or delete any content that violates the Terms of Use or Community
+ Guidelines, without notice.
+ </p>
+ <p>
+ 4.7 All user-generated content is provided as-is. The Scratch Team
+ makes no warranties about the accuracy or reliability of any
+ user-generated content available through Scratch and does not
+ endorse Scratch Day events or vet or verify information posted in
+ connection with said events. The Scratch Team does not endorse any
+ views, opinions, or advice expressed in user-generated content. You
+ agree to relieve the Scratch Team of any and all liability arising
+ from your user-generated content and from Scratch Day events you
+ may organize or host.
+ </p>
+ </section>
+ <section id="scratch-content">
+ <span className="nav-spacer"></span>
+ <h3>5. Scratch Content and Licensing</h3>
+ <p>
+ 5.1 Except for any user-generated content, the Scratch Team owns and
+ retains all rights in and to the Scratch code, the design,
+ functionality, and architecture of Scratch, and any software or
+ content provided through Scratch (collectively "the Scratch IP").
+ If you want to use Scratch in a way that is not allowed by these
+ Terms of Use, you must first contact the Scratch Team. Except for
+ any rights explicitly granted under these Terms of Use, you are not
+ granted any rights in and to any Scratch IP.
+ </p>
+ <p>
+ 5.2 Scratch provides support materials, including images, sounds,
+ video, and sample code, to help users build projects. Support materials
+ are licensed under the{' '}
+ <a href="https://creativecommons.org/licenses/by-sa/2.0/">
+ Creative Commons Attribution-ShareAlike 2.0 license</a>. You may also
+ use screenshots of Scratch under the same license. Please note that
+ this does not apply to materials that are also trademarked by the
+ Scratch Team or other parties as described in parts 5.4 and 5.5, below.
+ <br/>
+ The Creative Commons Attribution-ShareAlike 2.0 license requires you to
+ attribute any material you use to the original author. When you use
+ Scratch support materials, or screenshots of the Scratch website,
+ please use the following attribution: "Scratch is developed by the
+ Lifelong Kindergarten Group at the MIT Media Lab. See
+ http://scratch.mit.edu."
+ </p>
+ <p>
+ 5.3 The source code for Scratch 1.4 is available for download and subject
+ to the copyright notice as indicated on the <a href="/info/faq">Scratch FAQ</a>
+ {' '}page.
+ </p>
+ <p>
+ 5.4 The Scratch name, Scratch logo, Scratch Day logo, Scratch Cat, and Gobo
+ are Trademarks owned by the Scratch Team. The MIT name and logo are Trademarks
+ owned by the Massachusetts Institute of Technology. Unless you are licensed by
+ Scratch under a specific licensing program or agreement, you may not use
+ these logos to label, promote, or endorse any product or service. You may use
+ the Scratch Logo to refer to the Scratch website and programming language.
+ </p>
+ <p>
+ 5.5 The Scratch support materials library may contain images and sounds that
+ are trademarked by third parties. The fact that materials are included in
+ the Scratch support materials library does not in any way limit or reduce
+ intellectual property rights, including trademark rights, otherwise
+ available to the materials' owners. Nothing in these Terms of Use or the
+ Creative Commons 2.0 license will be construed to limit or reduce any
+ party's rights in that party's valid trademarks. You may not use these
+ materials to label, promote, or endorse any product or service. You are
+ solely responsible for any violation of a third party's intellectual
+ property rights caused by your misuse of these materials.
+ </p>
+ </section>
+ <section id="dmca">
+ <span className="nav-spacer"></span>
+ <h3>6. Digital Millennium Copyright Act (DMCA)</h3>
+ <p>
+ 6.1 If you are a copyright holder and believe that content on Scratch
+ violates your rights, you may send a DMCA notification to{' '}
+ <a href="mailto:copyright@scratch.mit.edu">copyright@scratch.mit.edu</a>.
+ For more information, including the information that must be included
+ in a DMCA notification, see our full <a href="/DMCA">DMCA Policy</a> and
+ the text of the DMCA,{' '}
+ <a href="http://www.law.cornell.edu/uscode/text/17/512">17 U.S.C. § 512</a>.
+ </p>
+ <p>
+ 6.2 If you are a Scratch user and you believe that your content did not
+ constitute a copyright violation and was taken down in error, you may
+ send a notification to{' '}
+ <a href="mailto:copyright@scratch.mit.edu">copyright@scratch.mit.edu</a>.
+ Please include:
+ <ul>
+ <li>Your Scratch username and email address;</li>
+ <li>The specific content you believe was taken down in error; and</li>
+ <li>
+ A brief statement of why you believe there was no copyright violation
+ (e.g., the content was not copyrighted, you had permission to use the
+ content, or your use of the content was a "fair use").
+ </li>
+ </ul>
+ </p>
+ </section>
+ <section id="termination">
+ <span className="nav-spacer"></span>
+ <h3>7. Suspension and Termination of Accounts</h3>
+ <p>
+ 7.1 Scratch has the right to suspend your account for violations of the
+ Terms of Use or Community Guidelines. Repeat violators may have their
+ account deleted. The Scratch Team reserves the sole right to determine
+ what constitutes a violation of the Terms of Use or Community Guidelines.
+ The Scratch Team also reserves the right to terminate any account used
+ to circumvent prior enforcement of the Terms of Use.
+ </p>
+ <p>
+ 7.2 If you want to delete or temporarily disable your account, please
+ email <a href="mailto:help@scratch.mit.edu">help@scratch.mit.edu</a>.
+ </p>
+ </section>
+ <section id="third-party">
+ <span className="nav-spacer"></span>
+ <h3>8. Third Party Websites</h3>
+ <p>
+ 8.1 Content on Scratch, including user-generated content, may include
+ links to third party websites. The Scratch Team is not capable of
+ reviewing or managing third party websites, and assumes no
+ responsibility for the privacy practices, content, or functionality
+ of third party websites. You agree to relieve the Scratch Team of
+ any and all liability arising from third party websites.
+ </p>
+ </section>
+ <section id="indemnification">
+ <span className="nav-spacer"></span>
+ <h3>9. Indemnification</h3>
+ <p>
+ You agree to indemnify MIT, the Scratch Team, the Scratch Foundation,
+ and all their affiliates, employees, faculty members, fellows,
+ students, agents, representatives, third party service providers,
+ and members of their governing boards (all of which are "Scratch
+ Entities"), and to defend and hold each of them harmless, from any
+ and all claims and liabilities (including attorneys{'\''} fees) arising
+ out of or related to your breach of the Terms of Service or your
+ use of Scratch.
+ </p>
+ <p>
+ For federal government agencies, provisions in the Terms of Use
+ relating to Indemnification shall not apply to your Official Use,
+ except to the extent expressly authorized by federal law. For
+ state and local government agencies in the United States, Terms
+ of Use relating to Indemnification shall apply to your Official
+ Use only to the extent authorized by the laws of your jurisdiction.
+ </p>
+ </section>
+ <section id="disclaimer">
+ <span className="nav-spacer"></span>
+ <h3>10. Disclaimer of Warranty</h3>
+ <p><b>
+ You acknowledge that you are using Scratch at your own risk. Scratch
+ is provided "as is," and the Scratch Entities hereby expressly
+ disclaim any and all warranties, express and implied, including but
+ not limited to any warranties of accuracy, reliability, title,
+ merchantability, non-infringement, fitness for a particular purpose
+ or any other warranty, condition, guarantee or representation,
+ whether oral, in writing or in electronic form, including but not
+ limited to the accuracy or completeness of any information contained
+ therein or provided by Scratch. Without limiting the foregoing, the
+ Scratch Entities disclaim any and all warranties, express and implied,
+ regarding user-generated content and Scratch Day events. The Scratch
+ Entities and their third party service providers do not represent or
+ warrant that access to Scratch will be uninterrupted or that there
+ will be no failures, errors or omissions or loss of transmitted
+ information, or that no viruses will be transmitted through Scratch
+ services.
+ </b></p>
+ </section>
+ <section id="liability">
+ <span className="nav-spacer"></span>
+ <h3>11. Limitation of Liability</h3>
+ <p><b>
+ The Scratch Entities shall not be liable to you or any third parties
+ for any direct, indirect, special, consequential or punitive damages
+ of any kind, regardless of the type of claim or the nature of the
+ cause of action, even if the Scratch Team has been advised of the
+ possibility of such damages. Without limiting the foregoing, the
+ Scratch Entites shall have no liability to you or any third parties
+ for damages or harms arising out of user-generated content or
+ Scratch Day events.
+ </b></p>
+ </section>
+ <section id="jurisdiction">
+ <span className="nav-spacer"></span>
+ <h3>12. Jurisdiction</h3>
+ <p>
+ Scratch is offered by the Scratch Team from its facilities in the United
+ States. The Scratch Team makes no representations that Scratch is
+ appropriate or available for use in other locations. Those who access
+ or use Scratch are responsible for compliance with local law.
+ </p>
+ </section>
+ <section id="choice-of-law">
+ <span className="nav-spacer"></span>
+ <h3>13. Choice of Law and Venue</h3>
+ <p>
+ You agree that these Terms of Use, for all purposes, shall be governed
+ and construed in accordance with the laws of the Commonwealth of
+ Massachusetts applicable to contracts to be wholly performed therein,
+ and any action based on, relating to, or alleging a breach of the
+ Terms of Use must be brought in a state or federal court in Suffolk
+ County, Massachusetts. In addition, both parties agree to submit to
+ the exclusive personal jurisdiction and venue of such courts.
+ </p>
+ <p>
+ If you are a federal, state, or local government entity in the United
+ States using Scratch in your official capacity and legally unable to
+ accept the controlling law, jurisdiction or venue clauses above, then
+ those clauses do not apply to you. For such U.S. federal government
+ entities, these Terms and any action related thereto will be governed
+ by the laws of the United States of America (without reference to
+ conflict of laws) and, in the absence of federal law and to the extent
+ permitted under federal law, the laws of the Commonwealth of
+ Massachusetts (excluding choice of law).
+ </p>
+ </section>
+ <section id="choice-of-language">
+ <span className="nav-spacer"></span>
+ <h3>14. Choice of Language</h3>
+ <p>
+ If the Scratch Team provides you with a translation of the English language
+ version of these Terms of Use, the Privacy Policy, or any other policy,
+ then you agree that the translation is provided for informational purposes
+ only and does not modify the English language version. In the event of a
+ conflict between a translation and the English version, the English version
+ will govern.
+ </p>
+ </section>
+ <section id="no-waiver">
+ <span className="nav-spacer"></span>
+ <h3>15. No Waiver</h3>
+ <p>
+ No waiver of any term of these Terms of Use shall be deemed a further or
+ continuing waiver of such term or any other term, and the Scratch Team's
+ failure to assert any right or provision under these Terms of Use shall
+ not constitute a waiver of such right or provision.
+ </p>
+ </section>
+ <section id="entire-agreement">
+ <span className="nav-spacer"></span>
+ <h3>16. Entire Agreement</h3>
+ <p>
+ This document, together with all appendices, constitutes the entire Terms
+ of Use and supersedes all previous agreements with the Scratch Team relating
+ to the use of Scratch. Revision date: 4 March 2015.
+ </p>
+ </section>
+ <section id="appendix-a">
+ <span className="nav-spacer"></span>
+ <h3>Appendix A: Additional Terms for Scratch Day Website</h3>
+ <p>
+ The following additional terms also govern your access to and use of web
+ pages hosted within day.scratch.mit.edu/ (collectively, the “Scratch Day
+ Site”). All of the terms set forth in the general Terms of Use above also
+ apply to the Scratch Day Site, unless we clearly state otherwise.
+ </p>
+ <h4>1. Privacy Policy</h4>
+ <p>
+ The Scratch Day Site Privacy Policy, not the Scratch Privacy Policy,
+ describes how the Scratch Team uses, collects, and stores information
+ it collects through the Scratch Day Site. By using the Scratch Day
+ Site, you agree that you are comfortable with the Privacy Policy.
+ </p>
+ <h4>2. Account Creation and Maintenance</h4>
+ <p>
+ 2.1 In order to post an event to the Scratch Day Site, you will need
+ to register and create an account. This account is a separate account
+ from your Scratch account. All registrants must be over 18 years of
+ age. When registering for a personal account, you will be asked to
+ provide certain personal information, such as your email address,
+ first and last name, and Scratch username (optional). Please see the
+ Scratch Day Site Privacy Policy for Scratch’s data retention and usage
+ policies.
+ </p>
+ <p>
+ 2.2 You are responsible for keeping your password secret and your account
+ secure. You are solely responsible for any use of your account, even if
+ your account is used by another person. If any use of your account
+ violates the Terms of Use, your account may be suspended or deleted.
+ </p>
+ <p>
+ 2.3 If you have reason to believe that your account is no longer secure
+ (for example, in the event of a loss, theft, or unauthorized disclosure
+ of your password), promptly change your password. If you cannot access
+ your account to change your password, notify us at{' '}
+ <a href="mailto:scratchday@media.mit.edu">scratchday@media.mit.edu</a>
+ </p>
+ <p>
+ 2.4 The terms set forth in this section apply to the Scratch Day Site.
+ The Account Creation and Maintenance terms in the general Terms of Use
+ do not apply to the Scratch Day Site.
+ </p>
+ <h4>3. No Endorsement</h4>
+ <p>
+ You understand that neither MIT, nor the Scratch Team, nor the Code to
+ Learn Foundation endorses any Scratch Day event. If you are hosting a
+ Scratch Day event, you may not state or imply that MIT, the Scratch
+ Team, or the Code to Learn Foundation has endorsed your event.
+ </p>
+ </section>
+ <section id="appendix-b">
+ <span className="nav-spacer"></span>
+ <h3>Appendix B: Additional Terms for ScratchX Website</h3>
+ <p>
+ The following additional terms also govern your access to and use of web
+ pages hosted within scratchx.org (collectively, the “ScratchX Site”).
+ All of the terms set forth in the general Terms of Use above also apply
+ to the ScratchX Site, unless we clearly state otherwise.
+ </p>
+ <h4>1. ScratchX and GitHub</h4>
+ <p>
+ The ScratchX Site provides a platform for developers to link their
+ experimental extensions to Scratch. However, we do not host those
+ extensions or save them on the ScratchX site. All the extensions loaded
+ on to ScratchX are hosted publicly on independent developers’ accounts
+ on GitHub. Your use of GitHub is subject to GitHub’s Terms of Service
+ and Privacy.
+ </p>
+ <h4>2. Privacy Policy</h4>
+ <p>
+ The ScratchX Site Privacy Policy, not the Scratch Privacy Policy,
+ describes how the Scratch Team uses, collects, and stores information
+ it collects through the ScratchX Site. By using the ScratchX Site, you
+ agree to the terms of the Privacy Policy.
+ </p>
+ <h4>3. No Endorsement</h4>
+ <p>
+ By using ScratchX, you understand that neither MIT, nor the Scratch Team,
+ nor the Code to Learn Foundation endorses any ScratchX experimental
+ extension. If you are a developer linking to your own experimental
+ extension via the ScratchX site, you may not state or imply that MIT,
+ the Scratch Team, or the Code to Learn Foundation has endorsed your
+ extension.
+ </p>
+ </section>
+ <p><b>The Scratch Terms of Use was last updated: April 2016</b></p>
+ </div>
+ <nav>
<ol>
- <li>
- Promotes bigotry, discrimination, hatred, or violence against any
- individual or group;
- </li>
- <li>
- Threatens, harasses, or intimidates any other person, whether that
- person is a Scratch user or not;
- </li>
- <li>Contains foul language or personal attacks;</li>
- <li>Contains sexually explicit or graphically violent material;</li>
- <li>
- Provides instructions on how to commit illegal activities or obtain
- illegal products;
- </li>
- <li>
- Except in connection with organizing Scratch day events, asks any
- other user for personally identifying information, contact
- information, or passwords; or
- </li>
- <li>
- Exposes any others person's personally identifying information,
- contact information, or passwords without that person's permission.
- </li>
+ <li><a href="#appendix-a">Scratch Day Terms</a></li>
+ <li><a href="#appendix-b">ScratchX Terms</a></li>
</ol>
- </p>
- <p>
- 3.3 You agree to comply with all applicable laws and regulations when you use
- Scratch. You may not use Scratch in any unlawful way, including to harass,
- stalk, or defame any other person.
- </p>
- <p>
- 3.4 You may not impersonate, imitate or pretend to be somebody else when using
- the Services.
- </p>
- <p>
- 3.5 You agree not to use Scratch in any way intended to disrupt the service,
- gain unauthorized access to the service, or interfere with any other user's
- ability to use the service. Prohibited activities include, but are not limited
- to:
- <ol>
- <li>
- Posting content deliberately designed to crash the Scratch
- website or editor;
- </li>
- <li>
- Linking to pages containing viruses or malware;
- </li>
- <li>
- Using administrator passwords or pretending to be an administrator;
- </li>
- <li>
- Repeatedly posting the same material, or "spamming";
- </li>
- <li>
- Using alternate accounts or organizing voting groups to manipulate
- site statistics, such as purposely trying to get on the "What the
- Community is Loving/Remixing" rows of the front page.
- </li>
- </ol>
- </p>
- <p>
- 3.6 Commercial use of Scratch, user-generated content, and support
- materials is permitted under the{' '}
- <a href="https://creativecommons.org/licenses/by-sa/2.0/">
- Creative Commons Attribution-ShareAlike 2.0 license</a>. However,
- the Scratch Team reserves the right to block any commercial use
- of Scratch that, in the Scratch Team's sole discretion, is harmful
- to the community. Harmful commercial use includes spamming or
- repeated advertisement through projects, comments, or forum posts.
- </p>
- <p>
- 3.7 You agree not to post links to any content outside of the
- Scratch website, if to do so would violate any part of the Terms of Use.
- </p>
- </section>
- <section id="user-content">
- <span className="nav-spacer" />
- <h3>4. User-Generated Content and Licensing</h3>
- <p>
- 4.1 For the purposes of the Terms of Use, "user-generated content"
- includes any projects, comments, forum posts, or links to third
- party websites that a user submits to Scratch.
- </p>
- <p>
- 4.2 The Scratch Team encourages everyone to foster creativity by
- freely sharing code, art, music, and other works. However, we
- also understand the need for individuals and companies to protect
- their intellectual property rights. You are responsible for making
- sure you have the necessary rights, licenses, or permission for
- any user-generated content you submit to Scratch.
- </p>
- <p>
- 4.3 All user-generated content you submit to Scratch is licensed
- to and through Scratch under the{' '}
- <a href="https://creativecommons.org/licenses/by-sa/2.0/">
- Creative Commons Attribution-ShareAlike 2.0 license</a>. This
- allows others to view and remix your content. This license also
- allows the Scratch Team to display, distribute, and reproduce
- your content on the Scratch website, through social media
- channels, and elsewhere. If you do not want to license your
- content under this license, then do not share it on Scratch.
- </p>
- <p>
- 4.4 You may only submit user-generated projects that were created
- with (1) the Scratch website editor or (2) an unmodified copy of
- the Scratch editor compiled from the source code described in
- Section 5.3. You may not upload any projects that were created, by
- you or by anyone else, with a modified version of the Scratch editor.
- </p>
- <p>
- 4.5 Although the Scratch Team requires all users to comply with
- these Terms of Use, some inappropriate user-generated content
- may be submitted and displayed on the Scratch website. You
- understand that when you use Scratch you may be exposed to
- user-generated content that you find objectionable or offensive.
- If you see any content that violates the Community Guidelines
- or Terms of Use, please let us know by using the "Report this"
- button. You only need to report an item once. The Scratch Team
- reviews reported content every day.
- </p>
- <p>
- 4.6 In addition to reviewing reported user-generated content, the
- Scratch Team reserves the right, but is not obligated, to monitor
- all uses of the Scratch service. The Scratch Team may edit, move,
- or delete any content that violates the Terms of Use or Community
- Guidelines, without notice.
- </p>
- <p>
- 4.7 All user-generated content is provided as-is. The Scratch Team
- makes no warranties about the accuracy or reliability of any
- user-generated content available through Scratch and does not
- endorse Scratch Day events or vet or verify information posted in
- connection with said events. The Scratch Team does not endorse any
- views, opinions, or advice expressed in user-generated content. You
- agree to relieve the Scratch Team of any and all liability arising
- from your user-generated content and from Scratch Day events you
- may organize or host.
- </p>
- </section>
- <section id="scratch-content">
- <span className="nav-spacer" />
- <h3>5. Scratch Content and Licensing</h3>
- <p>
- 5.1 Except for any user-generated content, the Scratch Team owns and
- retains all rights in and to the Scratch code, the design,
- functionality, and architecture of Scratch, and any software or
- content provided through Scratch (collectively "the Scratch IP").
- If you want to use Scratch in a way that is not allowed by these
- Terms of Use, you must first contact the Scratch Team. Except for
- any rights explicitly granted under these Terms of Use, you are not
- granted any rights in and to any Scratch IP.
- </p>
- <p>
- 5.2 Scratch provides support materials, including images, sounds,
- video, and sample code, to help users build projects. Support materials
- are licensed under the{' '}
- <a href="https://creativecommons.org/licenses/by-sa/2.0/">
- Creative Commons Attribution-ShareAlike 2.0 license</a>. You may also
- use screenshots of Scratch under the same license. Please note that
- this does not apply to materials that are also trademarked by the
- Scratch Team or other parties as described in parts 5.4 and 5.5, below.
- <br />
- The Creative Commons Attribution-ShareAlike 2.0 license requires you to
- attribute any material you use to the original author. When you use
- Scratch support materials, or screenshots of the Scratch website,
- please use the following attribution: "Scratch is developed by the
- Lifelong Kindergarten Group at the MIT Media Lab. See
- http://scratch.mit.edu."
- </p>
- <p>
- 5.3 The source code for Scratch 1.4 is available for download and subject
- to the copyright notice as indicated on the <a href="/info/faq">Scratch FAQ</a>
- {' '}page.
- </p>
- <p>
- 5.4 The Scratch name, Scratch logo, Scratch Day logo, Scratch Cat, and Gobo
- are Trademarks owned by the Scratch Team. The MIT name and logo are Trademarks
- owned by the Massachusetts Institute of Technology. Unless you are licensed by
- Scratch under a specific licensing program or agreement, you may not use
- these logos to label, promote, or endorse any product or service. You may use
- the Scratch Logo to refer to the Scratch website and programming language.
- </p>
- <p>
- 5.5 The Scratch support materials library may contain images and sounds that
- are trademarked by third parties. The fact that materials are included in
- the Scratch support materials library does not in any way limit or reduce
- intellectual property rights, including trademark rights, otherwise
- available to the materials' owners. Nothing in these Terms of Use or the
- Creative Commons 2.0 license will be construed to limit or reduce any
- party's rights in that party's valid trademarks. You may not use these
- materials to label, promote, or endorse any product or service. You are
- solely responsible for any violation of a third party's intellectual
- property rights caused by your misuse of these materials.
- </p>
- </section>
- <section id="dmca">
- <span className="nav-spacer" />
- <h3>6. Digital Millennium Copyright Act (DMCA)</h3>
- <p>
- 6.1 If you are a copyright holder and believe that content on Scratch
- violates your rights, you may send a DMCA notification to{' '}
- <a href="mailto:copyright@scratch.mit.edu">copyright@scratch.mit.edu</a>.
- For more information, including the information that must be included
- in a DMCA notification, see our full <a href="/DMCA">DMCA Policy</a> and
- the text of the DMCA,{' '}
- <a href="http://www.law.cornell.edu/uscode/text/17/512">17 U.S.C. § 512</a>.
- </p>
- <p>
- 6.2 If you are a Scratch user and you believe that your content did not
- constitute a copyright violation and was taken down in error, you may
- send a notification to{' '}
- <a href="mailto:copyright@scratch.mit.edu">copyright@scratch.mit.edu</a>.
- Please include:
- <ul>
- <li>Your Scratch username and email address;</li>
- <li>The specific content you believe was taken down in error; and</li>
- <li>
- A brief statement of why you believe there was no copyright violation
- (e.g., the content was not copyrighted, you had permission to use the
- content, or your use of the content was a "fair use").
- </li>
- </ul>
- </p>
- </section>
- <section id="termination">
- <span className="nav-spacer" />
- <h3>7. Suspension and Termination of Accounts</h3>
- <p>
- 7.1 Scratch has the right to suspend your account for violations of the
- Terms of Use or Community Guidelines. Repeat violators may have their
- account deleted. The Scratch Team reserves the sole right to determine
- what constitutes a violation of the Terms of Use or Community Guidelines.
- The Scratch Team also reserves the right to terminate any account used
- to circumvent prior enforcement of the Terms of Use.
- </p>
- <p>
- 7.2 If you want to delete or temporarily disable your account, please
- email <a href="mailto:help@scratch.mit.edu">help@scratch.mit.edu</a>.
- </p>
- </section>
- <section id="third-party">
- <span className="nav-spacer" />
- <h3>8. Third Party Websites</h3>
- <p>
- 8.1 Content on Scratch, including user-generated content, may include
- links to third party websites. The Scratch Team is not capable of
- reviewing or managing third party websites, and assumes no
- responsibility for the privacy practices, content, or functionality
- of third party websites. You agree to relieve the Scratch Team of
- any and all liability arising from third party websites.
- </p>
- </section>
- <section id="indemnification">
- <span className="nav-spacer" />
- <h3>9. Indemnification</h3>
- <p>
- You agree to indemnify MIT, the Scratch Team, the Scratch Foundation,
- and all their affiliates, employees, faculty members, fellows,
- students, agents, representatives, third party service providers,
- and members of their governing boards (all of which are "Scratch
- Entities"), and to defend and hold each of them harmless, from any
- and all claims and liabilities (including attorneys{'\''} fees) arising
- out of or related to your breach of the Terms of Service or your
- use of Scratch.
- </p>
- <p>
- For federal government agencies, provisions in the Terms of Use
- relating to Indemnification shall not apply to your Official Use,
- except to the extent expressly authorized by federal law. For
- state and local government agencies in the United States, Terms
- of Use relating to Indemnification shall apply to your Official
- Use only to the extent authorized by the laws of your jurisdiction.
- </p>
- </section>
- <section id="disclaimer">
- <span className="nav-spacer" />
- <h3>10. Disclaimer of Warranty</h3>
- <p><b>
- You acknowledge that you are using Scratch at your own risk. Scratch
- is provided "as is," and the Scratch Entities hereby expressly
- disclaim any and all warranties, express and implied, including but
- not limited to any warranties of accuracy, reliability, title,
- merchantability, non-infringement, fitness for a particular purpose
- or any other warranty, condition, guarantee or representation,
- whether oral, in writing or in electronic form, including but not
- limited to the accuracy or completeness of any information contained
- therein or provided by Scratch. Without limiting the foregoing, the
- Scratch Entities disclaim any and all warranties, express and implied,
- regarding user-generated content and Scratch Day events. The Scratch
- Entities and their third party service providers do not represent or
- warrant that access to Scratch will be uninterrupted or that there
- will be no failures, errors or omissions or loss of transmitted
- information, or that no viruses will be transmitted through Scratch
- services.
- </b></p>
- </section>
- <section id="liability">
- <span className="nav-spacer" />
- <h3>11. Limitation of Liability</h3>
- <p><b>
- The Scratch Entities shall not be liable to you or any third parties
- for any direct, indirect, special, consequential or punitive damages
- of any kind, regardless of the type of claim or the nature of the
- cause of action, even if the Scratch Team has been advised of the
- possibility of such damages. Without limiting the foregoing, the
- Scratch Entites shall have no liability to you or any third parties
- for damages or harms arising out of user-generated content or
- Scratch Day events.
- </b></p>
- </section>
- <section id="jurisdiction">
- <span className="nav-spacer" />
- <h3>12. Jurisdiction</h3>
- <p>
- Scratch is offered by the Scratch Team from its facilities in the United
- States. The Scratch Team makes no representations that Scratch is
- appropriate or available for use in other locations. Those who access
- or use Scratch are responsible for compliance with local law.
- </p>
- </section>
- <section id="choice-of-law">
- <span className="nav-spacer" />
- <h3>13. Choice of Law and Venue</h3>
- <p>
- You agree that these Terms of Use, for all purposes, shall be governed
- and construed in accordance with the laws of the Commonwealth of
- Massachusetts applicable to contracts to be wholly performed therein,
- and any action based on, relating to, or alleging a breach of the
- Terms of Use must be brought in a state or federal court in Suffolk
- County, Massachusetts. In addition, both parties agree to submit to
- the exclusive personal jurisdiction and venue of such courts.
- </p>
- <p>
- If you are a federal, state, or local government entity in the United
- States using Scratch in your official capacity and legally unable to
- accept the controlling law, jurisdiction or venue clauses above, then
- those clauses do not apply to you. For such U.S. federal government
- entities, these Terms and any action related thereto will be governed
- by the laws of the United States of America (without reference to
- conflict of laws) and, in the absence of federal law and to the extent
- permitted under federal law, the laws of the Commonwealth of
- Massachusetts (excluding choice of law).
- </p>
- </section>
- <section id="choice-of-language">
- <span className="nav-spacer" />
- <h3>14. Choice of Language</h3>
- <p>
- If the Scratch Team provides you with a translation of the English language
- version of these Terms of Use, the Privacy Policy, or any other policy,
- then you agree that the translation is provided for informational purposes
- only and does not modify the English language version. In the event of a
- conflict between a translation and the English version, the English version
- will govern.
- </p>
- </section>
- <section id="no-waiver">
- <span className="nav-spacer" />
- <h3>15. No Waiver</h3>
- <p>
- No waiver of any term of these Terms of Use shall be deemed a further or
- continuing waiver of such term or any other term, and the Scratch Team's
- failure to assert any right or provision under these Terms of Use shall
- not constitute a waiver of such right or provision.
- </p>
- </section>
- <section id="entire-agreement">
- <span className="nav-spacer" />
- <h3>16. Entire Agreement</h3>
- <p>
- This document, together with all appendices, constitutes the entire Terms
- of Use and supersedes all previous agreements with the Scratch Team relating
- to the use of Scratch. Revision date: 4 March 2015.
- </p>
- </section>
- <section id="appendix-a">
- <span className="nav-spacer" />
- <h3>Appendix A: Additional Terms for Scratch Day Website</h3>
- <p>
- The following additional terms also govern your access to and use of web
- pages hosted within day.scratch.mit.edu/ (collectively, the “Scratch Day
- Site”). All of the terms set forth in the general Terms of Use above also
- apply to the Scratch Day Site, unless we clearly state otherwise.
- </p>
- <h4>1. Privacy Policy</h4>
- <p>
- The Scratch Day Site Privacy Policy, not the Scratch Privacy Policy,
- describes how the Scratch Team uses, collects, and stores information
- it collects through the Scratch Day Site. By using the Scratch Day
- Site, you agree that you are comfortable with the Privacy Policy.
- </p>
- <h4>2. Account Creation and Maintenance</h4>
- <p>
- 2.1 In order to post an event to the Scratch Day Site, you will need
- to register and create an account. This account is a separate account
- from your Scratch account. All registrants must be over 18 years of
- age. When registering for a personal account, you will be asked to
- provide certain personal information, such as your email address,
- first and last name, and Scratch username (optional). Please see the
- Scratch Day Site Privacy Policy for Scratch’s data retention and usage
- policies.
- </p>
- <p>
- 2.2 You are responsible for keeping your password secret and your account
- secure. You are solely responsible for any use of your account, even if
- your account is used by another person. If any use of your account
- violates the Terms of Use, your account may be suspended or deleted.
- </p>
- <p>
- 2.3 If you have reason to believe that your account is no longer secure
- (for example, in the event of a loss, theft, or unauthorized disclosure
- of your password), promptly change your password. If you cannot access
- your account to change your password, notify us at{' '}
- <a href="mailto:scratchday@media.mit.edu">scratchday@media.mit.edu</a>
- </p>
- <p>
- 2.4 The terms set forth in this section apply to the Scratch Day Site.
- The Account Creation and Maintenance terms in the general Terms of Use
- do not apply to the Scratch Day Site.
- </p>
- <h4>3. No Endorsement</h4>
- <p>
- You understand that neither MIT, nor the Scratch Team, nor the Code to
- Learn Foundation endorses any Scratch Day event. If you are hosting a
- Scratch Day event, you may not state or imply that MIT, the Scratch
- Team, or the Code to Learn Foundation has endorsed your event.
- </p>
- </section>
- <section id="appendix-b">
- <span className="nav-spacer" />
- <h3>Appendix B: Additional Terms for ScratchX Website</h3>
- <p>
- The following additional terms also govern your access to and use of web
- pages hosted within scratchx.org (collectively, the “ScratchX Site”).
- All of the terms set forth in the general Terms of Use above also apply
- to the ScratchX Site, unless we clearly state otherwise.
- </p>
- <h4>1. ScratchX and GitHub</h4>
- <p>
- The ScratchX Site provides a platform for developers to link their
- experimental extensions to Scratch. However, we do not host those
- extensions or save them on the ScratchX site. All the extensions loaded
- on to ScratchX are hosted publicly on independent developers’ accounts
- on GitHub. Your use of GitHub is subject to GitHub’s Terms of Service
- and Privacy.
- </p>
- <h4>2. Privacy Policy</h4>
- <p>
- The ScratchX Site Privacy Policy, not the Scratch Privacy Policy,
- describes how the Scratch Team uses, collects, and stores information
- it collects through the ScratchX Site. By using the ScratchX Site, you
- agree to the terms of the Privacy Policy.
- </p>
- <h4>3. No Endorsement</h4>
- <p>
- By using ScratchX, you understand that neither MIT, nor the Scratch Team,
- nor the Code to Learn Foundation endorses any ScratchX experimental
- extension. If you are a developer linking to your own experimental
- extension via the ScratchX site, you may not state or imply that MIT,
- the Scratch Team, or the Code to Learn Foundation has endorsed your
- extension.
- </p>
- </section>
- <p><b>The Scratch Terms of Use was last updated: April 2016</b></p>
- </div>
- <nav>
- <ol>
- <li><a href="#appendix-a">Scratch Day Terms</a></li>
- <li><a href="#appendix-b">ScratchX Terms</a></li>
- </ol>
- </nav>
- </InformationPage>
-);
+ </nav>
+ </InformationPage>
+ );
+ }
+});
render(<Page><Terms /></Page>, document.getElementById('app'));
diff --git a/src/views/tips/tips.jsx b/src/views/tips/tips.jsx
index b23a0d979..12012f531 100644
--- a/src/views/tips/tips.jsx
+++ b/src/views/tips/tips.jsx
@@ -1,94 +1,73 @@
-const bindAll = require('lodash.bindall');
-const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
-const FormattedMessage = require('react-intl').FormattedMessage;
-const injectIntl = require('react-intl').injectIntl;
-const intlShape = require('react-intl').intlShape;
-const React = require('react');
+var React = require('react');
+var injectIntl = require('react-intl').injectIntl;
+var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
+var FormattedMessage = require('react-intl').FormattedMessage;
+var render = require('../../lib/render.jsx');
-const Button = require('../../components/forms/button.jsx');
-const FlexRow = require('../../components/flex-row/flex-row.jsx');
-const MasonryGrid = require('../../components/masonrygrid/masonrygrid.jsx');
-const TitleBanner = require('../../components/title-banner/title-banner.jsx');
-const TTTModal = require('../../components/modal/ttt/modal.jsx');
-const TTTTile = require('../../components/ttt-tile/ttt-tile.jsx');
-
-const Page = require('../../components/page/www/page.jsx');
-const render = require('../../lib/render.jsx');
-
-const Tiles = require('./ttt.json');
+var MasonryGrid = require('../../components/masonrygrid/masonrygrid.jsx');
+var Page = require('../../components/page/www/page.jsx');
+var Button = require('../../components/forms/button.jsx');
+var TitleBanner = require('../../components/title-banner/title-banner.jsx');
+var FlexRow = require('../../components/flex-row/flex-row.jsx');
+var TTTTile = require('../../components/ttt-tile/ttt-tile.jsx');
+var TTTModal = require('../../components/modal/ttt/modal.jsx');
+var Tiles = require('./ttt.json');
require('./tips.scss');
-class Tips extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleShowTTTModal',
- 'handleHideTTTModal',
- 'renderTTTTiles'
- ]);
- this.state = {
- currentTile: Tiles[0],
- TTTModalOpen: false
- };
- }
- handleShowTTTModal (tile) {
+var Tips = injectIntl(React.createClass({
+ type: 'Tips',
+ getInitialState: function () {
+ return {currentTile: Tiles[0], TTTModalOpen: false};
+ },
+ showTTTModal: function (tile) {
// expects translated tile
- this.setState({
- currentTile: tile,
- TTTModalOpen: true
- });
- }
- handleHideTTTModal () {
- this.setState({
- TTTModalOpen: false
- });
- }
- renderTTTTiles () {
+ this.setState({currentTile: tile, TTTModalOpen: true});
+ },
+ hideTTTModal: function () {
+ this.setState({TTTModalOpen: false});
+ },
+ renderTTTTiles: function () {
+ var formatMessage = this.props.intl.formatMessage;
+ var translatedTile = {};
- return Tiles.map((tile, key) => {
- const translatedTile = {
- activityLoc: this.props.intl.formatMessage({id: tile.activityLoc}),
- bannerUrl: tile.bannerUrl,
- description: this.props.intl.formatMessage({id: tile.description}),
- guideLoc: this.props.intl.formatMessage({id: tile.guideLoc}),
+ return Tiles.map(function (tile, key) {
+ translatedTile = {
+ title: formatMessage({id: tile.title}),
+ description: formatMessage({id: tile.description}),
+ tutorialLoc: tile.tutorialLoc,
+ activityLoc: formatMessage({id: tile.activityLoc}),
+ guideLoc: formatMessage({id: tile.guideLoc}),
thumbUrl: tile.thumbUrl,
- title: this.props.intl.formatMessage({id: tile.title}),
- tutorialLoc: tile.tutorialLoc
+ bannerUrl: tile.bannerUrl
};
- return (
- <TTTTile
- key={key}
- onGuideClick={() => { // eslint-disable-line react/jsx-no-bind
- this.handleShowTTTModal(translatedTile);
- }}
- {...translatedTile}
- />
- );
- });
- }
- render () {
+ return (<TTTTile
+ key={key}
+ onGuideClick={this.showTTTModal.bind(this, translatedTile)}
+ {...translatedTile}/>);
+ }, this); // don't forget to pass 'this' into map function
+ },
+ render: function () {
+ var formatMessage = this.props.intl.formatMessage;
return (
<div className="tips">
<TitleBanner className="masthead mod-blue-bg">
<h1 className="title-banner-h1">
- <FormattedMessage id="tips.title" />
+ <FormattedMessage id="tips.title"/>
</h1>
<p className="intro title-banner-p">
<FormattedHTMLMessage
id="tips.subTitle"
values={{
- GettingStartedPDF: this.props.intl.formatMessage({
- id: 'guides.Getting-Started-Guide-Scratch2Link'
- })
+ GettingStartedPDF: formatMessage({id: 'guides.Getting-Started-Guide-Scratch2Link'})
}}
/>
</p>
<p className="title-banner-p">
<a href="/projects/editor/?tip_bar=getStarted">
<Button className="tips-button getting-started-button">
- <img src="/images/tips/blocks-icon.svg" />
- <FormattedMessage id="tips.tryGettingStarted" />
+ <img src="/images/tips/blocks-icon.svg"/>
+ <FormattedMessage id="tips.tryGettingStarted"/>
</Button>
</a>
</p>
@@ -98,10 +77,10 @@ class Tips extends React.Component {
<section className="ttt-section">
<div className="ttt-head">
<h2>
- <FormattedMessage id="tips.tttHeader" />
+ <FormattedMessage id="tips.tttHeader"/>
</h2>
<p>
- <FormattedHTMLMessage id="tips.tttBody" />
+ <FormattedHTMLMessage id="tips.tttBody"/>
</p>
</div>
<MasonryGrid >
@@ -109,78 +88,62 @@ class Tips extends React.Component {
</MasonryGrid>
<TTTModal
isOpen={this.state.TTTModalOpen}
- onRequestClose={this.handleHideTTTModal}
- {...this.state.currentTile}
- />
+ onRequestClose={this.hideTTTModal}
+ {...this.state.currentTile}/>
</section>
</div>
<div className="tips-resources">
<div className="inner">
- <FlexRow
- as="section"
- className="tips-info-section cards-info"
- >
+ <FlexRow as="section" className="tips-info-section cards-info">
<div className="tips-info-body">
<h2>
- <FormattedMessage id="tips.cardsHeader" />
+ <FormattedMessage id="tips.cardsHeader"/>
</h2>
<p>
- <FormattedHTMLMessage id="tips.cardsBody" />
+ <FormattedHTMLMessage id="tips.cardsBody"/>
</p>
<p className="tips-cards-buttons">
- <a
- href={this.props.intl.formatMessage({
- id: 'cards.ScratchCardsAllLink'
- })}
- >
+ <a href={formatMessage({id: 'cards.ScratchCardsAllLink'})}>
<Button className="tips-button">
- <FormattedMessage id="tips.cardsDownload" />
+ <FormattedMessage id="tips.cardsDownload"/>
</Button>
</a>
<a
href="https://scratch-foundation.myshopify.com/collections/all-products/products/scratch-coding-cards-creative-coding-activities-for-kids"
- rel="noopener noreferrer"
- target="_blank"
- >
+ target="_blank">
<Button className="tips-button purchase-button">
- <FormattedMessage id="tips.cardsPurchase" />
- <img src="/images/tips/arrow-icon.svg" />
+ <FormattedMessage id="tips.cardsPurchase"/>
+ <img src="/images/tips/arrow-icon.svg"/>
</Button>
</a>
</p>
</div>
<div className="tips-info-body tips-illustration">
- <img src="/images/tips/cards-illustration.svg" />
+ <img src="/images/tips/cards-illustration.svg"/>
</div>
</FlexRow>
</div>
</div>
<div className="inner">
- <div className="tips-divider" />
+ <div className="tips-divider"></div>
</div>
<div className="tips-resources">
<div className="inner">
- <FlexRow
- as="section"
- className="tips-info-section"
- >
+ <FlexRow as="section" className="tips-info-section">
<div className="tips-info-body tips-illustration">
- <img
- className="mod-flow-left"
- src="/images/tips/project-illustration.svg"
- />
+ <img src="/images/tips/project-illustration.svg" className="mod-flow-left"/>
</div>
<div className="tips-info-body">
<h2>
- <FormattedMessage id="tips.starterProjectsHeader" />
+ <FormattedMessage id="tips.starterProjectsHeader"/>
</h2>
<p>
- <FormattedHTMLMessage id="tips.starterProjectsBody" />
+ <FormattedHTMLMessage id="tips.starterProjectsBody"/>
</p>
<p>
<a href="/starter_projects">
<Button className="tips-button">
- <FormattedMessage id="tips.starterProjectsPlay" />
+ <FormattedMessage id="tips.starterProjectsPlay"/>
</Button>
</a>
</p>
@@ -189,46 +152,40 @@ class Tips extends React.Component {
</div>
</div>
<div className="inner">
- <FlexRow
- as="section"
- className="tips-info-section mod-align-top"
- >
- <div className="tips-info-body mod-narrow">
- <img
- className="tips-icon"
- src="/images/tips/download-icon.svg"
- />
- <h3>
- <FormattedMessage id="tips.offlineEditorHeader" />
- </h3>
- <p>
- <FormattedHTMLMessage id="tips.offlineEditorBody" />
- </p>
- </div>
- <div className="tips-info-body mod-narrow">
- <img
- className="tips-icon"
- src="/images/tips/question-icon.svg"
- />
- <h3>
- <FormattedMessage id="tips.questionsHeader" />
- </h3>
- <p>
- <FormattedHTMLMessage id="tips.questionsBody" />
- </p>
- </div>
- </FlexRow>
+ <FlexRow
+ as="section"
+ className="tips-info-section mod-align-top"
+ >
+ <div className="tips-info-body mod-narrow">
+ <img
+ src="/images/tips/download-icon.svg"
+ className="tips-icon"
+ />
+ <h3>
+ <FormattedMessage id="tips.offlineEditorHeader"/>
+ </h3>
+ <p>
+ <FormattedHTMLMessage id="tips.offlineEditorBody"/>
+ </p>
+ </div>
+ <div className="tips-info-body mod-narrow">
+ <img
+ src="/images/tips/question-icon.svg"
+ className="tips-icon"
+ />
+ <h3>
+ <FormattedMessage id="tips.questionsHeader"/>
+ </h3>
+ <p>
+ <FormattedHTMLMessage id="tips.questionsBody"/>
+ </p>
+ </div>
+ </FlexRow>
</div>
</div>
);
}
-}
-
-Tips.propTypes = {
- intl: intlShape
-};
-
-const WrappedTips = injectIntl(Tips);
+}));
render(
- <Page><WrappedTips /></Page>, document.getElementById('app'));
+ <Page><Tips/></Page>, document.getElementById('app'));
diff --git a/src/views/wedo2/wedo2.jsx b/src/views/wedo2/wedo2.jsx
index e455f0732..7457f40eb 100644
--- a/src/views/wedo2/wedo2.jsx
+++ b/src/views/wedo2/wedo2.jsx
@@ -1,155 +1,142 @@
-const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
-const FormattedMessage = require('react-intl').FormattedMessage;
-const React = require('react');
+var FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
+var FormattedMessage = require('react-intl').FormattedMessage;
+var React = require('react');
-const Page = require('../../components/page/www/page.jsx');
-const render = require('../../lib/render.jsx');
+var Page = require('../../components/page/www/page.jsx');
+var render = require('../../lib/render.jsx');
require('./wedo2.scss');
-const Wedo2 = () => (
- <div className="wedo">
- <div className="top-banner">
- <div className="inner">
- <div className="columns2">
- <div className="banner-text">
- <h2>LEGO WeDo 2.0 & Scratch</h2>
- <p className="intro">
- <FormattedMessage id="wedo2.intro" />
+var Wedo2 = React.createClass({
+ type: 'wedo2',
+ render: function () {
+ return (
+ <div className="wedo">
+ <div className="top-banner">
+ <div className="inner">
+ <div className="columns2">
+ <div className="banner-text">
+ <h2>LEGO WeDo 2.0 & Scratch</h2>
+ <p className="intro">
+ <FormattedMessage id='wedo2.intro' />
+ </p>
+ </div>
+ <div className="banner-photo">
+ <img src="/images/wedo/wedo-milo.png" />
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div className="inner">
+ <section id="getting-started">
+ <h3>
+ <FormattedMessage id='wedo2.getStarted' />
+ </h3>
+ <p className="callout">
+ <FormattedMessage id='wedo2.requirement' />
</p>
+ <div className="columns3">
+ <div className="column">
+ <img src="/images/wedo/download-device-manager.png" />
+ <h4>
+ <FormattedMessage id='wedo2.installTitle' />
+ </h4>
+ <p>
+ <FormattedHTMLMessage id='wedo2.installText' />
+ <br />
+ <a href="https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1084869222&mt=12">
+ <FormattedMessage id='wedo2.downloadMac' />
+ </a>
+ <br />
+ <a href="https://downloads.scratch.mit.edu/device-manager/ScratchDeviceManager-1.1.0.exe">
+ <FormattedMessage id='wedo2.downloadWin' />
+ </a>
+ </p>
+ </div>
+ <div className="column">
+ <img src="/images/wedo/set-up.png" />
+ <h4>
+ <FormattedMessage id='wedo2.setupTitle' />
+ </h4>
+ <p>
+ <FormattedHTMLMessage id='wedo2.setupText' />
+ </p>
+ </div>
+ <div className="column">
+ <img src="/images/wedo/create-and-share.png" />
+ <h4>
+ <FormattedMessage id='wedo2.createTitle' />
+ </h4>
+ <p>
+ <FormattedMessage id='wedo2.createText' />
+ </p>
+ </div>
+ </div>
+ </section>
+ </div>
+
+ <div className="banner">
+ <div className="inner" id="starter-projects">
+ <h3>
+ <FormattedMessage id='wedo2.starterProjects' />
+ </h3>
+ <div className="project-list">
+ <a href="/projects/101037564/?tip_bar=ext2#editor">
+ <div className="project-card">
+ <img src="/images/wedo/motor.png" alt="" />
+ <p>
+ <FormattedMessage id='wedo2.starterMotor' />
+ </p>
+ </div>
+ </a>
+ <a href="/projects/101038249/?tip_bar=ext2#editor">
+ <div className="project-card">
+ <img src="/images/wedo/distance.png" alt="" />
+ <p>
+ <FormattedMessage id='wedo2.starterDistance' />
+ </p>
+ </div>
+ </a>
+ <a href="/projects/101033190/?tip_bar=ext2#editor">
+ <div className="project-card">
+ <img src="/images/wedo/tilt.png" alt="" />
+ <p>
+ <FormattedMessage id='wedo2.starterTilt' />
+ </p>
+ </div>
+ </a>
+ </div>
</div>
- <div className="banner-photo">
- <img src="/images/wedo/wedo-milo.png" />
- </div>
+ </div>
+
+ <div className="inner">
+ <section>
+ <h3>
+ <FormattedMessage id='wedo2.versionTitle' />
+ </h3>
+ <p>
+ <FormattedMessage id='wedo2.versionText' />
+ </p>
+ <div className="device-card">
+ <h4>LEGO WeDo 1.0 Hub</h4>
+ <img src="/images/wedo/wedo1.png" alt="LEGO WeDo 1.0 Hub" />
+ <a href="/projects/editor/?tip_bar=ext1">
+ <FormattedMessage id='wedo2.wedo1SetupInstructions' />
+ </a>
+ </div>
+ <div className="device-card">
+ <h4>LEGO WeDo 2.0 Hub</h4>
+ <img src="/images/wedo/wedo2.png" alt="LEGO WeDo 2.0 Hub" />
+ <a href="/projects/editor/?tip_bar=ext2">
+ <FormattedMessage id='wedo2.wedo2SetupInstructions' />
+ </a>
+ </div>
+ </section>
</div>
</div>
- </div>
-
- <div className="inner">
- <section id="getting-started">
- <h3>
- <FormattedMessage id="wedo2.getStarted" />
- </h3>
- <p className="callout">
- <FormattedMessage id="wedo2.requirement" />
- </p>
- <div className="columns3">
- <div className="column">
- <img src="/images/wedo/download-device-manager.png" />
- <h4>
- <FormattedMessage id="wedo2.installTitle" />
- </h4>
- <p>
- <FormattedHTMLMessage id="wedo2.installText" />
- <br />
- <a href="https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1084869222&mt=12">
- <FormattedMessage id="wedo2.downloadMac" />
- </a>
- <br />
- <a href="https://downloads.scratch.mit.edu/device-manager/ScratchDeviceManager-1.1.0.exe">
- <FormattedMessage id="wedo2.downloadWin" />
- </a>
- </p>
- </div>
- <div className="column">
- <img src="/images/wedo/set-up.png" />
- <h4>
- <FormattedMessage id="wedo2.setupTitle" />
- </h4>
- <p>
- <FormattedHTMLMessage id="wedo2.setupText" />
- </p>
- </div>
- <div className="column">
- <img src="/images/wedo/create-and-share.png" />
- <h4>
- <FormattedMessage id="wedo2.createTitle" />
- </h4>
- <p>
- <FormattedMessage id="wedo2.createText" />
- </p>
- </div>
- </div>
- </section>
- </div>
-
- <div className="banner">
- <div
- className="inner"
- id="starter-projects"
- >
- <h3>
- <FormattedMessage id="wedo2.starterProjects" />
- </h3>
- <div className="project-list">
- <a href="/projects/101037564/?tip_bar=ext2#editor">
- <div className="project-card">
- <img
- alt=""
- src="/images/wedo/motor.png"
- />
- <p>
- <FormattedMessage id="wedo2.starterMotor" />
- </p>
- </div>
- </a>
- <a href="/projects/101038249/?tip_bar=ext2#editor">
- <div className="project-card">
- <img
- alt=""
- src="/images/wedo/distance.png"
- />
- <p>
- <FormattedMessage id="wedo2.starterDistance" />
- </p>
- </div>
- </a>
- <a href="/projects/101033190/?tip_bar=ext2#editor">
- <div className="project-card">
- <img
- alt=""
- src="/images/wedo/tilt.png"
- />
- <p>
- <FormattedMessage id="wedo2.starterTilt" />
- </p>
- </div>
- </a>
- </div>
- </div>
- </div>
-
- <div className="inner">
- <section>
- <h3>
- <FormattedMessage id="wedo2.versionTitle" />
- </h3>
- <p>
- <FormattedMessage id="wedo2.versionText" />
- </p>
- <div className="device-card">
- <h4>LEGO WeDo 1.0 Hub</h4>
- <img
- alt="LEGO WeDo 1.0 Hub"
- src="/images/wedo/wedo1.png"
- />
- <a href="/projects/editor/?tip_bar=ext1">
- <FormattedMessage id="wedo2.wedo1SetupInstructions" />
- </a>
- </div>
- <div className="device-card">
- <h4>LEGO WeDo 2.0 Hub</h4>
- <img
- alt="LEGO WeDo 2.0 Hub"
- src="/images/wedo/wedo2.png"
- />
- <a href="/projects/editor/?tip_bar=ext2">
- <FormattedMessage id="wedo2.wedo2SetupInstructions" />
- </a>
- </div>
- </section>
- </div>
- </div>
-);
+ );
+ }
+});
render(<Page><Wedo2 /></Page>, document.getElementById('app'));
diff --git a/test/helpers/selenium-helpers.js b/test/helpers/selenium-helpers.js
index 2b55e2a4d..a850a6aac 100644
--- a/test/helpers/selenium-helpers.js
+++ b/test/helpers/selenium-helpers.js
@@ -49,7 +49,6 @@ const getLogs = (whitelist) => {
}
return true;
}
- return true;
});
});
};
diff --git a/test/integration/smoke-testing/test_footer_links.js b/test/integration/smoke-testing/test_footer_links.js
index cd5651d70..330b2d548 100644
--- a/test/integration/smoke-testing/test_footer_links.js
+++ b/test/integration/smoke-testing/test_footer_links.js
@@ -4,7 +4,7 @@
* Test cases: https://github.com/LLK/scratch-www/wiki/Most-Important-Workflows
*/
-const tap = require('tap');
+var tap = require('tap');
const {
driver,
@@ -12,109 +12,107 @@ const {
} = require('../../helpers/selenium-helpers.js');
// Selenium's promise driver will be deprecated, so we should not rely on it
-webdriver.SELENIUM_PROMISE_MANAGER = 0;
+webdriver.SELENIUM_PROMISE_MANAGER=0;
-const rootUrl = process.env.ROOT_URL || 'https://scratch.ly';
+var rootUrl = process.env.ROOT_URL || 'https://scratch.ly';
-// timeout for each test; timeout for suite set at command line level
-const options = {timeout: 30000};
+//timeout for each test; timeout for suite set at command line level
+var options = { timeout: 30000 };
-// number of tests in the plan
+//number of tests in the plan
tap.plan(25);
tap.tearDown(function () {
- // quit the instance of the browser
+ //quit the instance of the browser
driver.quit();
});
tap.beforeEach(function () {
- // load the page with the driver
+ //load the page with the driver
return driver.get(rootUrl);
});
// Function clicks the link and returns the url of the resulting page
-const clickFooterLinks = function (linkText) {
+function clickFooterLinks (linkText) {
return driver.wait(webdriver.until.elementLocated(webdriver.By.id('footer')))
- .then(function (element) {
- return element.findElement(webdriver.By.linkText(linkText));
- })
- .then(function (element) {
- return element.click();
- })
- .then(function () {
- return driver.getCurrentUrl();
- });
-};
+ .then( function (element) {
+ return element.findElement(webdriver.By.linkText(linkText)); })
+ .then( function (element) {
+ return element.click(); })
+ .then(function () {
+ return driver.getCurrentUrl();
+ });
+}
// ==== ABOUT SCRATCH column ====
// ABOUT SCRATCH
-tap.test('clickAboutScratchLink', options, t => {
- const linkText = 'About Scratch';
- const expectedHref = '/about';
- clickFooterLinks(linkText).then(url => {
- // the href should be at the end of the URL
+tap.test('clickAboutScratchLink', options, function (t) {
+ var linkText = 'About Scratch';
+ var expectedHref = '/about';
+ clickFooterLinks(linkText).then( function (url) {
+ //the href should be at the end of the URL
t.equal(url.substr(-expectedHref.length), expectedHref);
t.end();
});
});
// FOR PARENTS
-tap.test('clickForParentsLink', options, t => {
- const linkText = 'For Parents';
- const expectedHref = '/parents/';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickForParentsLink', options, function (t) {
+ var linkText = 'For Parents';
+ var expectedHref = '/parents/';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url.substr(-expectedHref.length), expectedHref);
t.end();
});
});
// FOR EDUCATORS
-tap.test('clickForEducatorsLink', options, t => {
- const linkText = 'For Educators';
- const expectedHref = '/educators';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickForEducatorsLink', options, function (t) {
+ var linkText = 'For Educators';
+ var expectedHref = '/educators';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url.substr(-expectedHref.length), expectedHref);
t.end();
});
});
// FOR DEVELOPERS
-tap.test('clickForDevelopersScratchLink', options, t => {
- const linkText = 'For Developers';
- const expectedHref = '/developers';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickForDevelopersScratchLink', options, function (t) {
+ var linkText = 'For Developers';
+ var expectedHref = '/developers';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url.substr(-expectedHref.length), expectedHref);
t.end();
});
});
// CREDITS
-tap.test('clickCreditsLink', options, t => {
- const linkText = 'Credits';
- const expectedHref = '/info/credits';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickCreditsLink', options, function (t) {
+ var linkText = 'Credits';
+ var expectedHref = '/info/credits';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url.substr(-expectedHref.length), expectedHref);
t.end();
});
});
// JOBS
-tap.test('clickJobsLink', options, t => {
- const linkText = 'Jobs';
- const expectedHref = '/jobs';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickJobsLink', options, function (t) {
+ var linkText = 'Jobs';
+ var expectedHref = '/jobs';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url.substr(-expectedHref.length), expectedHref);
t.end();
});
});
// PRESS
-tap.test('clickPressLink', options, t => {
- const linkText = 'Press';
- const expectedUrl = 'https://wiki.scratch.mit.edu/wiki/Scratch_Press';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickPressLink', options, function (t) {
+ var linkText = 'Press';
+ var expectedUrl = 'https://wiki.scratch.mit.edu/wiki/Scratch_Press';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url, expectedUrl);
t.end();
});
@@ -123,40 +121,40 @@ tap.test('clickPressLink', options, t => {
// ==== COMMUNITY column ====
// COMMUNITY GUIDELINES
-tap.test('clickCommunityGuidelinesLink', options, t => {
- const linkText = 'Community Guidelines';
- const expectedHref = '/community_guidelines';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickCommunityGuidelinesLink', options, function (t) {
+ var linkText = 'Community Guidelines';
+ var expectedHref = '/community_guidelines';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url.substr(-expectedHref.length), expectedHref);
t.end();
});
});
// DISCUSSION FORUMS
-tap.test('clickDiscussionForumsLink', options, t => {
- const linkText = 'Discussion Forums';
- const expectedHref = '/discuss/';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickDiscussionForumsLink', options, function (t) {
+ var linkText = 'Discussion Forums';
+ var expectedHref = '/discuss/';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url.substr(-expectedHref.length), expectedHref);
t.end();
});
});
// SCRATCH WIKI
-tap.test('clickScratchWikiLink', options, t => {
- const linkText = 'Scratch Wiki';
- const expectedUrl = 'https://wiki.scratch.mit.edu/wiki/Scratch_Wiki_Home';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickScratchWikiLink', options, function (t) {
+ var linkText = 'Scratch Wiki';
+ var expectedUrl = 'https://wiki.scratch.mit.edu/wiki/Scratch_Wiki_Home';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url, expectedUrl);
t.end();
});
});
// STATISTICS
-tap.test('clickStatisticsLink', options, t => {
- const linkText = 'Statistics';
- const expectedHref = '/statistics/';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickStatisticsLink', options, function (t) {
+ var linkText = 'Statistics';
+ var expectedHref = '/statistics/';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url.substr(-expectedHref.length), expectedHref);
t.end();
});
@@ -165,60 +163,60 @@ tap.test('clickStatisticsLink', options, t => {
// ==== SUPPORT column ====
// TIPS PAGE
-tap.test('clickTipsPageLink', options, t => {
- const linkText = 'Tips';
- const expectedHref = '/tips';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickTipsPageLink', options, function (t) {
+ var linkText = 'Tips';
+ var expectedHref = '/tips';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url.substr(-expectedHref.length), expectedHref);
t.end();
});
});
// FAQ
-tap.test('clickFAQLink', options, t => {
- const linkText = 'FAQ';
- const expectedHref = '/info/faq';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickFAQLink', options, function (t) {
+ var linkText = 'FAQ';
+ var expectedHref = '/info/faq';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url.substr(-expectedHref.length), expectedHref);
t.end();
});
});
// OFFLINE EDITOR
-tap.test('clickOfflineEditorLink', options, t => {
- const linkText = 'Offline Editor';
- const expectedHref = '/download';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickOfflineEditorLink', options, function (t) {
+ var linkText = 'Offline Editor';
+ var expectedHref = '/download';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url.substr(-expectedHref.length), expectedHref);
t.end();
});
});
// CONTACT US
-tap.test('clickContactUsLink', options, t => {
- const linkText = 'Contact Us';
- const expectedHref = '/contact-us/';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickContactUsLink', options, function (t) {
+ var linkText = 'Contact Us';
+ var expectedHref = '/contact-us/';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url.substr(-expectedHref.length), expectedHref);
t.end();
});
});
// SCRATCH STORE
-tap.test('clickScratchStoreLink', options, t => {
- const linkText = 'Scratch Store';
- const expectedUrl = 'https://scratch-foundation.myshopify.com/';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickScratchStoreLink', options, function (t) {
+ var linkText = 'Scratch Store';
+ var expectedUrl = 'https://scratch-foundation.myshopify.com/';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url, expectedUrl);
t.end();
});
});
// DONATE
-tap.test('clickDonateLink', options, t => {
- const linkText = 'Donate';
- const expectedUrl = 'https://secure.donationpay.org/scratchfoundation/';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickDonateLink', options, function (t) {
+ var linkText = 'Donate';
+ var expectedUrl = 'https://secure.donationpay.org/scratchfoundation/';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url, expectedUrl);
t.end();
});
@@ -227,30 +225,30 @@ tap.test('clickDonateLink', options, t => {
// ==== LEGAL column ====
// TERMS OF USE
-tap.test('clickTermsOfUseLink', options, t => {
- const linkText = 'Terms of Use';
- const expectedHref = '/terms_of_use';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickTermsOfUseLink', options, function (t) {
+ var linkText = 'Terms of Use';
+ var expectedHref = '/terms_of_use';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url.substr(-expectedHref.length), expectedHref);
t.end();
});
});
// PRIVACY POLICY
-tap.test('clickPrivacyPolicyLink', options, t => {
- const linkText = 'Privacy Policy';
- const expectedHref = '/privacy_policy';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickPrivacyPolicyLink', options, function (t) {
+ var linkText = 'Privacy Policy';
+ var expectedHref = '/privacy_policy';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url.substr(-expectedHref.length), expectedHref);
t.end();
});
});
// DMCA
-tap.test('clickDMCALink', options, t => {
- const linkText = 'DMCA';
- const expectedHref = '/DMCA';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickDMCALink', options, function (t) {
+ var linkText = 'DMCA';
+ var expectedHref = '/DMCA';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url.substr(-expectedHref.length), expectedHref);
t.end();
});
@@ -259,50 +257,50 @@ tap.test('clickDMCALink', options, t => {
// ==== SCRATCH FAMILY column ====
// SCRATCH ED (SCRATCHED)
-tap.test('clickScratchEdLink', options, t => {
- const linkText = 'ScratchEd';
- const expectedUrl = 'http://scratched.gse.harvard.edu/';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickScratchEdLink', options, function (t) {
+ var linkText = 'ScratchEd';
+ var expectedUrl = 'http://scratched.gse.harvard.edu/';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url, expectedUrl);
t.end();
});
});
// SCRATCH JR (SCRATCHJR)
-tap.test('clickScratchJrLink', options, t => {
- const linkText = 'ScratchJr';
- const expectedUrl = 'http://www.scratchjr.org/';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickScratchJrLink', options, function (t) {
+ var linkText = 'ScratchJr';
+ var expectedUrl = 'http://www.scratchjr.org/';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url, expectedUrl);
t.end();
});
});
// SCRATCH DAY
-tap.test('clickScratchDayLink', options, t => {
- const linkText = 'Scratch Day';
- const expectedUrl = 'https://day.scratch.mit.edu/';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickScratchDayLink', options, function (t) {
+ var linkText = 'Scratch Day';
+ var expectedUrl = 'https://day.scratch.mit.edu/';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url, expectedUrl);
t.end();
});
});
// SCRATCH CONFERENCE
-tap.test('clickScratchConferenceLink', options, t => {
- const linkText = 'Scratch Conference';
- const expectedHref = '/conference';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickScratchConferenceLink', options, function (t) {
+ var linkText = 'Scratch Conference';
+ var expectedHref = '/conference';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url.substr(-expectedHref.length), expectedHref);
t.end();
});
});
// SCRATCH FOUNDATION
-tap.test('clickScratchFoundationLink', options, t => {
- const linkText = 'Scratch Foundation';
- const expectedUrl = 'https://www.scratchfoundation.org/';
- clickFooterLinks(linkText).then(url => {
+tap.test('clickScratchFoundationLink', options, function (t) {
+ var linkText = 'Scratch Foundation';
+ var expectedUrl = 'https://www.scratchfoundation.org/';
+ clickFooterLinks(linkText).then( function (url) {
t.equal(url, expectedUrl);
t.end();
});
diff --git a/test/integration/smoke-testing/test_navbar_links.js b/test/integration/smoke-testing/test_navbar_links.js
index efe5cf2ba..20e94ace5 100644
--- a/test/integration/smoke-testing/test_navbar_links.js
+++ b/test/integration/smoke-testing/test_navbar_links.js
@@ -9,39 +9,37 @@ var seleniumWebdriver = require('selenium-webdriver');
var tap = require('tap');
// Selenium's promise driver will be deprecated, so we should not rely on it
-seleniumWebdriver.SELENIUM_PROMISE_MANAGER = 0;
+seleniumWebdriver.SELENIUM_PROMISE_MANAGER=0;
-// Set test url through environment variable
+//Set test url through environment variable
var rootUrl = process.env.ROOT_URL || 'https://scratch.ly';
-// chrome driver
-var driver = new seleniumWebdriver.Builder().withCapabilities(seleniumWebdriver.Capabilities.chrome())
- .build();
+//chrome driver
+var driver = new seleniumWebdriver.Builder().withCapabilities(seleniumWebdriver.Capabilities.chrome()).build();
-// number of tests in the plan
+//number of tests in the plan
tap.plan(7);
tap.tearDown(function () {
- // quit the instance of the browser
+ //quit the instance of the browser
driver.quit();
});
tap.beforeEach(function () {
- // load the page with the driver
+ //load the page with the driver
return driver.get(rootUrl);
});
// ==== Links in navbar ====
-// the create link changes depending on whether the user is signed in or not (tips window opens)
+//the create link changes depending on whether the user is signed in or not (tips window opens)
tap.test('checkCreateLinkWhenSignedOut', function (t) {
var xPathLink = '//li[contains(@class, "link") and contains(@class, "create")]/a';
var expectedHref = '/projects/editor/?tip_bar=home';
driver.findElement(seleniumWebdriver.By.xpath(xPathLink))
- .then(function (element) {
- return element.getAttribute('href');
- })
- .then(function (url) {
+ .then( function (element) {
+ return element.getAttribute('href');})
+ .then( function (url) {
t.equal(url.substr(-expectedHref.length), expectedHref);
t.end();
});
@@ -51,10 +49,9 @@ tap.test('checkExploreLinkWhenSignedOut', function (t) {
var xPathLink = '//li[contains(@class, "link") and contains(@class, "explore")]/a';
var expectedHref = '/explore/projects/all';
driver.findElement(seleniumWebdriver.By.xpath(xPathLink))
- .then(function (element) {
- return element.getAttribute('href');
- })
- .then(function (url) {
+ .then( function (element) {
+ return element.getAttribute('href');})
+ .then( function (url) {
t.equal(url.substr(-expectedHref.length), expectedHref);
t.end();
});
@@ -64,10 +61,9 @@ tap.test('checkTipsLinkWhenSignedOut', function (t) {
var xPathLink = '//li[contains(@class, "link") and contains(@class, "tips")]/a';
var expectedHref = '/tips';
driver.findElement(seleniumWebdriver.By.xpath(xPathLink))
- .then(function (element) {
- return element.getAttribute('href');
- })
- .then(function (url) {
+ .then( function (element) {
+ return element.getAttribute('href');})
+ .then( function (url) {
t.equal(url.substr(-expectedHref.length), expectedHref);
t.end();
});
@@ -77,13 +73,12 @@ tap.test('checkAboutLinkWhenSignedOut', function (t) {
var xPathLink = '//li[contains(@class, "link") and contains(@class, "about")]/a';
var expectedHref = '/about';
driver.findElement(seleniumWebdriver.By.xpath(xPathLink))
- .then(function (element) {
- return element.getAttribute('href');
- })
- .then(function (url) {
- t.equal(url.substr(-expectedHref.length), expectedHref);
- t.end();
- });
+ .then( function (element) {
+ return element.getAttribute('href');})
+ .then( function (url) {
+ t.equal(url.substr(-expectedHref.length), expectedHref);
+ t.end();
+ });
});
// ==== Search bar ====
@@ -91,7 +86,7 @@ tap.test('checkAboutLinkWhenSignedOut', function (t) {
tap.test('checkSearchBar', function (t) {
var xPathLink = '//input[@id="frc-q-1088"]';
// search bar should exist
- driver.findElement(seleniumWebdriver.By.xpath(xPathLink)).then(function (element) {
+ driver.findElement(seleniumWebdriver.By.xpath(xPathLink)).then( function (element) {
t.ok(element);
t.end();
});
@@ -103,10 +98,9 @@ tap.test('checkJoinScratchLinkWhenSignedOut', function (t) {
var xPathLink = '//li[contains(@class, "link") and contains(@class, "right") and contains(@class, "join")]/a';
var expectedText = 'Join Scratch';
driver.findElement(seleniumWebdriver.By.xpath(xPathLink))
- .then(function (element) {
- return element.getText('a');
- })
- .then(function (text) {
+ .then( function (element) {
+ return element.getText('a');})
+ .then( function (text) {
t.equal(text, expectedText);
t.end();
});
@@ -116,10 +110,9 @@ tap.test('checkSignInLinkWhenSignedOut', function (t) {
var xPathLink = '//li[contains(@class, "link") and contains(@class, "right") and contains(@class, "login-item")]/a';
var expectedText = 'Sign in';
driver.findElement(seleniumWebdriver.By.xpath(xPathLink))
- .then(function (element) {
- return element.getText('a');
- })
- .then(function (text) {
+ .then( function (element) {
+ return element.getText('a');})
+ .then( function (text) {
t.equal(text, expectedText);
t.end();
});
diff --git a/test/integration/smoke-testing/test_project_rows.js b/test/integration/smoke-testing/test_project_rows.js
index 28e61bf93..9a2633d70 100644
--- a/test/integration/smoke-testing/test_project_rows.js
+++ b/test/integration/smoke-testing/test_project_rows.js
@@ -10,86 +10,85 @@ var tap = require('tap');
var seleniumWebdriver = require('selenium-webdriver');
// Selenium's promise driver will be deprecated, so we should not rely on it
-seleniumWebdriver.SELENIUM_PROMISE_MANAGER = 0;
+seleniumWebdriver.SELENIUM_PROMISE_MANAGER=0;
-// chrome driver
-var driver = new seleniumWebdriver.Builder().withCapabilities(seleniumWebdriver.Capabilities.chrome())
- .build();
+//chrome driver
+var driver = new seleniumWebdriver.Builder().withCapabilities(seleniumWebdriver.Capabilities.chrome()).build();
var rootUrl = process.env.ROOT_URL || 'https://scratch.ly';
-// number of tests in the plan
+//number of tests in the plan
tap.plan(4);
tap.tearDown(function () {
- // quit the instance of the browser
+ //quit the instance of the browser
driver.quit();
});
tap.beforeEach(function () {
- // load the page with the driver
+ //load the page with the driver
return driver.get(rootUrl);
});
-// checks that the title of the first row is Featured Projects
+//checks that the title of the first row is Featured Projects
tap.test('checkFeaturedProjectsRowTitleWhenSignedOut', function (t) {
var xPathLink = '//div[@class="box"]/div[@class="box-header"]/h4';
driver.findElement(seleniumWebdriver.By.xpath(xPathLink))
- .then(function (element) {
+ .then( function (element) {
element.getText('h4')
- .then(function (text) {
- // expected value of the title text
- var expectedText = 'Featured Projects';
- t.equal(text, expectedText);
- t.end();
- });
+ .then( function (text) {
+ //expected value of the title text
+ var expectedText = 'Featured Projects';
+ t.equal(text, expectedText);
+ t.end();
+ });
});
});
-// checks that the link for a project makes sense
+//checks that the link for a project makes sense
tap.test('checkFeaturedProjectsRowLinkWhenSignedOut', function (t) {
var xPathLink = '//div[contains(@class, "thumbnail") ' +
'and contains(@class, "project") and contains(@class, "slick-slide") ' +
'and contains(@class, "slick-active")]/a[@class="thumbnail-image"]';
driver.wait(seleniumWebdriver.until
.elementLocated(seleniumWebdriver.By.xpath(xPathLink)))
- .then(function (element) {
+ .then( function (element) {
element.getAttribute('href')
- .then(function (url) {
- // expected pattern for the project URL
- // since I don't know the length of the project ID number
- var expectedUrlRegExp = new RegExp('/projects/.*[0-9].*/?');
- t.match(url, expectedUrlRegExp);
- t.end();
- });
+ .then( function (url) {
+ //expected pattern for the project URL
+ //since I don't know the length of the project ID number
+ var expectedUrlRegExp = new RegExp('/projects/.*[0-9].*/?');
+ t.match(url, expectedUrlRegExp);
+ t.end();
+ });
});
});
-// checks that the title of the 2nd row is Featured Studios
+//checks that the title of the 2nd row is Featured Studios
tap.test('checkFeaturedStudiosRowWhenSignedOut', function (t) {
var xPathLink = '//div[@class="box"][2]/div[@class="box-header"]/h4';
driver.findElement(seleniumWebdriver.By.xpath(xPathLink))
.then(function (element) {
element.getText('h4')
- .then(function (text) {
- var expectedText = 'Featured Studios';
- t.equal(text, expectedText);
- t.end();
- });
+ .then( function (text) {
+ var expectedText = 'Featured Studios';
+ t.equal(text, expectedText);
+ t.end();
+ });
});
});
-// checks that the link for a studio makes sense
+//checks that the link for a studio makes sense
tap.test('checkFeaturedStudiosRowLinkWhenSignedOut', function (t) {
var xPathLink = '//div[contains(@class, "thumbnail") and contains(@class, "gallery") ' +
'and contains(@class, "slick-slide") and contains(@class, "slick-active")]/a[@class="thumbnail-image"]';
driver.findElement(seleniumWebdriver.By.xpath(xPathLink))
.then(function (element) {
element.getAttribute('href')
- .then(function (url) {
- var expectedUrlRegExp = new RegExp('/studios/.*[0-9].*/?');
- t.match(url, expectedUrlRegExp);
- t.end();
- });
+ .then( function (url) {
+ var expectedUrlRegExp = new RegExp('/studios/.*[0-9].*/?');
+ t.match(url, expectedUrlRegExp);
+ t.end();
+ });
});
});
diff --git a/test/integration/smoke-testing/test_signing_in_and_my_stuff.js b/test/integration/smoke-testing/test_signing_in_and_my_stuff.js
index 68bed40b5..f2efdd455 100644
--- a/test/integration/smoke-testing/test_signing_in_and_my_stuff.js
+++ b/test/integration/smoke-testing/test_signing_in_and_my_stuff.js
@@ -42,18 +42,16 @@ tap.beforeEach(function () {
*/
test('Trying to sign in with no username and no password using scratchr2 navbar', t => {
clickText('Sign in')
- .then(() => clickButton('Sign in'))
- .then(() => driver.wait(until
- .elementLocated(By.xpath('//form[@id="login"]/button[@type="submit"]')))
- )
- .then(() => driver.wait(until
- .elementLocated(By.xpath('//form[@id="login"]/div[@class="error"]')))
- )
- .then(() => findByXpath('//form/div[@class="error"]'))
- .then(element => element.getText())
- .then(text => t.match(text, 'This field is required.',
- '"This field is required" error should be displayed'))
- .then(() => t.end());
+ .then(() => clickButton('Sign in'))
+ .then(() => driver.wait(until
+ .elementLocated(By.xpath('//form[@id="login"]/button[@type="submit"]'))))
+ .then(() => driver.wait(until
+ .elementLocated(By.xpath('//form[@id="login"]/div[@class="error"]'))))
+ .then(() => findByXpath('//form/div[@class="error"]'))
+ .then((element) => element.getText())
+ .then((text) => t.match(text, 'This field is required.',
+ '"This field is required" error should be displayed'))
+ .then(() => t.end());
});
/*
@@ -63,181 +61,175 @@ test('Trying to sign in with no username and no password using scratchr2 navbar'
*/
test('Trying to sign in with no username using scratchr2 navbar', t => {
clickText('Sign in')
- .then(() => findByXpath('//input[@name="password"]'))
- .then((element) => element.sendKeys(password))
- .then(() => clickButton('Sign in'))
- .then(() => driver.wait(until
- .elementLocated(By.xpath('//form[@id="login"]/button[@type="submit"]')))
- )
- .then(() => driver.wait(until
- .elementLocated(By.xpath('//form[@id="login"]/div[@class="error"]')))
- )
- .then(() => findByXpath('//form/div[@class="error"]'))
- .then((element) => element.getText())
- .then((text) => t.match(text, 'This field is required.',
- '"This field is required" error should be displayed'))
- .then(() => t.end());
+ .then(() => findByXpath('//input[@name="password"]'))
+ .then((element) => element.sendKeys(password))
+ .then(() => clickButton('Sign in'))
+ .then(() => driver.wait(until
+ .elementLocated(By.xpath('//form[@id="login"]/button[@type="submit"]'))))
+ .then(() => driver.wait(until
+ .elementLocated(By.xpath('//form[@id="login"]/div[@class="error"]'))))
+ .then(() => findByXpath('//form/div[@class="error"]'))
+ .then((element) => element.getText())
+ .then((text) => t.match(text, 'This field is required.',
+ '"This field is required" error should be displayed'))
+ .then(() => t.end());
});
test('Trying to sign in with no password using scratchr2 navbar', t => {
- var nonsenseusername = Math.random().toString(36)
- .replace(/[^a-z]+/g, '')
- .substr(0, 5);
+ var nonsenseusername = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
clickText('Sign in')
- .then(() => findByXpath('//input[@id="login_dropdown_username"]'))
- .then((element) => element.sendKeys(nonsenseusername))
- .then(() => clickButton('Sign in'))
- .then(() => driver.wait(until
- .elementLocated(By.xpath('//form[@id="login"]/button[@type="submit"]'))))
- .then(() => driver.wait(until
- .elementLocated(By.xpath('//form[@id="login"]/div[@class="error"]'))))
- .then(() => findByXpath('//form/div[@class="error"]'))
- .then((element) => element.getText())
- .then((text) => t.match(text, 'This field is required.',
- '"This field is required" error should be displayed'))
- .then(() => t.end());
+ .then(() => findByXpath('//input[@id="login_dropdown_username"]'))
+ .then((element) => element.sendKeys(nonsenseusername))
+ .then(() => clickButton('Sign in'))
+ .then(() => driver.wait(until
+ .elementLocated(By.xpath('//form[@id="login"]/button[@type="submit"]'))))
+ .then(() => driver.wait(until
+ .elementLocated(By.xpath('//form[@id="login"]/div[@class="error"]'))))
+ .then(() => findByXpath('//form/div[@class="error"]'))
+ .then((element) => element.getText())
+ .then((text) => t.match(text, 'This field is required.',
+ '"This field is required" error should be displayed'))
+ .then(() => t.end());
});
test('Trying to sign in with the wrong username using scratchr2 navbar', t => {
- var nonsenseusername = Math.random().toString(36)
- .replace(/[^a-z]+/g, '')
- .substr(0, 5);
+ var nonsenseusername = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
clickText('Sign in')
- .then(() => findByXpath('//input[@id="login_dropdown_username"]'))
- .then((element) => element.sendKeys(nonsenseusername))
- .then(() => findByXpath('//input[@name="password"]'))
- .then((element) => element.sendKeys(password))
- .then(() => clickButton('Sign in'))
- .then(() => driver.wait(until
- .elementLocated(By.xpath('//form[@id="login"]/button[@type="submit"]'))))
- .then(() => driver.wait(until
- .elementLocated(By.xpath('//form[@id="login"]/div[@class="error"]'))))
- .then(() => findByXpath('//form/div[@class="error"]'))
- .then((element) => element.getText())
- .then((text) => t.match(text, 'Incorrect username or password.',
- '"Incorrect username or password" error should be displayed'))
- .then(() => t.end());
+ .then(() => findByXpath('//input[@id="login_dropdown_username"]'))
+ .then((element) => element.sendKeys(nonsenseusername))
+ .then(() => findByXpath('//input[@name="password"]'))
+ .then((element) => element.sendKeys(password))
+ .then(() => clickButton('Sign in'))
+ .then(() => driver.wait(until
+ .elementLocated(By.xpath('//form[@id="login"]/button[@type="submit"]'))))
+ .then(() => driver.wait(until
+ .elementLocated(By.xpath('//form[@id="login"]/div[@class="error"]'))))
+ .then(() => findByXpath('//form/div[@class="error"]'))
+ .then((element) => element.getText())
+ .then((text) => t.match(text, 'Incorrect username or password.',
+ '"Incorrect username or password" error should be displayed'))
+ .then(() => t.end());
});
test('Trying to sign in with the wrong password using scratchr2 navbar', t => {
clickText('Sign in')
- .then(() => findByXpath('//input[@id="login_dropdown_username"]'))
- .then((element) => element.sendKeys(username))
- .then(() => findByXpath('//input[@name="password"]'))
- .then((element) => element.sendKeys('nonsensepassword'))
- .then(() => clickButton('Sign in'))
- .then(() => driver.wait(until
- .elementLocated(By.xpath('//form[@id="login"]/button[@type="submit"]'))))
- .then(() => driver.wait(until
- .elementLocated(By.xpath('//form[@id="login"]/div[@class="error"]'))))
- .then(() => findByXpath('//form/div[@class="error"]'))
- .then((element) => element.getText())
- .then((text) => t.match(text, 'Incorrect username or password.',
- '"Incorrect username or password" error should be displayed'))
- .then(() => t.end());
+ .then(() => findByXpath('//input[@id="login_dropdown_username"]'))
+ .then((element) => element.sendKeys(username))
+ .then(() => findByXpath('//input[@name="password"]'))
+ .then((element) => element.sendKeys('nonsensepassword'))
+ .then(() => clickButton('Sign in'))
+ .then(() => driver.wait(until
+ .elementLocated(By.xpath('//form[@id="login"]/button[@type="submit"]'))))
+ .then(() => driver.wait(until
+ .elementLocated(By.xpath('//form[@id="login"]/div[@class="error"]'))))
+ .then(() => findByXpath('//form/div[@class="error"]'))
+ .then((element) => element.getText())
+ .then((text) => t.match(text, 'Incorrect username or password.',
+ '"Incorrect username or password" error should be displayed'))
+ .then(() => t.end());
});
test('Sign in to Scratch using scratchr2 navbar', t => {
clickText('Sign in')
- .then(() => findByXpath('//input[@id="login_dropdown_username"]'))
- .then((element) => element.sendKeys(username))
- .then(() => findByXpath('//input[@name="password"]'))
- .then((element) => element.sendKeys(password))
- .then(() => clickButton('Sign in'))
- .then(() => findByXpath('//li[contains(@class, "logged-in-user")' +
- 'and contains(@class, "dropdown")]/span'))
- .then((element) => element.getText('span'))
- .then((text) => t.match(text.toLowerCase(), username.substring(0, 10).toLowerCase(),
+ .then(() => findByXpath('//input[@id="login_dropdown_username"]'))
+ .then((element) => element.sendKeys(username))
+ .then(() => findByXpath('//input[@name="password"]'))
+ .then((element) => element.sendKeys(password))
+ .then(() => clickButton('Sign in'))
+ .then(() => findByXpath('//li[contains(@class, "logged-in-user")'
+ + 'and contains(@class, "dropdown")]/span'))
+ .then((element) => element.getText('span'))
+ .then((text) => t.match(text.toLowerCase(), username.substring(0,10).toLowerCase(),
'first part of username should be displayed in navbar'))
- .then(() => t.end());
+ .then(() => t.end());
});
test('Sign in to Scratch & verify My Stuff structure (tabs, title)', t => {
clickXpath('//a[@class="mystuff-icon"]')
- .then(() => findByXpath('//div[@class="box-head"]/h2'))
- .then((element) => element.getText('h2'))
- .then((text) => t.equal('My Stuff', text, 'title should be My Stuff'))
- .then(() => findByXpath('//li[@data-tab="projects"]/a'))
- .then((element) => element.getText('a'))
- .then((text) => t.match(text, 'All Projects', 'All Projects tab should be present'))
- .then(() => findByXpath('//li[@data-tab="shared"]/a'))
- .then((element) => element.getText('a'))
- .then((text) => t.match(text, 'Shared Projects', 'Shared Projects tab should be present'))
- .then(() => findByXpath('//li[@data-tab="unshared"]/a'))
- .then((element) => element.getText('a'))
- .then((text) => t.match(text, 'Unshared Projects', 'Unshared Projects tab should be present'))
- .then(() => findByXpath('//li[@data-tab="galleries"]/a'))
- .then((element) => element.getText('a'))
- .then((text) => t.match(text, 'My Studios', 'My Studios tab should be present'))
- .then(() => findByXpath('//li[@data-tab="trash"]/a'))
- .then((element) => element.getText('a'))
- .then((text) => t.match(text, 'Trash', 'Trash tab should be present'))
- .then(() => t.end());
+ .then(() => findByXpath('//div[@class="box-head"]/h2'))
+ .then((element) => element.getText('h2'))
+ .then((text) => t.equal('My Stuff', text, 'title should be My Stuff'))
+ .then(() => findByXpath('//li[@data-tab="projects"]/a'))
+ .then((element) => element.getText('a'))
+ .then((text) => t.match(text, 'All Projects', 'All Projects tab should be present'))
+ .then(() => findByXpath('//li[@data-tab="shared"]/a'))
+ .then((element) => element.getText('a'))
+ .then((text) => t.match(text, 'Shared Projects', 'Shared Projects tab should be present'))
+ .then(() => findByXpath('//li[@data-tab="unshared"]/a'))
+ .then((element) => element.getText('a'))
+ .then((text) => t.match(text, 'Unshared Projects', 'Unshared Projects tab should be present'))
+ .then(() => findByXpath('//li[@data-tab="galleries"]/a'))
+ .then((element) => element.getText('a'))
+ .then((text) => t.match(text, 'My Studios', 'My Studios tab should be present'))
+ .then(() => findByXpath('//li[@data-tab="trash"]/a'))
+ .then((element) => element.getText('a'))
+ .then((text) => t.match(text, 'Trash', 'Trash tab should be present'))
+ .then(() => t.end());
});
test('clicking See Inside should take you to the editor', t => {
clickXpath('//a[@class="mystuff-icon"]')
- .then(() => findByXpath('//a[@data-control="edit"]'))
- .then((element) => element.getText('span'))
- .then((text) => t.equal(text, 'See inside', 'there should be a "See inside" button'))
- .then(() => clickXpath('//a[@data-control="edit"]'))
- .then(() => driver.getCurrentUrl())
- .then(function (u) {
- var expectedUrl = '/#editor';
- t.equal(u.substr(-expectedUrl.length), expectedUrl, 'after clicking, the URL should end in #editor');
- })
- .then(() => t.end());
+ .then(() => findByXpath('//a[@data-control="edit"]'))
+ .then((element) => element.getText('span'))
+ .then((text) => t.equal(text, 'See inside', 'there should be a "See inside" button'))
+ .then(() => clickXpath('//a[@data-control="edit"]'))
+ .then(() => driver.getCurrentUrl())
+ .then( function (url) {
+ var expectedUrl = '/#editor';
+ t.equal(url.substr(-expectedUrl.length), expectedUrl, 'after clicking, the URL should end in #editor');
+ })
+ .then(() => t.end());
});
test('clicking a project title should take you to the project page', t => {
clickXpath('//a[@class="mystuff-icon"]')
- .then(() => clickXpath('//a[@data-control="edit"]'))
- .then(() => driver.getCurrentUrl())
- .then(function (u) {
- var expectedUrlRegExp = new RegExp('/projects/.*[0-9].*/?');
- t.match(u, expectedUrlRegExp, 'after clicking, the URL should end in projects/PROJECT_ID/');
- })
- .then(() => t.end());
+ .then(() => clickXpath('//a[@data-control="edit"]'))
+ .then(() => driver.getCurrentUrl())
+ .then( function (url) {
+ var expectedUrlRegExp = new RegExp('/projects/.*[0-9].*/?');
+ t.match(url, expectedUrlRegExp, 'after clicking, the URL should end in projects/PROJECT_ID/');
+ })
+ .then(() => t.end());
});
test('Add To button should bring up a list of studios', t => {
clickXpath('//a[@class="mystuff-icon"]')
- .then(() => findByXpath('//div[@data-control="add-to"]'))
- .then((element) => element.getText('span'))
- .then((text) => t.equal(text, 'Add to', 'there should be an "Add to" button'))
- .then(() => clickXpath('//div[@data-control="add-to"]'))
- .then(() => findByXpath('//div[@class="dropdown-menu"]/ul/li'))
- .then((element) => element.getText('span'))
- .then(function (text) {
- var expectedRegExp = new RegExp('.+');
- t.match(text, expectedRegExp, 'the dropdown menu should have at least 1 text item in it');
- })
- .then(() => t.end());
+ .then(() => findByXpath('//div[@data-control="add-to"]'))
+ .then((element) => element.getText('span'))
+ .then((text) => t.equal(text, 'Add to', 'there should be an "Add to" button'))
+ .then(() => clickXpath('//div[@data-control="add-to"]'))
+ .then(() => findByXpath('//div[@class="dropdown-menu"]/ul/li'))
+ .then((element) => element.getText('span'))
+ .then( function (text) {
+ var expectedRegExp = new RegExp('.+');
+ t.match(text, expectedRegExp, 'the dropdown menu should have at least 1 text item in it');
+ })
+ .then(() => t.end());
});
test('+ New Studio button should take you to the studio page', t => {
clickXpath('//a[@class="mystuff-icon"]')
- .then(() => clickXpath('//form[@id="new_studio"]/button[@type="submit"]'))
- .then(() => findByXpath('//div[@id="show-add-project"]'))
- .then((element) => element.getText('span'))
- .then((text) => t.equal(text, 'Add projects', 'there should be an "Add projects" button'))
- .then(() => driver.getCurrentUrl())
- .then(function (u) {
- var expectedUrlRegExp = new RegExp('/studios/.*[0-9].*/?');
- t.match(u, expectedUrlRegExp,
- 'after clicking the + New Studio, the URL should end in studios/STUDIO_ID');
- })
- .then(() => t.end());
+ .then(() => clickXpath('//form[@id="new_studio"]/button[@type="submit"]'))
+ .then(() => findByXpath('//div[@id="show-add-project"]'))
+ .then((element) => element.getText('span'))
+ .then((text) => t.equal(text, 'Add projects', 'there should be an "Add projects" button'))
+ .then(() => driver.getCurrentUrl())
+ .then( function (url) {
+ var expectedUrlRegExp = new RegExp('/studios/.*[0-9].*/?');
+ t.match(url, expectedUrlRegExp,
+ 'after clicking the + New Studio, the URL should end in studios/STUDIO_ID');
+ })
+ .then(() => t.end());
});
test('+ New Project button should open the editor', t => {
clickXpath('//a[@class="mystuff-icon"]')
- .then(() => clickText('+ New Project'))
- .then(() => driver.getCurrentUrl())
- .then(function (u) {
- var expectedUrlRegExp = new RegExp('/projects/editor');
- t.match(u, expectedUrlRegExp,
- 'after clicking, the URL should end in projects/editor');
- })
- .then(() => t.end());
+ .then(() => clickText('+ New Project'))
+ .then(() => driver.getCurrentUrl())
+ .then( function (url) {
+ var expectedUrlRegExp = new RegExp('/projects/editor');
+ t.match(url, expectedUrlRegExp,
+ 'after clicking, the URL should end in projects/editor');
+ })
+ .then(() => t.end());
});
diff --git a/test/integration/smoke-testing/test_signing_in_and_out_discuss.js b/test/integration/smoke-testing/test_signing_in_and_out_discuss.js
index 030c12040..65d48c64b 100644
--- a/test/integration/smoke-testing/test_signing_in_and_out_discuss.js
+++ b/test/integration/smoke-testing/test_signing_in_and_out_discuss.js
@@ -36,24 +36,24 @@ tap.beforeEach(function () {
test('Sign in to Scratch using scratchr2 navbar', t => {
clickText('Sign in')
- .then(() => findByXpath('//input[@id="login_dropdown_username"]'))
- .then((element) => element.sendKeys(username))
- .then(() => findByXpath('//input[@name="password"]'))
- .then((element) => element.sendKeys(password))
- .then(() => clickButton('Sign in'))
- .then(() => findByXpath('//li[contains(@class, "logged-in-user")' +
- 'and contains(@class, "dropdown")]/span'))
- .then((element) => element.getText('span'))
- .then((text) => t.match(text.toLowerCase(), username.substring(0, 10).toLowerCase(),
+ .then(() => findByXpath('//input[@id="login_dropdown_username"]'))
+ .then((element) => element.sendKeys(username))
+ .then(() => findByXpath('//input[@name="password"]'))
+ .then((element) => element.sendKeys(password))
+ .then(() => clickButton('Sign in'))
+ .then(() => findByXpath('//li[contains(@class, "logged-in-user")'
+ + 'and contains(@class, "dropdown")]/span'))
+ .then((element) => element.getText('span'))
+ .then((text) => t.match(text.toLowerCase(), username.substring(0,10).toLowerCase(),
'first part of username should be displayed in navbar'))
- .then(() => t.end());
+ .then(() => t.end());
});
test('Sign out of Scratch using scratchr2 navbar', t => {
- clickXpath('//span[contains(@class, "user-name")' +
- ' and contains(@class, "dropdown-toggle")]/img[@class="user-icon"]')
- .then(() => clickXpath('//input[@value="Sign out"]'))
- .then(() => findText('Sign in'))
- .then((element) => t.ok(element, 'Sign in reappeared on the page after signing out'))
- .then(() => t.end());
+ clickXpath('//span[contains(@class, "user-name")'
+ + ' and contains(@class, "dropdown-toggle")]/img[@class="user-icon"]')
+ .then(() => clickXpath('//input[@value="Sign out"]'))
+ .then(() => findText('Sign in'))
+ .then((element) => t.ok(element, 'Sign in reappeared on the page after signing out'))
+ .then(() => t.end());
});
diff --git a/test/integration/smoke-testing/test_signing_in_and_out_homepage.js b/test/integration/smoke-testing/test_signing_in_and_out_homepage.js
index 29bdf5dae..43775dee2 100644
--- a/test/integration/smoke-testing/test_signing_in_and_out_homepage.js
+++ b/test/integration/smoke-testing/test_signing_in_and_out_homepage.js
@@ -33,23 +33,26 @@ tap.beforeEach(function () {
test('Sign in to Scratch using scratch-www navbar', t => {
clickText('Sign in')
- .then(() => findByXpath('//input[@id="frc-username-1088"]'))
- .then((element) => element.sendKeys(username))
- .then(() => findByXpath('//input[@id="frc-password-1088"]'))
- .then((element) => element.sendKeys(password))
- .then(() => clickXpath('//button[contains(@class, "button") and ' +
- 'contains(@class, "submit-button") and contains(@class, "white")]'))
- .then(() => findByXpath('//span[@class="profile-name"]'))
- .then((element) => element.getText())
- .then((text) => t.match(text.toLowerCase(), username.substring(0, 10).toLowerCase(),
+ .then(() => findByXpath('//input[@id="frc-username-1088"]'))
+ .then((element) => element.sendKeys(username))
+ .then(() => findByXpath('//input[@id="frc-password-1088"]'))
+ .then((element) => element.sendKeys(password))
+ .then(() => clickXpath('//button[contains(@class, "button") and '
+ + 'contains(@class, "submit-button") and contains(@class, "white")]'))
+ .then(() => findByXpath('//span[@class="profile-name"]'))
+ .then((element) => element.getText())
+ .then((text) => t.match(text.toLowerCase(), username.substring(0,10).toLowerCase(),
'first part of username should be displayed in navbar'))
- .then(() => t.end());
+ .then(() => t.end());
});
test('Sign out of Scratch using scratch-www navbar', t => {
clickXpath('//a[@class="user-info"]')
- .then(() => clickText('Sign out'))
- .then(() => findText('Sign in'))
- .then((element) => t.ok(element, 'Sign in reappeared on the page after signing out'))
- .then(() => t.end());
+ .then(() => clickText('Sign out'))
+ .then(() => findText('Sign in'))
+ .then((element) => t.ok(element, 'Sign in reappeared on the page after signing out'))
+ .then(() => t.end());
});
+
+
+
diff --git a/test/integration/smoke-testing/test_statistics_page.js b/test/integration/smoke-testing/test_statistics_page.js
index 15c044e27..1d636e352 100644
--- a/test/integration/smoke-testing/test_statistics_page.js
+++ b/test/integration/smoke-testing/test_statistics_page.js
@@ -37,28 +37,24 @@ tap.beforeEach(function () {
test('check that Monthly Activity Trends title is present & correct', t => {
var chartTitle = 'Monthly Activity Trends';
findByCss('div.box-head h3')
- .then((element) => element.getText('h3'))
- .then((text) => t.equal(text, chartTitle, 'chart title should be Monthly Activity Trends'))
- .then(() => t.end());
+ .then((element) => element.getText('h3'))
+ .then((text) => t.equal(text, chartTitle, 'chart title should be Monthly Activity Trends'))
+ .then(() => t.end());
});
test('check that Monthly Activity Trends chart > New Projects label is toggleable', t => {
- var classXpath = `(//div[@id="activity_chart"]/*[name()='svg']/*[name()='g']/*[name()='g']/*` +
- `[name()='g'])[4]/*[name()='g']/*[name()='g']/*[name()='g']`;
+ var classXpath = `(//div[@id="activity_chart"]/*[name()='svg']/*[name()='g']/*[name()='g']/*`
+ + `[name()='g'])[4]/*[name()='g']/*[name()='g']/*[name()='g']`;
findByXpath(classXpath)
- .then((element) => element.getAttribute('class'))
- .then((classtext) => t.equal(classtext, 'nv-series', 'by default, New Projects should be enabled'))
- .then(() => clickText('New Projects'))
- .then(() => findByXpath(classXpath))
- .then((element) => element.getAttribute('class'))
- .then((classtext) => t.equal(
- classtext,
- 'nv-series nv-disabled',
- 'when clicked, New Projects should be disabled'
- ))
- .then(() => clickText('New Projects'))
- .then(() => findByXpath(classXpath))
- .then((element) => element.getAttribute('class'))
- .then((classtext) => t.equal(classtext, 'nv-series', 'when clicked again, New Projects should be enabled'))
- .then(() => t.end());
+ .then((element) => element.getAttribute('class'))
+ .then((classtext) => t.equal(classtext, 'nv-series', 'by default, New Projects should be enabled'))
+ .then(() => clickText('New Projects'))
+ .then(() => findByXpath(classXpath))
+ .then((element) => element.getAttribute('class'))
+ .then((classtext) => t.equal(classtext, 'nv-series nv-disabled', 'when clicked, New Projects should be disabled'))
+ .then(() => clickText('New Projects'))
+ .then(() => findByXpath(classXpath))
+ .then((element) => element.getAttribute('class'))
+ .then((classtext) => t.equal(classtext, 'nv-series', 'when clicked again, New Projects should be enabled'))
+ .then(() => t.end());
});
diff --git a/test/integration/teacher-registration/teacher_registration_utils.js b/test/integration/teacher-registration/teacher_registration_utils.js
index dfc828f68..424ca4319 100644
--- a/test/integration/teacher-registration/teacher_registration_utils.js
+++ b/test/integration/teacher-registration/teacher_registration_utils.js
@@ -1,11 +1,11 @@
module.exports.constants = {
- nextStepXpath: '//button[span[contains(text(), "Next Step")]]',
- generalErrorMessageXpath: '//span[@class="help-block validation-message"]/span[contains(text(),' +
- '"This field is required")]',
- loremIpsumTextLong: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra' +
- 'nec mauris efficitur tincidunt. Vestibulum ut diam odio. Cum sociis natoque penatibus et magnis dis' +
- 'parturient montes, nascetur ridiculus mus. Morbi non enim dolor. Vestibulum at enim vestibulum, ullamcorper' +
- 'Duis eget quam pharetra, ultricies est eu, pharetra nisi. In tempor cursus nisi, non sagittis quam gravida.'
+ 'nextStepXpath': '//button[span[contains(text(), "Next Step")]]',
+ 'generalErrorMessageXpath': '//span[@class="help-block validation-message"]/span[contains(text(),'
+ + '"This field is required")]',
+ 'loremIpsumTextLong': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra'
+ + 'nec mauris efficitur tincidunt. Vestibulum ut diam odio. Cum sociis natoque penatibus et magnis dis'
+ + 'parturient montes, nascetur ridiculus mus. Morbi non enim dolor. Vestibulum at enim vestibulum, ullamcorper'
+ + 'Duis eget quam pharetra, ultricies est eu, pharetra nisi. In tempor cursus nisi, non sagittis quam gravida.'
};
module.exports.fillUsernameSlide = function (driver, seleniumWebdriver) {
@@ -14,7 +14,7 @@ module.exports.fillUsernameSlide = function (driver, seleniumWebdriver) {
var usernamePromise = usernameInput.sendKeys('clipspringer');
var passwordPromise = passwordInput.sendKeys('educators');
var nextStepButton = driver.findElement(seleniumWebdriver.By.xpath(module.exports.constants.nextStepXpath));
- return Promise.all([usernamePromise, passwordPromise]).then(function () { // eslint-disable-line no-undef
+ return Promise.all([usernamePromise, passwordPromise]).then(function () {
nextStepButton.click().then(function () {
driver.wait(seleniumWebdriver.until
.elementLocated(seleniumWebdriver.By.className('demographics-step')));
@@ -28,7 +28,7 @@ module.exports.fillDemographicsSlide = function (driver, seleniumWebdriver) {
var selectCountry = driver.findElement(seleniumWebdriver.By.xpath('//select[@name="user.country"]' +
'/option[@value="us"]')).click();
var nextStepButton = driver.findElement(seleniumWebdriver.By.xpath(module.exports.constants.nextStepXpath));
- return Promise.all([clickMaleInput, selectCountry]).then(function () { // eslint-disable-line no-undef
+ return Promise.all([clickMaleInput, selectCountry]).then(function () {
nextStepButton.click().then(function () {
driver.wait(seleniumWebdriver.until
.elementLocated(seleniumWebdriver.By.className('name-step')));
@@ -40,7 +40,7 @@ module.exports.fillNameSlide = function (driver, seleniumWebdriver) {
var firstNamePromise = driver.findElement(seleniumWebdriver.By.name('user.name.first')).sendKeys('first');
var lastNamePromise = driver.findElement(seleniumWebdriver.By.name('user.name.last')).sendKeys('surname');
var nextStepButton = driver.findElement(seleniumWebdriver.By.xpath(module.exports.constants.nextStepXpath));
- return Promise.all([firstNamePromise, lastNamePromise]).then(function () { // eslint-disable-line no-undef
+ return Promise.all([firstNamePromise, lastNamePromise]).then(function () {
nextStepButton.click().then(function () {
driver.wait(seleniumWebdriver.until
.elementLocated(seleniumWebdriver.By.className('phone-step')));
@@ -53,8 +53,8 @@ module.exports.fillPhoneSlide = function (driver, seleniumWebdriver) {
var consentCheckbox = driver.findElement(seleniumWebdriver.By.name('phoneConsent'));
var nextStepButton = driver.findElement(seleniumWebdriver.By.xpath(module.exports.constants.nextStepXpath));
var phoneNumberPromise = phoneInput.sendKeys('6172535960');
- var consentPromise = consentCheckbox.click();
- return Promise.all([phoneNumberPromise, consentPromise]).then(function () { // eslint-disable-line no-undef
+ var consentPromise = consentCheckbox.click();
+ return Promise.all([phoneNumberPromise, consentPromise]).then(function () {
nextStepButton.click().then(function () {
driver.wait(seleniumWebdriver.until
.elementLocated(seleniumWebdriver.By.className('organization-step')));
@@ -68,15 +68,14 @@ module.exports.fillOrganizationSlide = function (driver, seleniumWebdriver) {
var typeCheckbox = driver.findElement(seleniumWebdriver.By.xpath('//input[@type="checkbox" and @value="3"]'));
var nextStepButton = driver.findElement(seleniumWebdriver.By.xpath(module.exports.constants.nextStepXpath));
var organizationPromise = organizationInput.sendKeys('MIT Media Lab');
- var titlePromise = titleInput.sendKeys('Software Developer');
+ var titlePromise = titleInput.sendKeys('Software Developer');
var typePromise = typeCheckbox.click();
- return Promise.all([organizationPromise, titlePromise, typePromise]) // eslint-disable-line no-undef
- .then(function () {
- nextStepButton.click().then(function () {
- driver.wait(seleniumWebdriver.until
- .elementLocated(seleniumWebdriver.By.className('address-step')));
- });
+ return Promise.all([organizationPromise, titlePromise, typePromise]).then(function () {
+ nextStepButton.click().then(function () {
+ driver.wait(seleniumWebdriver.until
+ .elementLocated(seleniumWebdriver.By.className('address-step')));
});
+ });
};
module.exports.fillAddressSlide = function (driver, seleniumWebdriver) {
@@ -89,11 +88,10 @@ module.exports.fillAddressSlide = function (driver, seleniumWebdriver) {
var statePromise = driver.findElement(seleniumWebdriver.By.xpath('//select[@name="address.state"]' +
'/option[@value="us-ma"]')).click();
var zipPromise = zipCodeInput.sendKeys('02139');
- return Promise.all([addressPromise, cityPromise, statePromise, zipPromise]) // eslint-disable-line no-undef
- .then(function () {
- nextStepButton.click().then(function () {
- driver.wait(seleniumWebdriver.until
- .elementLocated(seleniumWebdriver.By.className('usescratch-step')));
- });
+ return Promise.all([addressPromise, cityPromise, statePromise, zipPromise]).then(function () {
+ nextStepButton.click().then(function () {
+ driver.wait(seleniumWebdriver.until
+ .elementLocated(seleniumWebdriver.By.className('usescratch-step')));
});
+ });
};
diff --git a/test/integration/teacher-registration/test_teacher_registration_address_step.js b/test/integration/teacher-registration/test_teacher_registration_address_step.js
index 557f5155f..2a0188422 100644
--- a/test/integration/teacher-registration/test_teacher_registration_address_step.js
+++ b/test/integration/teacher-registration/test_teacher_registration_address_step.js
@@ -10,12 +10,11 @@ var tap = require('tap');
var utils = require('./teacher_registration_utils.js');
var constants = utils.constants;
-// Set test url through environment variable
+//Set test url through environment variable
var rootUrl = process.env.ROOT_URL || 'http://localhost:8333';
-// chrome driver
-var driver = new seleniumWebdriver.Builder().withCapabilities(seleniumWebdriver.Capabilities.chrome())
- .build();
+//chrome driver
+var driver = new seleniumWebdriver.Builder().withCapabilities(seleniumWebdriver.Capabilities.chrome()).build();
tap.plan(2);
@@ -26,16 +25,16 @@ tap.tearDown(function () {
tap.beforeEach(function () {
driver.get(rootUrl + '/educators/register');
return utils.fillUsernameSlide(driver, seleniumWebdriver)
- .then(utils.fillDemographicsSlide.bind(this, driver, seleniumWebdriver)) // eslint-disable-line no-invalid-this
- .then(utils.fillNameSlide.bind(this, driver, seleniumWebdriver)) // eslint-disable-line no-invalid-this
- .then(utils.fillPhoneSlide.bind(this, driver, seleniumWebdriver)) // eslint-disable-line no-invalid-this
- .then(utils.fillOrganizationSlide.bind(this, driver, seleniumWebdriver)); // eslint-disable-line no-invalid-this
+ .then(utils.fillDemographicsSlide.bind(this, driver, seleniumWebdriver))
+ .then(utils.fillNameSlide.bind(this, driver, seleniumWebdriver))
+ .then(utils.fillPhoneSlide.bind(this, driver, seleniumWebdriver))
+ .then(utils.fillOrganizationSlide.bind(this, driver, seleniumWebdriver));
});
-// Selects Vatican City as the country, and checks that the state dropdown disappears
+//Selects Vatican City as the country, and checks that the state dropdown disappears
tap.test('checkStateDropdownOnlyPresentWhenNeeded', function (t) {
driver.findElement(seleniumWebdriver.By.xpath('//select[@name="address.country"]' +
- '/option[@value="va"]')).click() // select Vatican City as the country
+ '/option[@value="va"]')).click() //select Vatican City as the country
.then(function () {
driver.findElements(seleniumWebdriver.By.name('address.state'))
.then(function (stateDropdown) {
@@ -47,9 +46,9 @@ tap.test('checkStateDropdownOnlyPresentWhenNeeded', function (t) {
tap.test('checkZipCodeRequired', function (t) {
var nextStepButton = driver.findElement(seleniumWebdriver.By.xpath(constants.nextStepXpath));
- var errorMessageXPath = '//input[@name="address.zip"]/following-sibling::' +
- 'span[@class="help-block validation-message"]/span[contains(text(),' +
- '"This field is required")]';
+ var errorMessageXPath = '//input[@name="address.zip"]/following-sibling::'
+ + 'span[@class="help-block validation-message"]/span[contains(text(),'
+ + '"This field is required")]';
nextStepButton.click().then(function () {
driver.findElements(seleniumWebdriver.By.xpath(errorMessageXPath))
.then(function (validationMessages) {
@@ -58,3 +57,4 @@ tap.test('checkZipCodeRequired', function (t) {
});
});
});
+
diff --git a/test/integration/teacher-registration/test_teacher_registration_demographics_step.js b/test/integration/teacher-registration/test_teacher_registration_demographics_step.js
index cb589d137..ee176a9fb 100644
--- a/test/integration/teacher-registration/test_teacher_registration_demographics_step.js
+++ b/test/integration/teacher-registration/test_teacher_registration_demographics_step.js
@@ -10,12 +10,11 @@ var tap = require('tap');
var utils = require('./teacher_registration_utils.js');
var constants = utils.constants;
-// Set test url through environment variable
+//Set test url through environment variable
var rootUrl = process.env.ROOT_URL || 'http://localhost:8333';
-// chrome driver
-var driver = new seleniumWebdriver.Builder().withCapabilities(seleniumWebdriver.Capabilities.chrome())
- .build();
+//chrome driver
+var driver = new seleniumWebdriver.Builder().withCapabilities(seleniumWebdriver.Capabilities.chrome()).build();
tap.plan(2);
@@ -28,8 +27,8 @@ tap.beforeEach(function () {
return utils.fillUsernameSlide(driver, seleniumWebdriver);
});
-// if the user selects the other gender option, they must input a gender
-// selects the other gender option and attempt to advance the slide
+//if the user selects the other gender option, they must input a gender
+//selects the other gender option and attempt to advance the slide
tap.test('checkOtherGenderInput', function (t) {
var otherGenderRadio = driver.findElement(seleniumWebdriver.By.xpath('//input[@value="other"' +
'and @type="radio"]'));
@@ -38,24 +37,25 @@ tap.test('checkOtherGenderInput', function (t) {
otherGenderRadio.click().then(function () {
nextStepButton.click().then(function () {
driver.findElements(seleniumWebdriver.By.xpath(constants.generalErrorMessageXpath))
- .then(function (validationMessages) {
- t.equal(validationMessages.length, 1);
- t.end();
- });
- });
- });
-});
-
-// the user must select a gender
-// tries to advance the slide without selecting a gender
-tap.test('checkNoGenderInput', function (t) {
- var nextStepButton = driver.findElement(seleniumWebdriver.By.xpath(constants.nextStepXpath));
- driver.findElement(seleniumWebdriver.By.xpath('//select[@name="user.country"]/option[2]')).click();
- nextStepButton.click().then(function () {
- driver.findElements(seleniumWebdriver.By.xpath(constants.generalErrorMessageXpath))
.then(function (validationMessages) {
t.equal(validationMessages.length, 1);
t.end();
});
+ });
});
});
+
+//the user must select a gender
+//tries to advance the slide without selecting a gender
+tap.test('checkNoGenderInput', function (t) {
+ var nextStepButton = driver.findElement(seleniumWebdriver.By.xpath(constants.nextStepXpath));
+ driver.findElement(seleniumWebdriver.By.xpath('//select[@name="user.country"]/option[2]')).click();
+ nextStepButton.click().then(function () {
+ driver.findElements(seleniumWebdriver.By.xpath(constants.generalErrorMessageXpath))
+ .then(function (validationMessages) {
+ t.equal(validationMessages.length, 1);
+ t.end();
+ });
+ });
+});
+
diff --git a/test/integration/teacher-registration/test_teacher_registration_name_step.js b/test/integration/teacher-registration/test_teacher_registration_name_step.js
index dee76448d..b30bc5ffe 100644
--- a/test/integration/teacher-registration/test_teacher_registration_name_step.js
+++ b/test/integration/teacher-registration/test_teacher_registration_name_step.js
@@ -10,12 +10,11 @@ var tap = require('tap');
var utils = require('./teacher_registration_utils.js');
var constants = utils.constants;
-// Set test url through environment variable
+//Set test url through environment variable
var rootUrl = process.env.ROOT_URL || 'http://localhost:8333';
-// chrome driver
-var driver = new seleniumWebdriver.Builder().withCapabilities(seleniumWebdriver.Capabilities.chrome())
- .build();
+//chrome driver
+var driver = new seleniumWebdriver.Builder().withCapabilities(seleniumWebdriver.Capabilities.chrome()).build();
tap.plan(2);
@@ -26,15 +25,15 @@ tap.tearDown(function () {
tap.beforeEach(function () {
driver.get(rootUrl + '/educators/register');
return utils.fillUsernameSlide(driver, seleniumWebdriver)
- .then(utils.fillDemographicsSlide.bind(this, driver, seleniumWebdriver)); // eslint-disable-line no-invalid-this
+ .then(utils.fillDemographicsSlide.bind(this, driver, seleniumWebdriver));
});
-// attempts to advance the slide without inputting either name, checks that both give the correct error
+//attempts to advance the slide without inputting either name, checks that both give the correct error
tap.test('checkFirstNameRequired', function (t) {
var nextStepButton = driver.findElement(seleniumWebdriver.By.xpath(constants.nextStepXpath));
- var errorMessageXPath = '//input[@name="user.name.first"]/following-sibling::' +
- 'span[@class="help-block validation-message"]/span[contains(text(),' +
- '"This field is required")]';
+ var errorMessageXPath = '//input[@name="user.name.first"]/following-sibling::'
+ + 'span[@class="help-block validation-message"]/span[contains(text(),'
+ + '"This field is required")]';
nextStepButton.click().then(function () {
driver.findElements(seleniumWebdriver.By.xpath(errorMessageXPath))
.then(function (validationMessages) {
@@ -44,12 +43,12 @@ tap.test('checkFirstNameRequired', function (t) {
});
});
-// attempts to advance the slide without inputting either name, checks that both give the correct error
+//attempts to advance the slide without inputting either name, checks that both give the correct error
tap.test('checkLastNameRequired', function (t) {
var nextStepButton = driver.findElement(seleniumWebdriver.By.xpath(constants.nextStepXpath));
- var errorMessageXPath = '//input[@name="user.name.last"]/following-sibling::' +
- 'span[@class="help-block validation-message"]/span[contains(text(),' +
- '"This field is required")]';
+ var errorMessageXPath = '//input[@name="user.name.last"]/following-sibling::'
+ + 'span[@class="help-block validation-message"]/span[contains(text(),'
+ + '"This field is required")]';
nextStepButton.click().then(function () {
driver.findElements(seleniumWebdriver.By.xpath(errorMessageXPath))
.then(function (validationMessages) {
@@ -58,3 +57,4 @@ tap.test('checkLastNameRequired', function (t) {
});
});
});
+
diff --git a/test/integration/teacher-registration/test_teacher_registration_organization_step.js b/test/integration/teacher-registration/test_teacher_registration_organization_step.js
index 6a136ecea..ba98e5baa 100644
--- a/test/integration/teacher-registration/test_teacher_registration_organization_step.js
+++ b/test/integration/teacher-registration/test_teacher_registration_organization_step.js
@@ -10,12 +10,11 @@ var tap = require('tap');
var utils = require('./teacher_registration_utils.js');
var constants = utils.constants;
-// Set test url through environment variable
+//Set test url through environment variable
var rootUrl = process.env.ROOT_URL || 'http://localhost:8333';
-// chrome driver
-var driver = new seleniumWebdriver.Builder().withCapabilities(seleniumWebdriver.Capabilities.chrome())
- .build();
+//chrome driver
+var driver = new seleniumWebdriver.Builder().withCapabilities(seleniumWebdriver.Capabilities.chrome()).build();
tap.plan(4);
@@ -26,9 +25,9 @@ tap.tearDown(function () {
tap.beforeEach(function () {
driver.get(rootUrl + '/educators/register');
return utils.fillUsernameSlide(driver, seleniumWebdriver)
- .then(utils.fillDemographicsSlide.bind(this, driver, seleniumWebdriver)) // eslint-disable-line no-invalid-this
- .then(utils.fillNameSlide.bind(this, driver, seleniumWebdriver)) // eslint-disable-line no-invalid-this
- .then(utils.fillPhoneSlide.bind(this, driver, seleniumWebdriver)); // eslint-disable-line no-invalid-this
+ .then(utils.fillDemographicsSlide.bind(this, driver, seleniumWebdriver))
+ .then(utils.fillNameSlide.bind(this, driver, seleniumWebdriver))
+ .then(utils.fillPhoneSlide.bind(this, driver, seleniumWebdriver));
});
tap.test('otherFieldRequiredIfChecked', function (t) {
@@ -48,9 +47,9 @@ tap.test('otherFieldRequiredIfChecked', function (t) {
tap.test('checkOrganizationFieldRequired', function (t) {
var nextStepButton = driver.findElement(seleniumWebdriver.By.xpath(constants.nextStepXpath));
- var errorMessageXPath = '//input[@name="organization.name"]/following-sibling::' +
- 'span[@class="help-block validation-message"]/span[contains(text(),' +
- '"This field is required")]';
+ var errorMessageXPath = '//input[@name="organization.name"]/following-sibling::'
+ + 'span[@class="help-block validation-message"]/span[contains(text(),'
+ + '"This field is required")]';
nextStepButton.click().then(function () {
driver.findElements(seleniumWebdriver.By.xpath(errorMessageXPath))
.then(function (validationMessages) {
@@ -62,9 +61,9 @@ tap.test('checkOrganizationFieldRequired', function (t) {
tap.test('checkRoleFieldRequired', function (t) {
var nextStepButton = driver.findElement(seleniumWebdriver.By.xpath(constants.nextStepXpath));
- var errorMessageXPath = '//input[@name="organization.title"]/following-sibling::' +
- 'span[@class="help-block validation-message"]/span[contains(text(),' +
- '"This field is required")]';
+ var errorMessageXPath = '//input[@name="organization.title"]/following-sibling::'
+ + 'span[@class="help-block validation-message"]/span[contains(text(),'
+ + '"This field is required")]';
nextStepButton.click().then(function () {
driver.findElements(seleniumWebdriver.By.xpath(errorMessageXPath))
.then(function (validationMessages) {
@@ -76,9 +75,9 @@ tap.test('checkRoleFieldRequired', function (t) {
tap.test('checkOrganizationTypeRequired', function (t) {
var nextStepButton = driver.findElement(seleniumWebdriver.By.xpath(constants.nextStepXpath));
- var errorMessageXPath = '//div[@class="checkbox"]/following-sibling::' +
- 'span[@class="help-block validation-message" and contains(text(),' +
- '"This field is required")]';
+ var errorMessageXPath = '//div[@class="checkbox"]/following-sibling::'
+ + 'span[@class="help-block validation-message" and contains(text(),'
+ + '"This field is required")]';
nextStepButton.click().then(function () {
driver.findElements(seleniumWebdriver.By.xpath(errorMessageXPath))
.then(function (validationMessages) {
diff --git a/test/integration/teacher-registration/test_teacher_registration_phone_step.js b/test/integration/teacher-registration/test_teacher_registration_phone_step.js
index ec3feaac9..2456567ac 100644
--- a/test/integration/teacher-registration/test_teacher_registration_phone_step.js
+++ b/test/integration/teacher-registration/test_teacher_registration_phone_step.js
@@ -9,12 +9,11 @@ var tap = require('tap');
var utils = require('./teacher_registration_utils.js');
-// Set test url through environment variable
+//Set test url through environment variable
var rootUrl = process.env.ROOT_URL || 'http://localhost:8333';
-// chrome driver
-var driver = new seleniumWebdriver.Builder().withCapabilities(seleniumWebdriver.Capabilities.chrome())
- .build();
+//chrome driver
+var driver = new seleniumWebdriver.Builder().withCapabilities(seleniumWebdriver.Capabilities.chrome()).build();
tap.plan(1);
@@ -25,16 +24,16 @@ tap.tearDown(function () {
tap.beforeEach(function () {
driver.get(rootUrl + '/educators/register');
return utils.fillUsernameSlide(driver, seleniumWebdriver)
- .then(utils.fillDemographicsSlide.bind(this, driver, seleniumWebdriver)) // eslint-disable-line no-invalid-this
- .then(utils.fillNameSlide.bind(this, driver, seleniumWebdriver)); // eslint-disable-line no-invalid-this
+ .then(utils.fillDemographicsSlide.bind(this, driver, seleniumWebdriver))
+ .then(utils.fillNameSlide.bind(this, driver, seleniumWebdriver));
});
-// inputs an invalid phone number and checks that the correct error message appears
+//inputs an invalid phone number and checks that the correct error message appears
tap.test('validatePhoneNumber', function (t) {
var phoneInput = driver.findElement(seleniumWebdriver.By.xpath('//input[@type="tel"]'));
var errorMessage = 'Please enter a valid phone number';
- var errorMessageXPath = '//span[@class="help-block validation-message"]/span[contains(text(),"' +
- errorMessage + '")]';
+ var errorMessageXPath = '//span[@class="help-block validation-message"]/span[contains(text(),"'
+ + errorMessage + '")]';
phoneInput.sendKeys(1234567890).then(function () {
driver.findElements(seleniumWebdriver.By.xpath(errorMessageXPath))
.then(function (validationMessages) {
@@ -43,3 +42,4 @@ tap.test('validatePhoneNumber', function (t) {
});
});
});
+
diff --git a/test/integration/teacher-registration/test_teacher_registration_username_step.js b/test/integration/teacher-registration/test_teacher_registration_username_step.js
index 96c8d46ea..f8fb7e9a8 100644
--- a/test/integration/teacher-registration/test_teacher_registration_username_step.js
+++ b/test/integration/teacher-registration/test_teacher_registration_username_step.js
@@ -8,12 +8,11 @@ require('chromedriver');
var seleniumWebdriver = require('selenium-webdriver');
var tap = require('tap');
-// Set test url through environment variable
+//Set test url through environment variable
var rootUrl = process.env.ROOT_URL || 'http://localhost:8333';
-// chrome driver
-var driver = new seleniumWebdriver.Builder().withCapabilities(seleniumWebdriver.Capabilities.chrome())
- .build();
+//chrome driver
+var driver = new seleniumWebdriver.Builder().withCapabilities(seleniumWebdriver.Capabilities.chrome()).build();
tap.plan(5);
@@ -25,15 +24,15 @@ tap.beforeEach(function () {
return driver.get(rootUrl + '/educators/register');
});
-// an error message should appear for a username less than 3 characters long
-// input a username less than 3 characters and look for the validation message
+//an error message should appear for a username less than 3 characters long
+//input a username less than 3 characters and look for the validation message
tap.test('checkAtLeastThreeCharacters', function (t) {
- // open scratch in a new instance of the browser
+ //open scratch in a new instance of the browser
driver.get('https://scratch.mit.edu/educators/register');
var usernameInput = driver.findElement(seleniumWebdriver.By.name('user.username'));
var errorMessage = 'Usernames must be at least 3 characters';
- var errorMessageXPath = '//span[@class="help-block validation-message" and contains(text(),"' +
- errorMessage + '")]';
+ var errorMessageXPath = '//span[@class="help-block validation-message" and contains(text(),"'
+ + errorMessage + '")]';
usernameInput.sendKeys('hi').then(function () {
driver.findElements(seleniumWebdriver.By.xpath(errorMessageXPath)).then(function (validationMessages) {
t.equal(validationMessages.length, 1);
@@ -42,31 +41,31 @@ tap.test('checkAtLeastThreeCharacters', function (t) {
});
});
-// usernames have to be unique
-// input a username that exists and check that an error message appears
+//usernames have to be unique
+//input a username that exists and check that an error message appears
tap.test('checkUsernameExistsError', function (t) {
var usernameInput = driver.findElement(seleniumWebdriver.By.name('user.username'));
var passwordInput = driver.findElement(seleniumWebdriver.By.name('user.password'));
var inputUsername = usernameInput.sendKeys('mres');
var passwordClick = passwordInput.click();
var errorMessage = 'Sorry, that username already exists';
- var errorMessageXPath = '//span[@class="help-block validation-message" and contains(text(),"' +
- errorMessage + '")]';
- Promise.all([inputUsername, passwordClick]).then(function () { // eslint-disable-line no-undef
- var errorBubble = driver.wait(seleniumWebdriver.until
- .elementLocated(seleniumWebdriver.By.xpath(errorMessageXPath)), 10000);
- t.notEqual(errorBubble, undefined); // eslint-disable-line no-undefined
+ var errorMessageXPath = '//span[@class="help-block validation-message" and contains(text(),"'
+ + errorMessage + '")]';
+ Promise.all([inputUsername, passwordClick]).then(function () {
+ var errorBubble = driver.wait(seleniumWebdriver.until.
+ elementLocated(seleniumWebdriver.By.xpath(errorMessageXPath)), 10000);
+ t.notEqual(errorBubble, undefined);
t.end();
});
});
-// passwords must be at least 6 characters
-// find the validation message if the input password is less than 6 characters
+//passwords must be at least 6 characters
+//find the validation message if the input password is less than 6 characters
tap.test('checkPasswordAtLeastSixCharacters', function (t) {
var passwordInput = driver.findElement(seleniumWebdriver.By.name('user.password'));
var errorMessage = 'Passwords must be at least six characters';
- var errorMessageXPath = '//span[@class="help-block validation-message" and contains(text(),"' +
- errorMessage + '")]';
+ var errorMessageXPath = '//span[@class="help-block validation-message" and contains(text(),"'
+ + errorMessage + '")]';
passwordInput.sendKeys('hello').then(function () {
driver.findElements(seleniumWebdriver.By.xpath(errorMessageXPath)).then(function (validationMessages) {
t.equal(validationMessages.length, 1);
@@ -75,15 +74,15 @@ tap.test('checkPasswordAtLeastSixCharacters', function (t) {
});
});
-// password cannot be "password"
-// find the validation message if the user inputs "password"
+//password cannot be "password"
+//find the validation message if the user inputs "password"
tap.test('checkPasswordNotPassword', function (t) {
driver.get('https://scratch.mit.edu/educators/register');
var passwordInput = driver.findElement(seleniumWebdriver.By.name('user.password'));
- // keeping "password" in messed with the xPath, may need to find a better way
+ //keeping "password" in messed with the xPath, may need to find a better way
var errorMessage = 'Your password may not be';
- var errorMessageXPath = '//span[@class="help-block validation-message" and contains(text(),"' +
- errorMessage + '")]';
+ var errorMessageXPath = '//span[@class="help-block validation-message" and contains(text(),"'
+ + errorMessage + '")]';
passwordInput.sendKeys('password').then(function () {
driver.findElements(seleniumWebdriver.By.xpath(errorMessageXPath)).then(function (validationMessages) {
t.equal(validationMessages.length, 1);
@@ -92,23 +91,24 @@ tap.test('checkPasswordNotPassword', function (t) {
});
});
-// the username and password cannot be the same
-// find the validation message if the username and password match
+//the username and password cannot be the same
+//find the validation message if the username and password match
tap.test('checkPasswordNotUsername', function (t) {
driver.get('https://scratch.mit.edu/educators/register');
var passwordInput = driver.findElement(seleniumWebdriver.By.name('user.password'));
var usernameInput = driver.findElement(seleniumWebdriver.By.name('user.username'));
var errorMessage = 'Your password may not be your username';
- var errorMessageXPath = '//span[@class="help-block validation-message" and contains(text(),"' +
- errorMessage + '")]';
+ var errorMessageXPath = '//span[@class="help-block validation-message" and contains(text(),"'
+ + errorMessage + '")]';
var usernamePromise = usernameInput.sendKeys('educator');
var passwordPromise = passwordInput.sendKeys('educator');
- // wait for both inputs to have the same text, and check for validation message
- Promise.all([usernamePromise, passwordPromise]).then(function () { // eslint-disable-line no-undef
+ //wait for both inputs to have the same text, and check for validation message
+ Promise.all([usernamePromise, passwordPromise]).then(function () {
driver.findElements(seleniumWebdriver.By.xpath(errorMessageXPath)).then(function (validationMessages) {
- // there should be only one validation message
+ //there should be only one validation message
t.equal(validationMessages.length, 1);
t.end();
});
});
});
+
diff --git a/test/integration/teacher-registration/test_teacher_registration_usescratch_step.js b/test/integration/teacher-registration/test_teacher_registration_usescratch_step.js
index f91baf590..97235697c 100644
--- a/test/integration/teacher-registration/test_teacher_registration_usescratch_step.js
+++ b/test/integration/teacher-registration/test_teacher_registration_usescratch_step.js
@@ -10,12 +10,11 @@ var tap = require('tap');
var utils = require('./teacher_registration_utils.js');
var constants = utils.constants;
-// Set test url through environment variable
+//Set test url through environment variable
var rootUrl = process.env.ROOT_URL || 'http://localhost:8333';
-// chrome driver
-var driver = new seleniumWebdriver.Builder().withCapabilities(seleniumWebdriver.Capabilities.chrome())
- .build();
+//chrome driver
+var driver = new seleniumWebdriver.Builder().withCapabilities(seleniumWebdriver.Capabilities.chrome()).build();
tap.plan(3);
@@ -26,11 +25,11 @@ tap.tearDown(function () {
tap.beforeEach(function () {
driver.get(rootUrl + '/educators/register');
return utils.fillUsernameSlide(driver, seleniumWebdriver)
- .then(utils.fillDemographicsSlide.bind(this, driver, seleniumWebdriver)) // eslint-disable-line no-invalid-this
- .then(utils.fillNameSlide.bind(this, driver, seleniumWebdriver)) // eslint-disable-line no-invalid-this
- .then(utils.fillPhoneSlide.bind(this, driver, seleniumWebdriver)) // eslint-disable-line no-invalid-this
- .then(utils.fillOrganizationSlide.bind(this, driver, seleniumWebdriver)) // eslint-disable-line no-invalid-this
- .then(utils.fillAddressSlide.bind(this, driver, seleniumWebdriver)); // eslint-disable-line no-invalid-this
+ .then(utils.fillDemographicsSlide.bind(this, driver, seleniumWebdriver))
+ .then(utils.fillNameSlide.bind(this, driver, seleniumWebdriver))
+ .then(utils.fillPhoneSlide.bind(this, driver, seleniumWebdriver))
+ .then(utils.fillOrganizationSlide.bind(this, driver, seleniumWebdriver))
+ .then(utils.fillAddressSlide.bind(this, driver, seleniumWebdriver));
});
tap.test('checkCharacterCountIsCorrect', function (t) {
@@ -44,8 +43,8 @@ tap.test('checkCharacterCountIsCorrect', function (t) {
});
});
-// Inputs more than 300 characters and checks that the char count gets the class 'overmax'
-// which turns the text orange
+//Inputs more than 300 characters and checks that the char count gets the class 'overmax'
+//which turns the text orange
tap.test('checkCharacterCountTurnsOrangeWhenTooLong', function (t) {
var textarea = driver.findElement(seleniumWebdriver.By.name('useScratch'));
var charCount = driver.findElement(seleniumWebdriver.By.xpath('//p[@class="char-count"]'));
@@ -60,8 +59,8 @@ tap.test('checkCharacterCountTurnsOrangeWhenTooLong', function (t) {
tap.test('checkCharacterCountErrorAppersWhenTooLong', function (t) {
var textarea = driver.findElement(seleniumWebdriver.By.name('useScratch'));
var errorMessage = 'Description must be at most 300 characters';
- var errorMessageXPath = '//span[@class="help-block validation-message" and contains(text(),"' +
- errorMessage + '")]';
+ var errorMessageXPath = '//span[@class="help-block validation-message" and contains(text(),"'
+ + errorMessage + '")]';
textarea.sendKeys(constants.loremIpsumTextLong).then(function () {
driver.findElements(seleniumWebdriver.By.xpath(errorMessageXPath)).then(function (validationMessages) {
t.equal(validationMessages.length, 1);
diff --git a/test/localization/check_duplicate_strings.js b/test/localization/check_duplicate_strings.js
index 16f7ab71c..8b46cbe27 100644
--- a/test/localization/check_duplicate_strings.js
+++ b/test/localization/check_duplicate_strings.js
@@ -7,23 +7,23 @@ var tap = require('tap');
var routes = require('../../src/routes.json');
-const noDuplicateValues = (idsToCheck, name) => {
- let values = {};
- for (const key in idsToCheck) {
+function noDuplicateValues (idsToCheck, name) {
+ var values = {};
+ for (var key in idsToCheck) {
if (values.hasOwnProperty(idsToCheck[key])) {
// duplicate values
- // return false;
- tap.fail(`${name}.${idsToCheck[key]} has duplicates`);
+ //return false;
+ tap.fail(name + '.' + idsToCheck[key] + ' has duplicates');
} else {
values[idsToCheck[key]] = key;
}
}
tap.pass();
- // return true;
-};
+ //return true;
+}
tap.test('generalCheckForDuplicates', function (t) {
- const ids = require(path.resolve(__dirname, '../../src/l10n.json')); // eslint-disable-line global-require
+ var ids = require(path.resolve(__dirname, '../../src/l10n.json'));
noDuplicateValues(ids, 'general');
t.end();
});
@@ -35,11 +35,11 @@ for (var v in routes) {
var subdir = routes[v].view.split('/');
subdir.pop();
var name = routes[v].name;
- var uri = path.resolve(__dirname, '../../src/views/' + subdir.join('/') + '/l10n.json');
+ var uri = path.resolve(__dirname, '../../src/views/' + subdir.join('/') +'/l10n.json');
try {
var file = fs.readFileSync(uri, 'utf8');
var ids = JSON.parse(file);
- tap.test(name + 'CheckForDuplicates', function (t) { // eslint-disable-line no-loop-func
+ tap.test(name + 'CheckForDuplicates', function (t) {
noDuplicateValues(ids, name);
t.end();
});
diff --git a/test/localization/check_string_ids.js b/test/localization/check_string_ids.js
index 8fc019228..de4491d21 100644
--- a/test/localization/check_string_ids.js
+++ b/test/localization/check_string_ids.js
@@ -20,34 +20,35 @@ var tap = require('tap');
var intlDirPath = path.resolve(__dirname, '../../intl/');
var intlFiles = fs.readdirSync(intlDirPath);
-/*
+/**
* Tells tap whether the test should pass or fail for a given file.
* @param {string} fileName
* @param {Object} missingMessageId
* @param {Object} pagesMissingIds
*/
-const noMissingStrings = (fileName, missingMessageId, pagesMissingIds) => {
- if (Object.keys(missingMessageId).length === 0) {
+function noMissingStrings (fileName, missingMessageId, pagesMissingIds) {
+ if (Object.keys(missingMessageId).length == 0) {
tap.pass();
- } else {
+ }
+ else {
tap.fail(fileName + ' is missing string IDs');
pagesMissingIds[fileName] = [];
pagesMissingIds[fileName].push(missingMessageId);
}
-};
+}
var pagesWithLanguagesMissingIds = {};
for (var i in intlFiles) {
var file = intlFiles[i];
var filePath = path.resolve(__dirname, '../../intl/' + file);
- var pageMessagesString = fs.readFileSync(filePath, 'utf8');
+ var pageMessagesString = fs.readFileSync(filePath,'utf8');
/**
* To make the string of the file of the page.intl.js back into useable objects
*/
var window = {};
- var pageMessages = eval(pageMessagesString); // eslint-disable-line no-eval
+ var pageMessages = eval(pageMessagesString);
/**
* The goal is to compare the IDs for each language to the IDs for English,
@@ -60,8 +61,8 @@ for (var i in intlFiles) {
for (var languageKey in pageMessages) {
var currentLanguageObject = pageMessages[languageKey];
for (var messageId in englishIdList) {
- if (!(messageId in currentLanguageObject)) {
- if (typeof messageIdNotInLanguage[languageKey] === 'undefined') {
+ if (! (messageId in currentLanguageObject)) {
+ if (typeof messageIdNotInLanguage[languageKey] == 'undefined') {
messageIdNotInLanguage[languageKey] = [];
}
messageIdNotInLanguage[languageKey].push(messageId);
diff --git a/test/localization/check_valid_json.js b/test/localization/check_valid_json.js
index efe6808ac..c9cf26a46 100644
--- a/test/localization/check_valid_json.js
+++ b/test/localization/check_valid_json.js
@@ -5,14 +5,14 @@ var tap = require('tap');
var TRANSLATIONS_PATTERN = './node_modules/scratchr2_translations/www/**/*.json';
var files = glob.sync(TRANSLATIONS_PATTERN);
-const checkJson = (data, name) => {
+function checkJson (data, name) {
try {
JSON.parse(data);
} catch (e) {
tap.fail(name + ' has invalid Json.\n');
}
tap.pass();
-};
+}
files.forEach(function (f) {
tap.test('check valid json', function (t) {
diff --git a/test/unit/test_fastly_config_methods.js b/test/unit/test_fastly_config_methods.js
index 81d96d11a..a75e0afd6 100644
--- a/test/unit/test_fastly_config_methods.js
+++ b/test/unit/test_fastly_config_methods.js
@@ -1,6 +1,6 @@
var defaults = require('lodash.defaults');
var fastlyConfig = require('../../bin/lib/fastly-config-methods');
-var routeJson = require('../../src/routes.json');
+var route_json = require('../../src/routes.json');
var tap = require('tap');
var testRoutes = [
@@ -20,7 +20,7 @@ var testRoutes = [
}
];
-var routes = routeJson.map(function (route) {
+var routes = route_json.map(function (route) {
return defaults({}, {pattern: fastlyConfig.expressPatternToRegex(route.pattern)}, route);
});
var extraAppRoutes = [
@@ -28,7 +28,7 @@ var extraAppRoutes = [
// TODO: Should this be added for every route?
'/\\?',
// View html
- '/[^/]*.html$'
+ '/[^\/]*\.html$'
];
diff --git a/webpack.config.js b/webpack.config.js
index b9976df34..484be5c20 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,43 +1,36 @@
-const autoprefixer = require('autoprefixer');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const defaults = require('lodash.defaults');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const gitsha = require('git-bundle-sha');
-const path = require('path');
-const webpack = require('webpack');
+var autoprefixer = require('autoprefixer');
+var CopyWebpackPlugin = require('copy-webpack-plugin');
+var defaults = require('lodash.defaults');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var gitsha = require('git-bundle-sha');
+var path = require('path');
+var webpack = require('webpack');
-let routes = require('./src/routes.json');
-const templateConfig = require('./src/template-config.js'); // eslint-disable-line global-require
+var routes = require('./src/routes.json');
if (process.env.NODE_ENV !== 'production') {
- routes = routes.concat(require('./src/routes-dev.json')); // eslint-disable-line global-require
+ routes = routes.concat(require('./src/routes-dev.json'));
}
-let VersionPlugin = function (options) {
+var VersionPlugin = function (options) {
this.options = options || {};
return this;
};
-
VersionPlugin.prototype.apply = function (compiler) {
- const addVersion = function (compilation, versionId, callback) {
+ var addVersion = function (compilation, versionId, callback) {
compilation.assets['version.txt'] = {
- source: function () {
- return versionId;
- },
- size: function () {
- return versionId.length;
- }
+ source: function () {return versionId;},
+ size: function () {return versionId.length;}
};
callback();
};
- const options = this.options;
-
+ var plugin = this;
compiler.plugin('emit', function (compilation, callback) {
- const sha = process.env.WWW_VERSION;
- if (!sha) { // eslint-disable-line no-negated-condition
- gitsha(options, function (err, _sha) {
+ var sha = process.env.WWW_VERSION;
+ if (!sha) {
+ gitsha(plugin.options, function (err, sha) {
if (err) return callback(err);
- return addVersion(compilation, _sha, callback);
+ return addVersion(compilation, sha, callback);
});
} else {
return addVersion(compilation, sha, callback);
@@ -46,7 +39,7 @@ VersionPlugin.prototype.apply = function (compiler) {
};
// Prepare all entry points
-let entry = {
+var entry = {
common: [
// Vendor
'raven-js',
@@ -60,7 +53,7 @@ let entry = {
};
routes.forEach(function (route) {
if (!route.redirect) {
- entry[route.name] = `./src/views/${route.view}.jsx`;
+ entry[route.name] = './src/views/' + route.view + '.jsx';
}
});
@@ -73,45 +66,26 @@ module.exports = {
filename: 'js/[name].bundle.js'
},
module: {
- rules: [
+ loaders: [
{
- test: /\.jsx?$/,
- loader: 'babel-loader',
- include: path.resolve(__dirname, 'src'),
- options: {
- presets: ['es2015', 'react']
- }
+ test: /\.jsx$/,
+ loader: 'babel',
+ query: {
+ presets: ['es2015','react']
+ },
+ include: path.resolve(__dirname, 'src')
+ },
+ {
+ test: /\.json$/,
+ loader: 'json-loader'
},
{
test: /\.scss$/,
- use: [
- 'style-loader',
- 'css-loader',
- {
- loader: 'postcss-loader',
- options: {
- plugins: function () {
- return [autoprefixer({browsers: ['last 3 versions', 'Safari >= 8', 'iOS >= 8']})];
- }
- }
- },
- 'sass-loader'
- ]
+ loader: 'style!css!postcss-loader!sass'
},
{
test: /\.css$/,
- use: [
- 'style-loader',
- 'css-loader',
- {
- loader: 'postcss-loader',
- options: {
- plugins: function () {
- return [autoprefixer({browsers: ['last 3 versions', 'Safari >= 8', 'iOS >= 8']})];
- }
- }
- }
- ]
+ loader: 'style!css!postcss-loader'
},
{
test: /\.(png|jpg|gif|eot|svg|ttf|woff)$/,
@@ -120,21 +94,22 @@ module.exports = {
],
noParse: /node_modules\/google-libphonenumber\/dist/
},
+ postcss: function () {
+ return [autoprefixer({browsers: ['last 3 versions', 'Safari >= 8', 'iOS >= 8']})];
+ },
node: {
fs: 'empty'
},
plugins: [
new VersionPlugin({length: 5})
].concat(routes
- .filter(function (route) {
- return !route.redirect;
- })
+ .filter(function (route) {return !route.redirect;})
.map(function (route) {
return new HtmlWebpackPlugin(defaults({}, {
title: route.title,
filename: route.name + '.html',
route: route
- }, templateConfig));
+ }, require('./src/template-config.js')));
})
).concat([
new CopyWebpackPlugin([
@@ -142,17 +117,17 @@ module.exports = {
{from: 'intl', to: 'js'}
]),
new webpack.optimize.UglifyJsPlugin({
- sourceMap: true
+ compress: {
+ warnings: false
+ }
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"' + (process.env.NODE_ENV || 'development') + '"',
'process.env.SENTRY_DSN': '"' + (process.env.SENTRY_DSN || '') + '"',
'process.env.API_HOST': '"' + (process.env.API_HOST || 'https://api.scratch.mit.edu') + '"',
- 'process.env.SCRATCH_ENV': '"' + (process.env.SCRATCH_ENV || 'development') + '"'
+ 'process.env.SCRATCH_ENV': '"'+ (process.env.SCRATCH_ENV || 'development') + '"'
}),
- new webpack.optimize.CommonsChunkPlugin({
- name: 'common',
- filename: 'js/common.bundle.js'
- })
+ new webpack.optimize.CommonsChunkPlugin('common', 'js/common.bundle.js'),
+ new webpack.optimize.OccurenceOrderPlugin()
])
};