.gitignore

@@ -35,5 +35,3 @@ yarn-error.log*
 # prisma data
 /prisma/migrations
 /prisma/borders.db
-
-/public/images

components/select.js

@@ -1,43 +0,0 @@
-import Image from "next/image";
-import styles from "../styles/Components.module.css";
-
-export default function Select(props) {
-  const { data, onSelect, selected = {} } = props;
-  console.log("data", data, "selected", selected);
-  return (
-    <div className={styles.select}>
-      {data &&
-        data.map((border, index) => {
-          return (
-            <div
-              className={[
-                styles.borderKeeper,
-                selected == border.id ? styles.selected : undefined,
-              ].join(" ")}
-              key={border.id}>
-              <Image
-                className={styles.userImage}
-                src="/user.png"
-                alt="user image"
-                width={128}
-                height={128}
-                onClick={(ev) => {
-                  onSelect(border.id);
-                }}
-              />
-              <Image
-                className={styles.borderImage}
-                src={`/images/${border.imageName}`}
-                alt={`border with id ${border.id}`}
-                width={132}
-                height={132}
-                onClick={(ev) => {
-                  onSelect(border.id);
-                }}
-              />
-            </div>
-          );
-        })}
-    </div>
-  );
-}

components/userInfo.js

@@ -2,23 +2,44 @@ import { useSession, signIn, signOut } from "next-auth/react";
 import { useEffect, useState } from "react";
 import styles from "../styles/Components.module.css";
 
-export default function UserInfo(props) {
+export default function UserInfo(borderInfo) {
   const { data: session } = useSession();
-  const { borderData } = props;
+  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>
-      <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>{
+      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>
   );
 }

lib/borders.js

@@ -4,14 +4,10 @@ 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 });

pages/api/border/[id].js

@@ -1,8 +1,14 @@
 import { getBorderById } from "../../../lib/borders";
 
 export default function handler(req, res) {
-  const id = req.query.id;
-  getBorderById(id).then((result) => {
-    return res.status(200).json(result);
-  });
-}
+    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}`)
+    });
+  }

pages/api/border/all.js

@@ -1,7 +0,0 @@
-import { getAllBorders } from "../../../lib/borders";
-
-export default function handler(req, res) {
-  getAllBorders().then((result) => {
-    return res.status(200).json(result);
-  });
-}

pages/index.js

@@ -2,29 +2,8 @@ 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);
-  const [borderData, setBorderData] = useState(null);
-  const [selected, setSelected] = useState(0);
-
-  useEffect(() => {
-    fetch("api/border/all")
-      .then((res) => res.json())
-      .then((data) => setData(data));
-  }, []);
-
-  useEffect(() => {
-    fetch("api/user/border/@me")
-      .then((res) => res.json())
-      .then((data) => {
-        setBorderData(data);
-        setSelected(data?.borderId || 0);
-      });
-  }, []);
-
   return (
     <div className={styles.container}>
       <Head>
@@ -32,14 +11,10 @@ export default function Home() {
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <header>
+
+      <main className={styles.main}>
         <h1 className={styles.title}>Steam Borders</h1>
-        <div className={styles.userinfo}>
-          <UserInfo borderData={borderData} />
-        </div>
-      </header>
-      <main>
-        <Select data={data} onSelect={setSelected} selected={selected} />
+        <UserInfo />
       </main>
     </div>
   );

styles/Components.module.css

@@ -1,40 +0,0 @@
-.select {
-  min-height: 90vh;
-  max-height: 90vh;
-  max-width: 50vw;
-  left: 45vw;
-  position: relative;
-  overflow-y: scroll;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.borderKeeper {
-  width: 132px !important;
-  height: 132px !important;
-  padding: 4px;
-}
-
-.borderKeeper > span {
-  display: inline-table !important;
-}
-
-.userImage,
-.borderImage {
-  position: relative;
-  left: 0;
-}
-
-.userImage {
-  z-index: -1;
-  top: 0;
-}
-
-.borderImage {
-  z-index: 3;
-  top: -256px !important;
-}
-
-.selected {
-  border: 1px solid black;
-}

styles/Home.module.css

@@ -12,19 +12,6 @@
   align-items: center;
 }
 
-.userinfo {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  justify-content: end;
-  align-items: flex-end;
-  text-align: right;
-  width: 50vw;
-  top: 0;
-  left: 50vw;
-  padding-right: 32px;
-}
-
 .footer {
   display: flex;
   flex: 1;
@@ -56,12 +43,11 @@
   margin: 0;
   line-height: 1.15;
   font-size: 4rem;
-  width: 50vw;
 }
 
 .title,
 .description {
-  text-align: left;
+  text-align: center;
 }
 
 .description {

util/ingest.js

@@ -1,6 +1,6 @@
 console.log("a");
-const fs = require("fs");
-const path = require("path");
+const fs = require('fs');
+const path = require('path');
 const Prisma = require("@prisma/client");
 
 const prisma = new Prisma.PrismaClient();
@@ -9,41 +9,32 @@ console.log("processing new border images");
 
 const cwd = process.cwd();
 
-const folder = path.join(
-  cwd,
-  cwd.includes("util") ? ".." : "",
-  "public/images"
-);
+const folder = path.join(cwd, cwd.includes("util") ? ".." : "", "public/images");
 const list = fs.readdirSync(folder);
 
 (async () => {
-  let numAdded = 0;
-  for (let item of list) {
-    // console.log(item);
+    let numAdded = 0;
+    for (let item of list) {
+        // console.log(item);
 
-    const result = await prisma.borderImage.findFirst({
-      where: {
-        imageName: item,
-      },
-    });
-    if (!result && item == "default.png") {
-      const added = await prisma.borderImage.create({
-        data: {
-          id: 0,
-          imageName: item,
-        },
-      });
-      numAdded++;
-      console.log(added);
-    } else if (!result) {
-      const added = await prisma.borderImage.create({
-        data: {
-          imageName: item,
-        },
-      });
-      numAdded++;
-      console.log(added);
+        const result = await prisma.borderImage.findFirst(
+            {
+                where: {
+                    imageName: item
+                }
+            }
+        );
+        if (!result) {
+            const added = await prisma.borderImage.create(
+                {
+                    data: {
+                        imageName: item
+                    },
+                }
+            );
+            numAdded++;
+            console.log(added);
+        }
     }
-  }
-  console.log(`Processed ${numAdded} new images.`);
-})();
+    console.log(`Processed ${numAdded} new images.`);
+})();