From f09d7f1eb26dc6a585e498972f25b488384efb5b Mon Sep 17 00:00:00 2001
From: cspark <git@cspark.dev>
Date: Tue, 16 Apr 2024 17:38:12 +0100
Subject: [PATCH] Implement local storage handling with react hooks and also
 API requests with fetch

---
 src/App.tsx                       | 12 ++++++++++++
 src/components/useLocalStorage.ts | 18 ++++++++++++++++++
 src/pages/Login.tsx               | 13 ++++++++++++-
 3 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 src/components/useLocalStorage.ts

diff --git a/src/App.tsx b/src/App.tsx
index f568c0e..eb4d1ee 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,7 +8,19 @@ import Home from "./pages/Home.tsx";
 import Login from "./pages/Login.tsx";
 import About from "./pages/About.tsx";
 
+import useLocalStorage from "./components/useLocalStorage.ts";
+
 export default function App() {
+  const [usernameValue, setUsernameValue, deleteUsernameValue] =
+    useLocalStorage("username");
+
+  if (localStorage.getItem("username") === null) {
+    console.log("Username does not exist, creating!");
+  } else {
+    console.log("Username does exist!");
+    console.log(usernameValue);
+  }
+
   return (
     <>
       <BrowserRouter>
diff --git a/src/components/useLocalStorage.ts b/src/components/useLocalStorage.ts
new file mode 100644
index 0000000..54b0332
--- /dev/null
+++ b/src/components/useLocalStorage.ts
@@ -0,0 +1,18 @@
+import { useState, useEffect } from "react";
+
+export default function useLocalStorage(itemName: str) {
+  const getItemName = localStorage.getItem(itemName);
+  const [itemValue, setItemValue] = useState(
+    getItemName === null ? "" : getItemName,
+  );
+
+  useEffect(() => {
+    localStorage.setItem(itemName, itemValue);
+  }, [itemValue]);
+
+  const deleteItemValue = () => {
+    localStorage.removeItem(itemName);
+  };
+
+  return [itemValue, setItemValue, deleteItemValue];
+}
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index d65a993..9f1fbb6 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -14,7 +14,18 @@ export default function Login() {
     formEvent.preventDefault();
 
     const formData = new FormData(formEvent.target);
-    console.log(formData);
+
+    fetch("http://127.0.0.1:8000/api", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(Object.fromEntries(formData)),
+    })
+      .then((response) => response.json())
+      .then((responseParsed: Object) => {
+        console.log(responseParsed);
+      });
   }
 
   return (