Use Intl.DateTimeFormat for datetime formatting

Also makes 12/24 clock style configurable
cinnyapp · Aug 3, 2024 · 9e25d8c · 9e25d8c
1 parent 3b5a66d
commit 9e25d8c
Show file tree

Hide file tree

Showing 14 changed files with 189 additions and 77 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,8 +36,6 @@
     "blurhash": "2.0.4",
     "browser-encrypt-attachment": "0.3.0",
     "classnames": "2.3.2",
-    "dateformat": "5.0.3",
-    "dayjs": "1.11.10",
     "domhandler": "5.0.3",
     "emojibase": "6.1.0",
     "emojibase-data": "7.0.1",

diff --git a/src/app/components/message/Time.tsx b/src/app/components/message/Time.tsx
@@ -1,27 +1,36 @@
 import React, { ComponentProps } from 'react';
 import { Text, as } from 'folds';
-import { timeDayMonYear, timeHourMinute, today, yesterday } from '../../utils/time';
+import { DateTime } from '../../utils/time';
 
 export type TimeProps = {
   compact?: boolean;
   ts: number;
+  dateTime: DateTime;
 };
 
 export const Time = as<'span', TimeProps & ComponentProps<typeof Text>>(
-  ({ compact, ts, ...props }, ref) => {
+  ({ compact, ts, dateTime, ...props }, ref) => {
+    const date = new Date(ts);
+    const { isToday, isYesterday, relativeTerm } = dateTime.relative(date);
     let time = '';
-    if (compact) {
-      time = timeHourMinute(ts);
-    } else if (today(ts)) {
-      time = timeHourMinute(ts);
-    } else if (yesterday(ts)) {
-      time = `Yesterday ${timeHourMinute(ts)}`;
+    if (compact || isToday) {
+      time = dateTime.time(date);
+    } else if (isYesterday) {
+      time = `${relativeTerm}, ${dateTime.time(date)}`;
     } else {
-      time = `${timeDayMonYear(ts)} ${timeHourMinute(ts)}`;
+      time = `${dateTime.dateTime(date)}`;
     }
 
     return (
-      <Text as="time" style={{ flexShrink: 0 }} size="T200" priority="300" {...props} ref={ref}>
+      <Text
+        as="time"
+        style={{ flexShrink: 0 }}
+        size="T200"
+        priority="300"
+        title={dateTime.full(date)}
+        {...props}
+        ref={ref}
+      >
         {time}
       </Text>
     );

diff --git a/src/app/components/room-intro/RoomIntro.tsx b/src/app/components/room-intro/RoomIntro.tsx
@@ -8,7 +8,7 @@ import { getMemberDisplayName, getStateEvent } from '../../utils/room';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { getMxIdLocalPart } from '../../utils/matrix';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import { timeDayMonthYear, timeHourMinute } from '../../utils/time';
+import { DateTime } from '../../utils/time';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { RoomAvatar } from '../room-avatar';
 import { nameInitials } from '../../utils/common';
@@ -17,9 +17,10 @@ import { mDirectAtom } from '../../state/mDirectList';
 
 export type RoomIntroProps = {
   room: Room;
+  dateTime: DateTime;
 };
 
-export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) => {
+export const RoomIntro = as<'div', RoomIntroProps>(({ room, dateTime, ...props }, ref) => {
   const mx = useMatrixClient();
   const { navigateRoom } = useRoomNavigate();
   const mDirects = useAtomValue(mDirectAtom);
@@ -65,7 +66,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
             <Text size="T200" priority="300">
               {'Created by '}
               <b>@{creatorName}</b>
-              {` on ${timeDayMonthYear(ts)} ${timeHourMinute(ts)}`}
+              {` on ${dateTime.full(ts)}`}
             </Text>
           )}
         </Box>

diff --git a/src/app/features/message-search/MessageSearch.tsx b/src/app/features/message-search/MessageSearch.tsx
@@ -23,6 +23,7 @@ import { SearchResultGroup } from './SearchResultGroup';
 import { SearchInput } from './SearchInput';
 import { SearchFilters } from './SearchFilters';
 import { VirtualTile } from '../../components/virtualizer';
+import { useDateTime } from '../../utils/time';
 
 const useSearchPathSearchParams = (searchParams: URLSearchParams): _SearchPathSearchParams =>
   useMemo(
@@ -53,6 +54,7 @@ export function MessageSearch({
   const mx = useMatrixClient();
   const mDirects = useAtomValue(mDirectAtom);
   const allRooms = useRooms(mx, allRoomsAtom, mDirects);
+  const dateTime = useDateTime();
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
   const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
   const searchInputRef = useRef<HTMLInputElement>(null);
@@ -294,6 +296,7 @@ export function MessageSearch({
                     room={groupRoom}
                     highlights={highlights}
                     items={group.items}
+                    dateTime={dateTime}
                     mediaAutoLoad={mediaAutoLoad}
                     urlPreview={urlPreview}
                     onOpen={navigateRoom}

diff --git a/src/app/features/message-search/SearchResultGroup.tsx b/src/app/features/message-search/SearchResultGroup.tsx
@@ -33,11 +33,13 @@ import { ResultItem } from './useMessageSearch';
 import { SequenceCard } from '../../components/sequence-card';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { UserAvatar } from '../../components/user-avatar';
+import { DateTime } from '../../utils/time';
 
 type SearchResultGroupProps = {
   room: Room;
   highlights: string[];
   items: ResultItem[];
+  dateTime: DateTime;
   mediaAutoLoad?: boolean;
   urlPreview?: boolean;
   onOpen: (roomId: string, eventId: string) => void;
@@ -46,6 +48,7 @@ export function SearchResultGroup({
   room,
   highlights,
   items,
+  dateTime,
   mediaAutoLoad,
   urlPreview,
   onOpen,
@@ -228,7 +231,7 @@ export function SearchResultGroup({
                         <b>{displayName}</b>
                       </Text>
                     </Username>
-                    <Time ts={event.origin_server_ts} />
+                    <Time ts={event.origin_server_ts} dateTime={dateTime} />
                   </Box>
                   <Box shrink="No" gap="200" alignItems="Center">
                     <Chip

diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
@@ -99,7 +99,7 @@ import { markAsRead } from '../../../client/action/notifications';
 import { useDebounce } from '../../hooks/useDebounce';
 import { getResizeObserverEntry, useResizeObserver } from '../../hooks/useResizeObserver';
 import * as css from './RoomTimeline.css';
-import { inSameDay, minuteDifference, timeDayMonthYear, today, yesterday } from '../../utils/time';
+import { isSameDay, minuteDifference, useDateTime } from '../../utils/time';
 import { createMentionElement, isEmptyEditor, moveCursor } from '../../components/editor';
 import { roomIdToReplyDraftAtomFamily } from '../../state/room/roomInputDrafts';
 import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
@@ -448,6 +448,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const { navigateRoom, navigateSpace } = useRoomNavigate();
   const roomToParents = useAtomValue(roomToParentsAtom);
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
+  const dateTime = useDateTime();
 
   const imagePackRooms: Room[] = useMemo(() => {
     const allParentSpaces = [room.roomId].concat(
@@ -984,6 +985,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             data-message-id={mEventId}
             room={room}
             mEvent={mEvent}
+            dateTime={dateTime}
             messageSpacing={messageSpacing}
             messageLayout={messageLayout}
             collapse={collapse}
@@ -1056,6 +1058,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             data-message-id={mEventId}
             room={room}
             mEvent={mEvent}
+            dateTime={dateTime}
             messageSpacing={messageSpacing}
             messageLayout={messageLayout}
             collapse={collapse}
@@ -1165,6 +1168,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             data-message-id={mEventId}
             room={room}
             mEvent={mEvent}
+            dateTime={dateTime}
             messageSpacing={messageSpacing}
             messageLayout={messageLayout}
             collapse={collapse}
@@ -1216,7 +1220,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const highlighted = focusItem?.index === item && focusItem.highlight;
         const parsed = parseMemberEvent(mEvent);
 
-        const timeJSX = <Time ts={mEvent.getTs()} compact={messageLayout === 1} />;
+        const timeJSX = (
+          <Time ts={mEvent.getTs()} compact={messageLayout === 1} dateTime={dateTime} />
+        );
 
         return (
           <Event
@@ -1249,7 +1255,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const senderId = mEvent.getSender() ?? '';
         const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
-        const timeJSX = <Time ts={mEvent.getTs()} compact={messageLayout === 1} />;
+        const timeJSX = (
+          <Time ts={mEvent.getTs()} compact={messageLayout === 1} dateTime={dateTime} />
+        );
 
         return (
           <Event
@@ -1283,7 +1291,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const senderId = mEvent.getSender() ?? '';
         const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
-        const timeJSX = <Time ts={mEvent.getTs()} compact={messageLayout === 1} />;
+        const timeJSX = (
+          <Time ts={mEvent.getTs()} compact={messageLayout === 1} dateTime={dateTime} />
+        );
 
         return (
           <Event
@@ -1317,7 +1327,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const senderId = mEvent.getSender() ?? '';
         const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
-        const timeJSX = <Time ts={mEvent.getTs()} compact={messageLayout === 1} />;
+        const timeJSX = (
+          <Time ts={mEvent.getTs()} compact={messageLayout === 1} dateTime={dateTime} />
+        );
 
         return (
           <Event
@@ -1353,7 +1365,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       const senderId = mEvent.getSender() ?? '';
       const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
-      const timeJSX = <Time ts={mEvent.getTs()} compact={messageLayout === 1} />;
+      const timeJSX = (
+        <Time ts={mEvent.getTs()} compact={messageLayout === 1} dateTime={dateTime} />
+      );
 
       return (
         <Event
@@ -1394,7 +1408,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       const senderId = mEvent.getSender() ?? '';
       const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
 
-      const timeJSX = <Time ts={mEvent.getTs()} compact={messageLayout === 1} />;
+      const timeJSX = (
+        <Time ts={mEvent.getTs()} compact={messageLayout === 1} dateTime={dateTime} />
+      );
 
       return (
         <Event
@@ -1444,7 +1460,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       newDivider = prevEvent?.getId() === readUptoEventIdRef.current;
     }
     if (!dayDivider) {
-      dayDivider = prevEvent ? !inSameDay(prevEvent.getTs(), mEvent.getTs()) : false;
+      dayDivider = prevEvent ? !isSameDay(prevEvent.getDate()!, mEvent.getDate()!) : false;
     }
 
     const collapsed =
@@ -1454,7 +1470,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       prevEvent !== undefined &&
       prevEvent.getSender() === mEvent.getSender() &&
       prevEvent.getType() === mEvent.getType() &&
-      minuteDifference(prevEvent.getTs(), mEvent.getTs()) < 2;
+      minuteDifference(prevEvent.getDate()!, mEvent.getDate()!) < 2;
 
     const eventJSX = reactionOrEditEvent(mEvent)
       ? null
@@ -1488,9 +1504,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             <Badge as="span" size="500" variant="Secondary" fill="None" radii="300">
               <Text size="L400">
                 {(() => {
-                  if (today(mEvent.getTs())) return 'Today';
-                  if (yesterday(mEvent.getTs())) return 'Yesterday';
-                  return timeDayMonthYear(mEvent.getTs());
+                  const date = mEvent.getDate()!;
+                  const { relativeTerm } = dateTime.relative(date);
+                  return relativeTerm || dateTime.date(date);
                 })()}
               </Text>
             </Badge>
@@ -1553,7 +1569,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                 }`,
               }}
             >
-              <RoomIntro room={room} />
+              <RoomIntro room={room} dateTime={dateTime} />
             </div>
           )}
           {(canPaginateBack || !rangeAtStart) &&

diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx
@@ -75,6 +75,7 @@ import {
 import { copyToClipboard } from '../../../utils/dom';
 import { useClientConfig } from '../../../hooks/useClientConfig';
 import { stopPropagation } from '../../../utils/keyboard';
+import { DateTime } from '../../../utils/time';
 
 export type ReactionHandler = (keyOrMxc: string, shortcode: string) => void;
 
@@ -630,6 +631,7 @@ export type MessageProps = {
   canSendReaction?: boolean;
   imagePackRooms?: Room[];
   relations?: Relations;
+  dateTime: DateTime;
   messageLayout: MessageLayout;
   messageSpacing: MessageSpacing;
   onUserClick: MouseEventHandler<HTMLButtonElement>;
@@ -653,6 +655,7 @@ export const Message = as<'div', MessageProps>(
       canSendReaction,
       imagePackRooms,
       relations,
+      dateTime,
       messageLayout,
       messageSpacing,
       onUserClick,
@@ -709,7 +712,7 @@ export const Message = as<'div', MessageProps>(
               </Text>
             </>
           )}
-          <Time ts={mEvent.getTs()} compact={messageLayout === 1} />
+          <Time ts={mEvent.getTs()} compact={messageLayout === 1} dateTime={dateTime} />
         </Box>
       </Box>
     );

diff --git a/src/app/organisms/settings/DeviceManage.jsx b/src/app/organisms/settings/DeviceManage.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import './DeviceManage.scss';
-import dateFormat from 'dateformat';
+import { useDateTime } from '../../utils/time';
 
 import { isCrossVerified } from '../../../util/matrixUtil';
 import { openReusableDialog, openEmojiVerification } from '../../../client/action/navigation';
@@ -71,6 +71,7 @@ function DeviceManage() {
   const mountStore = useStore();
   mountStore.setItem(true);
   const isMeVerified = isCrossVerified(mx, mx.deviceId);
+  const dateTime = useDateTime();
 
   useEffect(() => {
     setProcessing([]);
@@ -184,9 +185,9 @@ function DeviceManage() {
               <Text variant="b3">
                 Last activity
                 <span style={{ color: 'var(--tc-surface-normal)' }}>
-                  {dateFormat(new Date(lastTS), ' hh:MM TT, dd/mm/yyyy')}
+                  {` ${  dateTime.full(new Date(lastTS))}`}
                 </span>
-                {lastIP ? ` at ${lastIP}` : ''}
+                {lastIP ? ` from ${lastIP}` : ''}
               </Text>
             )}
             {isCurrentDevice && (

diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx
@@ -69,6 +69,7 @@ function AppearanceSection() {
   const [urlPreview, setUrlPreview] = useSetting(settingsAtom, 'urlPreview');
   const [encUrlPreview, setEncUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
   const [showHiddenEvents, setShowHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
+  const [hour12, setHour12] = useSetting(settingsAtom, 'hour12');
   const spacings = ['0', '100', '200', '300', '400', '500'];
 
   const [currentZoom, setCurrentZoom] = useState(`${pageZoom}`);
@@ -266,6 +267,11 @@ function AppearanceSection() {
           }
           content={<Text variant="b3">Show hidden state and message events.</Text>}
         />
+        <SettingTile
+          title="12-hour time"
+          options={<Toggle isActive={hour12} onToggle={() => setHour12(!hour12)} />}
+          content={<Text variant="b3">Show timestamps in 12-hour format.</Text>}
+        />
       </div>
     </div>
   );