Merge pull request #38 from dwm-2023-2/feature/editar_e_apagar

Feature/editar e apagar
dwm-2023-2 · Dec 8, 2023 · f9a9c0a · f9a9c0a
2 parents 6c73b4d + 2ae1109
commit f9a9c0a
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 22 deletions.
diff --git a/src/pages/CreateANote.jsx b/src/pages/CreateANote.jsx
@@ -64,21 +64,25 @@ export const CreateANote = () => {
     };
 
     api
-      .post("/diarios/diario", {
+      .post("/registrosdiario/registroDiario", {
         tituloRegistro: title.current.value,
         conteudoRegistro: content.current.value,
         privacidade: status,
         userId: userInfoState.id,
         diarioAssociadoID: diarioId,
       })
-      .then((response) => {})
+      .then((response) => {
+        console.log(response);
+        navigate(`/diary/${diarioId}`);
+      })
       .catch((err) => {
         console.error("ops! ocorreu um erro" + err);
       });
-    navigate(`/diary/${diarioId}`);
     // console.log(payload);
   };
 
+  console.log("diarioId: ", diarioId);
+
   return (
     <div>
       <Header></Header>

diff --git a/src/pages/DiaryPage.jsx b/src/pages/DiaryPage.jsx
@@ -10,17 +10,37 @@ import Fab from "@mui/material/Fab";
 import { Link } from "react-router-dom";
 import AddIcon from "@mui/icons-material/Add";
 import { diarioStore } from "../stores/diarioStore";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { ContactSupportOutlined } from "@mui/icons-material";
+import { useNavigate } from "react-router-dom";
 
 export const DiaryPage = () => {
   const { param1 } = useParams();
   const [diario, setDiario] = useState(null);
-  const diarioId = diarioStore((state) => state.diarioId);
-  const setDiarioId = diarioStore((state) => state.setDiarioId);
+  const [notes, setNotes] = useState([]);
 
-  const buttonStyle = {
+  let storageUserId = localStorage.getItem("userId");
+
+  const navigate = useNavigate();
+
+  const ADDbuttonStyle = {
+    position: "fixed",
+    bottom: "250px",
+    right: "20px",
+  };
+
+  const EDITbuttonStyle = {
+    position: "fixed",
+    bottom: "150px",
+    right: "20px",
+  };
+
+  const DELETEbuttonStyle = {
     position: "fixed",
-    bottom: "20px",
+    bottom: "50px",
     right: "20px",
+    color: "white",
   };
 
   const diarios = {
@@ -32,13 +52,13 @@ export const DiaryPage = () => {
     justifyContent: "center",
   };
 
-  const diario1 = {
-    backgroundColor: "#FFFDD0",
-    padding: "10px",
-    border: "solid 1px",
-    borderRadius: "10px",
-    cursor: "pointer",
-    width: "200px",
+  const regDiarios = {
+    // backgroundColor: "yellow",
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "20px",
+    padding: "40px",
+    justifyContent: "center",
   };
 
   const diarioTitulo = {
@@ -50,6 +70,24 @@ export const DiaryPage = () => {
     padding: "5px",
   };
 
+  const submitDeleteDiary = () => {
+    const shouldDelete = window.confirm(
+      "Are you sure you want to delete this diary?"
+    );
+
+    if (shouldDelete) {
+      api
+        .delete(`diarios/diario/${param1}`)
+        .then((response) => {
+          console.log(response);
+          navigate(`/`);
+        })
+        .catch((err) => {
+          console.error("ops! ocorreu um erro " + err);
+        });
+    }
+  };
+
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -59,10 +97,22 @@ export const DiaryPage = () => {
         console.error("Erro ao buscar dados:", error);
       }
     };
-
     fetchData();
   }, [param1]);
 
+  useEffect(() => {
+    let storageUserId = localStorage.getItem("userId");
+
+    api
+      .get(`registrosdiario/registrosDiario?diarioId=${param1}`)
+      .then((response) => {
+        console.log(response);
+      })
+      .catch((err) => {
+        console.error("ops! ocorreu um erro" + err);
+      });
+  }, [storageUserId]);
+
   const formatDate = (dateString) => {
     const date = new Date(dateString);
     return format(date, "yyyy-MM-dd");
@@ -89,13 +139,62 @@ export const DiaryPage = () => {
             </div>
           )}
         </div>
+        <div style={regDiarios}>
+          {" "}
+          {/* erro a partir daq */}
+          {notes.map((elements, index) => (
+            <div
+              key={index}
+              style={diario}
+              onClick={() => {
+                navigateWithParams(elements?.id);
+              }}
+            >
+              <p style={diarioTitulo}>{elements?.tituloRegistro}</p>
+              <p
+                style={{
+                  textAlign: "center",
+                  fontFamily: "Arial",
+                  color: "white",
+                }}
+              >
+                {elements?.conteudoRegistro}
+              </p>
+              <p
+                style={{
+                  textAlign: "center",
+                  fontFamily: "Arial",
+                  color: "white",
+                }}
+              >
+                {formatDate(elements?.createdAt)}
+              </p>
+            </div>
+          ))}
+        </div>
         <Link to="/create-note">
           <Box sx={{ "& > :not(style)": { m: 1 } }}>
-            <Fab color="primary" aria-label="add" style={buttonStyle}>
+            <Fab color="primary" aria-label="add" style={ADDbuttonStyle}>
               <AddIcon />
             </Fab>
           </Box>
         </Link>
+        <Box sx={{ "& > :not(style)": { m: 1 } }}>
+          <Fab color="secondary" aria-label="edit" style={EDITbuttonStyle}>
+            <EditIcon />
+          </Fab>
+        </Box>
+        <Box
+          onClick={() => submitDeleteDiary()}
+          sx={{ "& > :not(style)": { m: 1 } }}
+        >
+          <Fab
+            aria-label="delete"
+            style={{ ...DELETEbuttonStyle, backgroundColor: "#FF0000" }}
+          >
+            <DeleteIcon />
+          </Fab>
+        </Box>
       </Section>
       <Footer></Footer>
     </div>

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -169,13 +169,13 @@ export const Home = () => {
         <Typography sx={{ color: "white", textAlign: "center" }} variant="h3">
           Empty list. Create a Diary below
         </Typography>
-        <Box sx={{ "& > :not(style)": { m: 1 } }}>
-          <Fab color="primary" aria-label="add" style={buttonStyle}>
-            <Link to="/create-diary">
+        <Link to="/create-diary">
+          <Box sx={{ "& > :not(style)": { m: 1 } }}>
+            <Fab color="primary" aria-label="add" style={buttonStyle}>
               <AddIcon />
-            </Link>
-          </Fab>
-        </Box>
+            </Fab>
+          </Box>
+        </Link>
       </Section>
     );
   } else {