From cf82ed478daaa91e4043ff32fb8536a6cde541d6 Mon Sep 17 00:00:00 2001
From: PatMulligan <43773168+PatMulligan@users.noreply.github.com>
Date: Fri, 25 Oct 2024 14:19:13 +0200
Subject: [PATCH] pass showKeys as prop to merchant-details child and use emit
 to toggle (#105)

previously, index and its child compoment merchant-details had their own
booleans and their values were not synched. Using a prop avoids this
problem
---
 static/components/merchant-details/merchant-details.html | 2 +-
 static/components/merchant-details/merchant-details.js   | 8 +++-----
 static/js/index.js                                       | 4 ++--
 templates/nostrmarket/index.html                         | 3 ++-
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/static/components/merchant-details/merchant-details.html b/static/components/merchant-details/merchant-details.html
index 35f9e31..e48a8e8 100644
--- a/static/components/merchant-details/merchant-details.html
+++ b/static/components/merchant-details/merchant-details.html
@@ -15,7 +15,7 @@
           >
         </q-item-section>
       </q-item>
-      <q-item @click="toggleMerchantKeys" clickable v-close-popup>
+      <q-item @click="toggleShowKeys" clickable v-close-popup>
         <q-item-section>
           <q-item-label v-if="!showKeys">Show Keys</q-item-label>
           <q-item-label v-else>Hide Keys</q-item-label>
diff --git a/static/components/merchant-details/merchant-details.js b/static/components/merchant-details/merchant-details.js
index 31dcfac..ed78226 100644
--- a/static/components/merchant-details/merchant-details.js
+++ b/static/components/merchant-details/merchant-details.js
@@ -2,18 +2,16 @@ async function merchantDetails(path) {
   const template = await loadTemplateAsync(path)
   Vue.component('merchant-details', {
     name: 'merchant-details',
-    props: ['merchant-id', 'adminkey', 'inkey'],
+    props: ['merchant-id', 'adminkey', 'inkey','showKeys'],
     template,
 
     data: function () {
       return {
-        showKeys: false
       }
     },
     methods: {
-      toggleMerchantKeys: async function () {
-        this.showKeys = !this.showKeys
-        this.$emit('show-keys', this.showKeys)
+      toggleShowKeys: async function () {
+        this.$emit('toggle-show-keys')
       },
 
       republishMerchantData: async function () {
diff --git a/static/js/index.js b/static/js/index.js
index 72f1607..4e8cf2f 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -58,8 +58,8 @@ const merchant = async () => {
       showImportKeysDialog: async function () {
         this.importKeyDialog.show = true
       },
-      toggleMerchantKeys: function (value) {
-        this.showKeys = value
+      toggleShowKeys: function () {
+        this.showKeys = !this.showKeys
       },
       toggleMerchantState: async function () {
         const merchant = await this.getMerchant()
diff --git a/templates/nostrmarket/index.html b/templates/nostrmarket/index.html
index c39eb32..e7296c3 100644
--- a/templates/nostrmarket/index.html
+++ b/templates/nostrmarket/index.html
@@ -11,7 +11,8 @@
                 :merchant-id="merchant.id"
                 :inkey="g.user.wallets[0].inkey"
                 :adminkey="g.user.wallets[0].adminkey"
-                @show-keys="toggleMerchantKeys"
+                :show-keys="showKeys"
+                @toggle-show-keys="toggleShowKeys"
                 @merchant-deleted="handleMerchantDeleted"
               ></merchant-details>
             </div>