Display names on event cards

app/routes/events-team.tsx

@@ -52,22 +52,37 @@ export async function loader({ context }: { context: RequestContext }) {
       status: 500,
     });
 
+  const membersList = await context.env.D1.prepare(
+    "SELECT id, name FROM et_members WHERE id IN (SELECT created_by FROM events WHERE month = ? AND year = ?);",
+  )
+    .bind(now.getUTCMonth() + 1, now.getUTCFullYear())
+    .all();
+
+  if (membersList.error)
+    throw new Response(null, {
+      status: 500,
+    });
+
   return {
     can_approve: Boolean(
       [1 << 4, 1 << 12].find((p) => context.data.current_user.permissions & p),
     ),
     events: monthEventList.results,
+    members: membersList.results as { id: string; name: string }[],
   };
 }
 
 export default function () {
   const {
     can_approve,
     events,
+    members,
   }: {
     can_approve: boolean;
     events: { [k: string]: any }[];
+    members: { id: string; name: string }[];
   } = useLoaderData<typeof loader>();
+  const [eventData, setEventData] = useState(events);
   const eventCards: ReactNode[] = [];
   const { isOpen, onClose, onOpen } = useDisclosure();
   const toast = useToast();
@@ -107,9 +122,16 @@ export default function () {
       title: "Success",
     });
 
-    events.find((e, i) => {
-      if (e.id === eventId) events[i].approved = approved;
+    const newEventData = eventData;
+
+    newEventData.find((e, i) => {
+      if (e.id === eventId) {
+        events[i].approved = approved;
+        events[i].pending = false;
+      }
     });
+
+    setEventData(newEventData);
   }
 
   async function certify(eventId: string) {
@@ -145,12 +167,20 @@ export default function () {
       title: "Success",
     });
 
-    events.find((e, i) => {
+    const newEventData = eventData;
+
+    newEventData.find((e, i) => {
       if (e.id === eventId) events[i].reached_minimum_player_count = true;
     });
+
+    setEventData(newEventData);
   }
 
-  for (const event of events) {
+  for (const event of eventData) {
+    const eventCreatorName = members.find(
+      (member) => member.id === event.created_by,
+    );
+
     eventCards.push(
       <Card w="100%">
         <CardBody>
@@ -184,7 +214,9 @@ export default function () {
             <Box>
               <Heading size="sm">Host</Heading>
               <Text fontSize="sm" pt="2">
-                {event.created_by}
+                {eventCreatorName
+                  ? `${eventCreatorName} (${event.created_by})`
+                  : event.created_by}
               </Text>
             </Box>
           </Stack>
@@ -268,7 +300,7 @@ export default function () {
         <Link color="#646cff" href="/book-event" mt="16px">
           Book an Event
         </Link>
-        <Link color="#646cff" href="/et-members" my="8px">
+        <Link color="#646cff" href="/et-members" mb="32px" mt="8px">
           Events Team Member Management
         </Link>
       </VStack>