Merge pull request #19 from visual-heuristics/feat_fetch_problem_file

Turn class components to functional components, implement change URL …

Author: Pippo Ramos

src/pages/PageOne/dropAndFetch.jsx

@@ -1,36 +1,41 @@
-import React from "react";
+import React, { useState } from "react";
 import DropZone from "./dropZone";
 import Button from "@material-ui/core/Button";
 import Container from "@material-ui/core/Container";
 import CloudUploadIcon from "@material-ui/icons/CloudUpload";
 import css from "./index.module.less";
 
-const dragsAndDrops = [
-  { name: "Domain", fileType: ".pddl", desc: "or predictes and actions." },
-  {
-    name: "Problem",
-    fileType: ".pddl",
-    desc: "for objects, initial state and goal.",
-  },
-  {
-    name: "Animation",
-    fileType: ".pddl",
-    desc: "object is representation.",
-  },
-];
-class DropAndFetch extends React.Component {
-  constructor(props) {
-    super(props);
-    this.datas = {};
-  }
+/**
+ * Three DropZones and Upload button to fetch pddl to server
+ * @param {function} props onStore function to send file to pageFour
+ * @param {function} props onClick function to go back to home
+ * @param {string} props url argument to paas to backend
+ * @returns
+ */
+export default function DropAndFetch({ onStore, onClick, newURL }) {
+  const [dataFiles, setDataFiles] = useState({});
 
-  componentWillUnmount = () => {
-    this.setState = (state, callback) => {
+  const dragsAndDrops = [
+    { name: "Domain", fileType: ".pddl", desc: "or predictes and actions." },
+    {
+      name: "Problem",
+      fileType: ".pddl",
+      desc: "for objects, initial state and goal.",
+    },
+    {
+      name: "Animation",
+      fileType: ".pddl",
+      desc: "object is representation.",
+    },
+  ];
+
+  const componentWillUnmount = () => {
+    setDataFiles = (state, callback) => {
       return;
     };
   };
 
-  uploadPDDL = async (files) => {
+  const uploadPDDL = async (files) => {
     const formData = new FormData();
     for (const name in files) {
       formData.append(name, files[name]);
@@ -47,69 +52,67 @@ class DropAndFetch extends React.Component {
 
       const data = await resp.json();
       const txt = JSON.stringify(data);
-      this.props.onStore(txt);
+      onStore(txt);
     } catch (error) {
       alert(error);
     }
   };
 
-  handleSubmit = () => {
+  const handleSubmit = () => {
     //Control check for files
+    if (newURL.lenght > 1) {
+      handleFileLoad("url", newURL);
+    }
     if (
-      "domain" in this.datas &&
-      "problem" in this.datas &&
-      "animation" in this.datas
+      "domain" in dataFiles &&
+      "problem" in dataFiles &&
+      "animation" in dataFiles
     ) {
-      this.uploadPDDL(this.datas);
+      uploadPDDL(dataFiles);
     } else {
       console.log("Some files are missing");
       alert("Some files are missing");
     }
   };
 
-  handleFileLoad = (name, file) => {
-    this.datas[name.toLowerCase()] = file;
-    console.log(this.datas);
+  const handleFileLoad = (name, file) => {
+    dataFiles[name.toLowerCase()] = file;
   };
 
-  render() {
-    return (
-      <React.Fragment>
-        <div>
-          <Container component="main" className={css.dropareaBox}>
-            {dragsAndDrops.map((drag) => (
-              <DropZone
-                key={drag.name}
-                name={drag.name}
-                desc={drag.desc}
-                fileType={drag.fileType}
-                onFileLoad={this.handleFileLoad}
-              />
-            ))}
-          </Container>
-          <Container maxWidth="sm" component="main">
-            <div className={css.buttonBox}>
-              <Button
-                variant="contained"
-                color="default"
-                onClick={() => this.props.onClick()}
-              >
-                Cancel
-              </Button>
-              <Button
-                variant="contained"
-                color="primary"
-                startIcon={<CloudUploadIcon />}
-                onClick={this.handleSubmit}
-              >
-                Upload Files
-              </Button>
-            </div>
-          </Container>
-        </div>
-      </React.Fragment>
-    );
-  }
+  return (
+    <React.Fragment>
+      <div>
+        <Container component="main" className={css.dropareaBox}>
+          {dragsAndDrops.map((drag) => (
+            <DropZone
+              key={drag.name}
+              name={drag.name}
+              desc={drag.desc}
+              fileType={drag.fileType}
+              onFileLoad={handleFileLoad}
+            />
+          ))}
+        </Container>
+        <Container maxWidth="sm" component="main">
+          <div className={css.buttonBox}>
+            <Button
+              variant="contained"
+              color="default"
+              onClick={() => onClick()}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="contained"
+              color="primary"
+              startIcon={<CloudUploadIcon />}
+              onClick={handleSubmit}
+            >
+              Upload Files
+            </Button>
+          </div>
+        </Container>
+      </div>
+    </React.Fragment>
+  );
 }
-
-export default DropAndFetch;

src/pages/PageOne/dropZone.jsx

@@ -2,61 +2,56 @@ import React from "react";
 import css from "./index.module.less";
 import { DropzoneArea } from "material-ui-dropzone";
 import Typography from "@material-ui/core/Typography";
+import { useState } from "react";
 
-class DropZone extends React.Component {
-  state = {
-    files: [],
-  };
+/**
+ * Wrapper for DropzoneArea
+ * @param {string} props name filename id
+ * @param {string} props desc text description
+ * @param {string} props fileType document extension
+ * @param {function} props onFileLoad callback
+ * @returns Dropzone with title and inner text
+ */
+export default function DropZone({ name, desc, fileType, onFileLoad }) {
+  const [files, setFile] = useState([]);
 
-  onDrop = (file) => {
+  const onDrop = (file) => {
+    //Format chekcs
     if (file.length !== 1) {
       alert("More than one file, retry");
     }
     console.log(file);
 
-    if (file[0].name.endsWith(this.props.fileType)) {
-      //console.log(this.state.files);
-      this.setState({ files: file });
-      //console.log(this.state.files);
+    if (file[0].name.endsWith(fileType)) {
+      setFile([file]);
       file[0].text().then((result) => {
-        this.props.onFileLoad(this.props.name, result);
+        onFileLoad(name, result);
       });
     } else {
       console.log("Wrong file type");
       alert("Wrong file type");
     }
   };
+  // To change the inner tet when dorpping a file
+  let dropText =
+    files.length > 0
+      ? files[0].name
+      : "Drag and drop " + name?.toLowerCase() + fileType ??
+        "--" + " here or click";
 
-  render() {
-    let dropText =
-      this.state.files.length > 0
-        ? this.state.files[0].name
-        : "Drag and drop " +
-          this.props?.name?.toLowerCase() +
-          this.props?.fileType?? '--' +
-          " here or click";
-
-    return (
-      <div className={css.dropzoneBox}>
-        <Typography
-          variant="h6"
-          align="center"
-          color="textPrimary"
-          component="p"
-        >
-          <b>{this.props.name} File </b>
-          <br />
-          {this.props.desc}
-        </Typography>
-        <DropzoneArea
-          acceptedFiles={[".pddl"]}
-          filesLimit={1}
-          onDrop={(file) => this.onDrop(file)}
-          dropzoneText={dropText}
-        />
-      </div>
-    );
-  }
+  return (
+    <div className={css.dropzoneBox}>
+      <Typography variant="h6" align="center" color="textPrimary" component="p">
+        <b>{name} File </b>
+        <br />
+        {desc}
+      </Typography>
+      <DropzoneArea
+        acceptedFiles={[".pddl"]}
+        filesLimit={1}
+        onDrop={(file) => onDrop(file)}
+        dropzoneText={dropText}
+      />
+    </div>
+  );
 }
-
-export default DropZone;