added support for user info in lib and settings

pages/_app.js

@@ -48,8 +48,10 @@ function MyApp({ Component, pageProps }) {
             if (router.route === "/authenticate") {
                 router.push("/library");
             }
+        } else {
+            if (router.route !== "/authenticate") router.push("/authenticate");
         }
-    }, [router.pathname, user, router]);
+    }, [user, router]);
 
     const handleAuthSession = async (event, session) => {
         await fetch("/api/auth", {

pages/library.js

@@ -6,7 +6,8 @@ import { BookDetails } from "../components/BookDetails";
 import { useRouter } from "next/router";
 import { NextSeo } from "next-seo";
 import useSWR from "swr";
-import { useUser } from "@clerk/nextjs";
+import { supabaseClient } from "../lib/client";
+import { useEffect, useState } from "react";
 
 const fetcher = (...args) => fetch(...args).then((res) => res.json());
 
@@ -17,6 +18,23 @@ function Library() {
         `https://www.googleapis.com/books/v1/volumes?q=George R R Martin&maxResults=15`,
         fetcher
     );
+    const [name, setName] = useState("");
+
+    const user = supabaseClient.auth.user();
+
+    useEffect(() => {
+        if (user) {
+            supabaseClient
+                .from("profiles")
+                .select("*")
+                .eq("id", user.id)
+                .then(({ data, error }) => {
+                    if (!error) {
+                        setName(data[0].first_name || "");
+                    }
+                });
+        }
+    }, [user]);
 
     React.useEffect(() => {
         if (bookData) setData(bookData.items);
@@ -32,7 +50,7 @@ function Library() {
             <div className="flex flex-col flex-1 justify-start">
                 <div className="flex flex-row justify-between items-center h-16 content-center my-7 px-5">
                     <Text fontSize="2xl" fontWeight={"extrabold"}>
-                        Welcome Alyssa
+                        Welcome {name}
                     </Text>
                     <Avatar
                         size="sm"

pages/settings.js

@@ -11,17 +11,36 @@ import {
 import { IoArrowBack as ArrowBack } from "react-icons/io5";
 import { useRouter } from "next/router";
 import { NextSeo } from "next-seo";
-import { useClerk } from "@clerk/clerk-react";
 import { supabaseClient } from "../lib/client";
+import { useEffect, useState } from "react";
 
 export default function Settings() {
     const router = useRouter();
+    const [name, setName] = useState("");
+    const [email, setEmail] = useState("");
+
+    const user = supabaseClient.auth.user();
 
     const values = {
         name: "Alyssa",
         email: "[email protected]",
     };
 
+    useEffect(() => {
+        if (user) {
+            supabaseClient
+                .from("profiles")
+                .select("*")
+                .eq("id", user.id)
+                .then(({ data, error }) => {
+                    if (!error) {
+                        setName(data[0].first_name || "");
+                        setEmail(data[0].email || "");
+                    }
+                });
+        }
+    }, [user]);
+
     return (
         <div className="flex h-full w-screen">
             <NextSeo
@@ -56,7 +75,7 @@ export default function Settings() {
                                 type={"name"}
                                 placeholder="Name"
                                 readOnly
-                                value={values.name}
+                                value={name}
                             />
                         </InputGroup>
                     </FormControl>
@@ -69,7 +88,7 @@ export default function Settings() {
                                 type={"email"}
                                 placeholder="Email"
                                 readOnly
-                                value={values.email}
+                                value={email}
                             />
                         </InputGroup>
                     </FormControl>

pages/wishlist.js

@@ -6,6 +6,8 @@ import { BookDetails } from "../components/BookDetails";
 import { useRouter } from "next/router";
 import { NextSeo } from "next-seo";
 import useSWR from "swr";
+import { supabaseClient } from "../lib/client";
+import { useEffect, useState } from "react";
 
 const fetcher = (...args) => fetch(...args).then((res) => res.json());