ui/src/components/moment-time.tsx

   1 import { Component } from 'inferno';
   2 import moment from 'moment';
   3 import { getMomentLanguage, 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   render() {
  24     if (this.props.data.updated) {
  25       return (
  26         <span
  27           data-tippy-content={`${capitalizeFirstLetter(
  28             i18n.t('modified')
  29           )} ${this.format(this.props.data.updated)}`}
  30           className="font-italics pointer unselectable"
  31         >
  32           <svg class="icon icon-inline mr-1">
  33             <use xlinkHref="#icon-edit-2"></use>
  34           </svg>
  35           {moment.utc(this.props.data.updated).fromNow(true)}
  36         </span>
  37       );
  38     } else {
  39       let str = this.props.data.published || this.props.data.when_;
  40       return (
  41         <span
  42           className="pointer unselectable"
  43           data-tippy-content={this.format(str)}
  44         >
  45           {moment.utc(str).fromNow(true)}
  46         </span>
  47       );
  48     }
  49   }
  50
  51   format(input: string): string {
  52     return moment
  53       .utc(input)
  54       .local()
  55       .format('LLLL');
  56   }
  57 }