From a69ad0ec86e3e8c5c9ed30b5945d9484216c3de1 Mon Sep 17 00:00:00 2001
From: Connor Hudson <cohu3291@colorado.edu>
Date: Wed, 20 Jun 2018 09:55:09 -0400
Subject: [PATCH] Implement extension fetching in Preview component

---
 src/views/preview/preview.jsx | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/views/preview/preview.jsx b/src/views/preview/preview.jsx
index fc6aae5a6..09b5d1327 100644
--- a/src/views/preview/preview.jsx
+++ b/src/views/preview/preview.jsx
@@ -3,8 +3,11 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const connect = require('react-redux').connect;
 const injectIntl = require('react-intl').injectIntl;
+const parser = require('scratch-parser');
 const Page = require('../../components/page/www/page.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 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'
         this.state = {
             editable: false,
+            extensions: [],
             favoriteCount: 0,
             loveCount: 0,
             projectId: parts[1] === 'editor' ? 0 : parts[1],
@@ -73,6 +77,7 @@ class Preview extends React.Component {
             
         }
         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.handlePermissions();
             if (this.props.projectInfo.remix.parent !== null) {
@@ -97,8 +102,35 @@ class Preview extends React.Component {
     removeEventListeners () {
         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 () {
         this.setState({report: {...this.state.report, open: true}});
+        this.getExtensions(5);
     }
     handleReportClose () {
         this.setState({report: {...this.state.report, open: false}});
@@ -243,6 +275,7 @@ class Preview extends React.Component {
                     <PreviewPresentation
                         comments={this.props.comments}
                         editable={this.state.editable}
+                        extensions={this.state.extensions}
                         faved={this.props.faved}
                         favoriteCount={this.state.favoriteCount}
                         isFullScreen={this.state.isFullScreen}