test-chromatic-date.tsx

export const SingleMessage: FC<Message & { highlight: boolean; index?: number }> = ({
  id,
  author,
  createdAt,
  content,
  highlight,
  index,
}) => {
  const [messageTime, setMessageTime] = useState<string>(() =>
    calculateCommentTime(createdAt, new Date()),
  );

  useEffect(() => {
    const updateCommentTime = () => {
      setMessageTime(calculateCommentTime(createdAt, new Date()));
    };

    const interval = setInterval(updateCommentTime, 60 * 1000);

    return () => {
      clearInterval(interval);
    };
  }, [createdAt]);
  const isUserFlashpack = author?.role === UserRole.Flashpack;
  return (
    <CommentContainer
      data-testid={`thread-message-${index}`}
      id={commentAnchor({ id })}
      isFlashpack={isUserFlashpack}
      p={2}
      ml={{ md: isUserFlashpack ? 9 : 0, xs: isUserFlashpack ? 3 : 0 }}
      mr={{ md: !isUserFlashpack ? 9 : 0, xs: !isUserFlashpack ? 3 : 0 }}
      gap={1}
      highlight={highlight}
    >
      <Box display="flex" alignItems="baseline" gap={2}>
        <Typography variant="bodySingle">{author?.email}</Typography>
      </Box>
      <FormattedText sx={{ lineHeight: '20px', textAlign: 'left' }}>
        {content}
      </FormattedText>
      <Box display={'flex'} justifyContent="flex-end">
        {/* chromatic ignore element because its always changing due to its relative nature */}
        <Typography component="span" data-chromatic="ignore" variant="label">
          {messageTime}
        </Typography>
      </Box>
    </CommentContainer>
  );
};

export const calculateCommentTime = (
  commentDateTimeIsoString: string,
  now: Date = new Date(),
): string => {
  const commentDate = new Date(commentDateTimeIsoString);

  const duration = intervalToDuration({
    start: commentDate,
    end: now,
  });

  const onlySeconds =
    [
      duration.years,
      duration.months,
      duration.weeks,
      duration.days,
      duration.hours,
      duration.minutes,
    ].filter(Boolean).length === 0;

  if (onlySeconds) {
    return 'Just now';
  }

  if (duration?.days && duration?.days > 0) {
    return format(commentDate, 'dd MMM yyyy - HH:mm');
  }

  return `${formatDuration({ ...duration, seconds: 0 })} ago`;
};