Merge pull request #15 from visual-heuristics/feat_fetch_problem_file

Send backend response to page4

Author: invincibleyolk

src/pages/PageOne/dragAndDrop.jsx

@@ -27,26 +27,23 @@ class DropAndFetch extends React.Component {
     ],
   };
 
-  uploadPDDL = (files) => {
+  uploadPDDL = async (files) => {
     const formData = new FormData();
     for (const name in files) {
       formData.append(name, files[name]);
     }
-    let resp;
+    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
+      }
+    );
 
-    fetch("https://planimation.planning.domains/upload/pddl", {
-      //"http://127.0.0.1:8000/upload/pddl", {
-      method: "POST", //DO NOT use headers
-      body: formData, // Dataformat
-    })
-      .then(
-        (response) => console.log(response) //read response code and replicate
-      )
-      .then(
-        (success) => (resp = success) //success contains the VFG
-      )
-      .catch((error) => console.log(error));
-    return resp;
+    const data = await resp.json();
+    const txt = JSON.stringify(data);
+    this.props.onStore(txt);
   };
 
   handleSubmit = () => {
@@ -56,16 +53,16 @@ class DropAndFetch extends React.Component {
       "problem" in this.datas &&
       "animation" in this.datas
     ) {
-      let resp = this.uploadPDDL(this.datas);
-      console.log(resp);
+      this.uploadPDDL(this.datas);
     } else {
       console.log("Some files are missing");
       alert("Some files are missing");
     }
   };
 
   handleFileLoad = (name, file) => {
-    this.datas[name] = file;
+    this.datas[name.toLowerCase()] = file;
+    console.log(this.datas);
   };
 
   render() {
@@ -87,7 +84,7 @@ class DropAndFetch extends React.Component {
             <div className={css.buttonBox}>
               <Button
                 variant="contained"
-                color="#224878"
+                color="default"
                 onClick={() => this.props.onClick()}
               >
                 Cancel

src/pages/PageOne/dropAndFetch.jsx

@@ -15,10 +15,12 @@ class DropZone extends React.Component {
     console.log(file);
 
     if (file[0].name.endsWith(this.props.fileType)) {
-      console.log(this.state.files);
+      //console.log(this.state.files);
       this.setState({ files: file });
-      console.log(this.state.files);
-      this.props.onFileLoad(this.props.name, file[0]);
+      //console.log(this.state.files);
+      file[0].text().then((result) => {
+        this.props.onFileLoad(this.props.name, result);
+      });
     } else {
       console.log("Wrong file type");
       alert("Wrong file type");

src/pages/PageOne/dropZone.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import DragAndDrop from './dragAndDrop';
+import DropZone from './dropZone';
 
 
 it("Renders Correctly ", () => {

src/pages/PageOne/dragAndDrop.test.js renamed to src/pages/PageOne/dropZone.test.js

@@ -53,6 +53,10 @@ class PageOne extends React.Component {
     handleOnClick() {
         this.props.history.push('/')
     }
+    handleStore = (content)=> {
+        localStorage.setItem('fileContent', content);
+        window.location.href = '/page4';
+    }
 
     render() {
 
@@ -91,7 +95,7 @@ class PageOne extends React.Component {
                         Option 2 - Upload Problem Domain and Animation Profile Files
                     </h3>
                 </div>               
-                <DropAndFetch onClick={this.handleOnClick}/>              
+                <DropAndFetch onClick={this.handleOnClick} onStore={this.handleStore}/>              
             </div>
 
           );