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",

lnbits/templates/components.vue

@@ -14,7 +14,8 @@ include('components/new_user_wallet.vue') %} {%
 include('components/lnbits-footer.vue') %} {%
 include('components/lnbits-header.vue') %} {%
 include('components/lnbits-drawer.vue') %} {%
-include('components/lnbits-home-logos.vue') %}
+include('components/lnbits-home-logos.vue') %} {%
+include('components/lnbits-manage-extension-list.vue') %}
 
 <template id="lnbits-wallet-list">
   <q-list
@@ -107,51 +108,6 @@ include('components/lnbits-home-logos.vue') %}
   </q-list>
 </template>
 
-<template id="lnbits-extension-list">
-  <q-list
-    v-if="
-      (g.user && userExtensions && userExtensions.length > 0) || !!searchTerm
-    "
-    dense
-    class="lnbits-drawer__q-list"
-  >
-    <q-item>
-      <q-item-section>
-        <q-input
-          v-model="searchTerm"
-          dense
-          borderless
-          :label="$t('extensions')"
-        >
-        </q-input>
-      </q-item-section>
-    </q-item>
-    <q-item
-      v-for="extension in userExtensions"
-      :key="extension.code"
-      clickable
-      :active="extension.isActive"
-      tag="a"
-      :href="extension.url"
-    >
-      <q-item-section side>
-        <q-avatar size="md">
-          <q-img :src="extension.tile" style="max-width: 20px"></q-img>
-        </q-avatar>
-      </q-item-section>
-      <q-item-section>
-        <q-item-label lines="1"
-          ><span v-text="extension.name"></span>
-        </q-item-label>
-      </q-item-section>
-      <q-item-section side v-show="extension.isActive">
-        <q-icon name="chevron_right" color="grey-5" size="md"></q-icon>
-      </q-item-section>
-    </q-item>
-    <div class="lt-md q-mt-xl q-mb-xl"></div>
-  </q-list>
-</template>
-
 <template id="lnbits-manage">
   <q-list v-if="g.user" dense class="lnbits-drawer__q-list">
     <q-item-label header v-text="$t('manage')"></q-item-label>

lnbits/templates/components/lnbits-drawer.vue

@@ -38,7 +38,9 @@
         @wallet-action="handleWalletAction"
       ></lnbits-wallet-list>
       <lnbits-manage></lnbits-manage>
-      <lnbits-extension-list class="q-pb-xl"></lnbits-extension-list>
+      <lnbits-manage-extension-list
+        class="q-pb-xl"
+      ></lnbits-manage-extension-list>
     </q-scroll-area>
   </q-drawer>
 </template>

lnbits/templates/components/lnbits-manage-extension-list.vue

@@ -0,0 +1,42 @@
+<template id="lnbits-extension-list">
+  <q-list
+    v-if="g.user && extensions && extensions.length > 0"
+    dense
+    class="lnbits-drawer__q-list"
+  >
+    <q-item>
+      <q-item-section>
+        <q-input
+          v-model="searchTerm"
+          dense
+          borderless
+          :label="$t('extensions')"
+        >
+        </q-input>
+      </q-item-section>
+    </q-item>
+    <q-item
+      v-for="extension in userExtensions"
+      :key="extension.code"
+      clickable
+      :active="extension.isActive"
+      tag="a"
+      :href="extension.url"
+    >
+      <q-item-section side>
+        <q-avatar size="md">
+          <q-img :src="extension.tile" style="max-width: 20px"></q-img>
+        </q-avatar>
+      </q-item-section>
+      <q-item-section>
+        <q-item-label lines="1"
+          ><span v-text="extension.name"></span>
+        </q-item-label>
+      </q-item-section>
+      <q-item-section side v-show="extension.isActive">
+        <q-icon name="chevron_right" color="grey-5" size="md"></q-icon>
+      </q-item-section>
+    </q-item>
+    <div class="lt-md q-mt-xl q-mb-xl"></div>
+  </q-list>
+</template>

package.json

@@ -126,6 +126,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",