From 61ffcedf483af604ee02291d4b5d9fb8f2a64e2a Mon Sep 17 00:00:00 2001
From: Ivana Machacikova <131284389+ivamach@users.noreply.github.com>
Date: Tue, 30 Apr 2024 17:47:10 +0200
Subject: [PATCH] SMA-108: fix the date in rate game popup window (#88)

---
 .../src/components/RateGameComponent.tsx      | 41 ++++++++-----------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/frontend/sportsmatch-app/src/components/RateGameComponent.tsx b/frontend/sportsmatch-app/src/components/RateGameComponent.tsx
index 6943cdd..acc988e 100644
--- a/frontend/sportsmatch-app/src/components/RateGameComponent.tsx
+++ b/frontend/sportsmatch-app/src/components/RateGameComponent.tsx
@@ -53,21 +53,6 @@ export default function RateGameComponent(p: Props) {
     init()
   }, [])
 
-  const dayOfTheWeek = (year: number, month: number, day: number) => {
-    const daysOfTheWeek = [
-      'Sunday',
-      'Monday',
-      'Tuesday',
-      'Wednesday',
-      'Thursday',
-      'Friday',
-      'Saturday',
-    ]
-    const date = new Date(year, month - 1, day)
-    const dateIndex = date.getDay()
-    return daysOfTheWeek[dateIndex]
-  }
-
   const userProfilePicture = 'pictures/unknown-user-placeholder.png'
   const opponentProfilePicture = 'pictures/unknown-user-placeholder.png'
 
@@ -106,6 +91,18 @@ export default function RateGameComponent(p: Props) {
     const value = parseInt(e.target.value) || 0
     setOpponentScore(value)
   }
+
+  const getDateAndTime = (type: string, date: string) => {
+    const dateStart: string[] = date.split(' ')
+    if (type === 'date') {
+      return dateStart[0]
+    } else if (type === 'time') {
+      return dateStart[1]
+    } else {
+      return null
+    }
+  }
+
   return (
     <>
       <div className="container-sm rate-game-window-wrapper">
@@ -117,14 +114,12 @@ export default function RateGameComponent(p: Props) {
             {myEvent ? (
               <>
                 <span>
-                  {dayOfTheWeek(
-                    parseInt(myEvent.dateStart[0]),
-                    parseInt(myEvent.dateStart[1]),
-                    parseInt(myEvent.dateStart[2]),
-                  )}
-                  , {myEvent.dateStart[3]}:{myEvent.dateStart[4]}
-                  {' - '}
-                  {myEvent.dateEnd[3]}:{myEvent.dateEnd[4]}
+                  {'on ' +
+                    getDateAndTime('date', myEvent.dateStart) +
+                    ' at ' +
+                    getDateAndTime('time', myEvent.dateStart) +
+                    ' - ' +
+                    getDateAndTime('time', myEvent.dateEnd)}
                 </span>
                 <br />
                 <span>{myEvent.placeDTO?.name}</span>{' '}