Added backend fetching and posting

src/Components/Note/NoteMapper/NoteMapper.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import styles from "../../../styles";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import Note from "../Note";
+import { Button } from "@mui/material";
+
+export default function NoteMapper() {
+  const navigate = useNavigate();
+  const [notes, setNotes] = useState([]);
+  const [error, setError] = useState(false);
+  const [errormessage, seterrormessage] = useState("");
+  useEffect(() => {
+    fetch("localhost:8000/notes")
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data);
+        setNotes(data);
+      })
+      .catch((err) => {
+        setError(true);
+        console.log(err.message);
+        seterrormessage(err.message);
+      });
+  }, []);
+  if (error) {
+    return (
+      <div style={styles.note}>
+        <p style={styles.text_medium}>404</p>
+        <p style={styles.text_medium}>{errormessage}</p>
+      </div>
+    );
+  }
+  if (!notes) {
+    <div style={styles.note}>
+      <p style={styles.text_medium}>No notes exist yet</p>
+      <p style={styles.text_medium}>Make one!</p>
+      <Button
+        style={styles.button_add}
+        variant="contained"
+        onClick={() => {
+          navigate("/NewNote");
+        }}
+      >
+        Add Note
+      </Button>
+    </div>;
+  }
+  return (
+    <>
+      {notes.map((note: { title: string; content: string }) => (
+        <Note title={note.title} content={note.content} />
+      ))}
+      <Button
+        style={styles.button_add}
+        variant="contained"
+        onClick={() => {
+          navigate("/NewNote");
+        }}
+      >
+        Add Note
+      </Button>
+    </>
+  );
+}

src/Routes/Home/Home.tsx

@@ -1,11 +1,13 @@
 import styles from "../../styles";
 import { Button } from "@mui/material";
-import { useNavigate } from "react-router-dom";
+
 import Note from "../../Components/Note/Note";
 import Header from "../../Components/Note/Header/Header";
+import { useEffect, useState } from "react";
+import NoteMapper from "../../Components/Note/NoteMapper/NoteMapper";
 
 export default function Home() {
-  const navigate = useNavigate();
+  const [notes, setNotes] = useState();
   const notes_sample = [
     { title: "note1", content: "notes are great!" },
     { title: "note2", content: "notes are awesome!" },
@@ -13,20 +15,12 @@ export default function Home() {
   return (
     <div style={styles.background}>
       <Header />
+      {/*}
       {notes_sample.map((note) => (
         <Note title={note.title} content={note.content} />
       ))}
-      <div style={styles.flex_row}>
-        <Button
-          style={styles.button_add}
-          variant="contained"
-          onClick={() => {
-            navigate("/NewNote");
-          }}
-        >
-          Add Note
-        </Button>
-      </div>
+      {*/}
+      <NoteMapper />
     </div>
   );
 }

src/Routes/NewNote/NewNote.tsx

@@ -1,25 +1,52 @@
 import styles from "../../styles";
 import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
+import { useState } from "react";
 import Header from "../../Components/Note/Header/Header";
+import axios from "axios";
+import { title } from "process";
 
+export interface input {
+  e: React.ChangeEvent;
+}
 export default function NewNote() {
   const navigate = useNavigate();
+  const [note, setNote] = useState({
+    title: "",
+    content: "",
+  });
   return (
     <div style={styles.background}>
       <Header />
       <p style={styles.text_medium}>New Note</p>
       <div style={styles.flex_column}>
         <div style={styles.note}>
-          <input style={styles.input_notetitle} maxLength={20} />
+          <div style={styles.flex_row}>
+            <p style={styles.text_small}>Title:&nbsp;</p>
+            <input
+              style={styles.input_notetitle}
+              onChange={(e: { target: { value: any } }) => {
+                setNote({ ...note, title: e.target.value });
+              }}
+              maxLength={20}
+            />
+          </div>
           <div style={styles.note_content}>
-            <p style={styles.text_small}>Content</p>
-            <textarea style={styles.input_notebody} />
+            <textarea
+              style={styles.input_notebody}
+              onChange={(e: { target: { value: any } }) => {
+                setNote({ ...note, content: e.target.value });
+              }}
+            />
           </div>
           <Button
             style={styles.button_add}
             variant="contained"
-            onClick={() => {
+            onClick={async () => {
+              axios.post("https://localhost:8000/notes", {
+                title: note.content,
+                content: note.content,
+              });
               console.log("foo");
               navigate("/");
             }}

src/styles.tsx

@@ -44,9 +44,9 @@ const styles: { [key: string]: React.CSSProperties } = {
   },
   input_notetitle: {
     alignSelf: "center",
-    backgroundColor: "#004264",
+    backgroundColor: "#001018",
     borderRadius: 4,
-    border: "none",
+    borderColor: "#00293e",
     outline: "none",
     color: "white",
     height: "3vh",
@@ -61,8 +61,9 @@ const styles: { [key: string]: React.CSSProperties } = {
     border: "none",
     outline: "none",
     color: "white",
-    width: "90%",
-    height: "20vh",
+    height: "100%",
+    width: "100%",
+    maxHeight: "100vh",
     fontSize: "2vh",
     fontWeight: "bold",
   },