From 095c8e4aa9d45c2ce7cfd713d22fd350325be3b0 Mon Sep 17 00:00:00 2001
From: Zain Jaffery <zain6602@gmail.com>
Date: Thu, 4 May 2023 15:47:40 -0500
Subject: [PATCH 1/2] hook up createEvent to post to our API endpoint

---
 src/pages/createEvent.tsx | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/src/pages/createEvent.tsx b/src/pages/createEvent.tsx
index 756fa10..89a8993 100644
--- a/src/pages/createEvent.tsx
+++ b/src/pages/createEvent.tsx
@@ -1,5 +1,42 @@
 import Layout from '../components/layout';
 
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+
+const [formData, setFormData] = useState({});
+const [message, setMessage] = useState('');
+
+<input
+  onChange={(e) => setFormData({ ...formData, [e.target.name]: e.target.value })}
+></input>
+
+const handleSubmit = async (e: { preventDefault: () => void; }) => {
+	e.preventDefault();
+	try {
+	  const response = await fetch('/api/events/createEvents', {
+		method: 'POST',
+		headers: {
+		  'Content-Type': 'application/json',
+		},
+		body: JSON.stringify(formData),
+	  });
+	  if (response.ok) {
+		const data = await response.json();
+		setMessage(`Event created successfully: ${data.id}`);
+	  } else {
+		setMessage('Error creating event');
+	  }
+	} catch (error) {
+	  setMessage('Error creating event');
+	}
+  };
+
+  <form onSubmit={handleSubmit}>
+  ...
+</form>
+
+{message && <p>{message}</p>}
+
 export default function CreateEventPage() {
 	return (
 		<Layout>

From 418ba6af42128d11af197406ce9fc8b9fd0a7730 Mon Sep 17 00:00:00 2001
From: Zain Jaffery <zain6602@gmail.com>
Date: Thu, 4 May 2023 16:14:53 -0500
Subject: [PATCH 2/2] updated Hook up createEvent.tsx

---
 src/pages/createEvent.tsx | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/pages/createEvent.tsx b/src/pages/createEvent.tsx
index 89a8993..8f0f7ef 100644
--- a/src/pages/createEvent.tsx
+++ b/src/pages/createEvent.tsx
@@ -6,10 +6,6 @@ import { useRouter } from 'next/router';
 const [formData, setFormData] = useState({});
 const [message, setMessage] = useState('');
 
-<input
-  onChange={(e) => setFormData({ ...formData, [e.target.name]: e.target.value })}
-></input>
-
 const handleSubmit = async (e: { preventDefault: () => void; }) => {
 	e.preventDefault();
 	try {
@@ -31,16 +27,11 @@ const handleSubmit = async (e: { preventDefault: () => void; }) => {
 	}
   };
 
-  <form onSubmit={handleSubmit}>
-  ...
-</form>
-
-{message && <p>{message}</p>}
-
 export default function CreateEventPage() {
 	return (
 		<Layout>
 			<div className="flex flew-row centered-contents">
+				<form onSubmit={handleSubmit}>
 				<div className="basis-5/12">
 					<input
 						className="eventName"
@@ -53,6 +44,7 @@ export default function CreateEventPage() {
 							borderBottom: '1px solid gray',
 						}}
 						placeholder=" Event Name"
+						onChange={(e) => setFormData({ ...formData, [e.target.name]: e.target.value })}
 					></input>
 					<br></br>
 					<p
@@ -151,6 +143,7 @@ export default function CreateEventPage() {
 									backgroundColor: 'lightgrey',
 									borderRadius: '6px',
 								}}
+								onChange={(e) => setFormData({ ...formData, [e.target.name]: e.target.value })}
 							></input>
 						</div>
 						<div className="basis-9">
@@ -167,6 +160,7 @@ export default function CreateEventPage() {
 									backgroundColor: 'lightgrey',
 									borderRadius: '6px',
 								}}
+								onChange={(e) => setFormData({ ...formData, [e.target.name]: e.target.value })}
 							></input>
 						</div>
 						<div className="basis-1"></div>
@@ -201,6 +195,7 @@ export default function CreateEventPage() {
 								name="guest"
 								value="Guest"
 								type="checkbox"
+								onChange={(e) => setFormData({ ...formData, [e.target.name]: e.target.value })}
 							></input>
 							<label>&nbsp;Guest</label>
 						</div>
@@ -211,6 +206,7 @@ export default function CreateEventPage() {
 								name="member"
 								value="Member"
 								type="checkbox"
+								onChange={(e) => setFormData({ ...formData, [e.target.name]: e.target.value })}
 							></input>
 							<label>&nbsp;Member</label>
 						</div>
@@ -221,10 +217,12 @@ export default function CreateEventPage() {
 								name="leader"
 								value="Leader"
 								type="checkbox"
+								onChange={(e) => setFormData({ ...formData, [e.target.name]: e.target.value })}
 							></input>
 							<label>&nbsp;Leadership</label>
 						</div>
 					</div>
+					
 				</div>
 
 				<div className="basis-4"></div>
@@ -249,6 +247,7 @@ export default function CreateEventPage() {
 									border: '1px solid gray',
 									borderRadius: '6px',
 								}}
+								onChange={(e) => setFormData({ ...formData, [e.target.name]: e.target.value })}
 							></input>
 						</div>
 						<div className="basis-1/3">
@@ -269,6 +268,7 @@ export default function CreateEventPage() {
 									border: '1px solid gray',
 									borderRadius: '6px',
 								}}
+								onChange={(e) => setFormData({ ...formData, [e.target.name]: e.target.value })}
 							></input>
 						</div>
 						<div className="basis-1/3">
@@ -289,6 +289,7 @@ export default function CreateEventPage() {
 									border: '1px solid gray',
 									borderRadius: '6px',
 								}}
+								onChange={(e) => setFormData({ ...formData, [e.target.name]: e.target.value })}
 							></input>
 						</div>
 					</div>
@@ -308,6 +309,7 @@ export default function CreateEventPage() {
 									backgroundColor: 'whitesmoke',
 									borderRadius: '6px',
 								}}
+								onChange={(e) => setFormData({ ...formData, [e.target.name]: e.target.value })}
 							></input>
 						</div>
 						<div className="basis-2"></div>
@@ -323,6 +325,7 @@ export default function CreateEventPage() {
 									backgroundColor: 'whitesmoke',
 									borderRadius: '6px',
 								}}
+								onChange={(e) => setFormData({ ...formData, [e.target.name]: e.target.value })}
 							></input>
 						</div>
 					</div>
@@ -342,6 +345,7 @@ export default function CreateEventPage() {
 							backgroundColor: 'whitesmoke',
 							borderRadius: '6px',
 						}}
+						onChange={(e) => setFormData({ ...formData, [e.target.name]: e.target.value })}
 					></input>
 					<br></br>
 					<p style={{ lineHeight: '0.5' }}>&nbsp;</p>
@@ -371,6 +375,7 @@ export default function CreateEventPage() {
 						}}
 					></select>
 				</div>
+				</form>
 			</div>
 		</Layout>
 	);