feat(store): replace vuex with pinia

nuxt/components/_/Header.vue

@@ -5,7 +5,7 @@
     </CardStateInfo>
     <div
       class="container mx-auto flex items-center justify-between gap-4 p-4 md:px-8"
-      :class="{ container: !signedInUsername() }"
+      :class="{ container: !signedInUsername }"
     >
       <ButtonIcon
         :aria-label="$t('menuShow')"
@@ -49,7 +49,7 @@
       </div> -->
       <div class="flex items-center gap-4 whitespace-nowrap">
         <ButtonColored
-          v-if="signedInUsername()"
+          v-if="signedInUsername"
           :aria-label="$t('dashboard')"
           class="hidden md:block"
           :is-primary="false"
@@ -58,17 +58,17 @@
           {{ $t('dashboard') }}
         </ButtonColored>
         <Button
-          v-if="signedInUsername()"
-          :aria-label="signedInUsername()"
+          v-if="signedInUsername"
+          :aria-label="signedInUsername"
           class="flex min-w-0 items-center gap-2 text-text-dark dark:text-text-bright"
           :title="$t('profileLink')"
-          :to="localePath(`/account/${signedInUsername()}`)"
+          :to="localePath(`/account/${signedInUsername}`)"
           @click.native="$emit('onMenuHide')"
         >
           <AccountProfilePicture
             height="40"
             rounded
-            :username="signedInUsername()"
+            :username="signedInUsername"
             width="40"
           />
         </Button>
@@ -86,19 +86,20 @@
 </template>
 
 <script lang="ts">
-import { mapGetters } from 'vuex'
-
 import { defineComponent, onBeforeMount, reactive, useNuxtApp } from '#app'
+import { useMaevsiStore } from '~/store'
 
 import supportedBrowsers from '~/supportedBrowsers'
 
 export default defineComponent({
   name: 'MaevsiHeader',
   setup(_props) {
     const { $router, localePath } = useNuxtApp()
+    const store = useMaevsiStore()
 
     const data = reactive({
       isBrowserSupported: true,
+      signedInUsername: store.signedInUsername,
     })
     const methods = {
       navigateToSearch() {
@@ -108,9 +109,6 @@ export default defineComponent({
         })
       },
     }
-    const computations = {
-      ...mapGetters(['signedInUsername']),
-    }
 
     onBeforeMount(() => {
       data.isBrowserSupported = supportedBrowsers.test(navigator.userAgent)
@@ -119,7 +117,6 @@ export default defineComponent({
     return {
       ...data,
       ...methods,
-      ...computations,
     }
   },
 })

nuxt/components/_/ImageUploadGallery.vue

@@ -136,7 +136,6 @@ import consola from 'consola'
 import prettyBytes from 'pretty-bytes'
 import Swal from 'sweetalert2'
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
-import { mapGetters } from 'vuex'
 
 import { useNuxtApp, defineComponent, PropType, reactive } from '#app'
 
@@ -148,6 +147,7 @@ import {
 import { TUSD_FILES_URL } from '~/plugins/util/validation'
 import { ITEMS_PER_PAGE } from '~/plugins/util/constants'
 import { getApiMeta } from '~/plugins/util/util'
+import { useMaevsiStore } from '~/store'
 
 require('@uppy/core/dist/style.css')
 
@@ -175,7 +175,8 @@ export default defineComponent({
     },
   },
   setup(props, { emit }) {
-    const { $store, $t } = useNuxtApp()
+    const { $t } = useNuxtApp()
+    const store = useMaevsiStore()
 
     const { executeMutation: executeMutationUploadCreate } =
       useUploadCreateMutation()
@@ -207,11 +208,12 @@ export default defineComponent({
     })
     const data = reactive({
       fileSelectedUrl: undefined as string | undefined,
+      jwt: store.jwt,
       selectedItem: undefined as Item | undefined,
+      signedInUsername: store.signedInUsername,
       uppy: undefined as Uppy | undefined,
     })
     const computations = {
-      ...mapGetters(['jwt', 'signedInUsername']),
       sizeByteTotal: computed((): number | undefined => {
         if (!apiData.uploads) {
           return undefined
@@ -249,7 +251,7 @@ export default defineComponent({
 
         xhr.open('DELETE', '/api/tusd?uploadId=' + uploadId, true)
         xhr.setRequestHeader('Hook-Name', 'maevsi/pre-terminate')
-        xhr.setRequestHeader('Authorization', 'Bearer ' + computations.jwt())
+        xhr.setRequestHeader('Authorization', 'Bearer ' + data.jwt)
         xhr.onreadystatechange = () => {
           if (xhr.readyState === 4) {
             element.classList.remove('disabled')
@@ -279,7 +281,7 @@ export default defineComponent({
       },
       fileLoaded(e: ProgressEvent<FileReader>) {
         data.fileSelectedUrl = e.target?.result as string | undefined
-        $store.commit('modalAdd', { id: 'ModalImageUploadGallery' })
+        store.modalAdd({ id: 'ModalImageUploadGallery' })
       },
       getUploadImageSrc(uploadStorageKey: string) {
         return TUSD_FILES_URL + uploadStorageKey + '+'

nuxt/components/_/Menu.vue

@@ -12,69 +12,69 @@
         <IconX />
       </ButtonIcon>
       <div class="flex flex-col gap-8 p-6 lg:p-8">
-        <!-- <div v-if="signedInUsername()" class="mt-0 flex md:mt-auto">
+        <!-- <div v-if="signedInUsername" class="mt-0 flex md:mt-auto">
           <Button
-            :aria-label="signedInUsername()"
+            :aria-label="signedInUsername"
             class="flex min-w-0 items-center gap-2 text-text-dark dark:text-text-bright"
             :title="$t('profileLink')"
-            :to="localePath(`/account/${signedInUsername()}`)"
+            :to="localePath(`/account/${signedInUsername}`)"
             @click.native="$emit('onMenuHide')"
           >
             <AccountProfilePicture
               height="40"
               rounded
-              :username="signedInUsername()"
+              :username="signedInUsername"
               width="40"
             />
-            <span class="truncate">{{ signedInUsername() }}</span>
+            <span class="truncate">{{ signedInUsername }}</span>
           </Button>
           <div class="w-12 flex-1" />
           <div class="flex items-center gap-2">
             <ButtonIcon
               :aria-label="$t('accountSettings')"
               :title="$t('accountSettings')"
-              :to="localePath(`/account/${signedInUsername()}/settings`)"
+              :to="localePath(`/account/${signedInUsername}/settings`)"
               @click.native="$emit('onMenuHide')"
             >
               <IconCog />
             </ButtonIcon>
             <ButtonIcon
               :aria-label="$t('signOut')"
               :title="$t('signOut')"
-              @click.native="signOut($urql, $store)"
+              @click.native="signOut($urql, store)"
             >
               <IconSignOut />
             </ButtonIcon>
           </div>
         </div>
-        <Hr v-if="signedInUsername()" />
+        <Hr v-if="signedInUsername" />
         <div class="flex flex-col gap-2">
           <ButtonMenu
-            v-if="signedInUsername()"
+            v-if="signedInUsername"
             :aria-label="$t('events')"
-            :to="localePath(`/event/${signedInUsername()}`)"
+            :to="localePath(`/event/${signedInUsername}`)"
           >
             <IconCalendar />
             {{ $t('events') }}
           </ButtonMenu>
           <ButtonMenu
-            v-if="signedInUsername()"
+            v-if="signedInUsername"
             :aria-label="$t('contacts')"
             :to="localePath('/contact')"
           >
             <IconAddressBook />
             {{ $t('contacts') }}
           </ButtonMenu>
           <ButtonMenu
-            v-if="signedInUsername()"
+            v-if="signedInUsername"
             :aria-label="$t('uploads')"
             :to="localePath('/upload')"
           >
             <IconImages />
             {{ $t('uploads') }}
           </ButtonMenu>
         </div>
-        <Hr v-if="signedInUsername()" class="md:hidden" /> -->
+        <Hr v-if="signedInUsername" class="md:hidden" /> -->
         <div class="flex flex-col gap-4 md:hidden">
           <ButtonColored
             :aria-label="$t('eventsExplore')"
@@ -96,9 +96,9 @@
 </template>
 
 <script lang="ts">
-import { mapGetters } from 'vuex'
+import { defineComponent, reactive } from '#app'
 
-import { defineComponent } from '#app'
+import { useMaevsiStore } from '~/store'
 
 export default defineComponent({
   name: 'MaevsiMenu',
@@ -109,12 +109,14 @@ export default defineComponent({
     },
   },
   setup() {
-    const computations = {
-      ...mapGetters(['signedInUsername']),
-    }
+    const store = useMaevsiStore()
+
+    const data = reactive({
+      signedInUsername: store.signedInUsername,
+    })
 
     return {
-      ...computations,
+      ...data,
     }
   },
 })

nuxt/components/contact/ContactList.vue

@@ -73,10 +73,12 @@ import { ITEMS_PER_PAGE_LARGE } from '~/plugins/util/constants'
 import { getApiMeta } from '~/plugins/util/util'
 import { useAllContactsQuery, useDeleteContactMutation } from '~/gql/generated'
 import { Contact } from '~/types/contact'
+import { useMaevsiStore } from '~/store'
 
 export default defineComponent({
   setup() {
-    const { $store, $t } = useNuxtApp()
+    const { $t } = useNuxtApp()
+    const store = useMaevsiStore()
     const { executeMutation: executeMutationContactDelete } =
       useDeleteContactMutation()
 
@@ -86,7 +88,7 @@ export default defineComponent({
     const contactsQuery = useAllContactsQuery({
       variables: {
         after: refs.apiContactsAfter,
-        authorAccountUsername: $store.getters.signedInUsername,
+        authorAccountUsername: store.signedInUsername,
         first: ITEMS_PER_PAGE_LARGE,
       },
     })
@@ -112,7 +114,7 @@ export default defineComponent({
       add() {
         data.formContactHeading = $t('contactAdd')
         data.selectedContact = undefined
-        $store.commit('modalAdd', { id: 'ModalContact' })
+        store.modalAdd({ id: 'ModalContact' })
       },
       async delete_(nodeId: string) {
         data.pending.deletions.push(nodeId)
@@ -137,7 +139,7 @@ export default defineComponent({
         data.pending.edits.push(contact.nodeId)
         data.formContactHeading = $t('contactEdit')
         data.selectedContact = contact
-        $store.commit('modalAdd', { id: 'ModalContact' })
+        store.modalAdd({ id: 'ModalContact' })
       },
       loadMore() {
         refs.apiContactsAfter.value =
@@ -162,7 +164,7 @@ export default defineComponent({
         }
       },
       onSubmitSuccess() {
-        $store.commit('modalRemove', 'ModalContact')
+        store.modalRemove('ModalContact')
         // TODO: cache update (allContacts)
       },
     }

nuxt/components/contact/ContactListItem.vue

@@ -25,14 +25,14 @@
       <div class="flex items-center justify-evenly gap-2">
         <ButtonTable
           :aria-label="
-            contact.authorAccountUsername !== signedInUsername()
+            contact.authorAccountUsername !== signedInUsername
               ? $t('disabledReasonCreatorNot', {
                   authorAccountUsername: contact.authorAccountUsername,
                 })
               : $t('contactEdit')
           "
           :disabled="
-            contact.authorAccountUsername !== signedInUsername() || isEditing
+            contact.authorAccountUsername !== signedInUsername || isEditing
           "
           is-title-show
           @click="$emit('edit')"
@@ -41,9 +41,7 @@
         </ButtonTable>
         <ButtonTable
           :aria-label="$t('contactDelete')"
-          :disabled="
-            isDeleting || contact.accountUsername === signedInUsername()
-          "
+          :disabled="isDeleting || contact.accountUsername === signedInUsername"
           is-title-show
           @click="$emit('delete')"
         >
@@ -55,9 +53,9 @@
 </template>
 
 <script lang="ts">
-import { mapGetters } from 'vuex'
+import { defineComponent, PropType, reactive } from '#app'
 
-import { defineComponent, PropType } from '#app'
+import { useMaevsiStore } from '~/store'
 import { Contact } from '~/types/contact'
 
 export default defineComponent({
@@ -76,12 +74,14 @@ export default defineComponent({
     },
   },
   setup() {
-    const computations = {
-      ...mapGetters(['signedInUsername']),
-    }
+    const store = useMaevsiStore()
+
+    const data = reactive({
+      signedInUsername: store.signedInUsername,
+    })
 
     return {
-      ...computations,
+      ...data,
     }
   },
 })