From 71d17759367b039745dc820ed6f325b18c308d2c Mon Sep 17 00:00:00 2001
From: Shahan Nedadahandeh <shahan.neda@gmail.com>
Date: Thu, 5 May 2022 18:13:21 -0700
Subject: [PATCH] Added end dates to event description card and mini event card

---
 components/EventDescriptionCard.tsx |  9 ++++++++-
 components/EventSetting.tsx         | 25 ++++++++++++++-----------
 components/MiniEventCard.tsx        |  8 +++++++-
 3 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/components/EventDescriptionCard.tsx b/components/EventDescriptionCard.tsx
index 67dde493..77ca0f0a 100644
--- a/components/EventDescriptionCard.tsx
+++ b/components/EventDescriptionCard.tsx
@@ -14,6 +14,7 @@ interface Props {
   online: boolean;
   location: string;
   date: Date;
+  endDate?: Date;
   poster?: string;
   registerLink?: string;
   permaLink: string;
@@ -38,6 +39,7 @@ export function EventDescriptionCard({
   online,
   registerLink,
   permaLink,
+  endDate,
 }: Props) {
   const Icon = getIcon(location);
 
@@ -48,7 +50,12 @@ export function EventDescriptionCard({
       <div className={styles.details}>
         <h1 className={styles.name}>{name}</h1>
         <h2 className={styles.setting}>
-          <EventSetting date={date} online={online} location={location} />
+          <EventSetting
+            date={date}
+            endDate={endDate}
+            online={online}
+            location={location}
+          />
         </h2>
         <p className={styles.desc}>{short}</p>
         <Link href={permaLink}>Learn more</Link>
diff --git a/components/EventSetting.tsx b/components/EventSetting.tsx
index e420384a..395bd1da 100644
--- a/components/EventSetting.tsx
+++ b/components/EventSetting.tsx
@@ -15,22 +15,25 @@ export function EventSetting(props: Props) {
     month: "long",
     year: "numeric",
   });
-  const time = props.date.toLocaleTimeString("en-US", {
+  let time = props.date.toLocaleTimeString("en-US", {
     hour: "numeric",
     minute: "numeric",
     timeZoneName: "short",
   });
+  time = time.substring(0, time.length - 3); // remove the time zone tag (eg PDT) from the start date
 
-  const endDate = props.endDate?.toLocaleDateString("en-US", {
-    day: "numeric",
-    month: "long",
-    year: "numeric",
-  });
-  const endTime = props.endDate?.toLocaleTimeString("en-US", {
-    hour: "numeric",
-    minute: "numeric",
-    timeZoneName: "short",
-  });
+  const endDate =
+    props.endDate?.toLocaleDateString("en-US", {
+      day: "numeric",
+      month: "long",
+      year: "numeric",
+    }) ?? "";
+  const endTime =
+    props.endDate?.toLocaleTimeString("en-US", {
+      hour: "numeric",
+      minute: "numeric",
+      timeZoneName: "short",
+    }) ?? "";
 
   const location = props.online ? `Online - ${props.location}` : props.location;
   const separator = <span className={styles.separator}> | </span>;
diff --git a/components/MiniEventCard.tsx b/components/MiniEventCard.tsx
index 9eed31ce..889b2ee4 100644
--- a/components/MiniEventCard.tsx
+++ b/components/MiniEventCard.tsx
@@ -28,6 +28,7 @@ export const MiniEventCard: React.FC<MiniEventCardProps> = ({
   year,
   term,
   slug,
+  endDate,
 }) => {
   return (
     <details className={styles.card}>
@@ -38,7 +39,12 @@ export const MiniEventCard: React.FC<MiniEventCardProps> = ({
             <div className={styles.nameSpacer}></div>
           </h2>
           <div className={styles.info}>
-            <EventSetting date={date} location={location} online={online} />
+            <EventSetting
+              date={date}
+              endDate={endDate}
+              location={location}
+              online={online}
+            />
           </div>
           <p className={styles.shortDescription}>{short}</p>
         </div>