Show waitlist label (#2160)

Author: OdaRunde

frontend/src/components/pages/events/EventDetail/SignUp/Actions.tsx

@@ -2,20 +2,21 @@ import { useMutation } from "@apollo/client";
 import { Alert, Unstable_Grid2 as Grid, Snackbar, TextField, Tooltip, Typography } from "@mui/material";
 import { useState } from "react";
 
-import { LoginRequired, PermissionRequired } from "@/components/Auth";
-import { EventDetailFieldsFragment, EventSignOffDocument, EventSignUpDocument } from "@/generated/graphql";
-import dayjs from "@/lib/date";
-
 import { CountdownStatusText } from "./Countdown";
 import { useCountdown } from "./hooks/useCountdown";
 import { SignUpButton } from "./SignUpButton";
 
+import { LoginRequired, PermissionRequired } from "@/components/Auth";
+import { EventDetailFieldsFragment, EventSignOffDocument, EventSignUpDocument } from "@/generated/graphql";
+import dayjs from "@/lib/date";
+
 type Event = {
   id: string;
   hasExtraInformation?: boolean | null;
   signupOpenDate: string;
   deadline: string;
   bindingSignup?: boolean | null;
+  isAttendable: boolean;
 } & Pick<EventDetailFieldsFragment, "userAttendance">;
 
 type Props = {
@@ -115,6 +116,7 @@ export const Actions: React.FC<Props> = ({ event }) => {
                   onSignUp={handleSignUp}
                   onSignOff={handleSignOff}
                   isSignedUp={isSignedUp}
+                  event={event}
                 />
               </span>
             </Tooltip>

frontend/src/components/pages/events/EventDetail/SignUp/SignUpButton.tsx

@@ -1,17 +1,45 @@
 import { LoadingButton } from "@mui/lab";
 import { Button, Dialog, DialogActions, DialogContent, Typography } from "@mui/material";
-import { useState } from "react";
+import { useContext, useState } from "react";
+
+import dayjs from "@/lib/date";
+import { UserContext } from "@/pages/events/[id]";
+
+type Event = {
+  signupOpenDate: string;
+  isFull?: boolean | null;
+  allowedGradeYears?: Array<number> | null;
+  isAttendable: boolean;
+};
+
+type User = {
+  gradeYear?: number | null;
+};
 
 type Props = {
   isSignedUp?: boolean | null;
   disabled?: boolean;
   onSignUp: () => void;
   onSignOff: () => void;
+  event: Event;
 };
 
-export const SignUpButton: React.FC<Props> = ({ isSignedUp, onSignUp, onSignOff, disabled }) => {
+function isWaitList(event: Event, user: User) {
+  const signUpOpenDate = event.signupOpenDate ? dayjs(event.signupOpenDate) : undefined;
+  const isSignUpOpen = signUpOpenDate && dayjs().isSameOrAfter(signUpOpenDate);
+
+  let canAttend = event.isAttendable && isSignUpOpen;
+  if (user.gradeYear && event.allowedGradeYears) {
+    canAttend = canAttend && event.allowedGradeYears.includes(user.gradeYear);
+  }
+
+  return event.isFull && canAttend;
+}
+
+export const SignUpButton: React.FC<Props> = ({ isSignedUp, onSignUp, onSignOff, disabled, event }) => {
   const [confirmSignOff, setConfirmSignOff] = useState(false);
   const [loading, setLoading] = useState(false);
+  const user = useContext(UserContext);
 
   function handleSignUp() {
     setLoading(true);
@@ -25,7 +53,6 @@ export const SignUpButton: React.FC<Props> = ({ isSignedUp, onSignUp, onSignOff,
     setTimeout(() => setLoading(false), 1000);
     onSignOff();
   }
-
   return (
     <>
       <Dialog open={confirmSignOff}>
@@ -54,7 +81,7 @@ export const SignUpButton: React.FC<Props> = ({ isSignedUp, onSignUp, onSignOff,
       )}
       {!isSignedUp && (
         <LoadingButton fullWidth loading={loading} variant="contained" onClick={handleSignUp} disabled={disabled}>
-          Meld på
+          {user != null && isWaitList(event, user) ? "Meld på venteliste" : "Meld på"}
         </LoadingButton>
       )}
     </>