From 0b8f251a2d8f70520793b9a80ce317731d84ffc2 Mon Sep 17 00:00:00 2001 From: Harry Oosterveen Date: Fri, 14 Feb 2025 20:08:17 +0100 Subject: [PATCH 1/4] Format time using dateLocale --- src/components/hooks/useTimezone.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/hooks/useTimezone.ts b/src/components/hooks/useTimezone.ts index c74f513f..f6cf79b5 100644 --- a/src/components/hooks/useTimezone.ts +++ b/src/components/hooks/useTimezone.ts @@ -2,11 +2,13 @@ import { setItem } from 'next-basics'; import { TIMEZONE_CONFIG } from 'lib/constants'; import { formatInTimeZone, zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz'; import useStore, { setTimezone } from 'store/app'; +import useLocale from './useLocale'; const selector = (state: { timezone: string }) => state.timezone; export function useTimezone() { const timezone = useStore(selector); + const { dateLocale } = useLocale(); const saveTimezone = (value: string) => { setItem(TIMEZONE_CONFIG, value); @@ -20,6 +22,7 @@ export function useTimezone() { : date.split(' ').join('T') + 'Z', timezone, pattern, + { locale: dateLocale }, ); }; From c0c1138e2edd616d351199caabe4366806851548 Mon Sep 17 00:00:00 2001 From: Harry Oosterveen Date: Sat, 15 Feb 2025 10:57:12 +0100 Subject: [PATCH 2/4] Format hours in session week table --- .../(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx index 3e15ddfa..c59fd713 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx +++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx @@ -40,7 +40,9 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) { {Array(24) .fill(null) .map((_, i) => { - const label = format(addHours(startOfDay(new Date()), i), 'haaa'); + const label = format(addHours(startOfDay(new Date()), i), 'p', { locale: dateLocale }) + .replace(/\D00 ?/, '') + .toLowerCase(); return (
{label} From 68e2fe5d6f0902ba1070341db6f8ac3ce392794a Mon Sep 17 00:00:00 2001 From: Harry Oosterveen Date: Sat, 15 Feb 2025 18:35:39 +0100 Subject: [PATCH 3/4] Start of week according to locale in SessionsWeekly --- .../[websiteId]/sessions/SessionsWeekly.tsx | 58 ++++++++++--------- 1 file changed, 32 insertions(+), 26 deletions(-) diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx index c59fd713..038fb1ed 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx +++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx @@ -10,6 +10,10 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) { const { data, ...props } = useWebsiteSessionsWeekly(websiteId); const { dateLocale } = useLocale(); const { labels, formatMessage } = useMessages(); + const { weekStartsOn } = dateLocale.options; + const daysOfWeek = Array(7) + .fill(weekStartsOn) + .map((d, i) => (d + i) % 7); const [, max] = data ? data.reduce((arr: number[], hours: number[], index: number) => { @@ -50,33 +54,35 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) { ); })}
- {data?.map((day: number[], index: number) => { - return ( -
-
- {format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })} + {data && + daysOfWeek.map((index: number) => { + const day = data[index]; + return ( +
+
+ {format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })} +
+ {day?.map((hour: number) => { + const pct = hour / max; + return ( +
+ {hour > 0 && ( + +
+ + )} +
+ ); + })}
- {day?.map((hour: number) => { - const pct = hour / max; - return ( -
- {hour > 0 && ( - -
- - )} -
- ); - })} -
- ); - })} + ); + })}
); From 95259ee944529d0da1b18af715d8630de670e045 Mon Sep 17 00:00:00 2001 From: Harry Oosterveen Date: Sat, 15 Feb 2025 18:37:15 +0100 Subject: [PATCH 4/4] Always use localized format --- src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx | 2 +- .../[websiteId]/sessions/[sessionId]/SessionActivity.tsx | 2 +- .../websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx b/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx index f40be9db..5d85c9db 100644 --- a/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx +++ b/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx @@ -53,7 +53,7 @@ export function RealtimeLog({ data }: { data: RealtimeData }) { }, ]; - const getTime = ({ createdAt, firstAt }) => formatTimezoneDate(firstAt || createdAt, 'h:mm:ss'); + const getTime = ({ createdAt, firstAt }) => formatTimezoneDate(firstAt || createdAt, 'pp'); const getColor = ({ id, sessionId }) => stringToColor(sessionId || id); diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx index 642b93d9..defecc54 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx +++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx @@ -33,7 +33,7 @@ export function SessionActivity({ return ( <> {showHeader && ( -
{formatTimezoneDate(createdAt, 'EEEE, PPP')}
+
{formatTimezoneDate(createdAt, 'PPPP')}
)}
diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx index 6f9a8f3d..edd0353e 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx +++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx @@ -20,10 +20,10 @@ export default function SessionInfo({ data }) {
{formatMessage(labels.lastSeen)}
-
{formatTimezoneDate(data?.lastAt, 'EEEE, PPPpp')}
+
{formatTimezoneDate(data?.lastAt, 'PPPPpp')}
{formatMessage(labels.firstSeen)}
-
{formatTimezoneDate(data?.firstAt, 'EEEE, PPPpp')}
+
{formatTimezoneDate(data?.firstAt, 'PPPPpp')}
{formatMessage(labels.country)}