Switch from 'moment' to 'dayjs' (#2219)

* Switch from 'moment' to 'dayjs'

* Use humanize code from duration plugin (without actual plugin) for time lapsed events

framework/core/js/src/common/helpers/fullTime.js

@@ -6,10 +6,10 @@
  * @return {Object}
  */
 export default function fullTime(time) {
-  const mo = moment(time);
+  const d = dayjs(time);
 
-  const datetime = mo.format();
-  const full = mo.format('LLLL');
+  const datetime = d.format();
+  const full = d.format('LLLL');
 
   return (
     <time pubdate datetime={datetime}>

framework/core/js/src/common/helpers/humanTime.js

@@ -9,10 +9,10 @@ import humanTimeUtil from '../utils/humanTime';
  * @return {Object}
  */
 export default function humanTime(time) {
-  const mo = moment(time);
+  const d = dayjs(time);
 
-  const datetime = mo.format();
-  const full = mo.format('LLLL');
+  const datetime = d.format();
+  const full = d.format('LLLL');
   const ago = humanTimeUtil(time);
 
   return (

framework/core/js/src/common/index.js

@@ -1,6 +1,6 @@
 import 'expose-loader?$!expose-loader?jQuery!jquery';
 import 'expose-loader?m!mithril';
-import 'expose-loader?moment!moment';
+import 'expose-loader?moment!expose-loader?dayjs!dayjs';
 import 'expose-loader?m.bidi!m.attrs.bidi';
 import 'bootstrap/js/affix';
 import 'bootstrap/js/dropdown';
@@ -9,6 +9,12 @@ import 'bootstrap/js/tooltip';
 import 'bootstrap/js/transition';
 import 'jquery.hotkeys/jquery.hotkeys';
 
+import relativeTime from 'dayjs/plugin/relativeTime';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+
 import patchMithril from './utils/patchMithril';
 
 patchMithril(window);

framework/core/js/src/common/models/User.js

@@ -54,7 +54,7 @@ Object.assign(User.prototype, {
    * @public
    */
   isOnline() {
-    return this.lastSeenAt() > moment().subtract(5, 'minutes').toDate();
+    return dayjs().subtract(5, 'minutes').isBefore(this.lastSeenAt());
   },
 
   /**

framework/core/js/src/common/utils/humanTime.js

@@ -6,30 +6,30 @@
  * @return {String}
  */
 export default function humanTime(time) {
-  let m = moment(time);
-  const now = moment();
+  let d = dayjs(time);
+  const now = dayjs();
 
   // To prevent showing things like "in a few seconds" due to small offsets
   // between client and server time, we always reset future dates to the
   // current time. This will result in "just now" being shown instead.
-  if (m.isAfter(now)) {
-    m = now;
+  if (d.isAfter(now)) {
+    d = now;
   }
 
   const day = 864e5;
-  const diff = m.diff(moment());
+  const diff = d.diff(dayjs());
   let ago = null;
 
   // If this date was more than a month ago, we'll show the name of the month
   // in the string. If it wasn't this year, we'll show the year as well.
   if (diff < -30 * day) {
-    if (m.year() === moment().year()) {
-      ago = m.format('D MMM');
+    if (d.year() === dayjs().year()) {
+      ago = d.format('D MMM');
     } else {
-      ago = m.format('ll');
+      ago = d.format('ll');
     }
   } else {
-    ago = m.fromNow();
+    ago = d.fromNow();
   }
 
   return ago;

framework/core/js/src/forum/components/PostStream.js

@@ -230,7 +230,7 @@ class PostStream extends Component {
         if (dt > 1000 * 60 * 60 * 24 * 4) {
           content = [
             <div className="PostStream-timeGap">
-              <span>{app.translator.trans('core.forum.post_stream.time_lapsed_text', { period: moment.duration(dt).humanize() })}</span>
+              <span>{app.translator.trans('core.forum.post_stream.time_lapsed_text', { period: dayjs().add(dt, 'ms').fromNow(true) })}</span>
             </div>,
             content,
           ];

framework/core/js/src/forum/components/PostStreamScrubber.js

@@ -239,7 +239,7 @@ export default class PostStreamScrubber extends Component {
 
     this.index = index;
     this.visible = visible;
-    this.description = period ? moment(period).format('MMMM YYYY') : '';
+    this.description = period ? dayjs(period).format('MMMM YYYY') : '';
   }
 
   config(isInitialized, context) {