From 01e778edad8316c30fce0f6e434f4dd4bc6e5808 Mon Sep 17 00:00:00 2001
From: Jane Petrovna <jane@j4.pm>
Date: Sat, 16 Apr 2022 18:29:21 -0400
Subject: [PATCH] merge

---
 components/select.js     |  5 ++++
 components/userInfo.js   | 51 ++++++++++++++--------------------------
 lib/borders.js           | 10 +++++---
 pages/api/border/[id].js | 16 ++++---------
 pages/api/border/all.js  |  7 ++++++
 pages/index.js           | 16 +++++++++++--
 6 files changed, 56 insertions(+), 49 deletions(-)
 create mode 100644 components/select.js
 create mode 100644 pages/api/border/all.js

diff --git a/components/select.js b/components/select.js
new file mode 100644
index 0000000..5be081b
--- /dev/null
+++ b/components/select.js
@@ -0,0 +1,5 @@
+export default function Select(props) {
+  const { data, onSelect } = props;
+  console.log(data);
+  return <div></div>;
+}
diff --git a/components/userInfo.js b/components/userInfo.js
index 18c440d..7c36bb8 100644
--- a/components/userInfo.js
+++ b/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>
   );
 }
diff --git a/lib/borders.js b/lib/borders.js
index 7d31646..1c6a864 100644
--- a/lib/borders.js
+++ b/lib/borders.js
@@ -4,10 +4,14 @@ import prisma from "./prisma";
 export const getBorderById = async (id) => {
   return await prisma.borderImage.findFirst({
     where: {
-      id: parseInt(id)
-    }
+      id: parseInt(id),
+    },
   });
-}
+};
+
+export const getAllBorders = async () => {
+  return await prisma.borderImage.findMany();
+};
 
 export const getUserBorders = async (req) => {
   const session = await getSession({ req });
diff --git a/pages/api/border/[id].js b/pages/api/border/[id].js
index b5de21a..9c5ffdb 100644
--- a/pages/api/border/[id].js
+++ b/pages/api/border/[id].js
@@ -1,14 +1,8 @@
 import { getBorderById } from "../../../lib/borders";
 
 export default function handler(req, res) {
-    const id = req.query.id;
-
-    console.log(id);
-  
-    getBorderById(id).then((result) => {
-      const imageName = result?.imageName ?? "default.png";
-  
-    //   return res.status(200).json(result);
-      return res.redirect(301, `/images/${imageName}`)
-    });
-  }
\ No newline at end of file
+  const id = req.query.id;
+  getBorderById(id).then((result) => {
+    return res.status(200).json(result);
+  });
+}
diff --git a/pages/api/border/all.js b/pages/api/border/all.js
new file mode 100644
index 0000000..b189ccf
--- /dev/null
+++ b/pages/api/border/all.js
@@ -0,0 +1,7 @@
+import { getAllBorders } from "../../../lib/borders";
+
+export default function handler(req, res) {
+  getAllBorders().then((result) => {
+    return res.status(200).json(result);
+  });
+}
diff --git a/pages/index.js b/pages/index.js
index 4596f3b..3e9752d 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -2,8 +2,18 @@ import Head from "next/head";
 import Image from "next/image";
 import styles from "../styles/Home.module.css";
 import UserInfo from "../components/userInfo";
+import Select from "../components/select";
+import { useEffect, useState } from "react";
 
 export default function Home() {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    fetch("api/border/all")
+      .then((res) => res.json())
+      .then((data) => setData(data));
+  }, []);
+
   return (
     <div className={styles.container}>
       <Head>
@@ -11,10 +21,12 @@ export default function Home() {
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-
-      <main className={styles.main}>
+      <header clasName={styles.main}>
         <h1 className={styles.title}>Steam Borders</h1>
         <UserInfo />
+      </header>
+      <main className={styles.main}>
+        <Select data={data} onSelect={console.log} />
       </main>
     </div>
   );