How to use the date-fns/distance_in_words_to_now function in date-fns

{link.description ? (
              
            ) : (
              'No Description'
            )}
          <p></p>
        
        <div>
          <div>
            <span>
              {isThisMonth(link.timestamp)
                ? 'Added ' + distanceInWordsToNow(link.timestamp) + ' ' + 'ago'
                : 'Added On ' + format(link.timestamp, 'MMM, Do YYYY')}
            </span>
            <span>
              <a title="bookmark"> {
                  e.preventDefault()
                  this.props.handelLike(link._id)
                }}
                href='#'
              &gt;
                
                <span>{link.bookmarkedBy ? link.bookmarkedBy.length : 0}</span>
              </a>
              <span title="Views"></span></span></div></div>

@computed get formattedLastSeen() {
		return this.timeFromNow <= 30 ? 'online' : `last seen ${distanceInWordsToNow(this.pingTime, {addSuffix: true})}`
	}

{mostRecentViewers.map(({ lastViewedAt, user }) => (
          
            
                  <strong>{user.name}</strong>
                  <br>
                  viewed {distanceInWordsToNow(new Date(lastViewedAt))} ago
                
              }
              placement="bottom"
            &gt;
              
                 this.handleOpenProfile(user.id)}
                  size={32}
                /&gt;

<div>
          
            <a>
              <img alt="" sizes="(min-width: 600px) 480px, 50vw" srcset="{buildSrcset(video.thumbnails)}">
              <p>{video.title}</p>
              <p>{distanceInWordsToNow(new Date(video.publishedAt))} ago</p>
            </a>
          
          <a rel="noopener noreferrer" href="{`https://youtube.com/channel/${video.channel.id}`}">
            <p>{video.channel.title}</p>
          </a>
        </div>
      ))}
    ,

function formatStatusTime(date) {
    date = date ? new Date(date) : null;

    if (!date || !isValidDate(date)) {
      return null;
    }

    if (isToday(date)) {
      return distanceInWordsToNow(date, { includeSeconds: false, addSuffix: true });
    } else if (isTomorrow(date)) {
      return 'Tomorrow';
    } else if (isYesterday(date)) {
      return 'Yesterday';
    } else if (isThisYear(date)) {
      return dateFormat(date, 'M/D');
    } else {
      return dateFormat(date, 'M/D/YY');
    }
  }

title="Confirm publish"
        centered
        onClose={onCancel}
        onAction={this.handleAction}
        actions={ACTIONS}
      >
        <div style="{{padding:">
          <p>
            Are you sure you would like to publish the document{' '}
            <strong>
              
            </strong>?
          </p>
          <p>
            {published &amp;&amp;
              `It was last published ${distanceInWordsToNow(published._updatedAt, {
                addSuffix: true
              })}.`}
          </p>
        </div>
      
    )
  }
}

async showBlock(blockHeight: number) {
    const block = await this.blockchain.fetchBlock(blockHeight)
    const item = {
      blockHeight: block.height,
      numTransactions: block.numTxs,
      hash: block.hash,
      age: distanceInWordsToNow(new Date(block.time)),
      time: formatDate(new Date(block.time), 'YYYY-MM-DD HH:mm:ss.SSS (Z)'),
      block
    }
    this.selectItem(item)
  }

export default (isStarred: boolean, timeEdited: ?number): string => {
  if (timeEdited === undefined && !isStarred) {
    return '';
  }

  const editedTime = timeEdited ? distanceInWordsToNow(timeEdited * 1000) : '';

  return template`<div class="message-tags">
  $!${timeEdited ? template`<span class="message-tag">edited ${editedTime} ago</span>` : ''}
  $!${isStarred ? '<span class="message-tag">starred</span>' : ''}
</div>
`;
};

statusMessage() {
        if (this.isScheduled) {
          return `Scheduled ${distanceInWordsToNow(this.scheduledDate, { addSuffix: true })}`;
        } if (this.isPublished) {
          return `Published ${distanceInWordsToNow(this.publishedDate, { addSuffix: true })}`;
        } else if (this.isArchived) {
          return 'Archived';
        } else if (this.createdDate) {
          return `Draft Created ${distanceInWordsToNow(this.createdDate, { addSuffix: true })}`;
        } else {
          return 'Draft Created some time ago';
        }
      },
      time() {

function formatStatusTime(date) {
    date = date ? new Date(date) : null;

    if (!date || !isValidDate(date)) {
      return null;
    }

    if (isToday(date)) {
      return distanceInWordsToNow(date, { includeSeconds: false, addSuffix: true });
    } else if (isTomorrow(date)) {
      return 'Tomorrow';
    } else if (isYesterday(date)) {
      return 'Yesterday';
    } else if (isThisYear(date)) {
      return dateFormat(date, 'M/D');
    } else {
      return dateFormat(date, 'M/D/YY');
    }
  }