Adding messaging / content

src/views/contents/ContentList.vue

@@ -1,18 +1,31 @@
 <template>
 
-  <div class="flex">
+  <v-infinite-scroll :items="contents"
+                     :onLoad="load"
+                     class="bg-teal justify-items-center">
+
     <ContentCard v-for="content in contents"
                  :content="content"
-                 class="m-2 bg-red w-full">
+                 class="my-2 p-4 bg-yellow-300 w-full"
+    >
     </ContentCard>
-  </div>
+
+    <template v-slot:empty>
+      Il n'y a pas plus de contenus
+    </template>
+
+    <template v-slot:error>
+      <v-alert type="error">{{ errorMessage }}</v-alert>
+    </template>
+
+  </v-infinite-scroll>
 
 </template>
 
 <script setup>
 
 import {useClient} from '@/plugins/api.js';
-import {defineProps, onBeforeMount, ref} from 'vue';
+import {defineProps, ref} from 'vue';
 import ContentCard from "./ContentCard.vue";
 
 const props = defineProps({
@@ -22,20 +35,41 @@ const props = defineProps({
   }
 });
 
-const client = useClient();
-const contents = ref();
+const client = useClient()
+const contents = ref([])
+const max_items = 10
+const errorMessage = ref()
+let last_id = null
 
-onBeforeMount(async () => {
-  if (props.creatorId == null) return
+async function load({done}) {
   try {
-    const response = await client.get(`/api/contents/user/${props.creatorId}`)
-    if (response.status >= 200 && response.status < 300) {      
-      contents.value = response.data
-      console.table(contents.value)
+    let uri = `/api/contents/user/${props.creatorId}?max_items=${max_items}`
+    if (last_id !== null) uri = uri + `&last_id=${last_id}`
+
+    console.log(`Fetching content at: ${uri}`)
+    const response = await client.get(uri)
+
+    if (response.status >= 200 && response.status < 300) {
+
+      contents.value.push(...response.data)
+      console.table(response.data)
+      
+      const [last_content] = response.data.slice(-1)
+      console.table(last_content)
+      
+      last_id = last_content.id
+      console.table(last_id)
+
+      if (response.data.length < max_items)
+        done('empty')
+      else
+        done('ok')
     }
   } catch (error) {
     console.error("Failed to fetch posts", error);
+    errorMessage.value = error
+    done('error')
   }
-})
+}
 
 </script>