Issue #56: Add deactivate form feature.

closes #56 (closed)

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";
 import IconButton from "@material-ui/core/IconButton";
+import Chip from "@material-ui/core/Chip";
 import Tooltip from "@material-ui/core/Tooltip";
 import Typography from "@material-ui/core/Typography";
 import { makeStyles } from "@material-ui/core/styles";
@@ -15,65 +18,69 @@ 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,
+    marginLeft: 5,
     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) {
@@ -96,14 +103,53 @@ function CardForm(props) {
     history.push(path);
   };
 
-  function handleDelete(value) {
+  function handleDeactivate(value) {
     if (value) {
-      // deleteForm();
+      deactivateForm(props.status);
     }
   }
 
-  async function deleteForm() {
-    // const res = await api
+  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 deactivateForm(status) {
+    var newForm = { ...formData };
+    newForm.status = !status;
+
+    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 ${props.status ? "desativado!" : "reativado!"}`);
+        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,9 +162,14 @@ function CardForm(props) {
     return newDate.toLocaleDateString("pt-BR", options);
   }
 
+  useEffect(() => {
+    getForm(props.id);
+  }, [props.id]);
+
   return (
-    <ExpansionPanel>
+    <ExpansionPanel class={classes.card}>
       <ExpansionPanelSummary expandIcon={<MoreVertOutlinedIcon />}>
+        {!props.status ? <Chip size="small" label="Desativado" /> : null}
         <Typography noWrap className={classes.title}>
           {props.title}
           <br />
@@ -148,12 +199,15 @@ 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
+          handleDeactivate={handleDeactivate}
+          status={props.status}
+        />
       </ExpansionPanelDetails>
     </ExpansionPanel>
   );