userInfo component includes avatar; add default border image

components/borderSelect.js

@@ -0,0 +1,3 @@
+export default function BorderSelect() {
+    
+}

components/userInfo.js

@@ -1,19 +1,28 @@
 import { useSession, signIn, signOut } from "next-auth/react";
+import { useEffect, useState } from "react";
 import styles from "../styles/Components.module.css";
 
-export async function getServerSideProps(context) {
-  return {
-    props: {
-      borderInfo,
-    },
-  };
-}
-
 export default function UserInfo(borderInfo) {
   const { data: session } = useSession();
+  const [isLoading, setLoading] = useState(false);
+  const [borderData, setBorderData] = useState(undefined);
+
+  useEffect(async () => {
+    setLoading(true);
+    const res = await fetch('api/user/border/@me');
+    const data = await res.json();
+    setBorderData(data);
+    setLoading(false);
+  }, []);
+
   return (
+    <div>{
+      isLoading ?
+        <p>Loading...</p>
+        :
+        <div>
           <p className={styles.description}>
-      {session ? `Signed in as ${session.user.name}` : "Not signed in"}
+            {session ? `Signed in as ${session.user.name} (${borderData.discordId})` : "Not signed in"}
             <br />
             {session ? (
               <button onClick={() => signOut()}>Sign Out</button>
@@ -21,5 +30,16 @@ export default function UserInfo(borderInfo) {
               <button onClick={() => signIn()}>Sign In</button>
             )}
           </p>
+          {
+            !!borderData ?
+              (<div>
+                <img src={session.user.image} />
+                <img src={`/api/border/${borderData.imageId ?? '0'}`} />
+              </div>)
+              : undefined
+          }
+        </div>
+    }
+    </div>
   );
 }

pages/api/border/[id].js

@@ -8,9 +8,7 @@ export default function handler(req, res) {
     getBorderById(id).then((result) => {
       const imageName = result?.imageName ?? "default.png";
   
-      console.log(result, imageName);
-  
-      return res.status(200).json(result);
-    //   return res.redirect(301, `/images/${imageName}`)
+    //   return res.status(200).json(result);
+      return res.redirect(301, `/images/${imageName}`)
     });
   }