diff --git a/src/features/user/components/MessageScreenContent.tsx b/src/features/user/components/MessageScreenContent.tsx index c6d4ac10..ee143586 100644 --- a/src/features/user/components/MessageScreenContent.tsx +++ b/src/features/user/components/MessageScreenContent.tsx @@ -12,6 +12,7 @@ import { Message } from '@polito/api-client'; import { HtmlView } from '../../../core/components/HtmlView'; import { useGetPerson } from '../../../core/queries/peopleHooks'; +import { formatDateTime } from '../../../utils/dates'; import { linkUrls } from '../../../utils/html'; export type Props = { @@ -23,8 +24,10 @@ export const MessageScreenContent = ({ message, modal }: Props) => { const { t } = useTranslation(); const styles = useStylesheet(createStyles); const hasSender = !!message?.senderId; + const hasDate = !isNaN(message?.sentAt.getDate()); const title = message?.title; const text = message?.message; + const date = formatDateTime(message?.sentAt); const personQuery = useGetPerson(message?.senderId || undefined); // replace every url in string with a link @@ -39,6 +42,11 @@ export const MessageScreenContent = ({ message, modal }: Props) => { {title ?? ''} + {!!hasDate && ( + + {date} + + )} {!!text && ( @@ -72,6 +80,10 @@ const createStyles = ({ spacing, fontWeights }: Theme) => paddingTop: spacing[3], fontWeight: fontWeights.bold, }, + date: { + paddingHorizontal: spacing[5], + paddingTop: spacing[1], + }, textMessage: { paddingHorizontal: spacing[5], paddingTop: spacing[3],