Fix the issue where the content was not refresh when navigating between creators

src/views/contents/ContentList.vue

@@ -1,13 +1,12 @@
 <template>
 
   <v-infinite-scroll :items="contents"
-                     :onLoad="load">
+                     :onLoad="fetchContents">
 
     <template v-for="content in contents">
-      <ContentCard :content="content"
+      <content-card :content="content"
-                   class="w-full p-2 my-2"
+                    class="w-full p-2 my-2"
-      >
+      ></content-card>
-      </ContentCard>
     </template>
 
     <template v-slot:empty>
@@ -20,14 +19,12 @@
 
   </v-infinite-scroll>
 
-  <p class="bg-orange">test</p>
-
 </template>
 
 <script setup>
 
 import {useClient} from '@/plugins/api.js';
-import {ref} from 'vue';
+import {ref, watch} from 'vue';
 import ContentCard from "./ContentCard.vue";
 
 const props = defineProps({
@@ -43,7 +40,23 @@ const page_size = 10
 const errorMessage = ref()
 let last_id = null
 
-async function load({done}) {
+const creatorIdWatcher = watch(
+    () => props.creatorId,
+    (newCreatorId) => {
+      if (newCreatorId) {
+        // Reset contents and last_id when the creatorId changes
+        contents.value = [];
+        last_id = null;
+        // Fetch contents for the new creator
+        fetchContents({
+          done: () => {
+          }
+        });
+      }
+    },
+    {immediate: true})
+
+async function fetchContents({done}) {
   try {
     let uri = `/api/contents/creator/${props.creatorId}?page_size=${page_size}`
     if (last_id !== null) uri = uri + `&last_id=${last_id}`

src/views/creators/CreatorPage.vue

@@ -2,6 +2,7 @@
   <div v-if="creator && creator.id">
 
     <creator-banner :creator="creator"></creator-banner>
+
     <donation-popup :creator-id="creator.id"></donation-popup>
 
     <div class="max-w-[1000px] mx-auto flex flex-row justify-center border-l-2 border-r-2 -mt-6 ">
@@ -43,32 +44,22 @@ const route = useRoute();
 const creator = ref(null);
 const loading = ref(true);
 
-onBeforeMount(async () => {
+onBeforeMount(async () => await fetchCreatorData(route.params.creator))
-  setTimeout(() => {
-    loading.value = false;
-  }, 1500);
-  await fetchCreatorData(route.params.creator);
-});
 
 watch(
     () => route.params.creator,
-    async () => {
+    async () => await fetchCreatorData(route.params.creator)
-      loading.value = true;
+)
-      setTimeout(() => {
-        loading.value = false;
-      }, 1000);
-      await fetchCreatorData(route.params.creator);
-    }
-);
 
 const fetchCreatorData = async (creatorAlias) => {
   try {
+    loading.value = true
     const response = await client.get(`/api/creators/@${creatorAlias}`)
-    creator.value = response.data;
+    creator.value = response.data
-    console.log('loaded the following creator from api');
-    console.table(creator.value.id);
   } catch (error) {
-    console.error(`Error fetching content: ${error}`);
+    console.error(`Error fetching content: ${error}`)
+  } finally {
+    loading.value = false
   }
 }