Added event prop

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

@@ -2,14 +2,22 @@ import { LoadingButton } from "@mui/lab";
 import { Button, Dialog, DialogActions, DialogContent, Typography } from "@mui/material";
 import { useState } from "react";
 
+type Event = {
+  signupOpenDate: string;
+  isFull?: boolean | null;
+  allowedGradeYears?: Array<number> | null;
+  isAttendable: boolean;
+};
+
 type Props = {
   isSignedUp?: boolean | null;
   disabled?: boolean;
   onSignUp: () => void;
   onSignOff: () => void;
+  event: Event;
 };
 
-export const SignUpButton: React.FC<Props> = ({ isSignedUp, onSignUp, onSignOff, disabled }) => {
+export const SignUpButton: React.FC<Props> = ({ isSignedUp, onSignUp, onSignOff, disabled, event }) => {
   const [confirmSignOff, setConfirmSignOff] = useState(false);
   const [loading, setLoading] = useState(false);
 
@@ -25,7 +33,6 @@ export const SignUpButton: React.FC<Props> = ({ isSignedUp, onSignUp, onSignOff,
     setTimeout(() => setLoading(false), 1000);
     onSignOff();
   }
-
   return (
     <>
       <Dialog open={confirmSignOff}>

frontend/src/pages/events/[id]/index.tsx

@@ -21,6 +21,7 @@ const EventInfo: NextPageWithLayout<InferGetServerSidePropsType<typeof getServer
         <meta name="description" content={event.shortDescription ?? event.description} />
         {event.organization.logoUrl && <meta name="og:image" content={event.organization.logoUrl} />}
       </Head>
+
       <EventDetail event={data?.event ?? event} />
     </>
   );