improve FormattedDistanceDate

src/client/js/components/FormattedDistanceDate.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { format, formatDistanceStrict } from 'date-fns';
+import { format, formatDistanceStrict, differenceInSeconds } from 'date-fns';
 import { UncontrolledTooltip } from 'reactstrap';
 
 const FormattedDistanceDate = (props) => {
@@ -11,9 +11,15 @@ const FormattedDistanceDate = (props) => {
 
   const baseDate = props.baseDate || new Date();
 
-  const elemId = `grw-fdd-${props.id}`;
   const dateFormatted = format(date, 'yyyy/MM/dd HH:mm');
 
+  const diff = Math.abs(differenceInSeconds(date, baseDate));
+  if (diff > props.differenceForAvoidingFormat) {
+    return <>{dateFormatted}</>;
+  }
+
+  const elemId = `grw-fdd-${props.id}`;
+
   return (
     <>
       <span id={elemId}>{formatDistanceStrict(date, baseDate)}</span>
@@ -26,6 +32,11 @@ FormattedDistanceDate.propTypes = {
   id: PropTypes.string.isRequired,
   date: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]).isRequired,
   baseDate: PropTypes.instanceOf(Date),
+  // the number(sec) from 'baseDate' to avoid format
+  differenceForAvoidingFormat: PropTypes.number,
+};
+FormattedDistanceDate.defaultProps = {
+  differenceForAvoidingFormat: 86400 * 3,
 };
 
 export default FormattedDistanceDate;