improve intracarpool ui

src/components/Carpool/Carpool.tsx

@@ -205,9 +205,6 @@ export default function Carpool({ id }: { id: number }) {
 				{isCreator
 					? 'You are the creator of this carpool.'
 					: `${creatorName} is the creator of this carpool`}
-				<UILink href={'/events/' + carpool.event.id}>
-					{carpool.event.name}
-				</UILink>
 				<CarpoolTopButtons />
 				<CarpoolDetails />
 				<Members>

src/components/Carpool/CarpoolDetails.tsx

@@ -1,9 +1,9 @@
 import EventIcon from '@material-ui/icons/Event';
 import LocationOnIcon from '@material-ui/icons/LocationOn';
-import { useCallback } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
-import { useContext } from 'react';
+import formatStartAndEndTime from '../../lib/dates';
 import { setCarpoolNote } from '../api';
-
+import UILink from '../UI/UILink';
 import { CarpoolContext } from './Carpool';
 import CarpoolNote from './CarpoolNote';
 
@@ -17,14 +17,36 @@ export default function CarpoolDetails() {
 		},
 		[carpool]
 	);
+	const startTime = carpool.event.startTime;
+	const endTime = useMemo(
+		() =>
+			startTime
+				? new Date(new Date(startTime).getTime() + carpool.event.duration * 60)
+				: null,
+		[carpool.event.duration, startTime]
+	);
+	const formattedDate = useMemo(() => {
+		if (startTime) {
+			if (endTime) {
+				return formatStartAndEndTime(startTime, endTime.toISOString());
+			} else {
+				return new Date(startTime).toLocaleString();
+			}
+		} else {
+			return null;
+		}
+	}, [startTime, endTime]);
 
 	return (
 		<div style={{ width: '80%' }}>
+			<h3>Event Details</h3>
+			<UILink href={'/events/' + carpool.event.id}>{carpool.event.name}</UILink>
 			<div
 				style={{
 					color: '#303030',
 					display: 'flex',
 					alignItems: 'center',
+					marginTop: '1rem',
 				}}
 			>
 				<LocationOnIcon style={{ marginRight: '1rem' }} />
@@ -38,7 +60,7 @@ export default function CarpoolDetails() {
 				}}
 			>
 				<EventIcon style={{ marginRight: '1rem' }} />
-				DAWN - DUSK
+				{formattedDate && `${formattedDate}`}
 			</div>
 			<CarpoolNote note={carpool.note} setNote={onSaveCarpoolNote} />
 		</div>

src/components/Carpool/CarpoolNote.tsx

@@ -32,9 +32,7 @@ export default function CarpoolNote({
 
 	return (
 		<div style={{ margin: '1rem 0rem', maxWidth: '100%' }}>
-			<b>Note</b>
+			<h3>Description</h3>
-			<br />
-			<br />
 			{editing ? (
 				<div>
 					<UITextInput

src/components/types.ts

@@ -24,6 +24,9 @@ export type ICarpool = {
 		latitude: number;
 		longitude: number;
 		placeId: string;
+		startTime: string | null;
+		endTime: string | null;
+		duration: number;
 	};
 	creatorId: number;
 	members: {