merge

components/select.js

@@ -0,0 +1,5 @@
+export default function Select(props) {
+  const { data, onSelect } = props;
+  console.log(data);
+  return <div></div>;
+}

components/userInfo.js

@@ -2,44 +2,29 @@ import { useSession, signIn, signOut } from "next-auth/react";
 import { useEffect, useState } from "react";
 import styles from "../styles/Components.module.css";
 
-export default function UserInfo(borderInfo) {
+export default function UserInfo() {
   const { data: session } = useSession();
-  const [isLoading, setLoading] = useState(false);
-  const [borderData, setBorderData] = useState(undefined);
+  const [borderData, setBorderData] = useState(null);
 
-  useEffect(async () => {
-    setLoading(true);
-    const res = await fetch('api/user/border/@me');
-    const data = await res.json();
-    setBorderData(data);
-    setLoading(false);
+  useEffect(() => {
+    fetch("api/user/border/@me")
+      .then((res) => res.json())
+      .then((data) => setBorderData(data));
   }, []);
 
   return (
-    <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>
+      <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>
     </div>
   );
 }