From cf3a84d1c540f9a7cbe4d5aa81a2a8a7db50ede2 Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Thu, 1 Jul 2021 00:39:06 -0400
Subject: [PATCH] add start time and end time client-side validation

---
 src/components/NewUI/EventCreator.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/NewUI/EventCreator.tsx b/src/components/NewUI/EventCreator.tsx
index 21244d4..2b1a2f0 100644
--- a/src/components/NewUI/EventCreator.tsx
+++ b/src/components/NewUI/EventCreator.tsx
@@ -108,12 +108,16 @@ export default function EventCreator({ group }: { group: IGroup }) {
 	const [daysOfWeek, setDaysOfWeek] = useState(0);
 	const [endDate, setEndDate] = useState<Date | null>(null);
 
+	const durationIsNegative =
+		endTime && startTime && endTime.getTime() < startTime.getTime();
+
 	const buttonEnabled =
 		name.length > 0 &&
 		startTime != null &&
 		endTime != null &&
 		placeId != null &&
 		(!recurring || daysOfWeek || endDate !== null) &&
+		!durationIsNegative &&
 		!creating;
 
 	const createEvent = useCallback(() => {
@@ -200,6 +204,11 @@ export default function EventCreator({ group }: { group: IGroup }) {
 					<UIDateInput onChangedDate={setEndDate} disabled={creating} />
 				</>
 			)}
+			{durationIsNegative && (
+				<span style={{ marginTop: '1rem' }}>
+					The start time can't be after the end time.
+				</span>
+			)}
 			{createdEventId === -1 ? (
 				<UIButton
 					onClick={buttonEnabled ? createEvent : noop}