chore: fixing date

frontend/src/__test__/components/FriendlyDate.test.tsx

@@ -23,12 +23,12 @@ describe('FriendlyDate Component', () => {
 
   it('displays "Today" for today\'s date', () => {
     render(<FriendlyDate date="2024-01-24T06:23:12" />);
-    expect(screen.getByText("Today")).toBeInTheDocument();
+    expect(screen.getByText("in 6 hours")).toBeInTheDocument();
   });
 
   it('displays "Yesterday" for a date one day ago', () => {
     render(<FriendlyDate date="2024-01-23T00:00:00" />);
-    expect(screen.getByText("Yesterday")).toBeInTheDocument();
+    expect(screen.getByText("yesterday")).toBeInTheDocument();
   });
 
   it('displays relative time within the last week', () => {
@@ -38,17 +38,17 @@ describe('FriendlyDate Component', () => {
 
   it('displays exact date for dates older than a week', () => {
     render(<FriendlyDate date="2024-01-01T00:00:00" />);
-    expect(screen.getByText("23 days ago")).toBeInTheDocument();
+    expect(screen.getByText("January 1, 2024")).toBeInTheDocument();
   });
 
   it('displays friendly date format for future dates', () => {
     render(<FriendlyDate date="2024-02-22T00:00:00" />);
-    expect(screen.getByText("in 29 days")).toBeInTheDocument();
+    expect(screen.getByText("February 22, 2024")).toBeInTheDocument();
   });
 
   it('renders tooltip with full text on hover', async () => {
-    const {container} =  render(<FriendlyDate date="2024-02-22T00:00:00" />);
-    expect(container.querySelector('span').getAttribute('data-tooltip')).toBe("Feb 22, 2024");
+    const {container} =  render(<FriendlyDate date="2024-01-21T00:00:00" />);
+    expect(container.querySelector('span').getAttribute('data-tooltip')).toBe("January 21, 2024");
   });
 
   it('renders an empty span for null dates', () => {

frontend/src/components/FriendlyDate/index.tsx

@@ -1,34 +1,84 @@
 import React from 'react';
-import { formatDistanceToNow, format, parseISO, isToday, isYesterday } from 'date-fns';
+import { 
+  parseISO, 
+  isFuture,
+  format,
+  differenceInMinutes, 
+  differenceInHours, 
+  differenceInDays 
+} from 'date-fns';
 import { Tooltip } from '@carbon/react';
 
 interface FriendlyDateProps {
   date: string | null | undefined; // The date string in ISO format
 }
 
-const FriendlyDate: React.FC<FriendlyDateProps> = ({ date }) => {
+const formatDateAtlassianStyle = (date: Date) => {
+  const now = new Date();
+  const minutesDiff = differenceInMinutes(now, date);
+  const hoursDiff = differenceInHours(now, date);
+  const daysDiff = differenceInDays(now, date);
+
+  // Past dates
+  if (minutesDiff < 1) return 'just now';
+  if (minutesDiff < 60) return minutesDiff === 1 ? 'a minute ago' : `${minutesDiff} minutes ago`;
+  if (hoursDiff < 24) return hoursDiff === 1 ? '1 hour ago' : `${hoursDiff} hours ago`;
+  if (daysDiff === 1) return 'yesterday';
+  if (daysDiff < 7) return `${daysDiff} days ago`;
+  if(daysDiff === 7) return 'a week ago';
+
+  // Use full date for older dates
+  return format(date, 'MMMM d, yyyy');
+}
 
-  if(!date) return <span data-testid="friendly-date"></span>;
+// Future dates
+const formatFutureDateAtlassianStyle = (date: Date) => {
+  const now = new Date();
+  const minutesDiff = differenceInMinutes(date, now);
+  const hoursDiff = differenceInHours(date, now);
+  const daysDiff = differenceInDays(date, now);
+
+  if (minutesDiff < 1) return 'shortly';
+  if (minutesDiff < 60) return minutesDiff === 1 ? 'in 1 minute' : `in ${minutesDiff} minutes`;
+  if (hoursDiff < 24) return hoursDiff === 1 ? 'in 1 hour' : `in ${hoursDiff} hours`;
+  if (daysDiff === 1) return 'tomorrow';
+  if (daysDiff < 7) return `in ${daysDiff} days`;
+  if (daysDiff === 7) return 'in a week';
 
-  try{
-  const parsedDate = parseISO(date);
-  const cleanDate = format(parsedDate, "MMM dd, yyyy");
-
-  const formattedDate = isToday(parsedDate)
-    ? "Today"
-    : isYesterday(parsedDate)
-    ? "Yesterday"
-    : formatDistanceToNow(parsedDate, { addSuffix: true });
-
-  return <Tooltip  
-            label={cleanDate}
-            align="bottom-left"
-            autoAlign> 
-            <span>{formattedDate}</span>
-          </Tooltip>;
-  } catch(e){
-    return <span data-testid="friendly-date"></span>;
+  return format(date, 'MMMM d, yyyy');
+}
+
+const FriendlyDate: React.FC<FriendlyDateProps> = ({ date }) => {
+
+  if (!date) return <span data-testid="friendly-date"></span>;
+
+  try {
+    const parsedDate = parseISO(date);
+    const cleanDate = format(parsedDate, "MMMM dd, yyyy");
+
+    // Use appropriate formatting for past or future dates
+    const formattedDate = isFuture(parsedDate)
+      ? formatFutureDateAtlassianStyle(parsedDate)
+      : formatDateAtlassianStyle(parsedDate);
+
+      if(cleanDate === formattedDate)
+        console.log(`cleanDate: ${cleanDate} formattedDate: ${formattedDate}`);
+    return (
+      <>
+      {(cleanDate === formattedDate) ? (<span>{formattedDate}</span>) : (
+      <Tooltip  
+        label={cleanDate} // Display full date in tooltip
+        align="bottom-left"
+        autoAlign
+      > 
+        <span>{formattedDate}</span>
+      </Tooltip>
+      )}
+      </>
+    );
+  } catch (e) {
+    return <span data-testid="friendly-date"></span>; // Fallback for invalid dates
   }
 };
 
-export default FriendlyDate;
+export default FriendlyDate;