ui/src/components/moment-time.tsx

   1 import { Component } from 'inferno';
   2 import moment from 'moment';
   3 import { getMomentLanguage, setupTippy, capitalizeFirstLetter } from '../utils';
   4 import { i18n } from '../i18next';
   5
   6 interface MomentTimeProps {
   7   data: {
   8     published?: string;
   9     when_?: string;
  10     updated?: string;
  11   };
  12 }
  13
  14 export class MomentTime extends Component<MomentTimeProps, any> {
  15   constructor(props: any, context: any) {
  16     super(props, context);
  17
  18     let lang = getMomentLanguage();
  19
  20     moment.locale(lang);
  21   }
  22
  23   componentDidMount() {
  24     setupTippy();
  25   }
  26
  27   render() {
  28     if (this.props.data.updated) {
  29       return (
  30         <span
  31           data-tippy-content={`${capitalizeFirstLetter(
  32             i18n.t('modified')
  33           )} ${this.format(this.props.data.updated)}`}
  34           className="font-italics pointer unselectable"
  35         >
  36           <svg class="icon icon-inline mr-1">
  37             <use xlinkHref="#icon-edit-2"></use>
  38           </svg>
  39           {moment.utc(this.props.data.updated).fromNow()}
  40         </span>
  41       );
  42     } else {
  43       let str = this.props.data.published || this.props.data.when_;
  44       return (
  45         <span
  46           className="pointer unselectable"
  47           data-tippy-content={this.format(str)}
  48         >
  49           {moment.utc(str).fromNow()}
  50         </span>
  51       );
  52     }
  53   }
  54
  55   format(input: string): string {
  56     return moment
  57       .utc(input)
  58       .local()
  59       .format('LLLL');
  60   }
  61 }