From 7a3190ad07ded7cc754c4cd08b222104038d0b77 Mon Sep 17 00:00:00 2001
From: carraya <arrayacj@gmail.com>
Date: Sun, 17 Apr 2022 02:02:22 -0400
Subject: [PATCH] feat(client): add profile and donation page

---
 client/src/common/components/Auth.js | 53 ++++++++++++++++++++++++++--
 client/src/pages/donate.js           | 32 +++++++++++++++++
 client/src/pages/index.js            | 10 +++---
 client/src/pages/profile.js          | 37 +++++++++++++++++++
 4 files changed, 126 insertions(+), 6 deletions(-)
 create mode 100644 client/src/pages/donate.js
 create mode 100644 client/src/pages/profile.js

diff --git a/client/src/common/components/Auth.js b/client/src/common/components/Auth.js
index ded1042..c03b10b 100644
--- a/client/src/common/components/Auth.js
+++ b/client/src/common/components/Auth.js
@@ -7,7 +7,29 @@ export default function AuthComponent() {
   const router = useRouter();
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
+  const [registerUsername, setRegisterUsername] = useState("");
+  const [registerPassword, setRegisterPassword] = useState("");
 
+  async function handleRegisterSubmit(e) {
+    try {
+      const requestOptions = {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          username: registerUsername,
+          password: registerPassword,
+        }),
+      };
+      const response = await fetch(
+        "http://localhost:8000/api/profile/create",
+        requestOptions
+      );
+      const dataa = await response.json();
+      console.log(dataa);
+    } catch (error) {
+      console.log(error);
+    }
+  }
   async function handleSubmit(e) {
     try {
       console.log(username);
@@ -29,6 +51,18 @@ export default function AuthComponent() {
       console.log(data);
 
       localStorage.setItem("token", data.access);
+      localStorage.setItem("username", username);
+
+      // const reqOps = {
+      //   method: "GET",
+      //   headers: {
+      //     "Content-Type": "application/json",
+      //     Authorization: `Bearer ${data.access}`,
+      //   },
+      // };
+      // const resp = await fetch("http://localhost:8000/api/foundation/", reqOps);
+      // const data2 = await resp.json();
+      // console.log(data2);
 
       router.push("/");
     } catch (error) {
@@ -38,9 +72,9 @@ export default function AuthComponent() {
 
   return (
     <>
-      <h1>Register</h1>
+      <h1>Login</h1>
       <input
-        placeholder="Email"
+        placeholder="Username"
         onChange={(e) => setUsername(e.target.value)}
       />
       <input
@@ -49,6 +83,21 @@ export default function AuthComponent() {
         onChange={(e) => setPassword(e.target.value)}
       />
       <button onClick={handleSubmit}>Submit</button>
+
+      <br />
+      <h1>OR</h1>
+      <br />
+      <h1>Register</h1>
+      <input
+        placeholder="Username"
+        onChange={(e) => setRegisterUsername(e.target.value)}
+      />
+      <input
+        placeholder="Password"
+        type="password"
+        onChange={(e) => setRegisterPassword(e.target.value)}
+      />
+      <button onClick={handleRegisterSubmit}>Submit</button>
     </>
   );
 }
diff --git a/client/src/pages/donate.js b/client/src/pages/donate.js
new file mode 100644
index 0000000..c6ff62e
--- /dev/null
+++ b/client/src/pages/donate.js
@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+export default function DonatePage() {
+  const [foundation, setFoundation] = useState("");
+  useEffect(() => {
+    async function getData() {
+      const reqOps = {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
+      };
+      const resp = await fetch("http://localhost:8000/api/foundation/", reqOps);
+      const data = await resp.json();
+      // console.log(data);
+      setFoundation(JSON.stringify(data));
+    }
+    // const d = ;
+    getData();
+    console.log(foundation);
+    // setFoundation(d);
+  }, []);
+  return (
+    <div>
+      <h1>This is the donate page.</h1>
+      <p>This page is under construction. Please check back later.</p>
+      {/* {foundation.map((item) => (
+        <h1>{item.name}</h1>
+      ))} */}
+    </div>
+  );
+}
diff --git a/client/src/pages/index.js b/client/src/pages/index.js
index b526aa0..a30ff8c 100644
--- a/client/src/pages/index.js
+++ b/client/src/pages/index.js
@@ -1,11 +1,13 @@
-import { useAuth } from "../common/lib/firebase/authContext";
+// import { useAuth } from "../common/lib/firebase/authContext";
 export default function HomePage() {
-  const { currentUser } = useAuth();
+  // const { currentUser } = useAuth();
   return (
     <div>
       <h1>This is HackTJ 2022!</h1>
-      {currentUser ? (
-        <p>You're logged in! Current email: {currentUser.email}</p>
+      {localStorage.getItem("username") ? (
+        <p>
+          You're logged in! Current username: {localStorage.getItem("username")}
+        </p>
       ) : (
         <p>Not logged in</p>
       )}
diff --git a/client/src/pages/profile.js b/client/src/pages/profile.js
new file mode 100644
index 0000000..7dc1343
--- /dev/null
+++ b/client/src/pages/profile.js
@@ -0,0 +1,37 @@
+import { useState } from "react";
+export default function Profile() {
+  const [wallet, setWallet] = useState("");
+  async function handleSubmit(e) {
+    try {
+      const reqOps = {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${localStorage.getItem("token")}`, //prettier-ignore
+        },
+        body: {
+          "address": wallet, //prettier-ignore
+        },
+      };
+      const resp = await fetch(
+        "http://localhost:8000/api/profile/add_wallet",
+        reqOps
+      );
+      const data = await resp.json();
+      console.log(data);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+  return (
+    <div>
+      <h1>Profile</h1>
+      <h2>Add Wallet</h2>
+      <input
+        placeholder="Address"
+        onChange={(e) => setWallet(e.target.value)}
+      />
+      <button onClick={handleSubmit}>Submit</button>
+    </div>
+  );
+}