﻿<template>

  <v-infinite-scroll :items="contents"
                     :onLoad="load">

    <template v-for="content in contents">
        <ContentCard :content="content"
                     class="w-full p-2 my-2"
        >
        </ContentCard>
    </template>

    <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>

  <p class="bg-orange">test</p>

</template>

<script setup>

import {useClient} from '@/plugins/api.js';
import {defineProps, ref} from 'vue';
import ContentCard from "./ContentCard.vue";

const props = defineProps({
  creatorId: {
    type: String,
    required: true
  }
});

const client = useClient()
const contents = ref([])
const page_size = 10
const errorMessage = ref()
let last_id = null

async function load({done}) {
  try {
    let uri = `/api/contents/user/${props.creatorId}?page_size=${page_size}`
    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) {

      const contentCount = response.data.length

      if (contentCount > 0) {
        contents.value.push(...response.data)
        const [last_content] = response.data.slice(-1)
        last_id = last_content.id
      }

      if (contentCount < page_size)
        done('empty')
      else
        done('ok')
    }
  } catch (error) {
    console.error("Failed to fetch posts", error);
    errorMessage.value = error
    done('error')
  }
}

</script>