getlistas

src/pages/IndexPage.vue

@@ -1,20 +1,54 @@
 <template>
-  <q-page>
-    <div class="bg-light-green window-height window-width row justify-center items-center">
-      <div class="column">
-        <div class="row"></div>
-        <h1>Página principal</h1>
-        <h3 v-if="store.user">You are logged in as {{ store.user.email }}
-        </h3>
+  <div class="q-pa-md">
+    <q-infinite-scroll @load="onLoad" :offset="250">
+      <div v-for="(lista, index) in arraylistas" :key="index" class="caption">
+        {{ lista }}
       </div>
-    </div>
-  </q-page>
+      <template v-slot:loading>
+        <div class="row justify-center q-my-md">
+          <q-spinner-dots color="primary" size="40px" />
+        </div>
+      </template>
+    </q-infinite-scroll>
+  </div>
 </template>
 
 <script setup>
-import { supabaseStore } from '../stores/supabaseStore'
-//import useSupabase from '../boot/supabase'
+import useSupabase from '../boot/supabase'
+import { useQuasar } from 'quasar'
+import { onMounted } from 'vue'
 
-const store = supabaseStore()
-//const { supabase } = useSupabase()
+const { supabase } = useSupabase()
+const $q = useQuasar()
+
+let arraylistas = []
+
+const getListas = async () => {
+  try {
+    let { data: listas, error } = await supabase
+      .from('listas')
+      .select(`*, profiles(*)`)
+    if (error) throw error
+    console.log('listas', listas)
+    arraylistas = listas
+  } catch (error) {
+    if (error instanceof Error) {
+      $q.notify({
+        type: 'negative',
+        message: error.message
+      })
+    }
+  }
+}
+
+const onLoad = (index, done) => {
+  setTimeout(() => {
+    arraylistas.push()
+    done()
+  }, 1000)
+}
+
+onMounted(() => {
+  getListas()
+})
 </script>