From dc0465b0afac8ced3f80d35e58d9f812e406bfb3 Mon Sep 17 00:00:00 2001
From: Kailash Nadh <kailash@nadh.in>
Date: Tue, 26 Jan 2021 21:57:27 +0530
Subject: [PATCH] Refactor global instances of $api and $utils to be mixins.

... instead of Vue.prototype variables which is the idiomatic
approach. Also, the refactor enables utils to be instantiated
as a class that takes the i18n object for util functions to have
accesss to i18n translation.
---
 frontend/src/main.js  | 50 ++++++++++++++++++++++++-------------------
 frontend/src/utils.js | 38 ++++++++++++++++----------------
 2 files changed, 48 insertions(+), 40 deletions(-)

diff --git a/frontend/src/main.js b/frontend/src/main.js
index 2f3073639..c6288862f 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -7,37 +7,43 @@ import App from './App.vue';
 import router from './router';
 import store from './store';
 import * as api from './api';
-import utils from './utils';
 import { models } from './constants';
+import Utils from './utils';
 
 // Internationalisation.
 Vue.use(VueI18n);
-
-// Create VueI18n instance with options
 const i18n = new VueI18n();
 
 Vue.use(Buefy, {});
 Vue.config.productionTip = false;
 
-// Custom global elements.
-Vue.prototype.$api = api;
-Vue.prototype.$utils = utils;
-
-Vue.prototype.$reloadServerConfig = () => {
-  // Get the config.js <script> tag, remove it, and re-add it.
-  let s = document.querySelector('#server-config');
-  const url = s.getAttribute('src');
-  s.remove();
-
-  s = document.createElement('script');
-  s.setAttribute('src', url);
-  s.setAttribute('id', 'server-config');
-  s.onload = () => {
-    store.commit('setModelResponse',
-      { model: models.serverConfig, data: humps.camelizeKeys(window.CONFIG) });
-  };
-  document.body.appendChild(s);
-};
+// Globals.
+const ut = new Utils(i18n);
+Vue.mixin({
+  computed: {
+    $utils: () => ut,
+    $api: () => api,
+  },
+
+  methods: {
+    $reloadServerConfig: () => {
+      // Get the config.js <script> tag, remove it, and re-add it.
+      let s = document.querySelector('#server-config');
+      const url = s.getAttribute('src');
+      s.remove();
+
+      s = document.createElement('script');
+      s.setAttribute('src', url);
+      s.setAttribute('id', 'server-config');
+      s.onload = () => {
+        store.commit('setModelResponse',
+          { model: models.serverConfig, data: humps.camelizeKeys(window.CONFIG) });
+      };
+      document.body.appendChild(s);
+    },
+  },
+});
+
 
 // window.CONFIG is loaded from /api/config.js directly in a <script> tag.
 if (window.CONFIG) {
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index 38ad762bf..9c1e3ca68 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -9,21 +9,22 @@ dayjs.extend(relativeTime);
 
 const reEmail = /(.+?)@(.+?)/ig;
 
-export default class utils {
-  static months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug',
-    'Sep', 'Oct', 'Nov', 'Dec'];
-
-  static days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+export default class Utils {
+  constructor(i18n) {
+    this.i18n = i18n;
+  }
 
   // Parses an ISO timestamp to a simpler form.
-  static niceDate = (stamp, showTime) => {
+  niceDate = (stamp, showTime) => {
     if (!stamp) {
       return '';
     }
 
     const d = new Date(stamp);
-    let out = `${utils.days[d.getDay()]}, ${d.getDate()}`;
-    out += ` ${utils.months[d.getMonth()]} ${d.getFullYear()}`;
+    const day = this.i18n.t(`globals.days.${(d.getDay() + 1)}`);
+    const month = this.i18n.t(`globals.months.${(d.getMonth() + 1)}`);
+    let out = `${day}, ${d.getDate()}`;
+    out += ` ${month} ${d.getFullYear()}`;
     if (showTime) {
       out += ` ${d.getHours()}:${d.getMinutes()}`;
     }
@@ -31,14 +32,12 @@ export default class utils {
     return out;
   };
 
-  static duration(start, end) {
-    return dayjs(end).from(dayjs(start), true);
-  }
+  duration = (start, end) => dayjs(end).from(dayjs(start), true);
 
   // Simple, naive, e-mail address check.
-  static validateEmail = (e) => e.match(reEmail);
+  validateEmail = (e) => e.match(reEmail);
 
-  static niceNumber = (n) => {
+  niceNumber = (n) => {
     if (n === null || n === undefined) {
       return 0;
     }
@@ -69,20 +68,23 @@ export default class utils {
   }
 
   // UI shortcuts.
-  static confirm = (msg, onConfirm, onCancel) => {
+  confirm = (msg, onConfirm, onCancel) => {
     Dialog.confirm({
       scroll: 'clip',
-      message: !msg ? 'Are you sure?' : msg,
+      message: !msg ? this.i18n.t('globals.messages.confirm') : msg,
+      confirmText: this.i18n.t('globals.buttons.ok'),
+      cancelText: this.i18n.t('globals.buttons.cancel'),
       onConfirm,
       onCancel,
     });
   };
 
-  static prompt = (msg, inputAttrs, onConfirm, onCancel) => {
+  prompt = (msg, inputAttrs, onConfirm, onCancel) => {
     Dialog.prompt({
       scroll: 'clip',
       message: msg,
-      confirmText: 'OK',
+      confirmText: this.i18n.t('globals.buttons.ok'),
+      cancelText: this.i18n.t('globals.buttons.cancel'),
       inputAttrs: {
         type: 'string',
         maxlength: 200,
@@ -94,7 +96,7 @@ export default class utils {
     });
   };
 
-  static toast = (msg, typ, duration) => {
+  toast = (msg, typ, duration) => {
     Toast.open({
       message: msg,
       type: !typ ? 'is-success' : typ,