uclaacm · krashanoff · Nov 16, 2020 · Oct 21, 2020 · Oct 21, 2020 · Oct 29, 2020
diff --git a/src/components/Output/Output.js b/src/components/Output/Output.js
@@ -1,9 +1,10 @@
 import React from "react";
-import { PYTHON, HTML, PROCESSING } from "../../constants";
+import { PYTHON, HTML, PROCESSING, REACT } from "../../constants";
 import { OUTPUT_ONLY } from "../../constants";
 import EditorRadio from "../TextEditor/components/EditorRadio.js";
 import CreateProcessingDoc from "../Output/Processing";
 import CreatePythonDoc from "../Output/Python";
+import CreateReactDoc from "../Output/React";
 import { Button } from "reactstrap";
 import ViewportAwareButton from "../common/ViewportAwareButton.js";
 import OpenPanelButtonContainer from "../common/containers/OpenPanelButtonContainer.js";
@@ -99,6 +100,9 @@ class Output extends React.Component {
       case PROCESSING:
         srcDocFunc = () => CreateProcessingDoc(runResult, showConsole);
         break;
+      case REACT:
+        srcDocFunc = () => CreateReactDoc(runResult, showConsole);
+        break;
       case PYTHON:
         runResult = btoa(runResult);
         srcDocFunc = () => CreatePythonDoc(runResult, showConsole);

diff --git a/src/components/Output/Processing.js b/src/components/Output/Processing.js
@@ -1,39 +1,4 @@
-const getProcessingSrcDocLoggingScript = () => `
-    <script type="text/javascript">
-      if (typeof console  != "undefined")
-        if (typeof console.log != 'undefined')
-          console.olog = console.log;
-        else
-          console.olog = function() {};
-
-      console.log = (message) => {
-        console.olog(message);
-        let a = document.getElementById("inner")
-        if(a){
-          // a.style.display = "block"
-          a.value = a.value + "> " + message + "\\n";
-          if(a.scrollTop >= (a.scrollHeight - a.offsetHeight) - a.offsetHeight){
-            a.scrollTop = a.scrollHeight
-          }
-        }
-      };
-
-      window.onerror = (err)=> {
-        let a = document.getElementById("outer")
-        if(a){
-          a.style.display = "block"
-        }
-        console.log("\\n\\nERROR: " + err + "\\n")
-      }
-
-      console.error = console.debug = console.info = console.log;
-
-      function closeConsole(){
-        var mypre = document.getElementById("inner");
-        mypre.style.display = "none"
-      }
-    </script>
-  `;
+import { getJsSrcDocLoggingScript } from "./constants";
 
 const getUserScript = code => `
   <script type="text/javascript">
@@ -48,7 +13,7 @@ const getProcessingSrcDocBody = (code, showConsole) => `
           ? `<div id="outer"><textarea id="inner"></textarea></div>`
           : `<div id="outer" style="display:none;"><textarea id="inner"></textarea></div>`
       }
-      ${getProcessingSrcDocLoggingScript()}
+      ${getJsSrcDocLoggingScript()}
       ${getUserScript(code)}
     </body>
   `;
@@ -81,6 +46,6 @@ const getProcessingSrcDocHead = () => `
     </head>
   `;
 
-export default function(code, showConsole) {
+export default function (code, showConsole) {
   return `<html> ${getProcessingSrcDocHead()} ${getProcessingSrcDocBody(code, showConsole)}</html>`;
 }
diff --git a/src/components/Output/React.js b/src/components/Output/React.js
@@ -0,0 +1,63 @@
+import { getJsSrcDocLoggingScript } from "./constants";
+
+const getReactSrcDocHead = () => `
+    <head>
+        <style>html,body: {margin:0, width:100%}</style>
+        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+        <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
+        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
+        <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
+        <style>
+          #inner {
+            height:100px;
+            background-color:#222;
+            color: #DDD;
+            font-family: monospace;
+            word-wrap:break-word;
+            overflow:auto;
+            margin: 10px auto;
+            position:relative;
+            padding: 10px 35px 10px 10px;
+            width: 100%;
+            box-sizing: border-box;         /* For IE and modern versions of Chrome */
+            -moz-box-sizing: border-box;    /* For Firefox                          */
+            -webkit-box-sizing: border-box; /* For Safari                           */
+          }
+          #output {
+            display: block;
+            position: relative;
+            background: white;
+            min-height: 70vh;
+            padding: 10px 35px 10px 10px;
+          }
+          #closeConsoleButton { position: fixed; top: 20px; right: 30px; color: #ddd;}
+        </style>
+    </head>
+  `;
+
+const getUserScript = (code) => `
+  <script type="text/babel">
+    ${code}
+    ReactDOM.render(
+      <App />,
+      document.getElementById('output'),
+    );
+  </script>
+`;
+
+const getReactSrcDocBody = (code, showConsole) => `
+    <body>
+      ${
+        showConsole
+          ? `<div id="outer"><textarea id="inner"></textarea></div>`
+          : `<div id="outer" style="display:none;"><textarea id="inner"></textarea></div>`
+      }
+      ${getJsSrcDocLoggingScript()}
+      ${getUserScript(code)}
+      <div id="output"></div>
+    </body>
+  `;
+
+export default function (code, showConsole) {
+  return `<html> ${getReactSrcDocHead()} ${getReactSrcDocBody(code, showConsole)}</html>`;
+}
diff --git a/src/components/Output/constants/index.js b/src/components/Output/constants/index.js
@@ -0,0 +1,36 @@
+export const getJsSrcDocLoggingScript = () => `
+<script type="text/javascript">
+  if (typeof console  != "undefined")
+    if (typeof console.log != 'undefined')
+      console.olog = console.log;
+    else
+      console.olog = function() {};
+
+  console.log = (message) => {
+    console.olog(message);
+    let a = document.getElementById("inner")
+    if(a){
+      // a.style.display = "block"
+      a.value = a.value + "> " + message + "\\n";
+      if(a.scrollTop >= (a.scrollHeight - a.offsetHeight) - a.offsetHeight){
+        a.scrollTop = a.scrollHeight
+      }
+    }
+  };
+
+  window.onerror = (err)=> {
+    let a = document.getElementById("outer")
+    if(a){
+      a.style.display = "block"
+    }
+    console.log("\\n\\nERROR: " + err + "\\n")
+  }
+
+  console.error = console.debug = console.info = console.log;
+
+  function closeConsole(){
+    var mypre = document.getElementById("inner");
+    mypre.style.display = "none"
+  }
+</script>
+`;
diff --git a/src/components/Sketches/components/ConfirmDeleteModal.js b/src/components/Sketches/components/ConfirmDeleteModal.js
@@ -20,13 +20,10 @@ class ConfirmDeleteModal extends React.Component {
       fetch
         .deleteSketch(data)
         .then((res) => {
-          return res.json();
-        })
-        .then((json) => {
-          if (!json.ok) {
+          if (!res.ok) {
             this.setState({
               spinner: false,
-              error: json.error || "Failed to create sketch, please try again later",
+              error: res.text() || "Failed to delete sketch, please try again later",
             });
             return;
           }

diff --git a/src/components/Sketches/components/CreateSketchModal.js b/src/components/Sketches/components/CreateSketchModal.js
@@ -1,6 +1,6 @@
 import React from "react";
 import DropdownButton from "./DropdownButton";
-import ImageSelector from "../../common/ImageSelector"
+import ImageSelector from "../../common/ImageSelector";
 import {
   SketchThumbnailArray,
   LanguageDropdownValues,
@@ -46,7 +46,7 @@ class CreateSketchModal extends React.Component {
     });
   };
 
-  setNext = val => {
+  setNext = (val) => {
     this.setState({
       next: val,
       error: "",
@@ -111,15 +111,15 @@ class CreateSketchModal extends React.Component {
     return false;
   };
 
-  onFirstSubmit = e => {
+  onFirstSubmit = (e) => {
     e.preventDefault();
     if (this.badNameInput() || this.badLanguageInput()) {
       return;
     }
     this.setNext(true);
   };
 
-  onSecondSubmit = async e => {
+  onSecondSubmit = async (e) => {
     e.preventDefault();
 
     if (this.badThumbnailInput()) return;
@@ -135,23 +135,18 @@ class CreateSketchModal extends React.Component {
     try {
       fetch
         .createSketch(data)
-        .then(res => {
+        .then((res) => {
+          if (!res.ok) throw new Error(`Failed to create user! Got status ${res.status}`);
           return res.json();
         })
-        .then(json => {
-          if (!json.ok) {
-            this.setState({
-              disableSubmit: false,
-              error: json.error || "Failed to create sketch, please try again later",
-            });
-            return;
-          }
-          this.props.addProgram(json.data.key, json.data.programData || {});
-          this.props.setMostRecentProgram(json.data.key);
+        .then((json) => {
+          const { uid, ...programData } = json;
+          this.props.addProgram(uid, programData || {});
+          this.props.setMostRecentProgram(uid);
           this.setState({ redirect: true });
           this.closeModal();
         })
-        .catch(err => {
+        .catch((err) => {
           this.setState({
             disableSubmit: false,
             error: "Failed to create sketch, please try again later",
@@ -245,7 +240,7 @@ class CreateSketchModal extends React.Component {
             </Label>
             <Col xs={8}>
               <Input
-                onChange={e => this.setState({ name: e.target.value })}
+                onChange={(e) => this.setState({ name: e.target.value })}
                 value={this.state.name}
                 id="sketch-name"
               />
@@ -259,7 +254,7 @@ class CreateSketchModal extends React.Component {
             <Col xs="8" className="d-flex align-items-center">
               <DropdownButton
                 dropdownItems={LanguageDropdownValues}
-                onSelect={lang => this.setState({ language: lang })}
+                onSelect={(lang) => this.setState({ language: lang })}
                 displayValue={this.state.language.display || LanguageDropdownDefault.display}
               />
             </Col>

diff --git a/src/components/Sketches/components/EditSketchModal.js b/src/components/Sketches/components/EditSketchModal.js
@@ -80,7 +80,7 @@ class EditSketchModal extends React.Component {
     return false;
   };
 
-  handleSubmitEdit = async e => {
+  handleSubmitEdit = async (e) => {
     e.preventDefault();
 
     if (this.badNameInput() || this.badLanguageInput()) {
@@ -109,29 +109,27 @@ class EditSketchModal extends React.Component {
       try {
         fetch
           .updatePrograms(this.props.uid, updateData)
-          .then(res => {
-            return res.json();
-          })
-          .then(json => {
-            if (!json.ok) {
+          .then((res) => {
+            if (res.ok) {
+              if (this.state.newLanguage !== -1) {
+                this.props.setProgramLanguage(this.props.sketchKey, this.state.newLanguage.value);
+              }
+              if (this.state.newName !== -1) {
+                this.props.setProgramName(this.props.sketchKey, this.state.newName);
+              }
+              if (this.state.newThumbnail !== -1) {
+                this.props.setProgramThumbnail(this.props.sketchKey, this.state.newThumbnail);
+              }
+              this.closeModal();
+            } else {
               this.setState({
                 disableSubmit: false,
-                error: json.error || "Failed to edit sketch, please try again later",
+                error: res.text() || "Failed to edit sketch, please try again later",
               });
               return;
             }
-            if (this.state.newLanguage !== -1) {
-              this.props.setProgramLanguage(this.props.sketchKey, this.state.newLanguage.value);
-            }
-            if (this.state.newName !== -1) {
-              this.props.setProgramName(this.props.sketchKey, this.state.newName);
-            }
-            if (this.state.newThumbnail !== -1) {
-              this.props.setProgramThumbnail(this.props.sketchKey, this.state.newThumbnail);
-            }
-            this.closeModal();
           })
-          .catch(err => {
+          .catch((err) => {
             this.setState({
               disableSubmit: false,
               error: "Failed to edit sketch, please try again later",
@@ -176,7 +174,7 @@ class EditSketchModal extends React.Component {
             </Label>
             <Col xs={8}>
               <Input
-                onChange={e => this.setState({ newName: e.target.value })}
+                onChange={(e) => this.setState({ newName: e.target.value })}
                 value={this.state.newName !== -1 ? this.state.newName : this.props.sketchName}
                 id="sketch-name"
               />
@@ -190,7 +188,7 @@ class EditSketchModal extends React.Component {
             <Col xs="8" className="d-flex align-items-center">
               <DropdownButton
                 dropdownItems={LanguageDropdownValues}
-                onSelect={lang => this.setState({ newLanguage: lang })}
+                onSelect={(lang) => this.setState({ newLanguage: lang })}
                 displayValue={
                   this.state.newLanguage !== -1
                     ? this.state.newLanguage.display
@@ -289,7 +287,7 @@ class EditSketchModal extends React.Component {
         />
       );
     return (
-      <ImageSelector 
+      <ImageSelector
         isOpen={this.props.isOpen}
         closeModal={this.closeModal}
         thumbnailPreview={thumbnailPreview}

diff --git a/src/components/Sketches/constants/index.js b/src/components/Sketches/constants/index.js
@@ -1,3 +1,5 @@
+const { PYTHON, HTML, PROCESSING, REACT } = require("../../../constants");
+
 const SketchThumbnailArray = [
   "Ant",
   "Badger",
@@ -60,12 +62,13 @@ const SketchThumbnailArray = [
 ];
 
 const LanguageDropdownValues = [
-  { display: "Python", value: "python" },
-  { display: "Processing", value: "processing" },
-  { display: "HTML", value: "html" },
+  { display: "Python", value: PYTHON },
+  { display: "Processing", value: PROCESSING },
+  { display: "React", value: REACT },
+  { display: "HTML", value: HTML },
 ];
 
-const LanguageDropdownDefault = { display: "Python", value: "python" };
+const LanguageDropdownDefault = { display: "Python", value: PYTHON };
 
 module.exports = {
   SketchThumbnailArray,