diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx index 7754cdef2..9763bdaaa 100644 --- a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx +++ b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx @@ -55,10 +55,11 @@ describe('LatestProgressUpdateCard Component', () => { ); const momentDate = moment(mockGetTaskProgress.data[2].createdAt); - const fullDate = momentDate.format('DD-MM-YY'); - const time = momentDate.format('hh:mmA'); + const fullDate = momentDate.format( + 'dddd, MMMM DD, YYYY, hh:mm A [GMT] Z' + ); + const tooltipString = `Updated at ${fullDate}`; - const tooltipString = `Updated at ${fullDate}, ${time}`; const dateElement = screen.getByTestId( 'latest-progress-update-card-date' ); diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx index 07bee70d5..d006fc9ea 100644 --- a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx +++ b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx @@ -58,10 +58,10 @@ describe('ProgressUpdateCard Component', () => { ); const momentDate = moment(mockGetTaskProgress.data[2].createdAt); - const fullDate = momentDate.format('DD-MM-YY'); - const time = momentDate.format('hh:mmA'); - - const tooltipString = `Updated at ${fullDate}, ${time}`; + const fullDate = momentDate.format( + 'dddd, MMMM DD, YYYY, hh:mm A [GMT] Z' + ); + const tooltipString = `Updated at ${fullDate}`; const dateElement = screen.getByTestId('progress-update-card-date'); fireEvent.mouseOver(dateElement); diff --git a/src/components/taskDetails/Details.tsx b/src/components/taskDetails/Details.tsx index 5e706cde5..a222f921a 100644 --- a/src/components/taskDetails/Details.tsx +++ b/src/components/taskDetails/Details.tsx @@ -1,7 +1,7 @@ -import React, { FC } from 'react'; +import React, { FC, useState } from 'react'; import moment from 'moment'; -import Link from 'next/link'; import { FaReceipt } from 'react-icons/fa6'; +import Link from 'next/link'; import Tooltip from '@/components/common/Tooltip/Tooltip'; import setColor from './taskPriorityColors'; import extractRepoName from '@/utils/extractRepoName'; @@ -19,33 +19,38 @@ const Details: FC = ({ detailType, value, url }) => { return timestamp ? moment(timestamp).fromNow() : 'N/A'; }; - const getTooltipText = (timestamp: StringNumberOrUndefined): string => { - return timestamp ? moment(timestamp).format('LLLL') : 'N/A'; - }; - - const isPastDate = (timestamp: StringNumberOrUndefined): boolean => { - return timestamp ? moment(timestamp).isBefore(moment()) : false; - }; - - /** - * Get human-readable time format from the provided timestamp. - * @param {string | number | undefined} timestamp - The timestamp. - * @returns {string} - The human-readable time format, for example: instead of displaying a timestamp like "2024-02-20T14:30:00", a human-readable format would present it as "February 20, 2024, 2:30 PM - */ - const getHumanReadableTime = ( - timestamp: StringNumberOrUndefined - ): string => { + const formatDate = (timestamp: StringNumberOrUndefined): string => { if (!timestamp) return 'N/A'; - const now = moment(); - const futureTimestamp = moment(timestamp); + let milliseconds: number; - if (futureTimestamp.isAfter(now)) { - return `in ${moment - .duration(futureTimestamp.diff(now)) - .humanize()}`; + if (typeof timestamp === 'string') { + // Parse the timestamp string to Date object + const dateObj = new Date(timestamp); + + // Check if parsing was successful + if (!isNaN(dateObj.getTime())) { + milliseconds = dateObj.getTime(); + } else { + console.error('Invalid timestamp format:', timestamp); + return 'Invalid Date'; + } + } else { + milliseconds = (timestamp as number) * 1000; } - return `${moment.duration(now.diff(futureTimestamp)).humanize()} ago`; + + // Format the date as desired + const formattedDate = moment(milliseconds).format( + 'dddd, MMM D, YYYY, h:mm A [GMT] Z' + ); + + return formattedDate; + }; + + const [tooltipActive, setTooltipActive] = useState(false); + + const toggleTooltip = () => { + setTooltipActive((prev) => !prev); }; const isTimeDetail = @@ -80,10 +85,12 @@ const Details: FC = ({ detailType, value, url }) => { ) : isTimeDetail ? ( - {getHumanReadableTime(value)} + {tooltipActive + ? formatDate(value) + : getRelativeTime(value)} ) : ( renderedValue diff --git a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx index e0b2fbd69..564b5bd61 100644 --- a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx @@ -22,9 +22,8 @@ export default function LatestProgressUpdateCard({ }: LatestProgressUpdateCardProps) { const momentDate = moment(data?.createdAt); const dateInAgoFormat = momentDate.fromNow(); - const fullDate = momentDate.format('DD-MM-YY'); - const time = momentDate.format('hh:mmA'); - const tooltipText = `Updated at ${fullDate}, ${time}`; + const fullDate = momentDate.format('dddd, MMMM DD, YYYY, hh:mm A [GMT] Z'); + const tooltipText = `Updated at ${fullDate}`; const charactersToShow = 70; const dataToShow = [ diff --git a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx index ab4d70b80..707938bb7 100644 --- a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx @@ -15,9 +15,9 @@ export default memo(function ProgressUpdateCard({ const charactersToShow = 70; const readMoreTitle = readMoreFormatter(data?.completed, charactersToShow); const titleToShow = readMoreTitle; - const fullDate = momentDate.format('DD-MM-YY'); - const time = momentDate.format('hh:mmA'); - const tooltipString = `Updated at ${fullDate}, ${time}`; + const fullDate = momentDate.format('dddd, MMMM DD, YYYY, hh:mm A [GMT] Z'); + + const tooltipString = `Updated at ${fullDate}`; const [isExpanded, setIsExpanded] = useState(false); const dataToShow = [