diff --git a/package-lock.json b/package-lock.json index 151d709..7851b93 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@mui/material": "^5.14.15", "axios": "^1.5.1", "date-fns": "^2.30.0", + "dompurify": "^3.0.6", "dotenv": "^16.3.1", "localforage": "^1.10.0", "match-sorter": "^6.3.1", @@ -2047,6 +2048,11 @@ "csstype": "^3.0.2" } }, + "node_modules/dompurify": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.6.tgz", + "integrity": "sha512-ilkD8YEnnGh1zJ240uJsW7AzE+2qpbOUYjacomn3AvJ6J4JhKGSZ2nh4wUIXPZrEPppaCLx5jFe8T89Rk8tQ7w==" + }, "node_modules/dotenv": { "version": "16.3.1", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz", diff --git a/package.json b/package.json index e72a634..d505447 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@mui/material": "^5.14.15", "axios": "^1.5.1", "date-fns": "^2.30.0", + "dompurify": "^3.0.6", "dotenv": "^16.3.1", "localforage": "^1.10.0", "match-sorter": "^6.3.1", diff --git a/src/main.jsx b/src/main.jsx index 3a4f3d4..95978ba 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -7,6 +7,7 @@ import { CreateDiary } from "./pages/CreateDiary"; import { CreateANote } from "./pages/CreateANote"; import { Profile } from "./pages/Profile"; import { DiaryPage } from "./pages/DiaryPage"; +import { RegDiaryPage } from "./pages/RegDiaryPage"; import "./index.css"; const container = document.getElementById("root"); @@ -22,6 +23,7 @@ root.render( } /> } /> } /> + } /> ); diff --git a/src/pages/CreateANote.jsx b/src/pages/CreateANote.jsx index ba0cc15..17eec1a 100644 --- a/src/pages/CreateANote.jsx +++ b/src/pages/CreateANote.jsx @@ -1,9 +1,7 @@ -import React, { Component } from "react"; import { Header } from "../layout/Header"; import { Section } from "../layout/Section"; import { Footer } from "../layout/Footer"; -import { Link, useNavigate } from "react-router-dom"; -import { userInfoStore } from "../stores/userInfo"; +import { useNavigate } from "react-router-dom"; import ReactQuill from "react-quill"; import "react-quill/dist/quill.snow.css"; import api from "../services/api"; @@ -23,11 +21,9 @@ import { diarioStore } from "../stores/diarioStore"; export const CreateANote = () => { const title = useRef({}); - const content = useRef({}); const [status, setStatus] = useState("Privado"); const [value, setValue] = useState(""); const [isValidFields, setIsValidFields] = useState(false); - const userInfoState = userInfoStore((state) => state.userInfo); const diarioId = diarioStore((state) => state.diarioId); const theme = useTheme(); @@ -66,10 +62,9 @@ export const CreateANote = () => { api .post("/registrosdiario/registroDiario", { tituloRegistro: title.current.value, - conteudoRegistro: content.current.value, + conteudoRegistro: value, privacidade: status, - userId: userInfoState.id, - diarioAssociadoID: diarioId, + diarioId: diarioId, }) .then((response) => { console.log(response); @@ -78,7 +73,7 @@ export const CreateANote = () => { .catch((err) => { console.error("ops! ocorreu um erro" + err); }); - // console.log(payload); + console.log(payload); }; console.log("diarioId: ", diarioId); diff --git a/src/pages/DiaryPage.jsx b/src/pages/DiaryPage.jsx index 603548a..05c0ce5 100644 --- a/src/pages/DiaryPage.jsx +++ b/src/pages/DiaryPage.jsx @@ -9,67 +9,26 @@ import Box from "@mui/material/Box"; 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"; +import { + ADDbuttonStyle, + EDITbuttonStyle, + DELETEbuttonStyle, + diarios, + regDiarios, + diarioTitulo, + diarioStyle, +} from "./DiaryPageStyles"; export const DiaryPage = () => { const { param1 } = useParams(); const [diario, setDiario] = useState(null); const [notes, setNotes] = useState([]); - 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: "50px", - right: "20px", - color: "white", - }; - - const diarios = { - // backgroundColor: "yellow", - display: "flex", - flexWrap: "wrap", - gap: "20px", - padding: "40px", - justifyContent: "center", - }; - - const regDiarios = { - // backgroundColor: "yellow", - display: "flex", - flexWrap: "wrap", - gap: "20px", - padding: "40px", - justifyContent: "center", - }; - - const diarioTitulo = { - fontSize: "14px", - fontFamily: "Arial", - color: "white", - fontWeight: "bold", - textAlign: "center", - padding: "5px", - }; - const submitDeleteDiary = () => { const shouldDelete = window.confirm( "Are you sure you want to delete this diary?" @@ -101,24 +60,26 @@ export const DiaryPage = () => { }, [param1]); useEffect(() => { - let storageUserId = localStorage.getItem("userId"); - api .get(`registrosdiario/registrosDiario?diarioId=${param1}`) .then((response) => { console.log(response); + setNotes(response.data); }) .catch((err) => { console.error("ops! ocorreu um erro" + err); }); - }, [storageUserId]); + }, [param1]); const formatDate = (dateString) => { const date = new Date(dateString); return format(date, "yyyy-MM-dd"); }; - // console.log("Diario ID:"); - // console.log(diarioId); + + const navigateWithParams = (regDiarioId) => { + navigate(`/reg_diary/${regDiarioId}`); + }; + return (
@@ -140,26 +101,15 @@ export const DiaryPage = () => { )}
- {" "} - {/* erro a partir daq */} {notes.map((elements, index) => (
{ navigateWithParams(elements?.id); }} >

{elements?.tituloRegistro}

-

- {elements?.conteudoRegistro} -

{ + const { param1 } = useParams(); + const [note, setNote] = useState(null); + + const navigate = useNavigate(); + + const submitDeleteNote = () => { + const shouldDelete = window.confirm( + "Are you sure you want to delete this note?" + ); + + if (shouldDelete) { + api + .delete(`registrosdiario/registroDiario/${param1}`) + .then((response) => { + console.log(response); + navigate(`/diary`); + }) + .catch((err) => { + console.error("ops! ocorreu um erro " + err); + }); + } + }; + + useEffect(() => { + const fetchData = async () => { + try { + const response = await api.get( + `/registrosdiario/registroDiario/${param1}` + ); + setNote(response.data); + } catch (error) { + console.error("Erro ao buscar dados:", error); + } + }; + fetchData(); + }, [param1]); + + const formatDate = (dateString) => { + const date = new Date(dateString); + return format(date, "yyyy-MM-dd"); + }; + + return ( +

+
+
+
+ {note && ( +
+

+

Nota: {note?.tituloRegistro}

+

+
+

+

Data de criação: {formatDate(note?.createdAt)}

+

+

+

Última atualização: {formatDate(note?.updatedAt)}

+

+
+
+ )} +
+ :not(style)": { m: 1 } }}> + + + + + submitDeleteNote()} + sx={{ "& > :not(style)": { m: 1 } }} + > + + + + +
+ +
+ ); +};