in progress: db support for tandem add to user table on supabase registration

client/src/components/User/SettingsWidgets/UpdateUserInfo.tsx

@@ -0,0 +1,34 @@
+import { useState } from "react";
+import Button from "../../_ui/Button/Button";
+import Card from "../../_ui/Card/Card"
+
+const UpdateUserInfo = () => {
+    const [input, setInput] = useState({first: "", last: ""});
+
+    const handleUpdate = () => {
+        if (!input.first || !input.last) return;
+        
+    }
+
+    return (
+        <Card>
+            <h1>Update User Information</h1>
+
+            <form>
+                <div>
+                    <label htmlFor="first-name">First Name: </label>
+                    <input onChange={(e) => setInput({...input, first: e.target.value})} type="text" autoComplete="First Name"></input>
+                </div>
+
+                <div>
+                    <label htmlFor="last-name">Last Name: </label>
+                    <input onChange={(e) => setInput({...input, last: e.target.value})} type="text" autoComplete="Last Name"></input>
+                </div>
+            </form>
+
+            <Button onClick={handleUpdate}>Update</Button>
+        </Card>
+    )
+}
+
+export default UpdateUserInfo;

client/src/components/User/UserProfile.tsx

@@ -16,7 +16,7 @@ export default function UserProfile() {
             <div className="user-profile-options">
                 <Button onClick={() => navigate('/cart')}>View my Cart</Button>
                 <Button onClick={() => navigate('/orders')}>View my Order History</Button>
-                <Button onClick={() => {}}>Manage Account Settings</Button>
+                <Button onClick={() => navigate('/user-settings')}>Manage Account Settings</Button>
             </div>
         </Page>
     )

client/src/components/User/UserSettings.tsx

@@ -1,3 +1,18 @@
+import { useEffect, useState } from "react";
+import { useSupabase } from "../../supabase/SupabaseContext"
+import Page from "../_ui/Page/Page";
+import UpdateUserInfo from "./SettingsWidgets/UpdateUserInfo";
+
 export default function UserSettings() {
-    return <h1>User Settings!</h1>
+    const supabase = useSupabase();
+    const [activeSections, setActiveSections] = useState({
+        userInfo: false
+    });
+
+    return (
+        <Page>
+            <h1>User Settings!</h1>
+            { activeSections.userInfo && <UpdateUserInfo /> }
+        </Page>
+    )
 }

client/src/util/apiUtils.ts

@@ -9,6 +9,17 @@ export const getByProductId = async (id: string) => {
     return response;
 }
 
+export const updateUser = async (id: string, body: object) => {
+    const response = await fetch(`https://mikayla-spice-market-api.herokuapp.com/users/${id}`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify(body)
+    });
+    return response;
+}
+
 // order functions
 export const getOrder = async () => {
     return;

client/src/util/authHelpers.ts

@@ -1,4 +1,5 @@
 import { SupabaseClient } from "@supabase/supabase-js";
+import { updateUser } from "./apiUtils";
 
 export interface FormInput {
     email: string
@@ -22,7 +23,6 @@ export const handleRegister = async (supabase: SupabaseClient | undefined, input
     if (email && password) {
         const { user, session, error} = await supabase.auth.signUp({ email, password });
         if (error) throw error;
-        console.log(user, session);
     }
 }