userInfo component includes avatar; add default border image

components/borderSelect.js

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

components/userInfo.js

@@ -1,25 +1,45 @@
 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 (
-    <p className={styles.description}>
-      {session ? `Signed in as ${session.user.name}` : "Not signed in"}
-      <br />
-      {session ? (
-        <button onClick={() => signOut()}>Sign Out</button>
-      ) : (
-        <button onClick={() => signIn()}>Sign In</button>
-      )}
-    </p>
+    <div>{
+      isLoading ?
+        <p>Loading...</p>
+        :
+        <div>
+          <p className={styles.description}>
+            {session ? `Signed in as ${session.user.name} (${borderData.discordId})` : "Not signed in"}
+            <br />
+            {session ? (
+              <button onClick={() => signOut()}>Sign Out</button>
+            ) : (
+              <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

@@ -7,10 +7,8 @@ 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}`)
     });
   }