fix: extension enable reactivity (#3512)

lnbits/static/js/base.js

@@ -15,11 +15,6 @@ window.LNbits = {
     }
   },
   map: {
-    extension(data) {
-      const obj = {...data}
-      obj.url = ['/', obj.code, '/'].join('')
-      return obj
-    },
     user(data) {
       const obj = {
         id: data.id,

lnbits/static/js/components.js

@@ -43,62 +43,6 @@ window.app.component('lnbits-wallet-list', {
   }
 })
 
-window.app.component('lnbits-extension-list', {
-  mixins: [window.windowMixin],
-  template: '#lnbits-extension-list',
-  data() {
-    return {
-      extensions: [],
-      searchTerm: ''
-    }
-  },
-  watch: {
-    'g.user.extensions': {
-      handler(newExtensions) {
-        this.loadExtensions()
-      },
-      deep: true
-    }
-  },
-  computed: {
-    userExtensions() {
-      return this.updateUserExtensions(this.searchTerm)
-    }
-  },
-  methods: {
-    async loadExtensions() {
-      try {
-        const {data} = await LNbits.api.request('GET', '/api/v1/extension')
-        this.extensions = data
-          .map(extension => LNbits.map.extension(extension))
-          .sort((a, b) => a.name.localeCompare(b.name))
-      } catch (error) {
-        LNbits.utils.notifyApiError(error)
-      }
-    },
-    updateUserExtensions(filterBy) {
-      const path = window.location.pathname
-      const userExtensions = this.g.user.extensions
-
-      return this.extensions
-        .filter(o => userExtensions.includes(o.code))
-        .filter(o => {
-          if (!filterBy) return true
-          return `${o.code} ${o.name} ${o.short_description} ${o.url}`
-            .toLocaleLowerCase()
-            .includes(filterBy.toLocaleLowerCase())
-        })
-        .map(obj => {
-          obj.isActive = path.startsWith(obj.url)
-          return obj
-        })
-    }
-  },
-  async created() {
-    await this.loadExtensions()
-  }
-})
-
 window.app.component('lnbits-manage', {
   mixins: [window.windowMixin],
   template: '#lnbits-manage',

lnbits/static/js/components/lnbits-manage-extension-list.js

@@ -0,0 +1,57 @@
+window.app.component('lnbits-extension-list', {
+  mixins: [window.windowMixin],
+  template: '#lnbits-extension-list',
+  data() {
+    return {
+      extensions: [],
+      userExtensions: [],
+      searchTerm: ''
+    }
+  },
+  watch: {
+    'g.user.extensions': {
+      async handler() {
+        await this.loadExtensions()
+      }
+    },
+    searchTerm() {
+      this.filterUserExtensionsByTerm()
+    }
+  },
+  methods: {
+    map(data) {
+      const obj = {...data}
+      obj.url = ['/', obj.code, '/'].join('')
+      return obj
+    },
+    async loadExtensions() {
+      try {
+        const {data} = await LNbits.api.request('GET', '/api/v1/extension')
+        this.extensions = data
+          .map(extension => this.map(extension))
+          .sort((a, b) => a.name.localeCompare(b.name))
+        this.filterUserExtensionsByTerm()
+      } catch (error) {
+        LNbits.utils.notifyApiError(error)
+      }
+    },
+    filterUserExtensionsByTerm() {
+      const userExts = this.g.user.extensions
+      this.userExtensions = this.extensions
+        .filter(o => userExts.includes(o.code))
+        .filter(o => {
+          if (this.searchTerm === '') return true
+          return `${o.code} ${o.name} ${o.short_description} ${o.url}`
+            .toLocaleLowerCase()
+            .includes(this.searchTerm.toLocaleLowerCase())
+        })
+        .map(obj => {
+          obj.isActive = window.location.pathname.startsWith(obj.url)
+          return obj
+        })
+    }
+  },
+  async created() {
+    await this.loadExtensions()
+  }
+})

lnbits/static/js/pages/extensions.js

@@ -205,13 +205,14 @@ window.PageExtensions = {
           this.g.user.wallets[0].adminkey
         )
         .then(response => {
+          // create new array to trigger reactivity
+          this.g.user.extensions = this.g.user.extensions
+            .concat([])
+            .push(extension.id)
           Quasar.Notify.create({
             type: 'positive',
             message: 'Extension enabled!'
           })
-          setTimeout(() => {
-            this.refreshRoute()
-          }, 300)
         })
         .catch(err => {
           console.warn(err)
@@ -226,13 +227,13 @@ window.PageExtensions = {
           this.g.user.wallets[0].adminkey
         )
         .then(response => {
+          this.g.user.extensions = this.g.user.extensions.filter(
+            ext => ext !== extension.id
+          )
           Quasar.Notify.create({
             type: 'positive',
             message: 'Extension disabled!'
           })
-          setTimeout(() => {
-            this.refreshRoute()
-          }, 300)
         })
         .catch(err => {
           console.warn(error)

lnbits/static/vendor.json

@@ -74,6 +74,7 @@
     "js/components/lnbits-footer.js",
     "js/components/lnbits-header.js",
     "js/components/lnbits-drawer.js",
+    "js/components/lnbits-manage-extension-list.js",
     "js/components/extension-settings.js",
     "js/components/data-fields.js",
     "js/components/payment-list.js",