Prevent more than three events pre-bookings

app/routes/book-event.tsx

@@ -1,4 +1,8 @@
 import {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
   Button,
   Container,
   Heading,
@@ -28,11 +32,23 @@ export async function loader({ context }: { context: RequestContext }) {
       status: 403,
     });
 
-  return null;
+  const now = new Date();
+  const preBookedEvents = await context.data.prisma.event.count({
+    where: {
+      created_by: context.data.current_user.id,
+      day: {
+        gte: now.getUTCDate(),
+      },
+      month: now.getUTCMonth() + 1,
+      year: now.getUTCFullYear(),
+    },
+  });
+
+  return preBookedEvents > 3;
 }
 
 export default function () {
-  useLoaderData<typeof loader>();
+  const exceededMaxBookings = useLoaderData<typeof loader>();
 
   const toast = useToast();
   const currentDate = new Date();
@@ -44,7 +60,7 @@ export default function () {
   const [eventType, setEventType] = useState("");
   const [riddleAnswer, setRiddleAnswer] = useState("");
   const [submitSuccess, setSubmitSuccess] = useState(false);
-  const [disableSubmit, setDisableSubmit] = useState(false);
+  const [disableSubmit, setDisableSubmit] = useState(exceededMaxBookings);
 
   useEffect(() => {
     setDatePickerMin(`${new Date().toISOString().split("T").at(0)}`);
@@ -112,6 +128,14 @@ export default function () {
     />
   ) : (
     <Container maxW="container.md">
+      <Alert display={exceededMaxBookings ? undefined : "none"} status="error">
+        <AlertIcon />
+        <AlertTitle>Max pre-bookings exceeded!</AlertTitle>
+        <AlertDescription>
+          You cannot pre-book more than three events. Please wait until you
+          complete an event before trying again.
+        </AlertDescription>
+      </Alert>
       <Heading pb="32px">Book an Event</Heading>
       <Heading mb="8px" size="md">
         Event Type