Include current user balance on shop

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>

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 })
+}

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 }
 }