From 8b9bf20fcc4d1412f7a0cc98f845234e950229ab Mon Sep 17 00:00:00 2001
From: Dev Singh <dsingh14@illinois.edu>
Date: Thu, 2 Nov 2023 00:30:27 -0500
Subject: [PATCH] add more info to event page (#100)

---
 src/pages/membership/Event.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/pages/membership/Event.tsx b/src/pages/membership/Event.tsx
index 7ea6e1d..7be4670 100644
--- a/src/pages/membership/Event.tsx
+++ b/src/pages/membership/Event.tsx
@@ -150,6 +150,8 @@ const Event = () => {
   if (Object.keys(paidEventList).length === 0) {
     return <Layout name="Event Signup"></Layout>;
   } else {
+    const dateString = new Date(paidEventList['event_time'] * 1000)
+    const isRunningOut = (paidEventList['tickets_sold']/paidEventList['event_capacity'] > 0.75)
     return ( 
       <Layout name = {paidEventList["event_name"]}>
         <Container xs css={{ height: '90vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
@@ -165,8 +167,19 @@ const Event = () => {
               <Text>
                 { paidEventList["eventDetails"]}
               </Text>
-              <Text><b>Cost:</b> ${paidEventList["eventCost"]["paid"]} for paid ACM members, ${paidEventList["eventCost"]["others"]} for all other participants.</Text>
               <Spacer />
+              <Text><b>Date:</b> {dateString.toLocaleString([], {
+                'year': 'numeric',
+                'month': 'long',
+                'day': 'numeric',
+                'hour12': true,
+                'hour': 'numeric',
+                "timeZoneName": "short"
+              })}.</Text>
+              <Spacer />
+              <Text><b>Cost:</b> ${paidEventList["eventCost"]["paid"]} for paid ACM@UIUC members, ${paidEventList["eventCost"]["others"]} for all other participants.</Text>
+              <Spacer />
+              <Text>{isRunningOut ? <><i>Tickets are running out, order soon!</i><Spacer /></> : null}</Text>
               <Input
                 color={netidHelper.color}
                 helperColor={netidHelper.color}