From 82b5aa8e23c39b52eca943ab6fc499c59dbc3774 Mon Sep 17 00:00:00 2001
From: Max Wofford <max@maxwofford.com>
Date: Sat, 15 Jun 2024 17:29:01 -0400
Subject: [PATCH] Include current user balance on shop

---
 .../arcade/{shop.js => shop-component.js}     |  7 ++++--
 pages/api/arcade/[userAirtableID]/index.js    | 25 +++++++++++++++++++
 pages/arcade/[userAirtableID]/shop.js         | 25 +++++++++++++++----
 3 files changed, 50 insertions(+), 7 deletions(-)
 rename components/arcade/{shop.js => shop-component.js} (74%)
 create mode 100644 pages/api/arcade/[userAirtableID]/index.js

diff --git a/components/arcade/shop.js b/components/arcade/shop-component.js
similarity index 74%
rename from components/arcade/shop.js
rename to components/arcade/shop-component.js
index ec923523..53f4ec79 100644
--- a/components/arcade/shop.js
+++ b/components/arcade/shop-component.js
@@ -1,4 +1,4 @@
-export default function ShopComponent({ availableItems, userAirtableID = null }) {
+export default function ShopComponent({ availableItems, userAirtableID = null, hoursBalance = null }) {
   function buyLink(itemID, quantity = 1) {
     return `https://forms.hackclub.com/arcade-order?user_id=${userAirtableID}&item_id=${itemID}&quantity=${quantity}`
   }
@@ -9,8 +9,11 @@ export default function ShopComponent({ availableItems, userAirtableID = null })
     <>
       <h1>Shop</h1>
       <span>for {userAirtableID}</span>
+      {hoursBalance !== null && (
+        <span>You currently have {hoursBalance} 🎟️ tickets!</span>
+      )}
       <ul>
-        {availableItems.map(item => (
+        {availableItems.sort((a,b) => a['Cost Hours'] - b['Cost Hours']).map(item => (
           <li key={item.id}>
             {includeBuyLink && (
               <a href={buyLink(item.id)} target="_blank">Buy</a>
diff --git a/pages/api/arcade/[userAirtableID]/index.js b/pages/api/arcade/[userAirtableID]/index.js
new file mode 100644
index 00000000..cfcd8844
--- /dev/null
+++ b/pages/api/arcade/[userAirtableID]/index.js
@@ -0,0 +1,25 @@
+import AirtablePlus from "airtable-plus"
+
+export async function getArcadeUser(recordID) {
+  const airtable = new AirtablePlus({
+    apiKey: process.env.AIRTABLE_API_KEY,
+    baseID: 'app4kCWulfB02bV8Q',
+    tableName: "Users"
+  })
+
+  return await airtable.find(recordID)
+}
+
+export default async function handler(req, res) {
+  const { userAirtableID } = req.query
+
+  const user = await getArcadeUser(userAirtableID)
+
+  if (!user) {
+    return res.status(404).json({ error: "User not found" })
+  }
+
+  const hoursBalance = user.fields["Balance (Hours)"]
+
+  res.json({ userAirtableID, hoursBalance })
+}
\ No newline at end of file
diff --git a/pages/arcade/[userAirtableID]/shop.js b/pages/arcade/[userAirtableID]/shop.js
index f1c9fa59..1869193c 100644
--- a/pages/arcade/[userAirtableID]/shop.js
+++ b/pages/arcade/[userAirtableID]/shop.js
@@ -1,10 +1,14 @@
-import ShopComponent from "../../../components/arcade/shop"
+import ShopComponent from "../../../components/arcade/shop-component"
+import { getArcadeUser } from "../../api/arcade/[userAirtableID]"
 import { shopParts } from "../../api/arcade/shop"
 
-export default function Shop({ availableItems, userAirtableID = null }) {
+
+export default function Shop({ availableItems, userAirtableID = null, hoursBalance = 0 }) {
 
   return (
     <>
+      <h1>Welcome to the shop!</h1>
+      <em>Your current balance is {Math.floor(hoursBalance)} 🎟️</em>
       <ShopComponent availableItems={availableItems} userAirtableID={userAirtableID} />
     </>
   )
@@ -18,9 +22,20 @@ export async function getStaticPaths() {
 }
 
 export async function getStaticProps({params}) {
-  const items = await shopParts()
-  const availableItems = items.filter(item => item['Enabled'])
   const { userAirtableID } = params
+
+  const props = { userAirtableID }
+
+  await Promise.all([
+    shopParts().then(items => {
+      const availableItems = items.filter(item => item['Enabled'])
+      props.availableItems = availableItems
+    }),
+    getArcadeUser(userAirtableID).then(user => {
+      const hoursBalance = user.fields["Balance (Hours)"] || 0
+      props.hoursBalance = hoursBalance
+    })
+  ])
   
-  return { props: { availableItems, userAirtableID } }
+  return { props }
 }
\ No newline at end of file