fix: tg profile (#313)

apps/telegram-game/src/App.vue

@@ -8,6 +8,17 @@
 </template>
 
 <script setup lang="ts">
+import { initData } from '@telegram-apps/sdk-vue'
+
 useBackButton()
-useTelegramProfile()
+const { refreshProfile, updateUserData } = useTelegramProfile()
+
+onMounted(() => {
+  const user = initData.user()
+
+  if (user) {
+    updateUserData({ userId: user.id, username: user?.username })
+    refreshProfile()
+  }
+})
 </script>

apps/telegram-game/src/composables/useTelegramProfile.ts

@@ -1,5 +1,4 @@
 import type { CharacterEdition, InventoryItem, InventoryItemEdition, Profile, TelegramProfile, Trophy, TrophyEdition } from '@chat-game/types'
-import { initData } from '@telegram-apps/sdk-vue'
 import { useFetch } from '@vueuse/core'
 
 type TelegramProfileWithProfile = TelegramProfile & {
@@ -10,17 +9,19 @@ type TelegramProfileWithProfile = TelegramProfile & {
   }
 }
 
-const { data, execute: refreshProfile } = useFetch(`https://chatgame.space/api/telegram/`, {
-  async beforeFetch() {
-    const user = initData.user()
-    if (user) {
-      return {
-        url: `https://chatgame.space/api/telegram/${user.id}?username=${user.username}`,
-      }
-    }
-  },
+const userId = ref<number>()
+const username = ref<string | undefined>()
+const url = computed(() => `https://chatgame.space/api/telegram/${userId.value}?username=${username.value}`)
+
+const { data, execute: refreshProfile } = useFetch(url, {
+  immediate: false,
 }).get().json<TelegramProfileWithProfile>()
 
 export function useTelegramProfile() {
-  return { profile: data, refreshProfile }
+  function updateUserData(data: { userId: number, username?: string }) {
+    userId.value = data.userId
+    username.value = data?.username
+  }
+
+  return { profile: data, refreshProfile, updateUserData }
 }

apps/telegram-game/src/views/InventoryView.vue

@@ -7,7 +7,7 @@
           {{ data?.username }}
         </div>
         <div class="tg-hint text-sm">
-          {{ data?.id }}
+          {{ data?.id }} {{ profile?.id }}
         </div>
       </div>
     </div>
@@ -31,8 +31,8 @@
       </div>
     </div>
 
-    <div v-if="inventoryItems" class="grid grid-cols-3 gap-2">
-      <ActiveCard v-for="edition in inventoryItems" :key="edition.id" @click="selectItem(edition.id)">
+    <div v-if="inventoryItems.length" class="grid grid-cols-3 gap-2">
+      <ActiveCard v-for="edition in inventoryItems" :key="edition.id" class="aspect-square" @click="selectItem(edition.id)">
         <img :src="`/items/${edition.itemId}/128.png`" alt="" class="w-full h-auto">
         <div class="absolute bottom-0 right-0">
           <p class="mx-auto w-fit px-3 py-2 tg-secondary-bg rounded-tl-2xl rounded-br-2xl leading-none">

apps/telegram-game/src/views/ShopView.vue

@@ -15,7 +15,7 @@
     <SectionHeader text="Коллекция персонажей 2024" />
 
     <div class="grid grid-cols-2 gap-2">
-      <ActiveCard v-for="char in characters" :key="char.id" @click="selectCharacter(char.id)">
+      <ActiveCard v-for="char in characters" :key="char.id" class="aspect-square" @click="selectCharacter(char.id)">
         <div v-if="!char?.editions?.find(({ profileId }) => profileId === profile?.profile.id)" class="z-10 absolute top-0 left-0 right-0 bottom-0 tg-secondary-bg opacity-40" />
 
         <div v-if="profile?.profile?.activeEditionId === char?.editions?.find(({ profileId }) => profileId === profile?.profile.id)?.id" class="tg-accent-text text-base font-medium leading-tight">

apps/telegram-game/src/views/TopView.vue

@@ -14,10 +14,10 @@
 
     <SectionHeader text="Мои трофеи" />
 
-    <div v-if="trophies" class="grid grid-cols-3 gap-2">
+    <div v-if="trophies.length" class="grid grid-cols-3 gap-2">
       <ActiveCard v-for="edition in trophies" :key="edition.id" class="flex flex-col gap-2 items-center" @click="selectTrophy(edition.id)">
         <img :src="getTrophyImage(edition.trophy)" alt="" class="w-full h-auto">
-        <p class="my-auto text-center text-sm leading-tight">
+        <p class="max-h-14 my-auto text-center text-sm font-medium leading-tight line-clamp-3">
           {{ edition.trophy.name }}
         </p>
       </ActiveCard>

apps/website/server/api/telegram/[telegramId]/index.get.ts

@@ -11,38 +11,42 @@ export default defineEventHandler(async (event) => {
     const query = getQuery(event)
     const username = query?.username?.toString()
 
-    const profile = await prisma.telegramProfile.findFirst({
-      where: { telegramId },
-      include: {
-        profile: {
-          include: {
-            trophyEditions: {
-              include: {
-                trophy: true,
-              },
-            },
-            characterEditions: true,
-            itemEditions: {
-              include: {
-                item: true,
-              },
-            },
-          },
-        },
-      },
-    })
+    const profile = await getProfile(telegramId)
     if (!profile) {
       const repository = new DBRepository()
-      const profile = await repository.findOrCreateTelegramProfile({
+      await repository.findOrCreateTelegramProfile({
         telegramId,
         username,
       })
 
-      return profile
+      return getProfile(telegramId)
     }
 
     return profile
   } catch (error) {
     throw errorResolver(error)
   }
 })
+
+async function getProfile(telegramId: string) {
+  return prisma.telegramProfile.findFirst({
+    where: { telegramId },
+    include: {
+      profile: {
+        include: {
+          trophyEditions: {
+            include: {
+              trophy: true,
+            },
+          },
+          characterEditions: true,
+          itemEditions: {
+            include: {
+              item: true,
+            },
+          },
+        },
+      },
+    },
+  })
+}