Merge pull request #28 from data-preservation-programs/fix-reactive-b…

…utton-module

fix: zero button component now handles loading state updates correctly

modules/zero-components/button/components/button.vue

@@ -14,9 +14,6 @@
 </template>
 
 <script setup>
-// ===================================================================== Imports
-
-
 // ======================================================================= Props
 const props = defineProps({
   tag: { // 'button', 'a' or 'nuxt-link'
@@ -51,13 +48,16 @@ const props = defineProps({
   }
 })
 
+// ======================================================================== Data
 const emit = defineEmits(['clicked'])
+const store = useZeroButtonStore()
+const id = props.loader
+const loading = ref(false)
 
 // ======================================================================= Setup
-const { $button } = useNuxtApp()
-const id = props.loader || useUuid().v4()
-const button = await $button(id).register()
-const loading = button && button.loading
+if (id) {
+  store.set({ id, loading: false })
+}
 
 // ==================================================================== Computed
 const component = computed(() => {
@@ -66,14 +66,27 @@ const component = computed(() => {
   return resolveComponent('NuxtLink')
 })
 
+// ======================================================================= Watch
+watch(store.buttons, (buttons) => {
+  const found = buttons.find(button => button.id === id)
+  if (found) {
+    loading.value = found.loading
+  }
+})
+
 // ===================================================================== Methods
 const clickHandler = (e) => {
   e.stopPropagation()
   if (!props.disabled) {
     if (typeof props.loader === 'string') {
-      $button(id).set({ loading: true })
+      store.set({ id, loading: true })
     }
     emit('clicked', e)
   }
 }
+
+// ======================================================================= Hooks
+onBeforeUnmount(() => {
+  store.remove(id)
+})
 </script>

modules/zero-components/button/index.js

@@ -2,10 +2,7 @@ export default {
   components: [
     { file: 'button.vue', name: 'ZeroButton' }
   ],
-  plugins: [
-    { file: 'button.js', name: 'zero-button' }
-  ],
   stores: [
-    { file: 'button.js', name: 'zero-button-store' }
+    { file: 'button.js', name: 'useZeroButtonStore' }
   ]
 }

modules/zero-components/button/stores/button.js

@@ -1,23 +1,26 @@
 // ///////////////////////////////////////////////////////////////////// Imports
 // -----------------------------------------------------------------------------
 import { defineStore } from 'pinia'
-import { ref } from '#imports'
+import { reactive } from '#imports'
 
 // /////////////////////////////////////////////////////////////////////// State
 // -----------------------------------------------------------------------------
-const buttons = ref({})
+const buttons = reactive([])
 
 // ///////////////////////////////////////////////////////////////////// Actions
 // -----------------------------------------------------------------------------
-// /////////////////////////////////////////////////////////////////// setButton
-const setButton = (payload) => {
-  buttons.value[payload.id] = payload
-  return payload
+// ///////////////////////////////////////////////////////////////////////// set
+const set = (payload) => {
+  const index = buttons.findIndex(button => button.id === payload.id)
+  index === -1 ? buttons.push(payload) : buttons.splice(index, 1, payload)
 }
 
-// //////////////////////////////////////////////////////////////// removeButton
-const removeButton = (id) => {
-  delete buttons.value[id]
+// ////////////////////////////////////////////////////////////////////// remove
+const remove = (id) => {
+  const index = buttons.findIndex(button => button.id === id)
+  if (id !== -1) {
+    buttons.splice(index, 1)
+  }
 }
 
 // ////////////////////////////////////////////////////////////////////// Export
@@ -26,6 +29,6 @@ export const useZeroButtonStore = defineStore('zero-button', () => ({
   // ----- state
   buttons,
   // ----- actions
-  setButton,
-  removeButton
+  set,
+  remove
 }))

modules/zero-components/index.js

@@ -50,6 +50,7 @@ const registerStores = (submodule, stores) => {
   stores.forEach((store) => {
     addImports({
       name: store.name,
+      as: store.name,
       from: resolve(`${submodule}/stores/${store.file}`)
     })
   })

nuxt.config.js

@@ -8,7 +8,7 @@ const baseUrls = {
   production: 'https://singularity.storage/'
 }
 
-const frontendPort = 10050
+const frontendPort = 10070
 
 const seo = {
   siteName: 'Singularity',

pages/index.vue

@@ -7,6 +7,7 @@
 </template>
 
 <script setup>
+// ===================================================================== Imports
 import BlockBuilder from '@/components/blocks/block-builder'
 
 // ======================================================================== Data