Updated to supabase client

components/player.vue

@@ -18,13 +18,19 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
-defineProps({
+import type { Player } from '~/types/Player';
-  player: {
+
-    type: Object,
+const props = defineProps<{
-    required: true
+  player: Player
-  }
+}>()
-})
+
+// defineProps({
+//   player: {
+//     type: Player,
+//     required: true
+//   }
+// })
 </script>
 
 <style scoped>

pages/login.vue

@@ -2,6 +2,16 @@
 const supabase = useSupabaseClient()
 const email = ref('')
 
+// const sighInWithDiscord = async () => {
+//   const { data, error } = await supabase.auth.signInWithOAuth({
+//     provider: 'discord',
+//     options: {
+//       redirectTo: 'http://localhost:3000/confirm'
+//     }
+//   })
+//   if (error) console.log(error)
+// }
+
 const signInWithOtp = async () => {
   const { error } = await supabase.auth.signInWithOtp({
     email: email.value,

pages/players/[id].vue

@@ -2,27 +2,28 @@
     import type { Player } from '~/types/Player'
 
     const route = useRoute()
-    const config = useRuntimeConfig()
-
     const playerId = route.params.id
 
-    const { data, pending, error } = await useFetch<Player[]>(
+    const client = useSupabaseClient()
-        `${config.public.supabaseUrl}/rest/v1/players?select=*,rarity!inner(*)&id=eq.${playerId}`,
+
-        {
+    const { data: player, pending, error } = await useAsyncData<Player | null>(
-            method: 'GET',
+        'players', 
-            headers: {
+        async () => {
-                apikey: config.public.supabaseKey
+            const { data } = await client.from('players')
+            .select('*,rarity!inner(*)')
+            .eq('id', playerId)
+            .single()
+
+            console.log(`player:`)
+            console.log(data)
+            return data
         },
+        {
+            lazy: true,
             server: false
         }
     )
 
-    const player = computed(() => data.value?.[0] ?? {})
-
-    console.log('data:')
-    console.log(data)
-    console.log('player: ')
-    console.log(player)
 </script>
 
 <template>
@@ -30,6 +31,7 @@
     <div>
         <div v-if="pending">Loading...</div>
         <div v-else-if="error">Failed to load player</div>
+        <div v-else-if="!player">No playler found</div>
         <div v-else>
             <Player :player="player" />
         </div>

pages/players/random.vue

@@ -1,33 +1,28 @@
 <script setup lang='ts'>
     import type { Player } from '~/types/Player'
 
-    const config = useRuntimeConfig()
+    // const config = useRuntimeConfig()
+    const client = useSupabaseClient()
 
-    const { data, pending, error } = await useFetch<Player[]>(
+    const { data: playerList, pending, error } = await useAsyncData<Player[] | null>(
-        `${config.public.supabaseUrl}/rest/v1/random_player`,
+        'random_player', 
-        {
+        async () => {
-            method: 'GET',
+            const { data } = await client.from('random_player')
-            headers: {
+            .select('*,rarity!inner(*),mlb_player!inner(*)')
-                apikey: config.public.supabaseKey
+            .eq('franchise', 'Baltimore Orioles')
+            .eq('mlb_player.offense_col', 1)
+            .limit(3)
+
+            console.log('players from supabase: ')
+            console.log(data)
+            return data
         },
-            server: false,
+        {
-            query: {
+            lazy: true,
-                select: '*,rarity!inner(*),mlb_player!inner(*)',
+            server: false
-                // 'rarity.name': 'eq.All-Star',
-                // 'mlb_player.offense_col': 'eq.1',
-                franchise: 'eq.Baltimore Orioles',
-                limit: 3
-            }
         }
     )
     
-    // const player = computed(() => data.value?.[0] ?? null)
-    const players = computed(() => data.value ?? [])
-
-    console.log('data:')
-    console.log(data)
-    console.log('player: ')
-    console.log(players)
 </script>
 
 <template>
@@ -35,8 +30,9 @@
     <div >
         <div v-if="pending">Loading...</div>
         <div v-else-if="error">Failed to load player</div>
+        <div v-else-if="playerList?.length == 0">No players found</div>
         <div v-else class="grid">
-            <div v-for="player in players" :key="player.id">
+            <div v-for="player in playerList" :key="player.id">
                 <Player :player="player" />
             </div>
         </div>

types/Player.d.ts

@@ -1,3 +1,10 @@
+export interface Rarity {
+  id: number
+  name: string
+  color: string
+  value: number
+}
+
 export interface Player {
   id: number
   name: string
@@ -6,10 +13,5 @@ export interface Player {
   headshot: string
   description: string
   franchise: string
-  rarity: {
+  rarity: Rarity
-    id: number
-    name: string
-    color: string
-    value: number
-  }
 }