Adds news-list

src/views/contents/contentfullscreen/FullScreenContentSm.vue

@@ -30,7 +30,7 @@
       </div>
 
       <div class="flex items-center justify-center w-full h-full z-10">
-        <img :src="currentImage" alt="Image" class="max-w-full max-h-full object-contain" />
+        <img :src="currentImage" alt="Image" class="max-w-full max-h-full object-contain"/>
       </div>
 
       <!-- right arrow -->
@@ -45,21 +45,21 @@
     <div class="flex flex-col p-6 bg-white overflow-y-auto max-h-screen">
 
       <div class="border-b-2 p-6 font-sans space-y-2">
+
         <div class="flex flex-row align-center" v-if="data && data.createdByName">
           <img :src="data.createdByPortraitUrl" class="rounded-full w-9" alt="">
           <p class="ml-2 capitalize ">{{ data.createdByName }}</p>
         </div>
+
         <div v-if="data && data.description">
           Description: {{ data.description }}
         </div>
 
-        <div class="flex justify-around py-2">
-          <Reaction v-if="data" :content="data"></Reaction>
-
-          <donation-button v-if="data"
-          ></donation-button>
-
+        <div v-if="data" class="flex justify-around py-2">
+          <reaction :content="data"></reaction>
+          <donation-button></donation-button>
         </div>
+
       </div>
 
       <div class="border-b-2 p-6">

src/views/creators/CreatorContent.vue

@@ -1,7 +1,14 @@
 <template>
-  <div class="px-4" :style="{ color: brandingStore.value.colors.onBackground}">
-    <h1>Content Browser</h1>
-    <p>Get me the content i need the money!</p>
+  <div v-if="brandingStore.value.loading">
+    <v-progress-linear indeterminate></v-progress-linear>
+  </div>
+
+  <div v-else>
+    <div class="w-full h-full pr-4">
+      <content-list :creator-id="brandingStore.value.id"
+                    :contents="news"
+      ></content-list>
+    </div>
   </div>
 </template>
 
@@ -10,6 +17,7 @@
 <script async setup>
 import { ref} from 'vue';
 import {useBrandingStore} from "@/stores/brandingStore.js";
+import ContentList from "@/views/contents/ContentList.vue";
 
 const brandingStore = useBrandingStore()
 

src/views/creators/CreatorNews.vue

@@ -6,9 +6,9 @@
   
   <div v-else>
     <div class="w-full h-full pr-4">
-      <content-list :creator-id="brandingStore.value.id"
-                    :contents="news"
-      ></content-list>
+      <news-list :creator-id="brandingStore.value.id"
+                  :news="news"
+      ></news-list>
     </div>
   </div>
   
@@ -16,13 +16,13 @@
 
 <script async setup>
 import {ref} from 'vue';
-import ContentList from "@/views/contents/ContentList.vue";
+import NewsList from "@/views/news/NewsList.vue";
 import {useBrandingStore} from "@/stores/brandingStore.js";
 
 const brandingStore = useBrandingStore()
 
 const news = ref([])
-function contentPosted(content) {
+function newsPosted(content) {
   news.value.unshift(content)
 }
 

src/views/news/NewsList.vue

@@ -0,0 +1,122 @@
+<template>
+
+  <div>
+
+    <v-infinite-scroll :items="contents"
+                       :onLoad="fetchContents">
+
+      <!-- TODO: the -mt-4 is necessary because the v-infinite-scroll has some 'top' panel offsetting the list -->
+      <div class="flex flex-column gap-4 -mt-4">
+        <template v-for="content in contents" :key="content.id">
+          <component
+              :is="isSmallScreen ? ContentCardSm : ContentCardNormal"
+              :content="content"
+              @content-deleted="onContentDeleted"
+          ></component>
+        </template>
+      </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>
+
+  </div>
+
+</template>
+
+<style>
+
+</style>
+
+<script setup>
+import {useClient} from '@/plugins/api.js';
+import {onBeforeUnmount, onMounted, ref, watch} from 'vue';
+import ContentCardNormal from "@/views/contents/contentcards/NContentCard.vue";
+import ContentCardSm from "@/views/contents/contentcards/SmContentCard.vue";
+
+const props = defineProps({
+  creatorId: {
+    type: String,
+    required: true
+  },
+  news: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const client = useClient()
+const contents = ref(props.news)
+const errorMessage = ref()
+let last_id = null
+
+const isSmallScreen = ref(false);
+
+const updateScreenSize = () => {
+  isSmallScreen.value = window.matchMedia('(max-width: 600px)').matches;
+};
+
+onMounted(() => {
+  updateScreenSize();
+  window.addEventListener('resize', updateScreenSize);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateScreenSize);
+});
+
+async function onContentDeleted(contentId) {
+  contents.value = contents.value.filter(c => c.id !== contentId)
+}
+
+const creatorIdWatcher = watch(
+    () => props.creatorId,
+    (newCreatorId) => {
+      if (newCreatorId) {
+        contents.value = []
+        last_id = null
+        fetchContents({
+          done: () => {
+          }
+        });
+      }
+    })
+
+async function fetchContents({done, page_size = 10}) {
+  if (props.creatorId == null) return
+
+  try {
+    let uri = `/api/contents/creator/${props.creatorId}?page_size=${page_size}`
+    if (last_id !== null) uri = uri + `&last_id=${last_id}`
+
+    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.message || "Failed to fetch contents";
+    done('error')
+  }
+}
+
+</script>