Polished code and updateed url

src/Components/Note/Note.tsx

@@ -20,7 +20,9 @@ export default function Note(props: props) {
           style={styles.button_remove}
           variant="contained"
           onClick={() => {
-            axios.delete("http://localhost:8000/notes/" + props.id + "/");
+            axios.delete(
+              "http://localhost:8000/api/v1/notes/" + props.id + "/"
+            );
           }}
         >
           Remove Note

src/Components/NoteMapper/NoteMapper.tsx

@@ -10,17 +10,16 @@ export default function NoteMapper() {
   const navigate = useNavigate();
   const [notes, setNotes] = useState([]);
   const [error, setError] = useState(false);
-  const [errormessage, seterrormessage] = useState("");
   function server_get() {
     axios
-      .get("http://localhost:8000/notes/")
+      .get("http://localhost:8000/api/v1/notes/", { timeout: 50 })
       .then((res) => {
         console.log("Server Response", res.data);
+        setError(false);
         setNotes(res.data);
       })
       .catch((err) => {
         setError(true);
-        seterrormessage(err);
       });
   }
   useEffect(() => {
@@ -33,8 +32,7 @@ export default function NoteMapper() {
   if (error) {
     return (
       <div style={styles.note}>
-        <p style={styles.text_medium}>404</p>
-        <p style={styles.text_medium}>{errormessage}</p>
+        <p style={styles.text_medium}>Error contacting Notes server</p>
       </div>
     );
   }
@@ -68,7 +66,6 @@ export default function NoteMapper() {
           />
         );
       })}
-
       <Button
         style={styles.button_add}
         variant="contained"

src/Routes/Home/Home.tsx

@@ -1,24 +1,10 @@
 import styles from "../../styles";
-import { Button } from "@mui/material";
-
-import Note from "../../Components/Note/Note";
 import Header from "../../Components/Header/Header";
-import { useEffect, useState } from "react";
 import NoteMapper from "../../Components/NoteMapper/NoteMapper";
 export default function Home() {
-  const [notes, setNotes] = useState();
-  const notes_sample = [
-    { title: "note1", content: "notes are great!" },
-    { title: "note2", content: "notes are awesome!" },
-  ];
   return (
     <div style={styles.background}>
       <Header />
-      {/*}
-      {notes_sample.map((note) => (
-        <Note title={note.title} content={note.content} />
-      ))}
-      {*/}
       <NoteMapper />
     </div>
   );

src/Routes/NewNote/NewNote.tsx

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