Issue #45: User movimentation implemented

Signed-off-by: Richard Heise <rfhf19@inf.ufpr.br>

src/components/fieldsDisplayForm/DisplayForm.js

 import React, { useState, useEffect, useContext } from "react";
 import { makeStyles } from "@material-ui/core/styles";
+import Button from "@material-ui/core/Button";
 import Grid from "@material-ui/core/Grid";
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import { createMuiTheme, MuiThemeProvider } from "@material-ui/core";
@@ -12,44 +13,57 @@ import FormFieldSubForm from "./FormFieldSubform";
 import uuid from "uuid/v4";
 import { verifyError } from "./utils/schemas";
 import SideMenu from "./SideMenu";
+import { useHistory } from "react-router-dom";
 
 import { FormEditionContext } from "../../contexts/FormContext";
 import useForm from "../../contexts/useForm";
 import SubmitButton from "./SubmitButton";
 /** CSS styles used on page components */
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
   app: {
     margin: "0",
     padding: "40px",
     display: "flex",
     ["@media (max-width: 600px)"]: {
       flexDirection: "column-reverse",
-      justifyContent: "flex-end",
+      justifyContent: "flex-end"
     },
     paddingBottom: "78px",
     ["@media (min-width: 600px)"]: {
-      minHeight: "calc(100vh - 92.4px - 78px -60px)",
+      minHeight: "calc(100vh - 92.4px - 78px -60px)"
     },
     minHeight: "calc(100vh - 71.6px - 78px -60px)",
-    marginBottom: "60px",
+    marginBottom: "60px"
   },
   addButton: {
-    fontSize: "100%",
+    fontSize: "100%"
   },
   sideMenuFormatingGrid: {
     ["@media (max-width:600px)"]: {
-      marginTop: "-90px",
-    },
+      marginTop: "-90px"
+    }
   },
   sizeFormating: {
     ["@media (max-width:600px)"]: {
       ["@media (max-width:430px)"]: {
         marginLeft: "1%",
-        width: "95%",
+        width: "95%"
       },
-      marginLeft: "2%",
-    },
+      marginLeft: "2%"
+    }
   },
+  button: {
+    marginLeft: "5%",
+    backgroundColor: "#a30202",
+    minWidth: "92px",
+    ["@media (max-width:600px)"]: {
+      marginTop: "52px"
+    },
+    width: "12%",
+    ["@media (max-width:600px)"]: {
+      marginTop: "52px"
+    }
+  }
 }));
 /** CSS style used through Material Ui. */
 const theme = createMuiTheme({
@@ -57,19 +71,19 @@ const theme = createMuiTheme({
     MuiInput: {
       underline: {
         "&:before": {
-          borderBottom: "1px solid #35c7fc",
+          borderBottom: "1px solid #35c7fc"
         },
         "&:after": {
-          borderBottom: "1px solid #3f51b5",
-        },
-      },
+          borderBottom: "1px solid #3f51b5"
+        }
+      }
     },
     MuiButton: {
       label: {
-        color: "white",
-      },
-    },
-  },
+        color: "white"
+      }
+    }
+  }
 });
 /** Main function that returns the children that composes the form creation or edition page. */
 function DisplayForm() {
@@ -84,6 +98,13 @@ function DisplayForm() {
   const columnId = uuid();
   /** Error state. */
   const [validToSend, setValidToSend] = useState();
+  /** variable to redirect */
+  const history = useHistory();
+
+  const toLogin = () => {
+    let path = `/SignIn`;
+    history.push(path);
+  };
 
   /** Error handling -> every time the form object is updated, it is verified to evaluate it's error messages,
    *  so the submit button can be enabled or disabled.
@@ -197,10 +218,19 @@ function DisplayForm() {
                 );
               }}
             </Droppable>
-            <SubmitButton
-              validToSend={validToSend}
-              formId={form ? (form[0] ? form[0].id : false) : false}
-            />
+            <Grid container justify="center">
+              <SubmitButton
+                validToSend={validToSend}
+                formId={form ? (form[0] ? form[0].id : false) : false}
+              />
+              <Button
+                variant="contained"
+                className={classes.button}
+                onClick={toLogin}
+              >
+                Cancelar
+              </Button>
+            </Grid>
           </Grid>
         </DragDropContext>
       </Grid>

src/components/fieldsGetForm/JornalFolder/FormJornal.js

@@ -36,8 +36,6 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: "white",
     marginBottom: "20px",
     marginLeft: "2%",
-    minHeight: "calc(100vh - 92.4px - 78px)",
-    paddingBottom: "78px",
     justifyContent: "center"
   },
   gridMenu: {

src/components/fieldsGetForm/SummaryFolder/FormSummary.js

@@ -33,8 +33,6 @@ const useStyles = makeStyles(theme => ({
     marginBottom: "20px",
     marginTop: "25px",
     marginLeft: "2%",
-    minHeight: "calc(100vh - 92.4px - 78px)",
-    paddingBottom: "78px",
     justifyContent: "center"
   },
   gridMenu: {

src/pages/GetForm.js

 import React, { useState, useEffect } from "react";
-import { useParams, Route, Redirect } from "react-router-dom";
+import { useParams, Redirect, useHistory } from "react-router-dom";
 import { makeStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
 import api from "../api";
-import { createMuiTheme, MuiThemeProvider } from "@material-ui/core";
 import FormControl from "@material-ui/core/FormControl";
 import MenuItem from "@material-ui/core/MenuItem";
 import Select from "@material-ui/core/Select";
 import FormHelperText from "@material-ui/core/FormHelperText";
 import Typography from "@material-ui/core/Typography";
-
+import Button from "@material-ui/core/Button";
 import Jornal from "../components/fieldsGetForm/JornalFolder/FormJornal";
 import Summary from "../components/fieldsGetForm/SummaryFolder/FormSummary";
 const useStyles = makeStyles(theme => ({
@@ -40,8 +39,7 @@ const useStyles = makeStyles(theme => ({
   container: {
     flexDirection: "row",
     justifyContent: "space-between",
-    backgroundColor: "white",
-    marginBottom: "20px"
+    backgroundColor: "white"
   },
   answerNum: {
     display: "flex",
@@ -55,6 +53,15 @@ const useStyles = makeStyles(theme => ({
       marginLeft: "20px"
     }
   },
+  button: {
+    marginBottom: "15%",
+    backgroundColor: "#d3d609",
+    minWidth: "92px",
+    width: "12%",
+    ["@media (max-width:580px)"]: {
+      marginBottom: "40%"
+    }
+  },
   formTitle: {
     textAlign: "center",
     marginTop: "10px",
@@ -73,34 +80,15 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const theme = createMuiTheme({
-  overrides: {
-    MuiInput: {
-      underline: {
-        "&:before": {
-          borderBottom: "1px solid #35c7fc"
-        },
-        "&:after": {
-          borderBottom: "1px solid #3f51b5"
-        }
-      }
-    },
-    MuiButton: {
-      label: {
-        color: "black"
-      }
-    }
-  }
-});
-
 function GetForm() {
   const classes = useStyles();
-
+  const history = useHistory();
   /** Form id got from the browser's URL */
   const { id } = useParams();
 
   /** Maped form from backend */
   const [formArray, setFormArray] = useState([]);
+
   const [answers, setAnswers] = useState([]);
   const [answerNum, setAnswerNum] = useState(0);
   const [isReady, setIsReady] = useState(false);
@@ -108,6 +96,10 @@ function GetForm() {
   const [times, setTimes] = useState([]);
   const [toLogin, setToLogin] = useState(false);
 
+  const GoBack = () => {
+    let path = `/signin`;
+    history.push(path);
+  };
   /**
    * Set selectedValue variable to the right value.
    */
@@ -220,6 +212,11 @@ function GetForm() {
           />
         )}
       </Grid>
+      <Grid container justify="center">
+        <Button variant="contained" className={classes.button} onClick={GoBack}>
+          Voltar
+        </Button>
+      </Grid>
     </Grid>
   ) : (
     <p>loading...</p>

src/pages/VisualizeForm.js

@@ -3,7 +3,7 @@ import { useParams } from "react-router-dom";
 import { makeStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
 import api from "../api";
-import { createMuiTheme, MuiThemeProvider } from "@material-ui/core";
+import { createMuiTheme, MuiThemeProvider, Button } from "@material-ui/core";
 import { useHistory } from "react-router-dom";
 
 import FormFieldText from "../components/fieldsVisualizeForm/FormFieldText";
@@ -23,14 +23,12 @@ const useStyles = makeStyles(theme => ({
     padding: theme.spacing(1)
   },
   button: {
-    type: "submit",
-    width: "100%",
-    background: "#6ec46c",
-    borderRadius: "2px",
-    padding: "10px 20px",
-    fontSize: "18px",
-    "&:hover": {
-      backgroundColor: "rgb(25, 109, 23)"
+    marginBottom: "15%",
+    backgroundColor: "#d3d609",
+    minWidth: "92px",
+    width: "12%",
+    ["@media (max-width:600px)"]: {
+      marginBottom: "20%"
     }
   },
   pageBody: {
@@ -97,6 +95,11 @@ function VisualizeForm() {
       });
   }
 
+  const toLogin = () => {
+    let path = `/SignIn`;
+    history.push(path);
+  };
+
   /** First thing the page does is getting the form from the API. */
   useEffect(() => {
     getForm(id);
@@ -158,6 +161,15 @@ function VisualizeForm() {
                     />
                   );
               })}
+              <Grid container justify="center">
+                <Button
+                  variant="contained"
+                  className={classes.button}
+                  onClick={toLogin}
+                >
+                  Voltar
+                </Button>
+              </Grid>
             </div>
           ) : (
             <p>Loading...</p>