#5 Add desktop notification

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "notifyjs": "^3.0.0",
     "rxjs": "^6.3.3",
     "vue": "^2.5.17",
     "vue-analytics": "^5.16.1",

src/notification.js

@@ -0,0 +1,16 @@
+import Notification from "@/services/notification";
+
+export default {
+  init
+};
+
+function init(store) {
+  Notification.enable()
+    .then(status => {
+      store.dispatch("setNotificationEnabled", status);
+    })
+    .catch(err => {
+      console.log(err);
+      store.dispatch("setNotificationEnabled", false);
+    });
+}

src/services/notification.js

@@ -0,0 +1,39 @@
+import Notify from "notifyjs";
+
+export default {
+  notify,
+  enable,
+  isSupported: Notify.isSupported
+};
+
+function notify(type, title, options = {}) {
+  isEnabled(type)
+    .then(() => doNotify())
+    .catch(err => console.warn(err));
+
+  function doNotify() {
+    new Notify(title, options).show();
+  }
+}
+
+function isEnabled() {
+  // TODO: Check if yhe type is allowed to notify
+  return enable();
+}
+
+function enable() {
+  return new Promise((resolve, reject) => {
+    if (!Notify.needsPermission) {
+      return resolve(true);
+    }
+
+    if (Notify.isSupported()) {
+      Notify.requestPermission(
+        () => resolve(true),
+        () => reject(new Error("You denied permission to display notifications"))
+      );
+    } else {
+      reject(new Error("Notification are not supported by your browser"));
+    }
+  });
+}

src/store/index.js

@@ -14,6 +14,7 @@ import issue from "./modules/issue";
 import pipeline from "./modules/pipeline";
 import user from "./modules/user";
 import settings from "./modules/settings";
+import notification from "./modules/notification";
 
 Vue.use(Vuex);
 
@@ -26,6 +27,7 @@ export default new Vuex.Store({
     team,
     user,
     settings,
+    notification,
     pipeline
   },
   state,

src/store/modules/notification.js

@@ -0,0 +1,25 @@
+const state = {
+  enabled: false // global notification state
+};
+
+const getters = {};
+
+const actions = {
+  setNotificationEnabled({ commit }, value) {
+    commit("setEnabled", value);
+  }
+};
+
+const mutations = {
+  setEnabled(state, value) {
+    state.enabled = value;
+  }
+};
+
+export default {
+  namespaced: false,
+  state,
+  getters,
+  actions,
+  mutations
+};