♻️ (notif) add queue notif service to lazy load notif lib

package.json

@@ -10,58 +10,58 @@
     "build-couch-design": "ts-node src/scripts/validate-doc-update.ts"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.27",
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
-    "@fortawesome/free-solid-svg-icons": "^5.12.1",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/vue-fontawesome": "^0.1.9",
     "@xkeshi/vue-qrcode": "^1.0.0",
     "axios": "^0.19.2",
-    "bulma": "^0.7.5",
+    "bulma": "^0.8.1",
-    "bulma-checkradio": "^2.1.1",
+    "bulma-checkradio": "^1.1.1",
     "bulma-pricingtable": "^0.2.0",
     "bulma-switch": "^2.0.0",
-    "core-js": "^3.6.4",
+    "core-js": "^3.6.5",
     "font-color-contrast": "^1.0.3",
     "lightness": "^1.0.0",
     "lodash-es": "^4.17.15",
-    "mapbox-gl": "^1.8.1",
+    "mapbox-gl": "^1.9.1",
     "md5": "^2.2.1",
-    "notyf": "^3.1.0",
+    "notyf": "^3.6.0",
     "pouchdb-authentication": "^1.1.3",
     "pouchdb-browser": "^7.2.1",
-    "register-service-worker": "^1.6.2",
+    "register-service-worker": "^1.7.1",
-    "uuid": "^3.4.0",
+    "uuid": "^7.0.3",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-click-outside": "^1.0.7",
-    "vue-currency-input": "^1.17.3",
+    "vue-currency-input": "^1.18.0",
-    "vue-i18n": "^8.15.4",
+    "vue-i18n": "^8.16.0",
-    "vue-property-decorator": "^8.4.0",
+    "vue-property-decorator": "^8.4.1",
     "vue-router": "^3.1.6",
-    "vue-stripe-checkout": "^3.1.6",
+    "vue-stripe-checkout": "^3.2.2",
-    "vuex": "^3.1.2",
+    "vuex": "^3.1.3",
     "vuex-class": "^0.3.2",
     "vuex-persist": "^2.2.0"
   },
   "devDependencies": {
-    "@types/chartist": "^0.9.47",
+    "@types/chartist": "^0.9.48",
-    "@types/jest": "^24.9.1",
+    "@types/jest": "^25.2.1",
     "@types/lodash-es": "^4.17.3",
-    "@types/mapbox-gl": "^1.8.1",
+    "@types/mapbox-gl": "^1.8.3",
     "@types/md5": "^2.1.33",
-    "@types/notyf": "^2.0.0",
+    "@types/notyf": "^3.0.0",
     "@types/pouchdb": "^6.4.0",
-    "@types/uuid": "^3.4.8",
+    "@types/uuid": "^7.0.2",
-    "@vue/cli-plugin-babel": "^4.2.3",
+    "@vue/cli-plugin-babel": "^4.3.1",
-    "@vue/cli-plugin-pwa": "^4.2.3",
+    "@vue/cli-plugin-pwa": "^4.3.1",
-    "@vue/cli-plugin-typescript": "^4.2.3",
+    "@vue/cli-plugin-typescript": "^4.3.1",
-    "@vue/cli-plugin-unit-jest": "^4.2.3",
+    "@vue/cli-plugin-unit-jest": "^4.3.1",
-    "@vue/cli-service": "^3.12.1",
+    "@vue/cli-service": "^4.3.1",
-    "@vue/test-utils": "^1.0.0-beta.31",
+    "@vue/test-utils": "^1.0.0-beta.33",
     "babel-core": "7.0.0-bridge.0",
     "node-sass": "^4.13.1",
-    "sass-loader": "^7.3.1",
+    "sass-loader": "^8.0.2",
-    "ts-jest": "^24.3.0",
+    "ts-jest": "^25.3.1",
-    "ts-node": "^8.6.2",
+    "ts-node": "^8.8.2",
     "typescript": "^3.8.3",
     "vue-template-compiler": "^2.6.11"
   }

src/App.vue

@@ -62,6 +62,7 @@
         <router-view />
       </transition>
     </main>
+    <queue-notif />
   </div>
 </template>
 
@@ -79,7 +80,8 @@ import OnlineView from '@/components/OnlineView.vue'
     ClickOutside
   },
   components: {
-    'online-view': OnlineView
+    'online-view': OnlineView,
+    'queue-notif': () => import('@/components/QueueNotif.vue')
   }
 })
 export default class App extends Vue {

src/components/AccountSetting.vue

@@ -70,11 +70,11 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
 import BaseAccount from '@/base-components/BaseAccount'
 import { confirmation } from '@/utils'
-import notif from '@/utils/notif'
 import bus, { SYNC } from '@/utils/bus-event'
 import IAccount from '@/models/IAccount'
 import IUser from '@/models/IUser'
 import accountService from '@/services/AccountService'
+import queueNotifService from '@/services/QueueNotifService'
 
 @Component({
   components: {
@@ -125,7 +125,7 @@ export default class AccountSetting extends Vue {
       this.account
     )
     if (!ok) {
-      notif.error(`Une erreur s'est produite.`)
+      queueNotifService.error(`Une erreur s'est produite.`)
     }
   }
 
@@ -139,10 +139,10 @@ export default class AccountSetting extends Vue {
       this.account
     )
     if (!ok) {
-      notif.error(`Une erreur s'est produite.`)
+      queueNotifService.error(`Une erreur s'est produite.`)
       return
     }
-    notif.success(
+    queueNotifService.success(
       this.$tc('account.newUserAdded', this.newUsers.length).toString()
     )
     this.newUsers = []
@@ -159,17 +159,17 @@ export default class AccountSetting extends Vue {
       user.alias ? user.alias.toLowerCase() : ''
     )
     if (aliases.length === 0) {
-      notif.error('Au moins une personne doit être ajoutée au compte.')
+      queueNotifService.error('Au moins une personne doit être ajoutée au compte.')
       return false
     }
     if (aliases.length !== new Set(aliases).size) {
-      notif.error('Les alias doivent être uniques.')
+      queueNotifService.error('Les alias doivent être uniques.')
       return false
     }
 
     const userIds: string[] = allUsers.map((user: IUser) => user.userId)
     if (userIds.length !== new Set(userIds).size) {
-      notif.error('Les identifiants doivent être uniques.')
+      queueNotifService.error('Les identifiants doivent être uniques.')
       return false
     }
 

src/components/AccountShare.vue

@@ -43,7 +43,7 @@ import { Component, Vue, Prop } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
 import IAccount from '@/models/IAccount'
 import IUser from '@/models/IUser'
-import notif from '@/utils/notif'
+import queueNotifService from '@/services/QueueNotifService'
 import QrCode from '@xkeshi/vue-qrcode'
 
 @Component({
@@ -79,7 +79,7 @@ export default class Home extends Vue {
   public async copy(): Promise<void> {
     if (this.canClipboard) {
       await navigator.clipboard.writeText(this.accountUrl)
-      notif.success('Adresse copiée')
+      queueNotifService.success('Adresse copiée')
     }
   }
 

src/components/Payment.vue

@@ -25,7 +25,6 @@ import { StripeCheckout } from 'vue-stripe-checkout'
 import IUser from '@/models/IUser'
 import IPaymentIntent from '@/models/IPaymentIntent'
 import IPayment from '@/models/IPayment'
-import notif from '@/utils/notif'
 
 @Component({
   components: {

src/components/QueueNotif.vue

@@ -0,0 +1,29 @@
+<template>
+  <span class="queue-notif"></span>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import queueNotifService from '@/services/QueueNotifService'
+import notif from '@/utils/notif'
+
+@Component
+export default class QueueNotif extends Vue {
+  public mounted() {
+    queueNotifService.subscribe((notification) => {
+      switch (notification.type) {
+        case 'success':
+          notif.success(notification.message)
+          break
+        case 'error':
+          notif.error(notification.message)
+          break
+      }
+    })
+  }
+
+  public beforeDestroy() {
+    queueNotifService.unsubscribe()
+  }
+}
+</script>

src/components/TransactionCreate.vue

@@ -240,7 +240,7 @@ import accountService from '@/services/AccountService'
 import exchangeService from '@/services/ExchangeService'
 import transactionService from '@/services/TransactionService'
 import formatDate from '@/utils/format-date'
-import notif from '@/utils/notif'
+import queueNotifService from '@/services/QueueNotifService'
 import { money } from '@/utils/filters'
 import { confirmation, alertMessage, findContrastColor } from '@/utils'
 import ILocation from '@/models/ILocation'
@@ -437,21 +437,21 @@ export default class TransactionCreate extends Vue {
       (!this.currency && !this.date && this.payFor.length === 0)
     ) {
       if (this.amount === 0) {
-        notif.error('Le montant doit être supérieur à 0.')
+        queueNotifService.error('Le montant doit être supérieur à 0.')
       } else {
-        notif.error('Tous les champs sont requis.')
+        queueNotifService.error('Tous les champs sont requis.')
       }
       return false
     }
     if (isNaN(this.amount) || this.amount > this.maxAmount) {
       const maxAmount = money(this.maxAmount, this.currency)
-      notif.error(
+      queueNotifService.error(
         `Veuillez saisir un montant numérique inférieur à ${maxAmount}.`
       )
       return false
     }
     if (this.amount < 0) {
-      notif.error('Le montant doit être supérieur à 0.')
+      queueNotifService.error('Le montant doit être supérieur à 0.')
       return false
     }
     return true

src/registerServiceWorker.ts

@@ -1,7 +1,7 @@
 /* tslint:disable:no-console */
 
 import { register } from 'register-service-worker'
-import notif from './utils/notif'
+import QueueNotifService from '@/services/QueueNotifService'
 
 if (process.env.NODE_ENV === 'production') {
   const enableNotif: boolean = false
@@ -15,12 +15,6 @@ if (process.env.NODE_ENV === 'production') {
       }
     })
   }
-  const showUpdateBar = () => {
-    const notify = document.getElementById('notify-worker')
-    if (notify) {
-      notify.classList.add('show')
-    }
-  }
   register(`${process.env.BASE_URL}service-worker.js`, {
     registrationOptions: {},
     ready() {
@@ -28,7 +22,7 @@ if (process.env.NODE_ENV === 'production') {
     },
     cached() {
       console.log('Content has been cached for offline use.')
-      notif.success('Application mise à jour !')
+      QueueNotifService.success('Application mise à jour !')
     },
     updatefound(reg) {
       if (enableNotif) {
@@ -41,7 +35,7 @@ if (process.env.NODE_ENV === 'production') {
             case 'installed':
               if (navigator.serviceWorker.controller) {
                 // new update available
-                showUpdateBar()
+                // showUpdateBar()
               }
               // No update available
               break
@@ -60,6 +54,6 @@ if (process.env.NODE_ENV === 'production') {
     },
     error(error) {
       console.error('Error during service worker registration:', error)
-    },
+    }
   })
 }

src/services/CouchService.ts

@@ -3,10 +3,10 @@ import PouchDb from 'pouchdb-browser'
 import PouchDbAuthentication from 'pouchdb-authentication'
 import bus, { SYNC } from '@/utils/bus-event'
 import IUser from '@/models/IUser'
-import notif from '@/utils/notif'
 import { debounce } from 'lodash-es'
 import { confirmation } from '@/utils'
 import store from '@/store'
+import queueNotifService from '@/services/QueueNotifService'
 
 PouchDb.plugin(PouchDbAuthentication)
 
@@ -84,7 +84,7 @@ class CouchService {
         // tslint:disable-next-line:no-console
         console.warn('on error', { error })
         if (error.name !== 'unauthorized') {
-          notif.error(`une erreur s'est produite`)
+          queueNotifService.error(`une erreur s'est produite`)
         }
       })
     return true

src/services/QueueNotifService.ts

@@ -0,0 +1,43 @@
+interface QueueNotif {
+  type: 'success' | 'error'
+  message: string
+}
+
+class QueueNotifService {
+  private queue: QueueNotif[] = []
+  private callback: ((notif: QueueNotif) => void) | null = null
+
+  public success(message: string) {
+    this.add({
+      type: 'success',
+      message
+    })
+  }
+
+  public error(message: string) {
+    this.add({
+      type: 'error',
+      message
+    })
+  }
+
+  public subscribe(callback: ((notif: QueueNotif) => void) | null) {
+    this.callback = callback
+    if (this.callback) {
+      this.queue.forEach(this.callback)
+    }
+  }
+
+  public unsubscribe() {
+    this.callback = null
+  }
+
+  private add(notif: QueueNotif) {
+    this.queue.push(notif)
+    if (this.callback) {
+      this.queue.forEach(this.callback)
+    }
+  }
+}
+
+export default new QueueNotifService()

src/store.ts

@@ -7,9 +7,9 @@ import couchService from '@/services/CouchService'
 import IResponse from '@/models/IResponse'
 import IUserPassword from '@/models/IUserPassword'
 import IIdPassword from '@/models/IEmailPassword'
-import notif from '@/utils/notif'
 import { hasGoodNetwork } from '@/utils/network'
-import { toHex } from './utils'
+import { toHex } from '@/utils'
+import queueNotifService from '@/services/QueueNotifService'
 
 Vue.use(Vuex)
 
@@ -108,7 +108,7 @@ export default new Vuex.Store<IState>({
       if (response.ok) {
         commit(SET_USER, { user, replicate })
       } else {
-        notif.error(response.message || '')
+        queueNotifService.error(response.message || '')
       }
     },
     async login({ commit, state }, { userId, password }: IIdPassword) {
@@ -117,7 +117,7 @@ export default new Vuex.Store<IState>({
         const user: IUser | null = await userService.getUser(state.user)
         commit(SET_USER, { user })
       } else {
-        notif.error(response.message || '')
+        queueNotifService.error(response.message || '')
       }
     },
     async logout({ commit }) {
@@ -125,7 +125,7 @@ export default new Vuex.Store<IState>({
       if (response.ok) {
         commit(SET_USER, { user: null })
       } else {
-        notif.error(response.message || '')
+        queueNotifService.error(response.message || '')
       }
     },
     async remove({ commit, state }) {
@@ -134,7 +134,7 @@ export default new Vuex.Store<IState>({
         if (response.ok) {
           commit(SET_USER, { user: null })
         } else {
-          notif.error(response.message || '')
+          queueNotifService.error(response.message || '')
         }
       }
     },

src/utils/index.ts

@@ -1,11 +1,11 @@
 import { debounce } from 'lodash-es'
-import notif from '@/utils/notif'
+import queueNotifService from '@/services/QueueNotifService'
 import IColor from '@/models/IColor'
 import colors from '@/data/colors'
 
 export const confirmation = debounce(
   (message: string) => {
-    notif.success(message)
+    queueNotifService.success(message)
   },
   3000,
   {
@@ -15,7 +15,7 @@ export const confirmation = debounce(
 
 export const alertMessage = debounce(
   (message: string) => {
-    notif.error(message)
+    queueNotifService.error(message)
   },
   3000,
   {

src/views/User.vue

@@ -233,10 +233,10 @@
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import { Action, Getter } from 'vuex-class'
 import { slug } from '@/utils'
-import notif from '@/utils/notif'
 import IUser from '@/models/IUser'
 import LangChanger from '@/components/LangChanger.vue'
 import userService from '@/services/UserService'
+import queueNotifService from '@/services/QueueNotifService'
 
 const enableAnonymous: boolean = false
 
@@ -311,7 +311,7 @@ export default class User extends Vue {
         return
       }
     } catch (error) {
-      notif.error(
+      queueNotifService.error(
         `Une erreur est survenue à la vérification d'un compte anonyme déjà créé.`
       )
       // tslint:disable-next-line
@@ -333,7 +333,7 @@ export default class User extends Vue {
         replicate: this.replicate
       })
     } catch (error) {
-      notif.error(
+      queueNotifService.error(
         `Une erreur est survenue à la création du compte utilisateur.`
       )
       // tslint:disable-next-line
@@ -344,11 +344,11 @@ export default class User extends Vue {
 
   public validateRegistration(): boolean {
     if (!this.userId) {
-      notif.error('Un pseudo est obligatoire.')
+      queueNotifService.error('Un pseudo est obligatoire.')
       return false
     }
     if (this.password !== this.confirmPassword) {
-      notif.error('Les mots de passe doivent être identique.')
+      queueNotifService.error('Les mots de passe doivent être identique.')
       return false
     }
     return true
@@ -356,7 +356,7 @@ export default class User extends Vue {
 
   public async purge(): Promise<void> {
     await userService.purge()
-    notif.success(this.$t('user.purgeDone').toString())
+    queueNotifService.success(this.$t('user.purgeDone').toString())
   }
 
   public get slugEmail(): string {

src/views/accounts/AccountItem.vue

@@ -166,8 +166,8 @@ import { Component, Watch } from 'vue-property-decorator'
 import { Action, Getter } from 'vuex-class'
 import BaseAccount from '@/base-components/BaseAccount'
 import bus, { SYNC } from '@/utils/bus-event'
-import notif from '@/utils/notif'
 import TransactionType from '@/enums/TransactionType'
+import queueNotifService from '@/services/QueueNotifService'
 import accountService from '@/services/AccountService'
 import chartService from '@/services/ChartService'
 import balanceService from '@/services/BalanceService'
@@ -212,7 +212,7 @@ export default class AccountItem extends BaseAccount {
       if (this.id) {
         this.account = await accountService.get(this.id)
         if (!this.account) {
-          notif.error(`le compte ${this.id} n'existe pas`)
+          queueNotifService.error(`le compte ${this.id} n'existe pas`)
           this.$router.push({ name: 'home' })
           return
         }
@@ -267,7 +267,7 @@ export default class AccountItem extends BaseAccount {
         )
       }
       await transactionService.multipleSave(transactions)
-      notif.success('Dépenses mises à jour.')
+      queueNotifService.success('Dépenses mises à jour.')
     } catch (error) {
       // tslint:disable-next-line
       console.warn({ error })

src/views/accounts/AccountNew.vue

@@ -129,8 +129,8 @@ import currencies from '@/data/currencies'
 import IAccount from '@/models/IAccount'
 import ICurrency from '@/models/ICurrency'
 import accountService from '@/services/AccountService'
+import queueNotifService from '@/services/QueueNotifService'
 import IUser from '@/models/IUser'
-import notif from '@/utils/notif'
 import { slug } from '@/utils'
 
 @Component({
@@ -163,25 +163,25 @@ export default class AccountNew extends Vue {
 
   public validate(users: IUser[]): boolean {
     if (!this.name) {
-      notif.error('Le nom doit être rempli.')
+      queueNotifService.error('Le nom doit être rempli.')
       return false
     }
     const aliases: string[] = users.map((user: IUser) =>
       user.alias ? user.alias.toLowerCase() : ''
     )
     if (aliases.length === 0) {
-      notif.error('Au moins une personne doit être ajoutée au compte.')
+      queueNotifService.error('Au moins une personne doit être ajoutée au compte.')
       return false
     }
     if (aliases.length !== new Set(aliases).size) {
-      notif.error('Les alias doivent être uniques.')
+      queueNotifService.error('Les alias doivent être uniques.')
       return false
     }
 
     if (this.user) {
       const userIds: string[] = users.map((user: IUser) => user.userId)
       if (userIds.length !== new Set(userIds).size) {
-        notif.error('Les identifiants doivent être uniques.')
+        queueNotifService.error('Les identifiants doivent être uniques.')
         return false
       }
     }
@@ -231,7 +231,7 @@ export default class AccountNew extends Vue {
     } else {
       // tslint:disable-next-line:no-console
       console.warn(response)
-      notif.error(`Une erreur s'est produite à la création d'un compte.`)
+      queueNotifService.error(`Une erreur s'est produite à la création d'un compte.`)
     }
   }
 

src/views/accounts/AccountPublic.vue

@@ -8,7 +8,7 @@ import { Action, Getter } from 'vuex-class'
 import { Component, Prop } from 'vue-property-decorator'
 import IUser from '@/models/IUser'
 import IAccount from '@/models/IAccount'
-import notif from '@/utils/notif'
+import queueNotifService from '@/services/QueueNotifService'
 import accountService from '@/services/AccountService'
 import couchService from '../../services/CouchService'
 
@@ -34,7 +34,7 @@ export default class AccountPublic extends Vue {
       this.account = await accountService.getRemote(this.id)
       if (this.account && this.account.isPublic) {
         this.addAccountId({ accountId: this.id })
-        notif.success(
+        queueNotifService.success(
           `Récupération du compte public ${this.account.name} en cours...`
         )
 

src/views/transactions/TransactionItem.vue

@@ -141,7 +141,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
 import TransactionType from '@/enums/TransactionType'
 import bus, { SYNC } from '@/utils/bus-event'
-import notif from '@/utils/notif'
+import queueNotifService from '@/services/QueueNotifService'
 import TransactionTag, { TransactionTagLabel } from '@/enums/TransactionTag'
 import accountService from '@/services/AccountService'
 import exchangeService from '@/services/ExchangeService'
@@ -194,10 +194,10 @@ export default class TransactionItem extends Vue {
       } else {
         if (this.accountId) {
           this.$router.push({ name: 'account', params: { id: this.accountId } })
-          notif.error('Transaction supprimée.')
+          queueNotifService.error('Transaction supprimée.')
         } else {
           this.$router.push({ name: 'home' })
-          notif.error('Compte inexistant.')
+          queueNotifService.error('Compte inexistant.')
         }
       }
     } catch (error) {

src/views/transactions/TransactionUpdate.vue

@@ -12,7 +12,7 @@ import IAccount from '@/models/IAccount'
 import ITransaction from '@/models/ITransaction'
 import accountService from '@/services/AccountService'
 import transactionService from '@/services/TransactionService'
-import notif from '@/utils/notif'
+import queueNotifService from '@/services/QueueNotifService'
 
 @Component({
   components: {
@@ -37,7 +37,7 @@ export default class TransactionUpdate extends Vue {
     this.transaction = await transactionService.get(this.id)
     if (!this.transaction) {
       this.$router.push({ name: 'home' })
-      notif.error('Compte inexistant.')
+      queueNotifService.error('Compte inexistant.')
       return
     }
     this.account = await accountService.get(this.transaction.accountId)