Implement extension fetching in Preview component

This commit is contained in:
Connor Hudson 2018-06-20 09:55:09 -04:00
parent 9f2304b8c9
commit a69ad0ec86

View file

@ -3,8 +3,11 @@ const React = require('react');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const connect = require('react-redux').connect; const connect = require('react-redux').connect;
const injectIntl = require('react-intl').injectIntl; const injectIntl = require('react-intl').injectIntl;
const parser = require('scratch-parser');
const Page = require('../../components/page/www/page.jsx'); const Page = require('../../components/page/www/page.jsx');
const render = require('../../lib/render.jsx'); const render = require('../../lib/render.jsx');
const storage = require('../../lib/storage.js').default;
const EXTENSION_INFO = require('../../lib/extensions.js').default;
const PreviewPresentation = require('./presentation.jsx'); const PreviewPresentation = require('./presentation.jsx');
const projectShape = require('./projectshape.jsx').projectShape; const projectShape = require('./projectshape.jsx').projectShape;
@ -41,6 +44,7 @@ class Preview extends React.Component {
// parts[2]: undefined if no :id, otherwise either 'editor' or 'fullscreen' // parts[2]: undefined if no :id, otherwise either 'editor' or 'fullscreen'
this.state = { this.state = {
editable: false, editable: false,
extensions: [],
favoriteCount: 0, favoriteCount: 0,
loveCount: 0, loveCount: 0,
projectId: parts[1] === 'editor' ? 0 : parts[1], projectId: parts[1] === 'editor' ? 0 : parts[1],
@ -73,6 +77,7 @@ class Preview extends React.Component {
} }
if (this.props.projectInfo.id !== prevProps.projectInfo.id) { if (this.props.projectInfo.id !== prevProps.projectInfo.id) {
this.getExtensions(this.props.projectInfo.id.toString());
this.initCounts(this.props.projectInfo.stats.favorites, this.props.projectInfo.stats.loves); this.initCounts(this.props.projectInfo.stats.favorites, this.props.projectInfo.stats.loves);
this.handlePermissions(); this.handlePermissions();
if (this.props.projectInfo.remix.parent !== null) { if (this.props.projectInfo.remix.parent !== null) {
@ -97,8 +102,35 @@ class Preview extends React.Component {
removeEventListeners () { removeEventListeners () {
window.removeEventListener('popstate', this.handlePopState); window.removeEventListener('popstate', this.handlePopState);
} }
getExtensions (projectId) {
storage
.load(storage.AssetType.Project, projectId, storage.DataFormat.JSON)
.then(projectAsset => {
let input = projectAsset.data;
if (typeof input === 'object' && !(input instanceof ArrayBuffer) &&
!ArrayBuffer.isView(input)) { // taken from scratch-vm
// If the input is an object and not any ArrayBuffer
// or an ArrayBuffer view (this includes all typed arrays and DataViews)
// turn the object into a JSON string, because we suspect
// this is a project.json as an object
// validate expects a string or buffer as input
// TODO not sure if we need to check that it also isn't a data view
input = JSON.stringify(input);
}
parser(projectAsset.data, false, (err, projectData) => {
const extensionSet = new Set();
projectData[0].targets.forEach(target => target.extensions.forEach(extension => {
extensionSet.add(EXTENSION_INFO[extension]);
}));
this.setState({
extensions: Array.from(extensionSet)
});
});
});
}
handleReportClick () { handleReportClick () {
this.setState({report: {...this.state.report, open: true}}); this.setState({report: {...this.state.report, open: true}});
this.getExtensions(5);
} }
handleReportClose () { handleReportClose () {
this.setState({report: {...this.state.report, open: false}}); this.setState({report: {...this.state.report, open: false}});
@ -243,6 +275,7 @@ class Preview extends React.Component {
<PreviewPresentation <PreviewPresentation
comments={this.props.comments} comments={this.props.comments}
editable={this.state.editable} editable={this.state.editable}
extensions={this.state.extensions}
faved={this.props.faved} faved={this.props.faved}
favoriteCount={this.state.favoriteCount} favoriteCount={this.state.favoriteCount}
isFullScreen={this.state.isFullScreen} isFullScreen={this.state.isFullScreen}