Develop

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>

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>

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 {

src/pages/Profile.jsx

@@ -2,17 +2,43 @@ import { Header } from "../layout/Header";
 import { Section } from "../layout/Section";
 import { Footer } from "../layout/Footer";
 import { userInfoStore } from "../stores/userInfo";
+import api from "../services/api";
 import styles from "../styles/Profile.module.css";
+import { useNavigate } from "react-router-dom";
 import { Typography, TextField, Button } from "@mui/material";
 
+// ... (importações existentes)
+
 export const Profile = () => {
   const userInfoState = userInfoStore((state) => state.userInfo);
+  const navigate = useNavigate();
 
   let storageUserId = localStorage.getItem("userId");
   let storageUsername = localStorage.getItem("username");
   let storageEmail = localStorage.getItem("email");
 
-  const submitSignup = () => {};
+  const submitDelete = () => {
+    const shouldDelete = window.confirm(
+      "Are you sure you want to delete your account?"
+    );
+    if (shouldDelete) {
+      api
+        .delete(`/users/${storageUserId}`)
+        .then((response) => {
+          console.log(response);
+          navigate("/");
+          localStorage.clear();
+        })
+        .catch((err) => {
+          console.error("Oops! An error occurred" + err);
+        });
+    }
+  };
+
+  const handleEdit = () => {
+    // continuar a lógica
+    navigate(`/edit-profile/${storageUserId}`);
+  };
 
   return (
     <div>
@@ -25,21 +51,17 @@ export const Profile = () => {
             <p>User ID: {storageUserId}</p>
             <p>Email: {storageEmail}</p>
             <div className={styles.buttons}>
-              <Button
-                onClick={() => {
-                  navigate("/editprofile");
-                }}
-                variant="contained"
-              >
-                Login
+              <Button onClick={handleEdit} variant="contained" color="primary">
+                Editar perfil
               </Button>
               <Button
                 onClick={() => {
                   submitDelete();
                 }}
                 variant="contained"
+                color="error"
               >
-                Create
+                Deletar usuário
               </Button>
             </div>
           </div>