Issue #56: Add delete form feature.

src/components/fieldsListForms/CardForm.jsx

 import React, { useState, useEffect } from "react";
 import Divider from "@material-ui/core/Divider";
+import api from "../../api";
+import createBackendForm from "../fieldsDisplayForm/utils/BackendTranslation";
 import ExpansionPanel from "@material-ui/core/ExpansionPanel";
 import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
 import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
@@ -15,65 +17,68 @@ import EditOutlinedIcon from "@material-ui/icons/EditOutlined";
 import ShareButton from "./ShareButton";
 import VisibilityOutlinedIcon from "@material-ui/icons/VisibilityOutlined";
 import QuestionAnswerOutlinedIcon from "@material-ui/icons/QuestionAnswerOutlined";
+import { get } from "object-path";
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   title: {
     fontSize: 20,
     flex: 1,
     width: 0,
     textAlign: "center",
-    color: "#667079"
+    color: "#667079",
   },
 
   description: {
-    alignSelf: "center"
+    alignSelf: "center",
   },
 
   container: {
     display: "flex",
     flexWrap: "wrap",
     justifyContent: "flex-start",
-    color: "#667079"
+    color: "#667079",
   },
 
   item: {
-    margin: "5px"
+    margin: "5px",
   },
 
   expPainelD: {
-    display: "block"
+    display: "block",
   },
 
   date: {
     fontSize: 16,
     textAlign: "center",
-    color: "#667079"
+    color: "#667079",
   },
 
   create: {
     fontSize: 13,
     textAlign: "center",
-    color: "#667079"
+    color: "#667079",
   },
 
   icons: {
     marginLeft: "20%",
     ["@media (max-width: 370px)"]: {
-      marginLeft: "10%"
-    }
+      marginLeft: "10%",
+    },
   },
 
   numberOfAnswers: {
     fontSize: 18,
     textAlign: "center",
-    margin: "7px"
-  }
+    margin: "7px",
+  },
 }));
 
 function CardForm(props) {
   const classes = useStyles();
   const history = useHistory();
 
+  const [formData, setFormData] = useState(0);
+
   const handleAnswer = () => {
     //redirecionar para /answer/props.id
     if (props.numberOfAnswers) {
@@ -98,12 +103,50 @@ function CardForm(props) {
 
   function handleDelete(value) {
     if (value) {
-      // deleteForm();
+      deleteForm();
     }
   }
 
+  async function getForm(id) {
+    const res = await api
+      .get(`/form/${id}`)
+      .then(function (res) {
+        setFormData(res.data);
+      })
+      .catch((error) => {
+        if (error.response.status === 401) {
+          window.sessionStorage.removeItem("token");
+          window.sessionStorage.removeItem("userId");
+          let path = `/signin`;
+          history.push(path);
+          return;
+        }
+      });
+  }
+
   async function deleteForm() {
-    // const res = await api
+    var newForm = { ...formData };
+    newForm.status = false;
+
+    const res = await api
+      .put(`/form/${props.id}`, newForm, {
+        headers: {
+          authorization: `bearer ${window.sessionStorage.getItem("token")}`,
+        },
+      })
+      .then(function (error) {
+        if (!error.response) alert("Formulário deletado!");
+        history.go(0);
+      })
+      .catch((error) => {
+        if (error.response.status === 401) {
+          window.sessionStorage.removeItem("token");
+          window.sessionStorage.removeItem("userId");
+          let path = `/signin`;
+          history.push(path);
+          return;
+        }
+      });
   }
 
   function manageDate(date) {
@@ -116,6 +159,10 @@ function CardForm(props) {
     return newDate.toLocaleDateString("pt-BR", options);
   }
 
+  useEffect(() => {
+    getForm(props.id);
+  }, []);
+
   return (
     <ExpansionPanel>
       <ExpansionPanelSummary expandIcon={<MoreVertOutlinedIcon />}>
@@ -148,12 +195,12 @@ function CardForm(props) {
         </Tooltip>
 
         <Tooltip title="Respostas" arrow>
-          <IconButton aria-label="delete" onClick={handleAnswer}>
+          <IconButton aria-label="answers" onClick={handleAnswer}>
             <QuestionAnswerOutlinedIcon />
           </IconButton>
         </Tooltip>
 
-        {/*<DeleteButton handleDelete={handleDelete} />*/}
+        <DeleteButton handleDelete={handleDelete} />
       </ExpansionPanelDetails>
     </ExpansionPanel>
   );

src/pages/ListForms.js

@@ -99,8 +99,8 @@ export default function ListForms() {
     const res = await api
       .get(`/user/list/${id}`)
       .then(function (res) {
-        setForms(res.data.sort((a, b) => a.id > b.id));
-        setAuxForms(res.data.sort((a, b) => a.id > b.id));
+        setForms((res.data.sort((a, b) => a.id > b.id)).filter(f => f.status));
+        setAuxForms((res.data.sort((a, b) => a.id > b.id)).filter(f => f.status));
         setisLoaded(true);
       })
       .catch(error => {