fix: add event timestamps to display

Unleash · Oct 8, 2024 · c079e8f · c079e8f
1 parent 96013a6
commit c079e8f
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 5 deletions.
diff --git a/frontend/src/component/common/TimeAgo/TimeAgo.tsx b/frontend/src/component/common/TimeAgo/TimeAgo.tsx
@@ -6,6 +6,7 @@ type TimeAgoProps = {
     fallback?: string;
     refresh?: boolean;
     timeElement?: boolean;
+    className?: string;
 };
 
 const formatTimeAgo = (date: string | number | Date) =>
@@ -20,6 +21,7 @@ export const TimeAgo: FC<TimeAgoProps> = ({
     fallback = '',
     refresh = true,
     timeElement = true,
+    className,
 }) => {
     const getValue = (): { description: string; dateTime?: Date } => {
         try {
@@ -53,6 +55,8 @@ export const TimeAgo: FC<TimeAgoProps> = ({
     }
 
     return (
-        <time dateTime={state.dateTime.toISOString()}>{state.description}</time>
+        <time className={className} dateTime={state.dateTime.toISOString()}>
+            {state.description}
+        </time>
     );
 };
diff --git a/frontend/src/component/personalDashboard/LatestProjectEvents.tsx b/frontend/src/component/personalDashboard/LatestProjectEvents.tsx
@@ -3,6 +3,8 @@ import { Markdown } from '../common/Markdown/Markdown';
 import type { PersonalDashboardProjectDetailsSchema } from '../../openapi';
 import { UserAvatar } from '../common/UserAvatar/UserAvatar';
 import { Typography, styled } from '@mui/material';
+import { formatDateYMDHM } from 'utils/formatDate';
+import { useLocationSettings } from 'hooks/useLocationSettings';
 
 const Events = styled('ul')(({ theme }) => ({
     padding: 0,
@@ -16,6 +18,10 @@ const Event = styled('li')(({ theme }) => ({
     gap: theme.spacing(2),
     alignItems: 'center',
     marginBottom: theme.spacing(4),
+
+    '*': {
+        fontWeight: 'normal',
+    },
 }));
 
 const TitleContainer = styled('div')(({ theme }) => ({
@@ -32,9 +38,16 @@ const ActionBox = styled('article')(({ theme }) => ({
     flexDirection: 'column',
 }));
 
+const Timestamp = styled('time')(({ theme }) => ({
+    color: theme.palette.text.secondary,
+    fontSize: theme.typography.fontSize,
+    marginBottom: theme.spacing(1),
+}));
+
 export const LatestProjectEvents: FC<{
     latestEvents: PersonalDashboardProjectDetailsSchema['latestEvents'];
 }> = ({ latestEvents }) => {
+    const { locationSettings } = useLocationSettings();
     return (
         <ActionBox>
             <TitleContainer>
@@ -55,10 +68,18 @@ export const LatestProjectEvents: FC<{
                                 src={event.createdByImageUrl}
                                 sx={{ mt: 1 }}
                             />
-                            <Markdown>
-                                {event.summary ||
-                                    'No preview available for this event'}
-                            </Markdown>
+                            <div>
+                                <Timestamp dateTime={event.createdAt}>
+                                    {formatDateYMDHM(
+                                        event.createdAt,
+                                        locationSettings.locale,
+                                    )}
+                                </Timestamp>
+                                <Markdown>
+                                    {event.summary ||
+                                        'No preview available for this event'}
+                                </Markdown>
+                            </div>
                         </Event>
                     );
                 })}

diff --git a/frontend/src/openapi/models/personalDashboardProjectDetailsSchemaLatestEventsItem.ts b/frontend/src/openapi/models/personalDashboardProjectDetailsSchemaLatestEventsItem.ts
@@ -22,4 +22,5 @@ export type PersonalDashboardProjectDetailsSchemaLatestEventsItem = {
      * @nullable
      */
     summary: string | null;
+    createdAt: string;
 };