Add timer for students on cooldown (#142)

Author: MeshanKhosla

src/components/admin/CooldownTimer.tsx

@@ -55,6 +55,7 @@ const CoolDownTimer = () => {
           max={180}
           width="100%"
           onChange={(val) => setCooldownTime(parseInt(val))}
+          mr={1}
         >
           <NumberInputField />
           <NumberInputStepper>

src/components/queue/CreateTicket.tsx

@@ -6,6 +6,8 @@ import {
 } from "@prisma/client";
 import { useRef } from "react";
 import { MutableRefObject } from "react";
+import { trpc } from "../../utils/trpc";
+import Countdown from "../ticket-page/Countdown";
 import CreateTicketForm from "./CreateTicketForm";
 
 interface CreateTicketProps {
@@ -20,9 +22,11 @@ const CreateTicket = (props: CreateTicketProps) => {
   const { siteSettings, personalQueue } = props;
   const endOfForm = useRef() as MutableRefObject<HTMLSpanElement>;
 
+  const { data: userCooldown } = trpc.ticket.getUserCooldownTime.useQuery();
+
   return (
     <Flex width="full" align="left" flexDir="column" p={4}>
-      <Text fontSize="2xl" mb={5}>
+      <Text fontSize="2xl">
         Welcome back. Create a ticket to get started or{" "}
         <span
           style={{ cursor: "pointer", textDecoration: "underline" }}
@@ -32,6 +36,14 @@ const CreateTicket = (props: CreateTicketProps) => {
           view the queue
         </span>
       </Text>
+      {userCooldown && (
+        <Flex>
+          <Text mt="0.5" fontSize="lg">
+            Cooldown until you can make another ticket:&nbsp;
+          </Text>
+          <Countdown initialTimeInMs={userCooldown} />
+        </Flex>
+      )}
       <CreateTicketForm
         personalQueue={personalQueue}
         arePublicTicketsEnabled={

src/components/queue/CreateTicketForm.tsx

@@ -151,9 +151,12 @@ const CreateTicketForm = (props: CreateTicketFormProps) => {
     },
   });
 
-  const cooldownPeriod = trpc.admin.getCoolDownTime.useQuery(undefined, {
-    refetchOnWindowFocus: false,
-  }).data;
+  const { data: cooldownPeriod } = trpc.admin.getCoolDownTime.useQuery(
+    undefined,
+    {
+      refetchOnWindowFocus: false,
+    },
+  );
 
   const handleTicketTypeChange = (newVal: TicketType) => {
     setTicketType(newVal);
@@ -266,6 +269,7 @@ const CreateTicketForm = (props: CreateTicketFormProps) => {
       borderWidth={1}
       borderRadius={8}
       boxShadow="lg"
+      mt={5}
     >
       <Box my={4} textAlign="left">
         <form onSubmit={onSubmit}>

src/components/queue/QueueLayout.tsx

@@ -38,7 +38,8 @@ const QueueLayout = (props: QueueLayoutProps) => {
 
   const [isQueueOpen, setIsQueueOpen] = useState<boolean>();
   const [isPendingStageEnabled, setIsPendingStageEnabled] = useState<boolean>();
-  const [arePublicTicketsEnabled, setArePublicTicketsEnabled] = useState<boolean>();
+  const [arePublicTicketsEnabled, setArePublicTicketsEnabled] =
+    useState<boolean>();
   const changeUserRoleMutation = trpc.user.updateUserRole.useMutation();
   const { siteSettings } = useSiteSettings();
 
@@ -95,7 +96,11 @@ const QueueLayout = (props: QueueLayoutProps) => {
     }
   });
 
-  if (isQueueOpen === undefined || isPendingStageEnabled === undefined || arePublicTicketsEnabled === undefined) {
+  if (
+    isQueueOpen === undefined ||
+    isPendingStageEnabled === undefined ||
+    arePublicTicketsEnabled === undefined
+  ) {
     return <Spinner />;
   }
 

src/server/trpc/router/ticket.ts

@@ -736,6 +736,42 @@ export const ticketRouter = router({
       return ticketsWithNames[0];
     }),
 
+  getUserCooldownTime: protectedProcedure.query(async ({ ctx }) => {
+    // If there is a cooldown timer and the user is a student, return how long the student
+    // has to wait before making another ticket. The wait time is returned in milliseconds and is
+    // calculated by (lastTicketResolvedAt + cooldownTime) - Date.now()
+    if (ctx.session.user.role !== UserRole.STUDENT) {
+      return null;
+    }
+
+    const cooldownTimeResult = await ctx.prisma.variableSettings.findUnique({
+      where: { setting: VariableSiteSettings.COOLDOWN_TIME },
+    });
+
+    const cooldownTime = parseInt(cooldownTimeResult?.value ?? "0");
+
+    if (!cooldownTime) {
+      return null;
+    }
+
+    const lastTicket = await ctx.prisma.ticket.findFirst({
+      where: {
+        createdByUserId: ctx.session.user.id,
+        resolvedAt: {
+          gte: new Date(Date.now() - cooldownTime * 60 * 1000),
+        },
+      },
+    });
+
+    if (!lastTicket || !lastTicket.resolvedAt) {
+      return null;
+    }
+
+    return (
+      lastTicket.resolvedAt.getTime() + cooldownTime * 60 * 1000 - Date.now()
+    );
+  }),
+
   getTicketsWithStatus: protectedProcedure
     .input(
       z.object({