chore: Remove momentjs, use date-fns (#1233)

app/javascript/dashboard/mixins/time.js

@@ -1,21 +1,17 @@
 /* eslint no-console: 0 */
-/* eslint no-undef: "error" */
+import fromUnixTime from 'date-fns/fromUnixTime';
-/* eslint no-unused-expressions: ["error", { "allowShortCircuit": true }] */
+import format from 'date-fns/format';
-import moment from 'moment';
+import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 
 export default {
   methods: {
     messageStamp(time) {
-      const createdAt = time * 1000;
+      const unixTime = fromUnixTime(time);
-      return moment(createdAt).format('h:mm A');
+      return format(unixTime, 'h:mm a');
-    },
-    wootTime(time) {
-      const createdAt = time * 1000;
-      return moment(createdAt);
     },
     dynamicTime(time) {
-      const createdAt = moment(time * 1000);
+      const unixTime = fromUnixTime(time);
-      return createdAt.fromNow();
+      return formatDistanceToNow(unixTime, { addSuffix: true });
     },
   },
 };

app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue

@@ -41,7 +41,11 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import moment from 'moment';
+import startOfDay from 'date-fns/startOfDay';
+import subDays from 'date-fns/subDays';
+import getUnixTime from 'date-fns/getUnixTime';
+import fromUnixTime from 'date-fns/fromUnixTime';
+import format from 'date-fns/format';
 
 export default {
   data() {
@@ -57,15 +61,12 @@ export default {
       accountReport: 'getAccountReports',
     }),
     to() {
-      const m = moment.utc();
+      return getUnixTime(startOfDay(new Date()));
-      m.set({ hour: 23, minute: 59, second: 59, millisecond: 999 });
-      return m.unix();
     },
     from() {
       const diff = this.currentDateRangeSelection.id ? 29 : 6;
-      const m = moment.utc().subtract(diff, 'days');
+      const fromDate = subDays(new Date(), diff);
-      m.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
+      return getUnixTime(startOfDay(fromDate));
-      return m.unix();
     },
     collection() {
       if (this.accountReport.isFetching) {
@@ -73,7 +74,7 @@ export default {
       }
       if (!this.accountReport.data.length) return {};
       const labels = this.accountReport.data.map(element =>
-        moment.unix(element.timestamp).format('DD/MMM')
+        format(fromUnixTime(element.timestamp), 'dd/MMM')
       );
       const data = this.accountReport.data.map(element => element.value);
       return {

app/javascript/dashboard/store/modules/reports.js

@@ -1,7 +1,8 @@
 /* eslint no-console: 0 */
 /* eslint no-param-reassign: 0 */
 /* eslint no-shadow: 0 */
-import moment from 'moment';
+import compareAsc from 'date-fns/compareAsc';
+import fromUnixTime from 'date-fns/fromUnixTime';
 
 import * as types from '../mutation-types';
 import Report from '../../api/reports';
@@ -41,7 +42,9 @@ const actions = {
       reportObj.to
     ).then(accountReport => {
       let { data } = accountReport;
-      data = data.filter(el => moment() > moment.unix(el.timestamp));
+      data = data.filter(
+        el => compareAsc(new Date(), fromUnixTime(el.timestamp)) > -1
+      );
       if (
         reportObj.metric === 'avg_first_response_time' ||
         reportObj.metric === 'avg_resolution_time'

app/javascript/dashboard/store/utils/api.js

@@ -1,5 +1,6 @@
 /* eslint no-param-reassign: 0 */
-import moment from 'moment';
+import fromUnixTime from 'date-fns/fromUnixTime';
+import differenceInDays from 'date-fns/differenceInDays';
 import Cookies from 'js-cookie';
 import { frontendURL } from '../../helper/URLHelper';
 
@@ -12,15 +13,16 @@ export const setLoadingStatus = (state, status) => {
 
 export const setUser = (userData, expiryDate) =>
   Cookies.set('user', userData, {
-    expires: expiryDate.diff(moment(), 'days'),
+    expires: differenceInDays(expiryDate, new Date()),
   });
 
-export const getHeaderExpiry = response => moment.unix(response.headers.expiry);
+export const getHeaderExpiry = response =>
+  fromUnixTime(response.headers.expiry);
 
 export const setAuthCredentials = response => {
   const expiryDate = getHeaderExpiry(response);
   Cookies.set('auth_data', response.headers, {
-    expires: expiryDate.diff(moment(), 'days'),
+    expires: differenceInDays(expiryDate, new Date()),
   });
   setUser(response.data.data, expiryDate);
 };

app/javascript/shared/helpers/DateHelper.js

@@ -1,13 +1,7 @@
-import moment from 'moment';
+import fromUnixTime from 'date-fns/fromUnixTime';
+import format from 'date-fns/format';
 
-class DateHelper {
+export const formatUnixDate = (date, dateFormat = 'MMM dd, yyyy') => {
-  constructor(date) {
+  const unixDate = fromUnixTime(date);
-    this.date = moment(date * 1000);
+  return format(unixDate, dateFormat);
-  }
+};
-
-  format(dateFormat = 'MMM DD, YYYY') {
-    return this.date.format(dateFormat);
-  }
-}
-
-export default DateHelper;

app/javascript/widget/store/modules/conversation.js

@@ -9,7 +9,7 @@ import {
 } from 'widget/api/conversation';
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
 import { playNotificationAudio } from 'shared/helpers/AudioNotificationHelper';
-import DateHelper from 'shared/helpers/DateHelper';
+import { formatUnixDate } from 'shared/helpers/DateHelper';
 import { isASubmittedFormMessage } from 'shared/helpers/MessageTypeHelper';
 
 import getUuid from '../../helpers/uuid';
@@ -98,7 +98,7 @@ export const getters = {
   getGroupedConversation: _state => {
     const conversationGroupedByDate = groupBy(
       Object.values(_state.conversations),
-      message => new DateHelper(message.created_at).format()
+      message => formatUnixDate(message.created_at)
     );
     return Object.keys(conversationGroupedByDate).map(date => ({
       date,

package.json

@@ -21,13 +21,13 @@
     "chart.js": "~2.5.0",
     "copy-text-to-clipboard": "^2.1.1",
     "core-js": "3",
+    "date-fns": "^2.16.1",
     "dotenv": "^8.0.0",
     "foundation-sites": "~6.5.3",
     "highlight.js": "^9.15.10",
     "ionicons": "~2.0.1",
     "js-cookie": "^2.2.1",
     "lodash.groupby": "^4.6.0",
-    "moment": "~2.19.3",
     "query-string": "5",
     "spinkit": "~1.2.5",
     "tween.js": "~16.6.0",

yarn.lock

@@ -3497,6 +3497,11 @@ date-fns@^1.27.2:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
   integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
 
+date-fns@^2.16.1:
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.16.1.tgz#05775792c3f3331da812af253e1a935851d3834b"
+  integrity sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
@@ -7171,11 +7176,6 @@ moment@2.26.0, moment@^2.10.6:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.26.0.tgz#5e1f82c6bafca6e83e808b30c8705eed0dcbd39a"
   integrity sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw==
 
-moment@~2.19.3:
-  version "2.19.4"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.19.4.tgz#17e5e2c6ead8819c8ecfad83a0acccb312e94682"
-  integrity sha512-1xFTAknSLfc47DIxHDUbnJWC+UwgWxATmymaxIPQpmMh7LBm7ZbwVEsuushqwL2GYZU0jie4xO+TK44hJPjNSQ==
-
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"