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 <[email protected]>

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>
         )

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 }

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)
+}