From ea14e3d365bc245f0e23af46a56a2afea0e681f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vilde=20Oppeg=C3=A5rd?= Date: Wed, 19 Jul 2023 09:47:52 +0200 Subject: [PATCH 1/3] fix(clock): made clock work on older browsers --- .../scenarios/Table/components/Time/index.tsx | 4 ++-- next-tavla/src/Board/utils/time.ts | 18 +++++++++++++----- .../src/Shared/components/Clock/index.tsx | 6 ++---- 3 files changed, 17 insertions(+), 11 deletions(-) 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..6b4bfeec1 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 'Board/utils/time' import { DepartureContext } from '../../contexts' import classes from './styles.module.css' @@ -18,7 +18,7 @@ function Time() { {getRelativeTimeString(departure.expectedDepartureTime)}
- {formatTime(departure.aimedDepartureTime)} + {formatDateString(departure.aimedDepartureTime)}
) diff --git a/next-tavla/src/Board/utils/time.ts b/next-tavla/src/Board/utils/time.ts index b2b1eca3c..3a40eea14 100644 --- a/next-tavla/src/Board/utils/time.ts +++ b/next-tavla/src/Board/utils/time.ts @@ -1,14 +1,22 @@ -export function getRelativeTimeString(timestamp: string) { - const timeDiff = Date.parse(timestamp) - Date.now() +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 formatTime(timestamp) + else return formatDateString(dateString) } -export function formatTime(timestamp: string) { +export function formatDateString(dateString: string) { return Intl.DateTimeFormat('no-NB', { hour12: false, hour: '2-digit', minute: '2-digit', - }).format(Date.parse(timestamp)) + }).format(Date.parse(dateString)) +} + +export function formatTimeStamp(timestamp: number) { + return Intl.DateTimeFormat('no-NB', { + hour12: false, + hour: '2-digit', + minute: '2-digit', + }).format(timestamp) } diff --git a/next-tavla/src/Shared/components/Clock/index.tsx b/next-tavla/src/Shared/components/Clock/index.tsx index 00e13a82b..1c598c89d 100644 --- a/next-tavla/src/Shared/components/Clock/index.tsx +++ b/next-tavla/src/Shared/components/Clock/index.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from 'react' import classes from './styles.module.css' +import { formatTimeStamp } from 'Board/utils/time' function Clock() { const [currentTime, setCurrentTime] = useState(Date.now()) @@ -9,10 +10,7 @@ function Clock() { return () => clearInterval(intervalId) }, []) - const time = new Intl.DateTimeFormat('no-NB', { - timeStyle: 'short', - timeZone: 'Europe/Oslo', - }).format(currentTime) + const time = formatTimeStamp(currentTime) return ( From ee0f1d56fcbe9eedc8175a77cffccc5a7934953a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vilde=20Oppeg=C3=A5rd?= Date: Wed, 19 Jul 2023 10:56:31 +0200 Subject: [PATCH 2/3] chore(shared): relocated time.ts to shared utils --- next-tavla/src/Board/scenarios/Table/components/Time/index.tsx | 2 +- next-tavla/src/Shared/components/Clock/index.tsx | 2 +- next-tavla/src/{Board => Shared}/utils/time.ts | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename next-tavla/src/{Board => Shared}/utils/time.ts (100%) 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 6b4bfeec1..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 { formatDateString, getRelativeTimeString } from 'Board/utils/time' +import { formatDateString, getRelativeTimeString } from 'utils/time' import { DepartureContext } from '../../contexts' import classes from './styles.module.css' diff --git a/next-tavla/src/Shared/components/Clock/index.tsx b/next-tavla/src/Shared/components/Clock/index.tsx index 1c598c89d..8a992f975 100644 --- a/next-tavla/src/Shared/components/Clock/index.tsx +++ b/next-tavla/src/Shared/components/Clock/index.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from 'react' import classes from './styles.module.css' -import { formatTimeStamp } from 'Board/utils/time' +import { formatTimeStamp } from 'utils/time' function Clock() { const [currentTime, setCurrentTime] = useState(Date.now()) diff --git a/next-tavla/src/Board/utils/time.ts b/next-tavla/src/Shared/utils/time.ts similarity index 100% rename from next-tavla/src/Board/utils/time.ts rename to next-tavla/src/Shared/utils/time.ts From 9a32a2e5f41083bc5c7ed565ff407c45a1d0763d Mon Sep 17 00:00:00 2001 From: lindtvedtsebastian Date: Wed, 19 Jul 2023 11:58:31 +0200 Subject: [PATCH 3/3] fix(clock): remove hydration errors --- next-tavla/src/Shared/components/Clock/index.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/next-tavla/src/Shared/components/Clock/index.tsx b/next-tavla/src/Shared/components/Clock/index.tsx index 8a992f975..c681634be 100644 --- a/next-tavla/src/Shared/components/Clock/index.tsx +++ b/next-tavla/src/Shared/components/Clock/index.tsx @@ -3,7 +3,7 @@ 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) @@ -12,11 +12,7 @@ function Clock() { const time = formatTimeStamp(currentTime) - return ( - - {time} - - ) + return {time} } export { Clock }