Organise styles, create alert MIU style, add E2E testing, fix conflicts

Author: pippo-sci

src/App.js

@@ -23,19 +23,21 @@ const theme = createTheme({
 
 function App() {
   return (
+    <div className={styles.root}>
     <div className={styles.App}>
       <ThemeProvider theme={theme}>
       <NavigationBar />
       <Switch>
         <Route path="/" component={HomePage} exact />
-        <Route path="/page1" component={PageOne} />
-        <Route path="/page2" component={PageTwo} />
+        <Route path="/problem" component={PageOne} />
+        <Route path="/vfg" component={PageTwo} />
         <Route path="/page3" component={PageThree} />
-        <Route path="/page4" component={PageFour} />
+        <Route path="/demo" component={PageFour} />
       </Switch>
       </ThemeProvider>
       {/* <div>this is app</div> */}
     </div>
+    </div>
   );
 }
 

src/App.module.less

@@ -1,8 +1,18 @@
+.root{
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ffffff;
+
+}
 .App {
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+
 }
 

src/Styles/index.module.less

@@ -51,4 +51,22 @@ background: #fff;
     margin-top: 2%;
     margin-left: 25%;
     margin-right: 25%;
+}
+
+.wrapper {
+  position: relative;
+
+}
+.loading {
+  position: absolute;
+  top: 5px;
+  left: 71px;
+}
+.loadingBox {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
 }

src/components/navigationBar/navigationBar.js

@@ -28,14 +28,18 @@ const useStyles = makeStyles((theme) => ({
     link: {
       margin: theme.spacing(1, 1.5),
       cursor: 'pointer'
+    },
+    alink: {
+      color: '#ffffff',
+      textDecoration: 'none'
     }
   }));
 
 const nav = {
-    problem: '/page1',
-    vfg: '/page2',
-    manual: '/page3',
-    demo: '/page4',
+    problem: '/problem',
+    vfg: '/vfg',
+    manual: 'https://planimation.github.io/documentation/ ',
+    demo: '/demo',
     home: '/'
 };
 
@@ -46,7 +50,12 @@ function NavigationBar() {
 
     const handleClick = (url) => {
         setUrl(url);
-        history.push(nav[url]);
+        if(url==='manual'){
+          window.location.href(nav[url])
+        }else{
+          history.push(nav[url]);
+
+        }
     }
 
     return(
@@ -62,8 +71,8 @@ function NavigationBar() {
         <Link variant="button" color="inherit" onClick={()=>handleClick('vfg')} className={classes.link}>
           VFG
         </Link>
-        <Link variant="button" color="inherit" onClick={()=>handleClick('manual')} className={classes.link}>
-          User Manual
+        <Link variant="button" color="inherit" className={classes.link}>
+          <a href={'https://planimation.github.io/documentation/'} target='_blank' rel="noreferrer" className={classes.alink}>User Manual</a>
         </Link>
         <Link variant="button" color="inherit" onClick={()=>handleClick('demo')} className={classes.link}>
           Demo

src/pages/HomePage/home.js

@@ -139,7 +139,23 @@ export default function Home() {
 
   const handleOnClick = (num) => {
     setNum( num + 1 );
-    history.push('/page'+num);
+    switch(num){
+      case 1:
+        history.push('/problem');
+        break;
+      case 2:
+        history.push('/vfg');
+        break;
+      case 3:
+        window.open('https://planimation.github.io/documentation/')
+        break;
+      case 4:
+        history.push('/demo');
+        break;
+      default: return;
+    }
+
+    
   }
 
   return (

src/pages/PageFour/index.js

@@ -376,7 +376,12 @@ class PageFour extends React.Component {
             playSpeed: value
         })
     }
-
+    
+    componentWillUnmount(){
+        if(this.handlerPlay) {
+            clearInterval(this.handlerPlay);
+        }
+    }
 
     render() {
         // Get all sprites

src/pages/PageOne/dropAndFetch.jsx

@@ -5,6 +5,7 @@ import Container from "@material-ui/core/Container";
 import CloudUploadIcon from "@material-ui/icons/CloudUpload";
 import css from "../../Styles/index.module.less";
 import Alert from "../../components/alertInFormat";
+import CircularProgress from "@material-ui/core/CircularProgress";
 
 /**
  * Three DropZones and Upload button to fetch pddl to server
@@ -16,6 +17,7 @@ import Alert from "../../components/alertInFormat";
 export default function DropAndFetch({ onStore, onClick, newURL }) {
   const [dataFiles, setDataFiles] = useState({});
   const [showAlert, setAlert] = useState(false);
+  const [loading, setLoading] = useState(false);
 
   const dragsAndDrops = [
     {
@@ -47,6 +49,7 @@ export default function DropAndFetch({ onStore, onClick, newURL }) {
       formData.append(name, files[name]);
     }
     try {
+      setLoading(true);
       const resp = await fetch(
         "https://planimation.planning.domains/upload/pddl",
         {
@@ -61,6 +64,8 @@ export default function DropAndFetch({ onStore, onClick, newURL }) {
       onStore(txt);
     } catch (error) {
       alert(error);
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -102,6 +107,7 @@ export default function DropAndFetch({ onStore, onClick, newURL }) {
               onFileLoad={handleFileLoad}
             />
           ))}
+          {loading && <div className={css.loadingBox} />}
         </Container>
         <Container maxWidth="sm" component="main">
           <div className={css.buttonBox}>
@@ -112,14 +118,20 @@ export default function DropAndFetch({ onStore, onClick, newURL }) {
             >
               Cancel
             </Button>
-            <Button
-              variant="contained"
-              color="primary"
-              startIcon={<CloudUploadIcon />}
-              onClick={handleSubmit}
-            >
-              Upload Files
-            </Button>
+            <div className={css.wrapper}>
+              <Button
+                variant="contained"
+                color="primary"
+                startIcon={<CloudUploadIcon />}
+                onClick={handleSubmit}
+                disabled={loading}
+              >
+                Upload Files
+              </Button>
+              {loading && (
+                <CircularProgress size={24} className={css.loading} />
+              )}
+            </div>
           </div>
         </Container>
         <Alert open={showAlert} reset={handleResetAlert} severity="warning">

src/pages/PageOne/index.js

@@ -20,7 +20,7 @@ class PageOne extends React.Component {
 
     handleStore = (content)=> {
         localStorage.setItem('fileContent', content);
-        window.location.href = '/page4';
+        window.location.href = '/demo';
     }
 
     handleNewURL = (urlString) => {

src/pages/PageOne/index.module.less

@@ -0,0 +1,26 @@
+.dropzoneBox {
+  /* 
+  background: #fff;
+  */
+  display: inline-block;
+  justify-content: space-around;
+  width: 30%;
+  padding: 20px;
+}
+
+.buttonBox {
+  padding: 20px;
+  display: flex;
+  justify-content: space-around;
+}
+
+.dropareaBox {
+  /* 
+background: #fff;
+*/
+  display: flex;
+  justify-content: space-around;
+  position: relative;
+
+}
+

src/pages/PageTwo/index.js

@@ -129,7 +129,7 @@ render() {
               <Button variant="contained" color="default" onClick={this.handleOnClick} text-align="left">Cancel</Button>
               <Button  variant="contained" color="primary"  startIcon={<CloudUploadIcon />} onClick={()=>{
                 // eslint-disable-next-line no-restricted-globals
-                location.href = '/page4';
+                location.href = '/demo';
               }} text-align="right">Continue</Button>
             </div>
           </Container>