Fix rendering bug

src/components/Event/Event.tsx

@@ -6,7 +6,7 @@ import {
 } from '../api';
 import { green, lightgrey } from '../colors';
 import { useMe } from '../hooks';
-import { IEventSignup } from '../types';
+import { IEvent, IEventSignup } from '../types';
 import UIButton from '../UI/UIButton';
 import UIPlacesAutocomplete from '../UI/UIPlacesAutocomplete';
 import UISecondaryBox from '../UI/UISecondaryBox';
@@ -16,17 +16,6 @@ import EventCarpools from './EventCarpools';
 import EventDetails from './EventDetails';
 import EventSignups from './EventSignups';
 
-export type IEvent = {
-	id: number;
-	name: string;
-	group: string;
-	formattedAddress: string;
-	startTime: string;
-	endTime: string;
-	latitude: number;
-	longitude: number;
-};
-
 function GroupName({ name }: { name: string }) {
 	return <span style={{ color: '#303030', textAlign: 'center' }}>{name}</span>;
 }
@@ -108,7 +97,7 @@ export default function Event({ event }: { event: IEvent }) {
 	return (
 		<UISecondaryBox>
 			<UISecondaryHeader>{name}</UISecondaryHeader>
-			<GroupName name={group} />
+			<GroupName name={group.name} />
 			<EventDetails {...{ startTime, endTime, formattedAddress }} />
 			<UIButton
 				onClick={toggleInterestedThrottled}

src/components/Event/EventCarpools.tsx

@@ -1,14 +1,11 @@
 // import CallMergeIcon from '@material-ui/icons/CallMerge';
 import EmojiPeopleIcon from '@material-ui/icons/EmojiPeople';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
-// import ScheduleIcon from '@material-ui/icons/Schedule';
-import { useState } from 'react';
 import { createCarpool } from '../api';
 import { lightgrey } from '../colors';
 import { useMe } from '../hooks';
-import { ICarpool } from '../types';
+import { ICarpool, IEvent } from '../types';
 import UIButton from '../UI/UIButton';
-import { IEvent } from './Event';
 
 function CarpoolRow({ carpool }: { carpool: ICarpool }) {
 	const PADDING = '1rem';

src/components/Event/EventDetails.tsx

@@ -8,7 +8,7 @@ export default function Details({
 	formattedAddress,
 }: {
 	startTime: string;
-	endTime: string;
+	endTime: string | null;
 	formattedAddress: string;
 }) {
 	return (
@@ -27,7 +27,9 @@ export default function Details({
 				}}
 			>
 				<EventIcon style={{ marginRight: '1rem' }} />
-				{formatStartAndEndTime(startTime, endTime)}
+				{endTime
+					? formatStartAndEndTime(startTime, endTime)
+					: new Date(startTime).toLocaleString()}
 			</div>
 			<br />
 			<div

src/components/Event/EventSignups.tsx

@@ -1,9 +1,8 @@
 import PersonAddIcon from '@material-ui/icons/PersonAdd';
 import { useMe } from '../hooks';
 import latlongdist, { R_miles } from '../latlongdist';
-import { IEventSignup } from '../types';
+import { IEventSignup, IEvent } from '../types';
 import usePlace from '../usePlace';
-import { IEvent } from './Event';
 
 export default function EventSignups({
 	event,

src/components/EventStream.tsx

@@ -1,4 +1,5 @@
-import Event, { IEvent } from './Event/Event';
+import Event from './Event/Event';
+import { IEvent } from './types';
 
 export default function EventStream({ events }: { events: IEvent[] }) {
 	return (

src/components/Events.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { getEvents } from './api';
-import { IEvent } from './Event/Event';
+import { IEvent } from './types';
 import EventStream from './EventStream';
 
 export default function Events() {

src/components/Group.tsx

@@ -2,10 +2,10 @@ import { useEffect, useState } from 'react';
 import { useParams } from 'react-router';
 import { Link } from 'react-router-dom';
 import { getGroup, getGroupEvents } from './api';
-import { IEvent } from './Event/Event';
 import EventCreatorLink from './EventCreator/EventCreatorLink';
 import EventStream from './EventStream';
 import GroupSettingsLink from './GroupSettings/GroupSettingsLink';
+import { IEvent } from './types';
 import UILink from './UI/UILink';
 
 export type IGroup = {

src/components/types.ts

@@ -53,9 +53,13 @@ export type IEvent = {
 	id: number;
 	name: string;
 	groupId: number;
-	startTime: Date;
+	group: {
+		id: number;
+		name: string;
+	};
+	startTime: string; // Datestring
 	duration: number;
-	endTime: Date | null;
+	endTime: string | null; // Datestring
 	daysOfWeek: number;
 	placeId: string;
 	formattedAddress: string;