Skip to content

Instantly share code, notes, and snippets.

@kirubz

kirubz/TimeAgo.jsx

Forked from johndavedecano/TimeAgo.jsx
Created August 22, 2024 16:00
Show Gist options
  • Save kirubz/009ca63ef6593f94f88a278089788e19 to your computer and use it in GitHub Desktop.
Save kirubz/009ca63ef6593f94f88a278089788e19 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @johndavedecano johndavedecano revised this gist Feb 23, 2017. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions TimeAgo.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,7 @@ class TimeAgo extends Component {
    }

    getDifference() {
    return differenceInSeconds(this.props.date, new Date());
    return differenceInSeconds(new Date(), this.props.date);
    }

    getInterval() {
    @@ -60,8 +60,8 @@ TimeAgo.defaultProps = {
    date: new Date(),
    className: undefined,
    isLive: true,
    addSuffix: false,
    includeSeconds: false,
    addSuffix: true,
    includeSeconds: true,
    };

    const allowedDateTypes = [
  2. @johndavedecano johndavedecano revised this gist Feb 23, 2017. 1 changed file with 3 additions and 4 deletions.
    7 changes: 3 additions & 4 deletions TimeAgo.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -39,11 +39,10 @@ class TimeAgo extends Component {
    return 'now';
    } else {
    const options = {
    addSuffix: false,
    includeSeconds: false,
    addSuffix: this.props.addSuffix,
    includeSeconds: this.props.includeSeconds,
    };
    const timeago = distanceInWordsToNow(this.props.date, options);
    return timeago;
    return distanceInWordsToNow(this.props.date, options);
    }
    }

  3. @johndavedecano johndavedecano created this gist Feb 23, 2017.
    83 changes: 83 additions & 0 deletions TimeAgo.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,83 @@
    import React, {Component} from 'react';
    import differenceInSeconds from 'date-fns/difference_in_seconds';
    import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';

    class TimeAgo extends Component {

    componentDidMount() {
    if (this.props.isLive) {
    this.updateTime();
    }
    }

    updateTime = () => {
    const interval = this.getInterval();
    if (interval > 0) {
    setTimeout(this.updateTime, interval);
    this.forceUpdate();
    }
    }

    getDifference() {
    return differenceInSeconds(this.props.date, new Date());
    }

    getInterval() {
    const diff = this.getDifference();
    if (diff < 3600) {
    return 60000;
    } else if (diff >= 3600 && diff <= 86400) {
    return 3600000;
    } else {
    return 0;
    }
    }

    getParsedDate() {
    const diff = this.getDifference();
    if (diff < 30) {
    return 'now';
    } else {
    const options = {
    addSuffix: false,
    includeSeconds: false,
    };
    const timeago = distanceInWordsToNow(this.props.date, options);
    return timeago;
    }
    }

    render() {
    return React.createElement(
    this.props.element,
    {className: (this.props.className) ? this.props.className : ''},
    this.getParsedDate()
    );
    }
    }

    TimeAgo.defaultProps = {
    element: 'p',
    date: new Date(),
    className: undefined,
    isLive: true,
    addSuffix: false,
    includeSeconds: false,
    };

    const allowedDateTypes = [
    React.PropTypes.string,
    React.PropTypes.number,
    React.PropTypes.instanceOf(Date)
    ];

    TimeAgo.propTypes = {
    element: React.PropTypes.string,
    date: React.PropTypes.oneOfType(allowedDateTypes),
    className: React.PropTypes.string,
    isLive: React.PropTypes.bool,
    addSuffix: React.PropTypes.bool,
    includeSeconds: React.PropTypes.bool
    };

    export default TimeAgo;