Added pinia for stateful marketplace search

Refactored to marketplace component

components/Marketplace.vue

@@ -0,0 +1,216 @@
+<template>
+  <div>
+    <!-- Filters -->
+    <details :open="showFilters" @toggle="toggleFilters">
+      <summary role="button" class="contrast" style="margin-bottom: 1rem;">
+        {{ showFilters ? 'Hide Filters' : 'Show Filters' }}
+      </summary>
+    
+      <!-- Filters Panel -->
+      <div class="container" style="background: var(--pico-card-background-color); padding: 1rem; border-radius: var(--pico-border-radius);">
+  
+        <label for="filter-min-cost">Min Cost:</label>
+        <input v-model.number="marketplace.filters.minCost" id="filter-min-cost" type="number" placeholder="Min cost" />
+    
+        <label for="filter-max-cost">Max Cost:</label>
+        <input v-model.number="marketplace.filters.maxCost" id="filter-max-cost" type="number" placeholder="Max cost" />
+    
+        <label for="filter-rarity">Rarity:</label>
+        <select v-model="marketplace.filters.rarities" id="filter-rarity" multiple size="6">
+          <option value="Replacement">Replacement</option>
+          <option value="Reserve">Reserve</option>
+          <option value="Starter">Starter</option>
+          <option value="All-Star">All-Star</option>
+          <option value="MVP">MVP</option>
+          <option value="Hall of Fame">Hall of Fame</option>
+        </select>
+    
+        <button @click="applyFilters" class="contrast" style="margin-top: 1rem;">
+          Apply Filters
+        </button>
+      </div>
+    </details>
+
+    <!-- Loading -->
+    <div v-if="pending" class="container" style="text-align: center; padding: 2rem;">
+      <p>Loading players...</p>
+    </div>
+
+    <!-- No Results -->
+    <div v-else-if="!playerList || playerList.length === 0" class="container" style="text-align: center; padding: 2rem;">
+      <p>No players found. Try adjusting your filters!</p>
+    </div>
+
+    <!-- Player Cards -->
+    <section v-else class="grid" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; text-align: center;">
+      <article v-for="player in playerList" :key="player.player_id" class="card player-card">
+        <NuxtLink :to="`/players/${player.player_id}`" style="text-decoration: none; color: inherit;">
+          <img :src="player?.player_headshot" alt="Player Headshot" class="headshot" />
+          <h2 class="name">{{ player?.player_name }}</h2>
+          <p class="franchise">{{ player?.franchise_name }}</p>
+
+          <img :src="player?.player_card_image" alt="Player Card" class="card-image" />
+          <img v-if="player?.player_card_image2" :src="player?.player_card_image2" alt="Player Card 2" class="card-image" />
+
+          <div class="rarity" :style="{ backgroundColor: '#' + player.rarity_color }">
+            {{ player.rarity_name }}
+          </div>
+
+          <p class="cardset">{{ player?.cardset_name }}</p>
+          <p class="cost">Cost: {{ player?.player_cost }}₼</p>
+        </NuxtLink>
+      </article>
+    </section>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useMarketplaceStore } from '~/stores/marketplace'
+import type { MarketplacePlayer } from '~/types/MarketplacePlayer'
+
+const marketplace = useMarketplaceStore()
+const client = useSupabaseClient()
+const router = useRouter()
+const route = useRoute()
+
+const showFilters = ref(false)
+// Track the current filters from the URL query
+const currentQuery = ref(route.query)
+
+const toggleFilters = () => {
+  showFilters.value = !showFilters.value
+}
+
+const applyFilters = async () => {
+  console.log('Applying filters:', marketplace.filters)
+
+  router.replace({
+    query: {
+      minCost: marketplace.filters.minCost || undefined,
+      maxCost: marketplace.filters.maxCost || undefined,
+      rarities: marketplace.filters.rarities.length > 0 ? marketplace.filters.rarities : undefined
+    }
+  })
+}
+
+const fetchPlayers = async () => {
+  let query = client.from('marketplace')
+    .select('*')
+    .limit(20)
+
+  // Apply filter conditions based on the store values
+  if (marketplace.filters.minCost > 0) {
+    query = query.gte('player_cost', marketplace.filters.minCost)
+  }
+  if (marketplace.filters.maxCost > 0) {
+    query = query.lte('player_cost', marketplace.filters.maxCost)
+  }
+  if (marketplace.filters.rarities.length > 0) {
+    query = query.in('rarity_name', marketplace.filters.rarities)
+  }
+
+  const { data, error } = await query
+
+  if (error) {
+    console.error('Supabase error: ', error)
+  }
+
+  return data
+}
+
+// For useAsyncData, access filters via the store
+const { data: playerList, pending, error, refresh } = await useAsyncData<MarketplacePlayer[] | null>(
+  'player-list', // Use a static key
+  fetchPlayers, // Fetch players with current filters
+  {
+    // Only refetch when filters change
+    lazy: true,
+    server: false
+  }
+)
+
+onMounted(() => {
+  const { minCost, maxCost, rarities } = route.query
+
+  marketplace.setFilters({
+    minCost: minCost ? Number(minCost) : 0,
+    maxCost: maxCost ? Number(maxCost) : 0,
+    // rarities: rarities
+    //   ? Array.isArray(rarities) ? rarities : [rarities]
+    //   : []
+  })
+})
+
+// Watch for changes to the query params and refetch
+watch(() => route.query, async (newQuery) => {
+  // Update filters based on query params
+  if (JSON.stringify(newQuery) !== JSON.stringify(currentQuery.value)){
+    currentQuery.value = newQuery // Update the tracked query
+
+    marketplace.setFilters({
+      minCost: newQuery.minCost ? Number(newQuery.minCost) : 0,
+      maxCost: newQuery.maxCost ? Number(newQuery.maxCost) : 0,
+      rarities: newQuery.rarities ? (Array.isArray(newQuery.rarities) ? newQuery.rarities : [newQuery.rarities]) : []
+    })
+
+    // Trigger refetch
+    await refresh()
+  }
+}, { immediate: true }) // Set immediate to true to run on initial load
+
+</script>
+
+<style scoped>
+.player-card {
+  max-width: 400px;
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  padding: 16px;
+  text-align: center;
+}
+
+.headshot {
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+  border-radius: 50%;
+  margin: 0 auto 8px;
+}
+
+.name {
+  font-size: 1.5rem;
+  margin: 0;
+}
+
+.franchise {
+  color: #666;
+  font-size: 1rem;
+  margin-bottom: 8px;
+}
+
+.card-image {
+  width: 100%;
+  height: auto;
+  margin: 12px 0;
+}
+
+.rarity {
+  color: white;
+  padding: 8px;
+  border-radius: 8px;
+  margin-bottom: 8px;
+}
+
+.cardset {
+  font-size: 0.9rem;
+  color: #555;
+  margin-bottom: 8px;
+}
+
+.cost {
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+</style>

components/app/nav-bar.vue

@@ -44,6 +44,9 @@ function toggleMenu() {
 
     <!-- Menu -->
     <ul class="menu" :class="{ open: menuOpen }">
+      <li>
+        <NuxtLink to="/marketplace">Marketplace</NuxtLink>
+      </li>
       <li>
         <NuxtLink to="/players/random">Random Cards</NuxtLink>
       </li>
@@ -51,7 +54,7 @@ function toggleMenu() {
         <NuxtLink to="/players/69">Card 69</NuxtLink>
       </li>
       <li>
-        <a href="#">Shop</a>
+        <a href="https://ko-fi.com/manticorum">Shop</a>
       </li>
 
       <li v-if="user?.id" class="user-info">

nuxt.config.ts

@@ -10,7 +10,7 @@ export default defineNuxtConfig({
     },
   },
 
-  modules: ['@nuxtjs/supabase'],
+  modules: ['@nuxtjs/supabase', '@pinia/nuxt'],
 
   css: ['@picocss/pico'],
 

package-lock.json

@@ -9,7 +9,9 @@
       "dependencies": {
         "@nuxtjs/supabase": "^1.5.0",
         "@picocss/pico": "^2.1.1",
+        "@pinia/nuxt": "^0.11.0",
         "nuxt": "^3.17.1",
+        "pinia": "^3.0.2",
         "vue": "^3.5.13",
         "vue-router": "^4.5.1"
       },
@@ -3017,6 +3019,21 @@
       "integrity": "sha512-kIDugA7Ps4U+2BHxiNHmvgPIQDWPDU4IeU6TNRdvXQM1uZX+FibqDQT2xUOnnO2yq/LUHcwnGlu1hvf4KfXnMg==",
       "license": "MIT"
     },
+    "node_modules/@pinia/nuxt": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.11.0.tgz",
+      "integrity": "sha512-QGFlUAkeVAhPCTXacrtNP4ti24sGEleVzmxcTALY9IkS6U5OUox7vmNL1pkqBeW39oSNq/UC5m40ofDEPHB1fg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "pinia": "^3.0.2"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -8998,6 +9015,36 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.2.tgz",
+      "integrity": "sha512-sH2JK3wNY809JOeiiURUR0wehJ9/gd9qFN2Y828jCbxEzKEmEt0pzCXwqiSTfuRsK9vQsOflSdnbdBOGrhtn+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.4.4",
+        "vue": "^2.7.0 || ^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/@vue/devtools-api": {
+      "version": "7.7.6",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.6.tgz",
+      "integrity": "sha512-b2Xx0KvXZObePpXPYHvBRRJLDQn5nhKjXh7vUhMEtWxz1AYNFOVIsh5+HLP8xDGL7sy+Q7hXeUxPHB/KgbtsPw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.6"
+      }
+    },
     "node_modules/pkg-types": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.1.0.tgz",

package.json

@@ -13,7 +13,9 @@
   "dependencies": {
     "@nuxtjs/supabase": "^1.5.0",
     "@picocss/pico": "^2.1.1",
+    "@pinia/nuxt": "^0.11.0",
     "nuxt": "^3.17.1",
+    "pinia": "^3.0.2",
     "vue": "^3.5.13",
     "vue-router": "^4.5.1"
   },

pages/marketplace.vue

@@ -1,181 +1,9 @@
 <template>
-  <div>
+  <section>
     <h1>Marketplace</h1>
-
+    <Marketplace />
-    <!-- Filters -->
+  </section>
-    <div>
-      <h3>Filters</h3>
-      <label for="filter-cost">Min Cost:</label>
-      <input v-model="filters.minCost" id="filter-cost" type="number" placeholder="Min cost" />
-
-      <label for="filter-cost">Max Cost:</label>
-      <input v-model="filters.maxCost" id="filter-cost" type="number" placeholder="Max cost" />
-
-      <label for="filter-rarity">Rarity:</label>
-      <select v-model="filters.rarities" id="filter-rarity" multiple size="6">
-        <option value="Replacement">Replacement</option>
-        <option value="Reserve">Reserve</option>
-        <option value="Starter">Starter</option>
-        <option value="All-Star">All-Star</option>
-        <option value="MVP">MVP</option>
-        <option value="Hall of Fame">Hall of Fame</option>
-      </select>
-
-      <button @click="applyFilters">Apply Filters</button>
-    </div>
-
-    <!-- Player List -->
-    <div v-if="pending" class="container" style="text-align: center; padding: 2rem;">
-      <p>Loading players...</p>
-    </div>
-
-    <!-- Show No Results if list is empty -->
-    <div v-else-if="!playerList || playerList.length === 0" class="container" style="text-align: center; padding: 2rem;">
-      <p>No players found. Try adjusting your filters!</p>
-    </div>
-
-    <section v-else class="grid" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; text-align: center;">
-      <article v-for="player in playerList" :key="player.player_id" class="card">
-        <NuxtLink :to="`/players/${player.player_id}`" style="text-decoration: none; color: inherit;">
-          <img :src="player?.player_headshot" alt="Player Headshot" class="headshot" />
-          <h2 class="name">{{ player?.player_name }}</h2>
-
-          <p class="franchise">{{ player?.franchise_name }}</p>
-      
-          <img :src="player?.player_card_image" alt="Player Card Image" class="card-image" />
-      
-          <img v-if="player?.player_card_image2" :src="player?.player_card_image2" alt="Player Card Image2" class="card-image" />
-      
-          <div class="rarity" :style="{ backgroundColor: '#' + player.rarity_color }">
-            {{ player.rarity_name }}
-          </div>
-      
-          <p class="cardset">{{ player?.cardset_name }}</p>
-      
-          <p class="cost">Cost: {{ player?.player_cost }}₼</p>
-        </NuxtLink>
-      </article>
-    </section>
-
-  </div>
 </template>
 
 <script lang="ts" setup>
-import type { MarketplacePlayer } from '~/types/MarketplacePlayer'
-const user = useSupabaseUser()
-const client = useSupabaseClient()
-
-const filters = ref({
-  minCost: 0,
-  maxCost: 0,
-  rarities: []
-})
-
-const { data: playerList, pending, error } = await useAsyncData<MarketplacePlayer[] | null>(
-    'random_player', 
-    async () => {
-      let query = client.from('marketplace')
-        .select('*')
-        .limit(20)
-
-      if (filters.value.minCost > 0) {
-        query = query.gte('player_cost', filters.value.minCost)
-      }
-
-      if (filters.value.maxCost > 0) {
-        query = query.lte('player_cost', filters.value.maxCost)
-      }
-
-      if (filters.value.rarities.length > 0) {
-        query = query.in('rarity_name', filters.value.rarities)
-      }
-
-      const { data, error } = await query
-
-      if (error) {
-        console.error('Supabase error: ', error)
-        // throw new Error(error.message)
-      }
-
-      console.log('players from supabase: ', data)
-      return data
-    },
-    {
-        lazy: true,
-        server: false
-    }
-)
-
-const applyFilters = async () => {
-  console.log('Applying filters:', filters.value)
-  await refreshNuxtData('random_player')
-}
-
-// const filteredPlayers = computed(() => {
-//   return playerList.value.filter(player => {
-//     const matchesCost = filters.value.cost ? player.cost >= filters.value.cost : true
-//     const matchesRarity = filters.value.rarities.length
-//       ? filters.value.rarities.includes(player.rarity_name)
-//       : true
-
-//     return matchesCost && matchesRarity
-//   })
-// })
-
 </script>
-
-<style>
-.player-card {
-  max-width: 400px;
-  background: white;
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-  padding: 16px;
-  text-align: center;
-}
-
-.headshot {
-  width: 100px;
-  height: 100px;
-  object-fit: cover;
-  border-radius: 50%;
-  margin: 0 auto 8px;
-}
-
-.name {
-  font-size: 1.5rem;
-  margin: 0;
-}
-
-.franchise {
-  color: #666;
-  font-size: 1rem;
-  margin-bottom: 8px;
-}
-
-.card-image {
-  width: 100%;
-  height: auto;
-  margin: 12px 0;
-}
-
-.rarity {
-  color: white;
-  padding: 8px;
-  border-radius: 8px;
-  margin-bottom: 8px;
-}
-
-.cardset {
-  font-size: 0.9rem;
-  color: #555;
-  margin-bottom: 8px;
-}
-
-.cost {
-  font-weight: bold;
-  font-size: 1.2rem;
-}
-
-</style>

pages/players/random.vue

@@ -12,8 +12,6 @@
         async () => {
             const { data } = await client.from('random_player')
             .select('*,rarity!inner(*),mlb_player!inner(*)')
-            .eq('franchise', 'Baltimore Orioles')
-            .eq('mlb_player.offense_col', 1)
             .limit(3)
 
             console.log('players from supabase: ', data)

stores/marketplace.ts

@@ -0,0 +1,14 @@
+export const useMarketplaceStore = defineStore('marketplace', {
+  state: () => ({
+    filters: {
+      minCost: 0,
+      maxCost: 0,
+      rarities: [] as string[],
+    },
+  }),
+  actions: {
+    setFilters(newFilters: Partial<typeof this.filters>) {
+      this.filters = { ...this.filters, ...newFilters }
+    },
+  },
+})