fix event issues

src/components/NewUI/Event.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import UIButton from './UIButton';
 import UIPlacesAutocomplete from './UIPlacesAutocomplete';
 import UISecondaryBox from './UISecondaryBox';
@@ -9,26 +9,57 @@ const green = '#60f760';
 const lightgrey = '#e0e0e0';
 
 export type IEvent = {
-	title: string;
+	name: string;
 	group: string;
-	location: string;
-	time: string;
+	address: string;
+	startTime: string;
+	endTime: string;
 };
 
-export default function Event({ title, group, location, time }: IEvent) {
+function formatStartAndEndTime(
+	startDatetimeString: string,
+	endDatetimeString: string
+) {
+	const startDatetime = new Date(startDatetimeString);
+	const endDatetime = new Date(endDatetimeString);
+
+	if (isNaN(startDatetime.valueOf())) {
+		console.error('Invalid datetime:', startDatetimeString);
+		return '(invalid)';
+	}
+	if (isNaN(endDatetime.valueOf())) {
+		console.error('Invalid datetime:', startDatetimeString);
+		return '(invalid)';
+	}
+
+	const startDateString = startDatetime.toLocaleDateString();
+	const endDateString = endDatetime.toLocaleDateString();
+
+	if (startDateString === endDateString) {
+		const startTimeString = startDatetime.toLocaleTimeString();
+		const endTimeString = endDatetime.toLocaleTimeString();
+		return `${startDateString}, ${startTimeString} - ${endTimeString}`;
+	} else {
+		return `${startDatetime.toLocaleString()} - ${endDatetime.toLocaleString()}`;
+	}
+}
+
+export default function Event({
+	name,
+	group,
+	address,
+	startTime,
+	endTime,
+}: IEvent) {
 	const [needRideThere, setNeedRideThere] = useState(false);
 	const [needRideBack, setNeedRideBack] = useState(false);
 	const [rideTherePickupPlaceID, setRideTherePickupPlaceID] = useState('');
 	const [rideBackDropoffPlaceID, setRideBackDropoffPlaceID] = useState('');
 	const [confirmed, setConfirmed] = useState(false);
 
-	useEffect(() => {
-		console.log({ rideTherePickupPlaceID, rideBackDropoffPlaceID });
-	}, [rideTherePickupPlaceID, rideBackDropoffPlaceID]);
-
 	return (
 		<UISecondaryBox>
-			<UISecondaryHeader>{title}</UISecondaryHeader>
+			<UISecondaryHeader>{name}</UISecondaryHeader>
 			<span
 				style={{
 					color: '#303030',
@@ -47,8 +78,8 @@ export default function Event({ title, group, location, time }: IEvent) {
 						color: '#303030',
 					}}
 				>
-					<b>Time: </b>
-					{time}
+					<b>When: </b>
+					{formatStartAndEndTime(startTime, endTime)}
 				</span>
 				<br />
 				<span
@@ -56,8 +87,8 @@ export default function Event({ title, group, location, time }: IEvent) {
 						color: '#303030',
 					}}
 				>
-					<b>Location: </b>
-					{location}
+					<b>Where: </b>
+					{address}
 				</span>
 			</div>
 			<div

src/components/NewUI/EventStream.tsx

@@ -4,7 +4,7 @@ export default function EventStream({ events }: { events: IEvent[] }) {
 	return (
 		<div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
 			{events && events.length > 0 ? (
-				events.map((event) => <Event {...event} key={event.title} />)
+				events.map((event) => <Event {...event} key={event.name} />)
 			) : (
 				<span>
 					There are no events yet. Click 'create event' above to add one!

src/components/NewUI/Events.tsx

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import { IEvent } from './Event';
+import EventStream from './EventStream';
+
+export default function Events() {
+	const [events, setEvents] = useState<IEvent[]>([]);
+
+	useEffect(() => {
+		fetch('http://localhost:5000/api/events')
+			.then((res) => res.json())
+			.then(setEvents);
+	}, []);
+
+	return (
+		<>
+			<h1>Events</h1>
+			<EventStream events={events} />
+		</>
+	);
+}

src/components/NewUI/GroupCreatorLink.tsx

@@ -0,0 +1,29 @@
+import { useCallback, useState } from 'react';
+import GroupCreator from './GroupCreator';
+
+export default function GroupCreatorLink() {
+	const [open, setOpen] = useState(false);
+	const toggle = useCallback(() => {
+		setOpen((open) => !open);
+	}, []);
+
+	return (
+		<div style={{ width: '100%', textAlign: 'center' }}>
+			<div
+				style={{
+					cursor: 'pointer',
+					userSelect: 'none',
+				}}
+				onClick={toggle}
+			>
+				Create Group
+			</div>
+			{open && (
+				<>
+					<br />
+					<GroupCreator />
+				</>
+			)}
+		</div>
+	);
+}

src/components/NewUI/Groups.tsx

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+import { IGroup } from './Group';
+import GroupCreatorLink from './GroupCreatorLink';
+import GroupList from './GroupList';
+
+export default function Groups() {
+	const [groups, setGroups] = useState<IGroup[]>([]);
+
+	useEffect(() => {
+		fetch('http://localhost:5000/api/groups')
+			.then((res) => res.json())
+			.then(setGroups);
+	}, []);
+
+	return (
+		<>
+			<h1>Groups</h1>
+			<GroupCreatorLink />
+			<br />
+			<GroupList groups={groups} />
+		</>
+	);
+}

src/components/NewUI/WheelShare.tsx

@@ -1,19 +1,8 @@
-import { useEffect, useState } from 'react';
-import EventStream from './EventStream';
-import { IGroup } from './Group';
-import GroupCreator from './GroupCreator';
-import GroupList from './GroupList';
+import Events from './Events';
+import Groups from './Groups';
 import UIPrimaryTitle from './UIPrimaryTitle';
 
 export default function WheelShare() {
-	const [groups, setGroups] = useState<IGroup[]>([]);
-
-	useEffect(() => {
-		fetch('http://localhost:5000/api/groups')
-			.then((res) => res.json())
-			.then(setGroups);
-	}, []);
-
 	return (
 		<div
 			style={{
@@ -27,26 +16,9 @@ export default function WheelShare() {
 			}}
 		>
 			<UIPrimaryTitle>WheelShare</UIPrimaryTitle>
-			<GroupCreator />
-			<h1>Groups</h1>
-			<GroupList groups={groups} />
-			<h1>Events</h1>
-			<EventStream
-				events={[
-					{
-						time: '11:00 AM to 2:45 PM',
-						title: 'TJ Track Regional Meet',
-						group: 'TJHSST Track and Field',
-						location: 'Ashburn, Virginia',
-					},
-					{
-						time: '5:00 PM to 8:00 PM',
-						title: 'End of Year Party',
-						group: 'TJHSST 2022',
-						location: 'Dulles, Virginia',
-					},
-				]}
-			/>
+
+			<Groups />
+			<Events />
 		</div>
 	);
 }