Fixes makeUnDroppable and makeUnPushable and autofills course name (#236

)

* Fixed makeUnPushable/unDroppable bug, fixed animation bugs on render, and added a loading screen/overlay while waiting for view to mount

* Fixed formatting, moved render bug fix to state, removed loading screen changes

* Render changes reversed

* Resolved merge conflicts

* create new commit in different branch to hope that it didn't highlight unnecessary code

* Added makeUnDroppable/Pushable back to reference

* Added makeUnDroppable/Pushable back to autocomplete

* 1.2.3 change log

* 1.2.3 change log

README.md

@@ -6,9 +6,9 @@ MYR can be found online at [LearnMYR.org](https://learnmyr.org). For more inform
 ## ECG
 The Engaging Computing Group develops new technologies to enable learners—youth, teachers, undergraduates, and others— in order for them to be creative in science, engineering, and computing, and studies how these technologies improve learning. For more information about the Engaging Computing Group, please visit the [ECG website](https://sites.uml.edu/engaging-computing).
 
-## Change Log - 1.2.1 -> 1.2.2
-- Reference includes RGB color
-- Course cards are taller to limit need for scrolling
+## Change Log - 1.2.2 -> 1.2.3
+- makeUnDroppable and makeUnPushable now do not have unintended side effects.
+- Courses autopopulate the scene name and description before saving.
 
 ## Acknowledgments
 MYR uses [Aframe](https://aframe.io), a fantastic open source project, to render objects and effects in the three dimensional space.  

package.json

@@ -22,7 +22,7 @@
     "aframe-react": "^4.4.0",
     "bootstrap": "^4.0.0",
     "cannon": "^0.6.2",
-    "create-react-app": "^1.5.2",
+    "create-react-app": "^3.0.1",
     "firebase": "^5.5.7",
     "jquery": "^3.3.1",
     "qrcode": "^1.2.0",

src/actions/courseActions.js

@@ -2,6 +2,8 @@ import { render } from './editorActions';
 
 import * as types from '../constants/ActionTypes';
 
+import * as sceneActions from "./sceneActions";
+
 const courseRef = '/apiv1/courses/';
 const lessonRef = '/apiv1/lessons/id/';
 const getFirst = '?getLesson=true';
@@ -47,6 +49,11 @@ export function fetchCourse(courseId) {
             dispatch(loadCourse(json));
             dispatch(loadLesson(json.firstLesson));
             dispatch(render(json.firstLesson.code || ""));
+            dispatch(sceneActions.setNameDesc(
+              {
+                name: json.firstLesson.name,
+                desc: "This scene was saved from the course: " + json.name
+              }));
           })
           .catch(err => {
             console.error(err);
@@ -76,6 +83,7 @@ export function fetchLesson(lvlId) {
           .then(json => {
             dispatch(loadLesson(json));
             dispatch(render(json.code || ""));
+            dispatch(sceneActions.nameScene(json.name));
           })
           .catch(err => {
             dispatch(loadLesson(problem));

src/components/editor/Editor.js

@@ -17,6 +17,8 @@ class Editor extends Component {
     //Updates state in reducer before closing editor
     const text = window.ace.edit("ace-editor").getSession().getValue();
     this.props.refresh(text, this.props.user ? this.props.user.uid : 'anon');
+
+    //Forces render cycle so user sees up to date view when viewonly loads
     this.props.render(text);
   }
 

src/components/editor/customCompleter.js

@@ -84,7 +84,9 @@ export const customCompleter = {
             "setMagnitude()",
             "colorShift()",
             "makeDroppable()",
+            "makeUnDroppable",
             "makePushable()",
+            "makeUnPushable()",
             "getColor()",
             "getXPos()",
             "getYPos()",

src/components/structural/View.js

@@ -12,6 +12,7 @@ import * as THREE from 'three';
  * system utilizes the entity compoent system(ECS) to build objects in the scene from different
  * components.
  */
+
 class View extends Component {
   componentDidMount() {
     window.addEventListener("keydown", function (e) {
@@ -187,7 +188,6 @@ class View extends Component {
           })
         }
 
-
         {this.props.sceneConfig.settings.camConfig === 1 ?
           <a-entity position="0 0 0">
             <a-cylinder checkpoint radius="1" height="0.3" position="-25 1 -25" color="#39BB82"></a-cylinder>

src/components/structural/header/Header.js

@@ -309,7 +309,7 @@ class Header extends Component {
   handleRender = () => {
     try {
       let editor = window.ace.edit("ace-editor");
-      this.props.actions.refresh(editor.getSession().getValue());
+      this.clear();
       this.props.actions.render(editor.getSession().getValue(), this.props.user ? this.props.user.uid : 'anon');
     } catch (error) {
       this.props.actions.render(this.props.text, this.props.user ? this.props.user.uid : 'anon');
@@ -680,6 +680,7 @@ class Header extends Component {
             handleReferenceToggle={this.handleReferenceToggle} />
         </div>
         <div className="col-3 d-flex justify-content-end">
+          {/* <Classroom classrooms={this.props.classrooms} classroomActions={this.props.classroomActions} user={this.props.user} /> */}
           <Reference
             layoutType={this.props.layoutType}
             referenceOpen={this.state.referenceOpen}
@@ -699,7 +700,7 @@ class Header extends Component {
         <this.renderSnackBar />
         <this.spinner />
         <this.loadClassroom />
-      </header>
+      </header >
     );
   }
 }