fix bugs

Author: Zhou

src/pages/PageFour/index.js

@@ -337,6 +337,7 @@ class PageFour extends React.Component {
 
     render() {
         // Get all sprites
+        if(!vfg.visualStages) return null;
         var sprites = vfg.visualStages[this.state.stepInfoIndex].visualSprites;
         // Sort sprites by their depth
         sprites.sort((itemA, itemB) => itemA.depth - itemB.depth)
@@ -347,7 +348,7 @@ class PageFour extends React.Component {
                     <div className={styles.sub_title}> Steps </div>
                     <div className={styles.left_upper}>
                         {
-                            steps.map((step, i) => {
+                            steps && steps.map((step, i) => {
                                 return <div className={styles.stage_item}
                                             style={{backgroundColor: i === this.state.stepInfoIndex ? '#eef': 'white'}}
                                             onClick={()=>{this.handleSwitchStage(i);}}

src/pages/PageOne/dropAndFetch.jsx

@@ -5,7 +5,7 @@ import Container from "@material-ui/core/Container";
 import CloudUploadIcon from "@material-ui/icons/CloudUpload";
 import css from "./index.module.less";
 
-const dragsAndDrops=[
+const dragsAndDrops = [
   { name: "Domain", fileType: ".pddl", desc: "or predictes and actions." },
   {
     name: "Problem",
@@ -24,8 +24,6 @@ class DropAndFetch extends React.Component {
     this.datas = {};
   }
 
- 
-
   componentWillUnmount = () => {
     this.setState = (state, callback) => {
       return;
@@ -37,18 +35,22 @@ class DropAndFetch extends React.Component {
     for (const name in files) {
       formData.append(name, files[name]);
     }
-    const resp = await fetch(
-      "https://planimation.planning.domains/upload/pddl",
-      {
-        //"http://127.0.0.1:8000/upload/pddl" On local server
-        method: "POST", //DO NOT use headers
-        body: formData, // Dataformat
-      }
-    );
+    try {
+      const resp = await fetch(
+        "https://planimation.planning.domains/upload/pddl",
+        {
+          //"http://127.0.0.1:8000/upload/pddl" On local server
+          method: "POST", //DO NOT use headers
+          body: formData, // Dataformat
+        }
+      );
 
-    const data = await resp.json();
-    const txt = JSON.stringify(data);
-    this.props.onStore(txt);
+      const data = await resp.json();
+      const txt = JSON.stringify(data);
+      this.props.onStore(txt);
+    } catch (error) {
+      alert(error);
+    }
   };
 
   handleSubmit = () => {

src/pages/PageOne/dropZone.jsx

@@ -32,8 +32,8 @@ class DropZone extends React.Component {
       this.state.files.length > 0
         ? this.state.files[0].name
         : "Drag and drop " +
-          this.props.name.toLowerCase() +
-          this.props.fileType +
+          this.props?.name?.toLowerCase() +
+          this.props?.fileType?? '--' +
           " here or click";
 
     return (

src/pages/PageOne/dropZone.test.js

@@ -5,7 +5,7 @@ import DropZone from './dropZone';
 
 it("Renders Correctly ", () => {
     const div = document.createElement("div");
-    ReactDOM.render(<DragAndDrop
+    ReactDOM.render(<DropZone
     />, div);
     ReactDOM.unmountComponentAtNode(div);
 });