bye pinia

Author: or2e

src/WebUI/app/api.config.ts

@@ -28,24 +28,21 @@ export const createClientConfig: CreateClientConfig = (config) => {
     ...config,
     baseURL: import.meta.env.NUXT_PUBLIC_API_BASE_URL,
     auth: () => getToken(),
-
     async onResponseError({ response }) {
       const toast = useToast()
       const route = useRoute()
 
-      if (route.meta.roles) {
-        if (response.status === 401) {
-          toast.add({
-            title: 'Session expired',
-            color: 'error',
-            duration: 3000,
-            icon: 'crpg:error',
-            close: false,
-          })
-          await delay(1000)
-          await login(globalThis.localStorage.getItem('user-platform') as Platform ?? PLATFORM.Steam)
-          return
-        }
+      if (route.meta.roles && response.status === 401) {
+        toast.add({
+          title: 'Session expired',
+          color: 'error',
+          duration: 3000,
+          icon: 'crpg:error',
+          close: false,
+        })
+        await delay(1000)
+        await login(globalThis.localStorage.getItem('user-platform') as Platform ?? PLATFORM.Steam)
+        return
       }
 
       const [error] = (response as FetchResponse<{ errors: CrpgApiError[] }>)._data?.errors ?? []

src/WebUI/app/app.vue

@@ -2,7 +2,6 @@
 import { usePageLoadingProvider } from '~/composables/app/use-page-loading'
 
 const [activePageLoading] = usePageLoadingProvider()
-// const { $poll } = useNuxtApp()
 </script>
 
 <template>
@@ -15,40 +14,13 @@ const [activePageLoading] = usePageLoadingProvider()
       delayDuration: 300,
     }"
   >
-    <!--
-    {{ $poll.keys }}
-    {{ activePageLoading }}
-     -->
-
     <NuxtLoadingIndicator color="rgb(210 187 138)" />
-
     <NuxtRouteAnnouncer />
 
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
 
-    <!-- TODO: FIXME: -->
-    <!-- <NuxtErrorBoundary>
-      <NuxtLayout>
-        <NuxtPage />
-      </NuxtLayout>
-
-      <template #error="{ error, clearError }">
-        <UModal
-          open
-          :title="$t('error.title')"
-        >
-          <template #body>
-            <p>An error occurred: {{ error }}</p>
-            <button @click="clearError">
-              Clear error
-            </button>
-          </template>
-        </UModal>
-      </template>
-    </NuxtErrorBoundary> -->
-
     <AppBundledSprite />
 
     <Teleport to="body">

src/WebUI/app/components/app/Login.vue

@@ -5,24 +5,20 @@ import { useStorage } from '@vueuse/core'
 
 import type { Platform } from '~/models/platform'
 
+import { useUser } from '~/composables/user/use-user'
 import { useAsyncCallback } from '~/composables/utils/use-async-callback'
 import { AVAILABLE_PLATFORM, PLATFORM } from '~/models/platform'
 import { login } from '~/services/auth-service'
 import { platformToIcon } from '~/services/platform-service'
-import { useUserStore } from '~/stores/user'
 
 const { size = 'xl' } = defineProps<{ size?: ButtonProps['size'] }>()
-const userStore = useUserStore()
-const { user } = toRefs(userStore)
+const { user } = useUser()
 
-const platform = useStorage<Platform>('user-platform', PLATFORM.Steam) // Steam by default
+const platform = useStorage<Platform>('user-platform', PLATFORM.Steam)
 
 const { t } = useI18n()
 
-const {
-  execute: loginUser,
-  isLoading: logging,
-} = useAsyncCallback(() => login(platform.value))
+const [loginUser, logging] = useAsyncCallback(() => login(platform.value))
 
 const items = AVAILABLE_PLATFORM.map(p => ({
   label: t(`platform.${p}`),

src/WebUI/app/components/app/layout/Footer.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import type { HHEvent } from '~/services/hh-service'
 
-import { useUserStore } from '~/stores/user'
+import { useUser } from '~/composables/user/use-user'
 
 defineProps<{ hHEvent: HHEvent }>()
 
-const userStore = useUserStore()
+const { user } = useUser()
 
 const scrollToTop = () =>
   window.scrollTo({
@@ -24,16 +24,16 @@ const scrollToTop = () =>
     />
 
     <div class="flex items-center gap-5">
-      <template v-if="userStore.user">
-        <AppHHTooltip :region="userStore.user.region">
+      <template v-if="user">
+        <AppHHTooltip :region="user.region">
           <UiDataCell class="hover:text-highlighted">
             <template #leftContent>
               <UIcon
                 name="crpg:gift"
                 class="size-6"
               />
             </template>
-            {{ $t('hh.tooltip-trigger', { region: $t(`region.${userStore.user.region}`, 1) }) }}
+            {{ $t('hh.tooltip-trigger', { region: $t(`region.${user.region}`, 1) }) }}
             <template #rightContent>
               {{ $d(hHEvent.start, 'time') }} - {{ $d(hHEvent.end, 'time') }}
             </template>

src/WebUI/app/components/app/layout/MainNavigation.vue

@@ -3,13 +3,13 @@ import type { NavigationMenuItem } from '@nuxt/ui'
 
 import type { PatchNote } from '~/models/patch-note'
 
-import { useUserStore } from '~/stores/user'
+import { useUser } from '~/composables/user/use-user'
 
 defineProps<{ latestPatch?: PatchNote }>()
 
 const { settings } = useAppConfig()
 
-const userStore = useUserStore()
+const { user, clan } = useUser()
 const { t } = useI18n()
 
 const items = computed(() => {
@@ -25,7 +25,7 @@ const items = computed(() => {
     },
   ]
 
-  if (!userStore.user) {
+  if (!user.value) {
     return common
   }
 
@@ -117,7 +117,7 @@ const items = computed(() => {
       <UIcon name="crpg:trophy-cup" class="size-6 text-gold" />
     </template>
 
-    <template v-if="!userStore.clan" #clans-leading>
+    <template v-if="!clan" #clans-leading>
       <UTooltip data-aq-main-nav-link-tooltip="Explanation">
         <UBadge
           icon="crpg:tag"

src/WebUI/app/components/character/inventory/item/CharacterInventoryItemCard.vue

@@ -2,21 +2,19 @@
 import type { UserItem, UserPublic } from '~/models/user'
 
 import { getItemGraceTimeEnd, isGraceTimeExpired } from '~/services/item-service'
-import { useUserStore } from '~/stores/user'
 
 const {
   equipped = false,
   notMeetRequirement = false,
   userItem,
 } = defineProps<{
+  userId: number
   userItem: UserItem
   equipped?: boolean
   notMeetRequirement?: boolean
   lender?: UserPublic | null
 }>()
 
-const { user } = toRefs(useUserStore())
-
 const isNew = computed(() => !isGraceTimeExpired(getItemGraceTimeEnd(userItem)))
 </script>
 
@@ -37,8 +35,8 @@ const isNew = computed(() => !isGraceTimeExpired(getItemGraceTimeEnd(userItem)))
 
       <template v-if="userItem.isArmoryItem">
         <ClanArmoryItemRelationBadge
-          v-if="lender && lender.id !== user!.id"
-          :lender="lender"
+          v-if="lender && lender.id !== userId"
+          :lender
           class="cursor-default"
         />
 

src/WebUI/app/components/character/inventory/item/CharacterInventoryItemDetail.vue

@@ -7,20 +7,20 @@ import { itemSellCostPenalty } from '~root/data/constants.json'
 import type { CompareItemsResult } from '~/models/item'
 import type { UserItem, UserPublic } from '~/models/user'
 
+import { useUser } from '~/composables/user/use-user'
 import {
   canAddedToClanArmory,
   canSell,
   canUpgradeUserItem,
   computeBrokenItemRepairCost,
   computeSalePrice,
 } from '~/services/item-service'
-import { useUserStore } from '~/stores/user'
 import { parseTimestamp } from '~/utils/date'
 
 const {
+  userItem,
   compareResult,
   equipped = false,
-  userItem,
 } = defineProps<{
   userItem: UserItem
   compareResult?: CompareItemsResult
@@ -38,7 +38,7 @@ const emit = defineEmits<{
   returnToClanArmory: []
 }>()
 
-const { clan, user } = toRefs(useUserStore())
+const { user, clan } = useUser()
 
 const userItemToReplaceSalePrice = computed(() => {
   const { graceTimeEnd, price } = computeSalePrice(userItem)
@@ -57,19 +57,7 @@ const isCanAddedToClanArmory = computed(() => canAddedToClanArmory(userItem))
 
 const overlay = useOverlay()
 
-const itemUpgradesModal = overlay.create(LazyCharacterInventoryItemUpgradesModal, {
-  props: {
-    userItem,
-    onReforge: () => {
-      itemUpgradesModal.close()
-      emit('reforge')
-    },
-    onUpgrade: () => {
-      itemUpgradesModal.close()
-      emit('upgrade')
-    },
-  },
-})
+const itemUpgradesModal = overlay.create(LazyCharacterInventoryItemUpgradesModal)
 
 const { t } = useI18n()
 
@@ -103,12 +91,22 @@ const itemActions = computed(() => {
       onSelect: () => {
         itemUpgradesModal.open({
           userItem,
+          gold: user.value!.gold,
+          heirloomPoints: user.value!.heirloomPoints,
+          onReforge: () => {
+            itemUpgradesModal.close()
+            emit('reforge')
+          },
+          onUpgrade: () => {
+            itemUpgradesModal.close()
+            emit('upgrade')
+          },
         })
       },
     })
   }
 
-  if (clan.value && isCanAddedToClanArmory.value) {
+  if (!!clan.value && isCanAddedToClanArmory.value) {
     if (!userItem.isArmoryItem) {
       result.push({
         slot: 'armory-add' as const,

src/WebUI/app/components/character/inventory/item/CharacterInventoryItemUpgradesModal.vue

@@ -10,18 +10,18 @@ import { useItemReforge } from '~/composables/item/use-item-reforge'
 import { useItemUpgrades } from '~/composables/item/use-item-upgrades'
 import { createItemIndex } from '~/services/item-search-service/indexator'
 import { getItemAggregations, getRankColor } from '~/services/item-service'
-import { useUserStore } from '~/stores/user'
 
 const { userItem } = defineProps<{
   userItem: UserItem
+  gold: number
+  heirloomPoints: number
 }>()
 
 const emit = defineEmits<{
   upgrade: []
   reforge: []
 }>()
 
-const userStore = useUserStore()
 const { t } = useI18n()
 
 // TODO:
@@ -114,8 +114,8 @@ async function reforge() {
         {{ $t('character.inventory.item.upgrade.upgradesTitle') }}
       </UiTextView>
 
-      <AppLoom :point="userStore.user!.heirloomPoints" />
-      <AppCoin :value="userStore.user!.gold" />
+      <AppLoom :point="heirloomPoints" />
+      <AppCoin :value="gold" />
 
       <UTooltip>
         <!-- This extra div fixes a bug where this popover opens itself when the parent modal window opens. -->

src/WebUI/app/components/clan/armory/ClanArmoryItemDetail.vue

@@ -4,9 +4,9 @@ import type { DropdownMenuItem } from '@nuxt/ui'
 import type { ClanArmoryItem } from '~/models/clan'
 import type { UserPublic } from '~/models/user'
 
+import { useUser } from '~/composables/user/use-user'
 import { CLAN_MEMBER_ROLE } from '~/models/clan'
 import { isOwnClanArmoryItem } from '~/services/clan-service'
-import { useUserStore } from '~/stores/user'
 
 const { borrower, clanArmoryItem, lender } = defineProps<{
   clanArmoryItem: ClanArmoryItem
@@ -20,7 +20,7 @@ const emit = defineEmits<{
   return: []
 }>()
 
-const { clanMemberRole, user } = toRefs(useUserStore())
+const { clanMemberRole, user } = useUser()
 
 const { t } = useI18n()
 

src/WebUI/app/components/clan/armory/ClanArmoryItemRelationBadge.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import type { UserPublic } from '~/models/user'
 
-import { useUserStore } from '~/stores/user'
+import { useUser } from '~/composables/user/use-user'
 
 const { borrower, lender } = defineProps<{
   lender: UserPublic
   borrower?: UserPublic | null
 }>()
 
-const { user } = toRefs(useUserStore())
+const { user } = useUser()
 </script>
 
 <template>