keannu125/React-NotesApp
1
0
Fork 0
mirror of https://github.com/lemeow125/React-NotesApp.git synced 2024-11-17 06:29:28 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Made remove button functional and added auto refresh

Browse source
This commit is contained in:
keannu125 2023-02-23 23:03:24 +08:00
parent df0326a768
commit 26d6b64c4b
2 changed files with 20 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/Components/Note/Note.tsx
View file

@ -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

20
src/Components/NoteMapper/NoteMapper.tsx
View file

@ -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 <Note key={i} title={note.title} content={note.content} />;
return (
<Note
id={note.id}
key={i}
title={note.title}
content={note.content}
/>
);
})}
<Button