From 195b7cfe7fd3add1e1b70cd691737465036a68cd Mon Sep 17 00:00:00 2001
From: vildeopp <64434819+vildeopp@users.noreply.github.com>
Date: Thu, 20 Jul 2023 09:31:31 +0200
Subject: [PATCH] fix(clock): made clock work on older browsers (#1141)

* fix(clock): made clock work on older browsers

* chore(shared): relocated time.ts to shared utils

* fix(clock): remove hydration errors

---------

Co-authored-by: lindtvedtsebastian <lindtvedt.sebastian@gmail.com>
---
 .../scenarios/Table/components/Time/index.tsx |  4 ++--
 next-tavla/src/Board/utils/time.ts            | 14 ------------
 .../src/Shared/components/Clock/index.tsx     | 14 ++++--------
 next-tavla/src/Shared/utils/time.ts           | 22 +++++++++++++++++++
 4 files changed, 28 insertions(+), 26 deletions(-)
 delete mode 100644 next-tavla/src/Board/utils/time.ts
 create mode 100644 next-tavla/src/Shared/utils/time.ts

diff --git a/next-tavla/src/Board/scenarios/Table/components/Time/index.tsx b/next-tavla/src/Board/scenarios/Table/components/Time/index.tsx
index 64a3c524a..c4fb3cd0b 100644
--- a/next-tavla/src/Board/scenarios/Table/components/Time/index.tsx
+++ b/next-tavla/src/Board/scenarios/Table/components/Time/index.tsx
@@ -1,5 +1,5 @@
 import { useNonNullContext } from 'hooks/useNonNullContext'
-import { formatTime, getRelativeTimeString } from 'Board/utils/time'
+import { formatDateString, getRelativeTimeString } from 'utils/time'
 import { DepartureContext } from '../../contexts'
 
 import classes from './styles.module.css'
@@ -18,7 +18,7 @@ function Time() {
                     {getRelativeTimeString(departure.expectedDepartureTime)}
                 </div>
                 <div className={classes.aimedDepartureTime}>
-                    {formatTime(departure.aimedDepartureTime)}
+                    {formatDateString(departure.aimedDepartureTime)}
                 </div>
             </td>
         )
diff --git a/next-tavla/src/Board/utils/time.ts b/next-tavla/src/Board/utils/time.ts
deleted file mode 100644
index b2b1eca3c..000000000
--- a/next-tavla/src/Board/utils/time.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export function getRelativeTimeString(timestamp: string) {
-    const timeDiff = Date.parse(timestamp) - Date.now()
-    if (timeDiff < 60_000) return 'Nå'
-    else if (timeDiff < 900_000) return Math.floor(timeDiff / 60_000) + ' min'
-    else return formatTime(timestamp)
-}
-
-export function formatTime(timestamp: string) {
-    return Intl.DateTimeFormat('no-NB', {
-        hour12: false,
-        hour: '2-digit',
-        minute: '2-digit',
-    }).format(Date.parse(timestamp))
-}
diff --git a/next-tavla/src/Shared/components/Clock/index.tsx b/next-tavla/src/Shared/components/Clock/index.tsx
index 00e13a82b..c681634be 100644
--- a/next-tavla/src/Shared/components/Clock/index.tsx
+++ b/next-tavla/src/Shared/components/Clock/index.tsx
@@ -1,24 +1,18 @@
 import { useEffect, useState } from 'react'
 import classes from './styles.module.css'
+import { formatTimeStamp } from 'utils/time'
 
 function Clock() {
-    const [currentTime, setCurrentTime] = useState(Date.now())
+    const [currentTime, setCurrentTime] = useState(0)
 
     useEffect(() => {
         const intervalId = setInterval(() => setCurrentTime(Date.now()), 1000)
         return () => clearInterval(intervalId)
     }, [])
 
-    const time = new Intl.DateTimeFormat('no-NB', {
-        timeStyle: 'short',
-        timeZone: 'Europe/Oslo',
-    }).format(currentTime)
+    const time = formatTimeStamp(currentTime)
 
-    return (
-        <span suppressHydrationWarning className={classes.clock}>
-            {time}
-        </span>
-    )
+    return <span className={classes.clock}>{time}</span>
 }
 
 export { Clock }
diff --git a/next-tavla/src/Shared/utils/time.ts b/next-tavla/src/Shared/utils/time.ts
new file mode 100644
index 000000000..3a40eea14
--- /dev/null
+++ b/next-tavla/src/Shared/utils/time.ts
@@ -0,0 +1,22 @@
+export function getRelativeTimeString(dateString: string) {
+    const timeDiff = Date.parse(dateString) - Date.now()
+    if (timeDiff < 60_000) return 'Nå'
+    else if (timeDiff < 900_000) return Math.floor(timeDiff / 60_000) + ' min'
+    else return formatDateString(dateString)
+}
+
+export function formatDateString(dateString: string) {
+    return Intl.DateTimeFormat('no-NB', {
+        hour12: false,
+        hour: '2-digit',
+        minute: '2-digit',
+    }).format(Date.parse(dateString))
+}
+
+export function formatTimeStamp(timestamp: number) {
+    return Intl.DateTimeFormat('no-NB', {
+        hour12: false,
+        hour: '2-digit',
+        minute: '2-digit',
+    }).format(timestamp)
+}