Improve dates

front/src/modules/activities/comment/CommentHeader.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import { Avatar } from '@/users/components/Avatar';
 import {
-  beautifyExactDate,
+  beautifyExactDateTime,
   beautifyPastDateRelativeToNow,
 } from '~/utils/date-utils';
 
@@ -64,7 +64,7 @@ const StyledTooltip = styled(Tooltip)`
 
 export function CommentHeader({ comment, actionBar }: OwnProps) {
   const beautifiedCreatedAt = beautifyPastDateRelativeToNow(comment.createdAt);
-  const exactCreatedAt = beautifyExactDate(comment.createdAt);
+  const exactCreatedAt = beautifyExactDateTime(comment.createdAt, true);
   const showDate = beautifiedCreatedAt !== '';
 
   const author = comment.author;

front/src/modules/activities/timeline/components/TimelineActivity.tsx

@@ -7,7 +7,7 @@ import { IconNotes } from '@/ui/icon';
 import { OverflowingTextWithTooltip } from '@/ui/tooltip/OverflowingTextWithTooltip';
 import { Activity, User } from '~/generated/graphql';
 import {
-  beautifyExactDate,
+  beautifyExactDateTime,
   beautifyPastDateRelativeToNow,
 } from '~/utils/date-utils';
 
@@ -126,7 +126,7 @@ type OwnProps = {
 
 export function TimelineActivity({ activity }: OwnProps) {
   const beautifiedCreatedAt = beautifyPastDateRelativeToNow(activity.createdAt);
-  const exactCreatedAt = beautifyExactDate(activity.createdAt);
+  const exactCreatedAt = beautifyExactDateTime(activity.createdAt);
   const body = JSON.parse(activity.body ?? '{}')[0]?.content[0]?.text;
 
   const openActivityRightDrawer = useOpenActivityRightDrawer();

front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx

@@ -4,7 +4,7 @@ import { v4 as uuidV4 } from 'uuid';
 
 import { Avatar } from '@/users/components/Avatar';
 import {
-  beautifyExactDate,
+  beautifyExactDateTime,
   beautifyPastDateRelativeToNow,
 } from '~/utils/date-utils';
 
@@ -71,7 +71,7 @@ export function ShowPageSummaryCard({
 }: OwnProps) {
   const beautifiedCreatedAt =
     date !== '' ? beautifyPastDateRelativeToNow(date) : '';
-  const exactCreatedAt = date !== '' ? beautifyExactDate(date) : '';
+  const exactCreatedAt = date !== '' ? beautifyExactDateTime(date) : '';
   const dateElementId = `date-id-${uuidV4()}`;
 
   return (

front/src/utils/__tests__/date-utils.test.ts

@@ -3,6 +3,7 @@ import { DateTime } from 'luxon';
 
 import {
   beautifyExactDate,
+  beautifyExactDateTime,
   beautifyPastDateAbsolute,
   beautifyPastDateRelativeToNow,
   DEFAULT_DATE_LOCALE,
@@ -12,13 +13,58 @@ import { logError } from '../logError';
 
 jest.mock('~/utils/logError');
 
+describe('beautifyExactDateTime', () => {
+  it('should return the past date in the correct format with time', () => {
+    const mockDate = '2023-01-01T12:13:24';
+    const actualDate = new Date(mockDate);
+    const expected = DateTime.fromJSDate(actualDate)
+      .setLocale(DEFAULT_DATE_LOCALE)
+      .toFormat('DD · T');
+
+    const result = beautifyExactDateTime(mockDate);
+    expect(result).toEqual(expected);
+  });
+  it('should return the time in the correct format for a datetime that is today', () => {
+    const todayString = DateTime.local().toISODate();
+    const mockDate = `${todayString}T12:13:24`;
+    const actualDate = new Date(mockDate);
+    const expected = DateTime.fromJSDate(actualDate)
+      .setLocale(DEFAULT_DATE_LOCALE)
+      .toFormat('T');
+
+    const result = beautifyExactDateTime(mockDate);
+    expect(result).toEqual(expected);
+  });
+});
+
+describe('beautifyExactDate', () => {
+  it('should return the past date in the correct format without time', () => {
+    const mockDate = '2023-01-01T12:13:24';
+    const actualDate = new Date(mockDate);
+    const expected = DateTime.fromJSDate(actualDate)
+      .setLocale(DEFAULT_DATE_LOCALE)
+      .toFormat('DD');
+
+    const result = beautifyExactDate(mockDate);
+    expect(result).toEqual(expected);
+  });
+  it('should return Today if the date is today', () => {
+    const todayString = DateTime.local().toISODate();
+    const mockDate = `${todayString}T12:13:24`;
+    const expected = 'Today';
+
+    const result = beautifyExactDate(mockDate);
+    expect(result).toEqual(expected);
+  });
+});
+
 describe('beautifyExactDate', () => {
   it('should return the correct relative date', () => {
     const mockDate = '2023-01-01T12:13:24';
     const actualDate = new Date(mockDate);
     const expected = DateTime.fromJSDate(actualDate)
       .setLocale(DEFAULT_DATE_LOCALE)
-      .toFormat('DD · T');
+      .toFormat('DD');
 
     const result = beautifyExactDate(mockDate);
     expect(result).toEqual(expected);

front/src/utils/date-utils.ts

@@ -29,17 +29,32 @@ export function parseDate(dateToParse: Date | string | number) {
   return formattedDate.setLocale(DEFAULT_DATE_LOCALE);
 }
 
-export function beautifyExactDate(dateToBeautify: Date | string | number) {
-  try {
-    const parsedDate = parseDate(dateToBeautify);
+function isSameDay(a: DateTime, b: DateTime): boolean {
+  return a.hasSame(b, 'day') && a.hasSame(b, 'month') && a.hasSame(b, 'year');
+}
 
-    return parsedDate.toFormat('DD · T');
+function formatDate(dateToFormat: Date | string | number, format: string) {
+  try {
+    const parsedDate = parseDate(dateToFormat);
+    return parsedDate.toFormat(format);
   } catch (error) {
     logError(error);
     return '';
   }
 }
 
+export function beautifyExactDateTime(dateToBeautify: Date | string | number) {
+  const isToday = isSameDay(parseDate(dateToBeautify), DateTime.local());
+  const dateFormat = isToday ? 'T' : 'DD · T';
+  return formatDate(dateToBeautify, dateFormat);
+}
+
+export function beautifyExactDate(dateToBeautify: Date | string | number) {
+  const isToday = isSameDay(parseDate(dateToBeautify), DateTime.local());
+  const dateFormat = isToday ? "'Today'" : 'DD';
+  return formatDate(dateToBeautify, dateFormat);
+}
+
 export function beautifyPastDateRelativeToNow(
   pastDate: Date | string | number,
 ) {