Added backend fetching and posting

package-lock.json

@@ -19,6 +19,7 @@
         "@types/node": "^16.18.12",
         "@types/react": "^18.0.28",
         "@types/react-dom": "^18.0.11",
+        "axios": "^1.3.3",
         "localforage": "^1.10.0",
         "match-sorter": "^6.3.1",
         "react": "^18.2.0",
@@ -5262,6 +5263,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.3.tgz",
+      "integrity": "sha512-eYq77dYIFS77AQlhzEL937yUBSepBfPIe8FcgEDN35vMNZKMrs81pgnyrQpwfy4NF4b4XWX1Zgx7yX+25w8QJA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
@@ -14353,6 +14377,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",

package.json

@@ -14,6 +14,7 @@
     "@types/node": "^16.18.12",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "axios": "^1.3.3",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.1",
     "react": "^18.2.0",

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
+      <NoteMapper />
-          style={styles.button_add}
-          variant="contained"
-          onClick={() => {
-            navigate("/NewNote");
-          }}
-        >
-          Add Note
-        </Button>
-      </div>
     </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
-            <textarea style={styles.input_notebody} />
+              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: "100%",
-    height: "20vh",
+    width: "100%",
+    maxHeight: "100vh",
     fontSize: "2vh",
     fontWeight: "bold",
   },