busqueda page: loading products spinner & endopoints tests

pages/busqueda.vue

@@ -10,7 +10,11 @@
         @apply-filters="updateData"
         />
       </div>
-      <div class="col-md-9">
+      <div v-if="loadingProducts" class="col-md-9 loading-spinner">
+        <BSpinner />
+        <span>Cargando productos...</span>
+      </div>
+      <div v-if="!loadingProducts" class="col-md-9">
         <div class="carousel">
           <h2 class="title">Últimos productos</h2>
           <ItemsRow class="items" :type="`product`" :items="carouselProducts" />
@@ -78,11 +82,18 @@
       </div>
     </div>
   </div>
+  appliedFilters: {{appliedFilters}} <br>
+    filters: {{filters}} <br>
+    prices: {{prices}} <br>
+    coordinates: {{coordinates}} <br>
+    products: {{products}} <br>
+    defaultProducts: {{defaultProducts}} <br>
+    <!-- carouselProducts: {{carouselProducts}} <br> -->
+    count: {{count}}
 </template>
 
 <script>
 import { useAuthStore } from '@/stores/auth'
-//import { useRoute, useRouter } from 'vue-router'
 import serverSearch from '~/utils/serverSearch'
 import clientSearch from '~/utils/clientSearch'
 
@@ -115,6 +126,7 @@ export default {
       defaultProducts: [],
       carouselProducts: [],
       count: 0,
+      loadingProducts: true
     }
   },
 
@@ -139,14 +151,17 @@ export default {
   async beforeCreate() {
     const config = useRuntimeConfig()
     const params = import.meta.client ? clientSearch(this.$route.query) : serverSearch(this.$route.query)
-    console.log('Params', this.$route.query)
-    
-    const data = await $fetch(`/search_products/?limit=10&offset=0`, {
-      baseURL: config.public.apiBaseUrl,
+
+    const data = await $fetch(`/search_products/?`, {
+      baseURL: config.public.baseURL,
       method: 'GET',
-      params,
+      query: {
+        q: params.q || '',
+        limit: 10,
+        offset: 0
+      },
       headers: {
-        Authorization: `Bearer ${this.auth.access}`,
+        Authorization: '/',
       },
     })
     console.log('data', data)
@@ -154,23 +169,30 @@ export default {
     const products = data.products
     let defaultProducts = []
     if (products.length === 0) {
-      const data = await $fetch(`/search_products/?q=&order=newest&limit=10&offset=0`, {
-        baseURL: config.public.apiBaseUrl,
+      console.log('no products, fetching default')
+      const data = await $fetch(`/search_products/?q=${params.q}`, {
+        baseURL: config.public.baseURL,
         method: 'GET',
+        query: {
+          order: 'newest',
+          limit: 10,
+          offset: 0
+        },
         headers: {
-          Authorization: `Bearer ${this.auth.access}`,
+          Authorization: '/',
         },
       })
       defaultProducts = data.products
     }
 
-    const carouselProducts = await $fetch(`/products/?limit=12&offset=0`, {
-      baseURL: config.public.apiBaseUrl,
+    const carouselProducts = await $fetch(`/products/`, {
+      baseURL: config.public.baseURL,
       method: 'GET',
       headers: {
-        Authorization: `Bearer ${this.auth.access}`,
+        Authorization: '/',
       },
     })
+    console.log('carouselProducts', carouselProducts)
 
     let coordinates
     if (params.latitude && params.longitude) {
@@ -188,19 +210,19 @@ export default {
     } else {
       prices = { max: null, min: null }
     }
-
-    return {
-      appliedFilters: params,
-      filters: data.filters,
-      prices: prices,
-      coordinates: coordinates,
-      products: products,
-      defaultProducts: defaultProducts,
-      carouselProducts: carouselProducts.data.results,
-      count: data.count,
-    }
+    //TODO: Implement filtering logic
+    this.appliedFilters = params.q
+    this.filters = data.filters
+    this.prices = prices
+    this.coordinates = coordinates
+    this.products = products
+    this.defaultProducts = defaultProducts
+    this.carouselProducts = carouselProducts
+    this.count = data.count
+    this.loadingProducts = false
   },
   
+
   mounted() {
     this.currentFilters = this.appliedFilters
   },
@@ -213,7 +235,7 @@ export default {
 
     async getMoreProducts(offset) {
       const data = await this.$api.get(`/search_products/?limit=10&offset=${offset}`, {
-        baseURL: config.public.apiBaseUrl,
+        baseURL: config.public.baseURL,
         method: 'GET',
         body: { params: this.appliedFilters },
       })
@@ -376,4 +398,13 @@ export default {
     margin-bottom: 100px;
   }
 }
+
+.loading-spinner {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
 </style>

stores/auth.ts

@@ -1,5 +1,5 @@
-// stores/auth.ts
 import { defineStore } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 export const useAuthStore = defineStore('auth', {
   state: () => ({
@@ -11,7 +11,25 @@ export const useAuthStore = defineStore('auth', {
     role: 'ANON' as string,
     cookiesAreAccepted: false,
   }),
-  //persist: true, // TODO: Enable persistence. Cookies will be stored 'auth'
+  //persist: true, // TODO: Enable persistence. Cookies will be stored 'auth' 👉🏻 https://prazdevs.github.io/pinia-plugin-persistedstate/frameworks/nuxt
+  // persist: {
+  //   key: 'authentication-cookie',
+  //   storage: piniaPluginPersistedstate.cookies({
+  //     expires: 14, 
+  //     sameSite: 'strict',
+  //     secure: !import.meta.dev,
+  //   }),
+  //   paths: [
+  //     'id',
+  //     'name',
+  //     'email',
+  //     'role',
+  //     'access',
+  //     'refresh',
+  //     'cookiesAreAccepted',
+  //   ],
+  // },
+
   getters: {
     isAuthenticated: (state) => !!state.access,
     isUser: (state) => state.role === 'SHOP_USER',