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

Fixed empty notes prompt not working

Browse source
This commit is contained in:
keannu125 2023-02-23 22:29:47 +08:00
parent ee9ebcb9d9
commit 3f5fb0f79e
2 changed files with 28 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/Components/Note/NoteMapper/NoteMapper.tsx
View file

@ -4,23 +4,22 @@ import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import Note from "../Note"; import Note from "../Note";
import { Button } from "@mui/material"; import { Button } from "@mui/material";
import axios from "axios";
export default function NoteMapper() { export default function NoteMapper() {
const navigate = useNavigate(); const navigate = useNavigate();
const [notes, setNotes] = useState([]); const [notes, setNotes] = useState([{ title: "", content: "" }]);
const [error, setError] = useState(false); const [error, setError] = useState(false);
const [errormessage, seterrormessage] = useState(""); const [errormessage, seterrormessage] = useState("");
useEffect(() => { useEffect(() => {
fetch("localhost:8000/notes") axios
.then((res) => res.json()) .get("http://localhost:8000/notes/")
.then((data) => { .then((res) => {
console.log(data); setNotes(res.data);
setNotes(data);
}) })
.catch((err) => { .catch((err) => {
setError(true); setError(true);
console.log(err.message); seterrormessage(err);
seterrormessage(err.message);
}); });
}, []); }, []);
if (error) { if (error) {
@ -31,7 +30,8 @@ export default function NoteMapper() {
</div> </div>
); );
} }
if (!notes) { if (notes.length === 0) {
return (
<div style={styles.note}> <div style={styles.note}>
<p style={styles.text_medium}>No notes exist yet</p> <p style={styles.text_medium}>No notes exist yet</p>
<p style={styles.text_medium}>Make one!</p> <p style={styles.text_medium}>Make one!</p>
@ -44,13 +44,15 @@ export default function NoteMapper() {
> >
Add Note Add Note
</Button> </Button>
</div>; </div>
);
} }
return ( return (
<> <>
{notes.map((note: { title: string; content: string }) => ( {notes.map((note: { title: string; content: string }, i) => {
<Note title={note.title} content={note.content} /> return <Note key={i} title={note.title} content={note.content} />;
))} })}
<Button <Button
style={styles.button_add} style={styles.button_add}
variant="contained" variant="contained"

2
src/Routes/NewNote/NewNote.tsx
View file

@ -43,7 +43,7 @@ export default function NewNote() {
style={styles.button_add} style={styles.button_add}
variant="contained" variant="contained"
onClick={async () => { onClick={async () => {
axios.post("https://localhost:8000/notes", { axios.post("http://localhost:8000/notes/", {
title: note.content, title: note.content,
content: note.content, content: note.content,
}); });