From 4b9301d20a6e2523411584b938c25c21b14251ab Mon Sep 17 00:00:00 2001 From: agmm <5076526+agmm@users.noreply.github.com> Date: Tue, 14 May 2024 10:31:11 -0400 Subject: [PATCH 1/2] Add setting to enable 24-hour time format --- src/app/components/message/Time.tsx | 14 ++++++++++---- src/app/components/room-intro/RoomIntro.tsx | 6 +++++- src/app/organisms/settings/Settings.jsx | 15 +++++++++++++++ src/app/state/settings.ts | 4 ++++ src/app/utils/time.ts | 3 ++- 5 files changed, 36 insertions(+), 6 deletions(-) diff --git a/src/app/components/message/Time.tsx b/src/app/components/message/Time.tsx index de11cf8961..676b4205ab 100644 --- a/src/app/components/message/Time.tsx +++ b/src/app/components/message/Time.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { Text, as } from 'folds'; import { timeDayMonYear, timeHourMinute, today, yesterday } from '../../utils/time'; +import { useSetting } from '../../state/hooks/settings'; +import { settingsAtom } from '../../state/settings'; export type TimeProps = { compact?: boolean; @@ -8,15 +10,19 @@ export type TimeProps = { }; export const Time = as<'span', TimeProps>(({ compact, ts, ...props }, ref) => { + const [useInternationalTime] = useSetting(settingsAtom, 'useInternationalTime'); + const formattedTime = timeHourMinute(ts, useInternationalTime); + let time = ''; + if (compact) { - time = timeHourMinute(ts); + time = formattedTime; } else if (today(ts)) { - time = timeHourMinute(ts); + time = formattedTime; } else if (yesterday(ts)) { - time = `Yesterday ${timeHourMinute(ts)}`; + time = `Yesterday ${formattedTime}`; } else { - time = `${timeDayMonYear(ts)} ${timeHourMinute(ts)}`; + time = `${timeDayMonYear(ts)} ${formattedTime}`; } return ( diff --git a/src/app/components/room-intro/RoomIntro.tsx b/src/app/components/room-intro/RoomIntro.tsx index 863c7cf018..23bfe3a6c8 100644 --- a/src/app/components/room-intro/RoomIntro.tsx +++ b/src/app/components/room-intro/RoomIntro.tsx @@ -9,6 +9,8 @@ import { useMatrixClient } from '../../hooks/useMatrixClient'; import { getMxIdLocalPart } from '../../utils/matrix'; import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback'; import { timeDayMonthYear, timeHourMinute } from '../../utils/time'; +import { useSetting } from '../../state/hooks/settings'; +import { settingsAtom } from '../../state/settings'; export type RoomIntroProps = { room: Room; @@ -36,6 +38,8 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) => useCallback(async (roomId: string) => mx.joinRoom(roomId), [mx]) ); + const [useInternationalTime] = useSetting(settingsAtom, 'useInternationalTime'); + return ( @@ -66,7 +70,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) => {'Created by '} @{creatorName} - {` on ${timeDayMonthYear(ts)} ${timeHourMinute(ts)}`} + {` on ${timeDayMonthYear(ts)} ${timeHourMinute(ts, useInternationalTime)}`} )} diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx index 47abb45c01..98424af646 100644 --- a/src/app/organisms/settings/Settings.jsx +++ b/src/app/organisms/settings/Settings.jsx @@ -62,6 +62,11 @@ function AppearanceSection() { const [urlPreview, setUrlPreview] = useSetting(settingsAtom, 'urlPreview'); const [encUrlPreview, setEncUrlPreview] = useSetting(settingsAtom, 'encUrlPreview'); const [showHiddenEvents, setShowHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents'); + const [useInternationalTime, setInternationalTime] = useSetting( + settingsAtom, + 'useInternationalTime' + ); + const spacings = ['0', '100', '200', '300', '400', '500'] return ( @@ -223,6 +228,16 @@ function AppearanceSection() { )} content={Show hidden state and message events.} /> + setInternationalTime(!useInternationalTime)} + /> + } + content={Use the 24-hour time format for all timestamps.} + /> ); diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts index 061931ea82..9a0846b8a4 100644 --- a/src/app/state/settings.ts +++ b/src/app/state/settings.ts @@ -25,6 +25,8 @@ export interface Settings { showNotifications: boolean; isNotificationSounds: boolean; + + useInternationalTime: boolean; } const defaultSettings: Settings = { @@ -48,6 +50,8 @@ const defaultSettings: Settings = { showNotifications: true, isNotificationSounds: true, + + useInternationalTime: false, }; export const getSettings = () => { diff --git a/src/app/utils/time.ts b/src/app/utils/time.ts index 3ee6720c05..f959ca9fa9 100644 --- a/src/app/utils/time.ts +++ b/src/app/utils/time.ts @@ -9,7 +9,8 @@ export const today = (ts: number): boolean => dayjs(ts).isToday(); export const yesterday = (ts: number): boolean => dayjs(ts).isYesterday(); -export const timeHourMinute = (ts: number): string => dayjs(ts).format('hh:mm A'); +export const timeHourMinute = (ts: number, international: boolean = false): string => + dayjs(ts).format(international ? 'HH:mm' : 'hh:mm A'); export const timeDayMonYear = (ts: number): string => dayjs(ts).format('D MMM YYYY'); From c1f1206533ac00a0828f22fa5d7e26b1bd83c96d Mon Sep 17 00:00:00 2001 From: agmm <5076526+agmm@users.noreply.github.com> Date: Wed, 15 May 2024 12:51:03 -0400 Subject: [PATCH 2/2] Apply suggested variable name --- src/app/components/message/Time.tsx | 4 ++-- src/app/components/room-intro/RoomIntro.tsx | 4 ++-- src/app/organisms/settings/Settings.jsx | 9 +++------ src/app/state/settings.ts | 4 ++-- src/app/utils/time.ts | 4 ++-- 5 files changed, 11 insertions(+), 14 deletions(-) diff --git a/src/app/components/message/Time.tsx b/src/app/components/message/Time.tsx index 676b4205ab..2fb44f36cf 100644 --- a/src/app/components/message/Time.tsx +++ b/src/app/components/message/Time.tsx @@ -10,8 +10,8 @@ export type TimeProps = { }; export const Time = as<'span', TimeProps>(({ compact, ts, ...props }, ref) => { - const [useInternationalTime] = useSetting(settingsAtom, 'useInternationalTime'); - const formattedTime = timeHourMinute(ts, useInternationalTime); + const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock'); + const formattedTime = timeHourMinute(ts, hour24Clock); let time = ''; diff --git a/src/app/components/room-intro/RoomIntro.tsx b/src/app/components/room-intro/RoomIntro.tsx index 23bfe3a6c8..034836909f 100644 --- a/src/app/components/room-intro/RoomIntro.tsx +++ b/src/app/components/room-intro/RoomIntro.tsx @@ -38,7 +38,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) => useCallback(async (roomId: string) => mx.joinRoom(roomId), [mx]) ); - const [useInternationalTime] = useSetting(settingsAtom, 'useInternationalTime'); + const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock'); return ( @@ -70,7 +70,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) => {'Created by '} @{creatorName} - {` on ${timeDayMonthYear(ts)} ${timeHourMinute(ts, useInternationalTime)}`} + {` on ${timeDayMonthYear(ts)} ${timeHourMinute(ts, hour24Clock)}`} )} diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx index 98424af646..3a79fd6e78 100644 --- a/src/app/organisms/settings/Settings.jsx +++ b/src/app/organisms/settings/Settings.jsx @@ -62,10 +62,7 @@ function AppearanceSection() { const [urlPreview, setUrlPreview] = useSetting(settingsAtom, 'urlPreview'); const [encUrlPreview, setEncUrlPreview] = useSetting(settingsAtom, 'encUrlPreview'); const [showHiddenEvents, setShowHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents'); - const [useInternationalTime, setInternationalTime] = useSetting( - settingsAtom, - 'useInternationalTime' - ); + const [hour24Clock, setHour24Clock] = useSetting(settingsAtom, 'hour24Clock'); const spacings = ['0', '100', '200', '300', '400', '500'] @@ -232,8 +229,8 @@ function AppearanceSection() { title="Use 24-hour time" options={ setInternationalTime(!useInternationalTime)} + isActive={hour24Clock} + onToggle={() => setHour24Clock(!hour24Clock)} /> } content={Use the 24-hour time format for all timestamps.} diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts index 9a0846b8a4..56e7111ef4 100644 --- a/src/app/state/settings.ts +++ b/src/app/state/settings.ts @@ -26,7 +26,7 @@ export interface Settings { showNotifications: boolean; isNotificationSounds: boolean; - useInternationalTime: boolean; + hour24Clock: boolean; } const defaultSettings: Settings = { @@ -51,7 +51,7 @@ const defaultSettings: Settings = { showNotifications: true, isNotificationSounds: true, - useInternationalTime: false, + hour24Clock: false, }; export const getSettings = () => { diff --git a/src/app/utils/time.ts b/src/app/utils/time.ts index f959ca9fa9..5a80a9c0ef 100644 --- a/src/app/utils/time.ts +++ b/src/app/utils/time.ts @@ -9,8 +9,8 @@ export const today = (ts: number): boolean => dayjs(ts).isToday(); export const yesterday = (ts: number): boolean => dayjs(ts).isYesterday(); -export const timeHourMinute = (ts: number, international: boolean = false): string => - dayjs(ts).format(international ? 'HH:mm' : 'hh:mm A'); +export const timeHourMinute = (ts: number, hour24Clock: boolean = false): string => + dayjs(ts).format(hour24Clock ? 'HH:mm' : 'hh:mm A'); export const timeDayMonYear = (ts: number): string => dayjs(ts).format('D MMM YYYY');