From 7b07cfe9e62ec29d01c16b588533b474b1b588b8 Mon Sep 17 00:00:00 2001
From: Wes Weitzel <wesweitzel@gmail.com>
Date: Thu, 30 Nov 2023 21:41:42 -0800
Subject: [PATCH] Format the time (#82)

---
 src/components/FixtureRow.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/FixtureRow.tsx b/src/components/FixtureRow.tsx
index e4d2f40..cd35259 100644
--- a/src/components/FixtureRow.tsx
+++ b/src/components/FixtureRow.tsx
@@ -12,6 +12,17 @@ function FixtureRow({fixture}: FixtureRowProps) {
     return null;
   }
 
+  const date = new Date(fixture.date);
+
+  function formattedTime(date: Date) {
+    let hours = date.getHours();
+    hours = hours % 12 || 12;
+    let minutes = date.getMinutes().toString();
+    minutes = minutes.padStart(2, '0');
+    const ampm = date.getHours() >= 12 ? 'PM' : 'AM';
+    return `${hours}:${minutes} ${ampm}`;
+  }
+
   return (
     <>
       <button
@@ -41,8 +52,8 @@ function FixtureRow({fixture}: FixtureRowProps) {
             </div>
           </div>
           <div className="d-flex flex-column align-items-start">
-            <div>{new Date(fixture.date).toDateString()}</div>
-            <div>{new Date(fixture.date).toLocaleTimeString()}</div>
+            <div>{date.toDateString()}</div>
+            <div>{formattedTime(date)}</div>
           </div>
         </div>
       </button>