diff --git a/src/Components/Note/Note.tsx b/src/Components/Note/Note.tsx index f86bbc8..376170a 100644 --- a/src/Components/Note/Note.tsx +++ b/src/Components/Note/Note.tsx @@ -1,10 +1,12 @@ import * as React from "react"; import styles from "../../styles"; import { Button } from "@mui/material"; +import axios from "axios"; export interface props { title: string; content: string; + id: number; } export default function Note(props: props) { return ( @@ -18,7 +20,7 @@ export default function Note(props: props) { style={styles.button_remove} variant="contained" onClick={() => { - console.log("foo"); + axios.delete("http://localhost:8000/notes/" + props.id + "/"); }} > Remove Note diff --git a/src/Components/NoteMapper/NoteMapper.tsx b/src/Components/NoteMapper/NoteMapper.tsx index 6ce0630..e2ec199 100644 --- a/src/Components/NoteMapper/NoteMapper.tsx +++ b/src/Components/NoteMapper/NoteMapper.tsx @@ -11,7 +11,7 @@ export default function NoteMapper() { const [notes, setNotes] = useState([]); const [error, setError] = useState(false); const [errormessage, seterrormessage] = useState(""); - useEffect(() => { + function server_get() { axios .get("http://localhost:8000/notes/") .then((res) => { @@ -22,6 +22,13 @@ export default function NoteMapper() { setError(true); seterrormessage(err); }); + } + useEffect(() => { + server_get(); + const interval = setInterval(() => { + server_get(); + }, 1000); + return () => clearInterval(interval); }, []); if (error) { return ( @@ -50,9 +57,16 @@ export default function NoteMapper() { } return ( <> - {notes.map((note: { title: string; content: string }, i) => { + {notes.map((note: { title: string; content: string; id: number }, i) => { console.log(note); - return ; + return ( + + ); })}