From 7c40c4e63ffcb784ff6d77daf29ff616af631a48 Mon Sep 17 00:00:00 2001
From: Alasdair Wilson <alasdair.wlsn@googlemail.com>
Date: Fri, 27 Oct 2023 20:38:35 +0100
Subject: [PATCH] changes from martin review

---
 components/EnrolDialog.tsx             | 71 ++++++++++++++++----------
 components/forms/Textfield.tsx         |  4 +-
 lib/actions/putEvent.ts                |  1 -
 pages/api/eventGroup/[eventGroupId].ts |  1 -
 pages/api/userOnEvent/[eventId].ts     | 13 -----
 pages/event/[eventId].tsx              |  2 -
 6 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/components/EnrolDialog.tsx b/components/EnrolDialog.tsx
index 3fbc735..d167549 100644
--- a/components/EnrolDialog.tsx
+++ b/components/EnrolDialog.tsx
@@ -8,6 +8,9 @@ import { HiMail, HiX } from 'react-icons/hi'
 import postUserOnEvent from 'lib/actions/postUserOnEvent'
 import putUserOnEvent from 'lib/actions/putUserOnEvent'
 import useEvent from 'lib/hooks/useEvent'
+import { useForm } from 'react-hook-form'
+import Stack from './ui/Stack'
+import TextField from './forms/Textfield'
 
 
 type Props = {
@@ -16,7 +19,12 @@ type Props = {
   onEnrol: (userOnEvent: UserOnEvent | undefined) => void
 }
 
+interface Enrol {
+  enrolKey: string
+}
+
 const EnrolDialog: React.FC<Props> = ({ event, show, onEnrol}) => {
+  const { control, handleSubmit, reset } = useForm<Enrol>();
   const [error, setError] = React.useState<string | undefined>(undefined)
   const [enrolError, setEnrolError] = React.useState<string | undefined>(undefined)
   const [success, setSuccess] = React.useState<string | null>(null)
@@ -59,9 +67,8 @@ const EnrolDialog: React.FC<Props> = ({ event, show, onEnrol}) => {
     })
   };
 
-  const enrolWithKey = () => {
-    const enrolKey = (document.getElementById('enrol-key') as HTMLInputElement).value;
-    const status = checkKey(enrolKey)
+  const enrolWithKey = (data: Enrol) => {
+    const status = checkKey(data.enrolKey)
     if (status === null) {
       setEnrolError("error")
     } else {
@@ -103,33 +110,41 @@ const EnrolDialog: React.FC<Props> = ({ event, show, onEnrol}) => {
         {event.name}
       </Modal.Header>
       <Modal.Body>
-        <Content markdown={event.enrol} />
-        You should have received an enrolment key from the course organiser:
-        <div className="flex">
-        <TextInput
-          className="w-[80%]"
-          id="enrol-key"
-          sizing="sm"
-          type="text"
-          placeholder='Enrolment Key'
-        />
-        <Button className="w-[15%] h-8" onClick={enrolWithKey}>
-          Enrol
-        </Button>
-      </div>
-      { enrolError && (
-      <Toast className=''>
-        <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-red-100 text-red-500 dark:bg-red-800 dark:text-red-200">
-          <HiX className="h-5 w-5" />
-        </div>
-        <div className="ml-3 text-sm font-normal">
-          Invalid Enrolment Key
-        </div>
-      </Toast>
-    )}
+        <Stack>
+          <Content markdown={event.enrol} />
+          <p>
+            You should have received an enrolment key from the course organiser.
+          </p>
+          <form onSubmit={handleSubmit(enrolWithKey)}>   
+            <TextField
+              textfieldProps={{className: "w-[75%]",
+                                autoComplete: "off", 
+                                placeholder: "Enrolment Key",
+                                autoFocus: true,
+                              }}
+              name={"enrolKey"}
+              control={control}
+            />
+            <Button type="submit" className="m-0 h-10" style={{verticalAlign: "middle"}}>
+              Enrol
+            </Button>
+          </form>
+        { enrolError && (
+        <Toast className=''>
+          <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-red-100 text-red-500 dark:bg-red-800 dark:text-red-200">
+            <HiX className="h-5 w-5" />
+          </div>
+          <div className="ml-3 text-sm font-normal">
+            Invalid Enrolment Key
+          </div>
+        </Toast>
+      )}
+      </Stack>
       </Modal.Body>
       <Modal.Footer>
-        If you have not received an enrolment key, you can request enrolment:
+        <p>
+          If you have not received an enrolment key, you can request enrolment:
+        </p>
         <Button onClick={onClick}>
           Request Enrollment
         </Button>
diff --git a/components/forms/Textfield.tsx b/components/forms/Textfield.tsx
index 61a58ab..7c934e6 100644
--- a/components/forms/Textfield.tsx
+++ b/components/forms/Textfield.tsx
@@ -7,9 +7,10 @@ type Props<T extends FieldValues> = {
   name: FieldPath<T>;
   control: Control<T>;
   rules?: Object;
+  textfieldProps?: Object;
 };
 
-function Textfield<T extends FieldValues>({ label, name, control, rules }: Props<T>): React.ReactElement {
+function Textfield<T extends FieldValues>({ label, name, control, rules, textfieldProps }: Props<T>): React.ReactElement {
   return (
     <div data-cy={`textfield-${name}`}>
     <Controller
@@ -31,6 +32,7 @@ function Textfield<T extends FieldValues>({ label, name, control, rules }: Props
             value={value === undefined || value === null ? '' : value}
             onChange={onChange}
             onBlur={onBlur}
+            {...textfieldProps}
           />
           </>
         );
diff --git a/lib/actions/putEvent.ts b/lib/actions/putEvent.ts
index ef9c36b..26cdf6e 100644
--- a/lib/actions/putEvent.ts
+++ b/lib/actions/putEvent.ts
@@ -4,7 +4,6 @@ import { Data } from 'pages/api/event/[eventId]'
 
 // function that returns a promise that does a PUT request for this endpoint
 export const putEvent = async (event: Event): Promise<Data> => {
-    console.log('insideputeventt', event)
     const apiPath = `${basePath}/api/event/${event.id}`
     const requestOptions = {
         method: 'PUT',
diff --git a/pages/api/eventGroup/[eventGroupId].ts b/pages/api/eventGroup/[eventGroupId].ts
index 499049b..a440bcc 100644
--- a/pages/api/eventGroup/[eventGroupId].ts
+++ b/pages/api/eventGroup/[eventGroupId].ts
@@ -83,7 +83,6 @@ const eventHandler = async (
           eventItem.order = parseInt(eventItem.order);
         }
     });
-    console.log('req.body', req.body)
     const updatedEventGroup = await prisma.eventGroup.update({
         where: { id: parseInt(eventGroupId) },
         data: {
diff --git a/pages/api/userOnEvent/[eventId].ts b/pages/api/userOnEvent/[eventId].ts
index 7851872..95ccb2c 100644
--- a/pages/api/userOnEvent/[eventId].ts
+++ b/pages/api/userOnEvent/[eventId].ts
@@ -36,19 +36,6 @@ const UserOnEvent = async (req: NextApiRequest, res: NextApiResponse<Data>) => {
 
   const isAdmin = currentUser?.admin === true;
 
-  switch (method) {
-    case 'GET':
-      break;
-    case 'POST':
-      break;
-    case 'PUT':
-      break;
-    default:
-      res.setHeader('Allow', ['GET', 'POST', 'PUT']);
-      res.status(404).end(`Method ${method} Not Allowed`);
-      break;
-    }
-
   let updatedUserOnEvent = null;
   let userOnEvent = null;
   switch (method) {
diff --git a/pages/event/[eventId].tsx b/pages/event/[eventId].tsx
index df8cded..4464dc3 100644
--- a/pages/event/[eventId].tsx
+++ b/pages/event/[eventId].tsx
@@ -67,9 +67,7 @@ const Event: NextPage<EventProps> = ({ material, event }) => {
   const isAdmin = userProfile?.admin;
 
   const onSubmit = (data: EventWithUsers) => {
-    console.log('onSubmit', data)
     putEvent(data).then((data) => {
-      console.log('putEvent', data)
       data.event && mutateEvent(data.event)
   });
   }