Fix message count

src/stores/messageStore.js

@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia'
+import {ref} from "vue";
+import {useClient} from "@/plugins/api.js";
+
+
+export const useMessageStore = defineStore('message', () => {
+    const messageCount = ref(0);
+    const trackedSubject = ref('');
+
+    async function fetchMessageCount(subjectId){
+        const client = useClient();
+        try {
+            let uri = `/api/message-count/${subjectId}`;
+            const response = await client.get(uri);
+            console.log(response);
+            messageCount.value = response.data.count;
+            trackedSubject.value = subjectId;
+        } catch (error) {
+            console.error("Failed to fetch messages", error);
+        }
+        return messageCount.value;
+    }
+
+    return { messageCount, trackedSubject,  fetchMessageCount }
+})

src/views/contents/ContentCard.vue

@@ -72,7 +72,7 @@
             variant="plain"
             @click="toggleComments">
           <v-icon>mdi-comment-outline</v-icon>
-          {{ messages.length }}
+          {{ messageCount }}
         </v-btn>
 
         <donation-button :color-border="colorMenu"
@@ -140,7 +140,7 @@
 </template>
 
 <script setup>
-import {computed, ref} from 'vue';
+import {computed, onBeforeMount, ref} from 'vue';
 import {time_ago} from "@/internal_time_ago.js";
 import MessageList from "@/views/messages/MessageList.vue";
 import PostMessage from "@/views/messages/PostMessage.vue";
@@ -150,6 +150,7 @@ import ImageViewer from './ImageViewer.vue';
 import {useClient} from "@/plugins/api.js";
 import {useAuthStore} from "@/stores/authStore.js";
 import Reaction from "@/views/contents/Reaction.vue";
+import {useMessageStore} from "@/stores/messageStore.js";
 
 const props = defineProps({
   content: {
@@ -170,12 +171,18 @@ const colorAccent = computed(() => props.content.colorAccent)
 
 const authStore = useAuthStore()
 const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === creatorId.value)
+const messageStore = useMessageStore();
+const messageCount = ref(0);
 
 const hasUrls = computed(() => !!props.content.urls && props.content.urls.length > 0);
 const messagesVisible = ref(false);
 const messages = ref([]);
 const hasMessages = computed(() => messages.value.length > 0)
 
+onBeforeMount(async () => {
+  messageCount.value = await messageStore.fetchMessageCount(contentId.value)
+})
+
 function openDeleteConfirmationDialog() {
   openDeleteConfirmationModal.value = true;
 }

src/views/contents/contentcards/NContentCard.vue

@@ -72,7 +72,7 @@
             variant="plain"
             @click="toggleComments">
           <v-icon>mdi-comment-outline</v-icon>
-          {{ messages.length }}
+          {{ messageCount }}
         </v-btn>
 
         <donation-button :color-border="colorMenu"
@@ -140,7 +140,7 @@
 </template>
 
 <script setup>
-import {computed, ref} from 'vue';
+import {computed, onBeforeMount, ref} from 'vue';
 import {time_ago} from "@/internal_time_ago.js";
 import MessageList from "@/views/messages/MessageList.vue";
 import PostMessage from "@/views/messages/PostMessage.vue";
@@ -150,6 +150,7 @@ import ImageViewer from '../ImageViewer.vue';
 import {useClient} from "@/plugins/api.js";
 import {useAuthStore} from "@/stores/authStore.js";
 import Reaction from "@/views/contents/Reaction.vue";
+import {useMessageStore} from "@/stores/messageStore.js";
 
 const props = defineProps({
   content: {
@@ -168,13 +169,20 @@ const creatorLogo = computed(() => props.content.createdByPortraitUrl)
 const colorMenu = computed(() => props.content.colorMenu)
 const colorAccent = computed(() => props.content.colorAccent)
 
-const authStore = useAuthStore()
+const authStore = useAuthStore();
-const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === creatorId.value)
+const messageStore = useMessageStore();
+const messageCount = ref(0);
+const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === creatorId.value);
 
 const hasUrls = computed(() => !!props.content.urls && props.content.urls.length > 0);
 const messagesVisible = ref(false);
 const messages = ref([]);
-const hasMessages = computed(() => messages.value.length > 0)
+const hasMessages = computed(() => messages.value.length > 0);
+
+
+onBeforeMount(async () => {
+  messageCount.value = await messageStore.fetchMessageCount(contentId.value)
+})
 
 function openDeleteConfirmationDialog() {
   openDeleteConfirmationModal.value = true;
@@ -189,14 +197,6 @@ function toggleComments() {
   messagesVisible.value = !messagesVisible.value;
 }
 
-function likeContent() {
-  console.log('Content liked');
-}
-
-function dislikeContent() {
-  console.log('Content disliked');
-}
-
 function getComponent(url) {
   if (url.includes('youtube.com') || url.includes('youtu.be')) {
     return YoutubePlayer;

src/views/contents/contentcards/SmContentCard.vue

@@ -72,7 +72,7 @@
             variant="plain"
             @click="toggleComments">
           <v-icon>mdi-comment-outline</v-icon>
-          {{ messages.length }}
+          {{ messageCount }}
         </v-btn>
 
         <donation-button :color-border="colorMenu"
@@ -140,7 +140,7 @@
 </template>
 
 <script setup>
-import {computed, ref} from 'vue';
+import {computed, onBeforeMount, ref} from 'vue';
 import {time_ago} from "@/internal_time_ago.js";
 import MessageList from "@/views/messages/MessageList.vue";
 import PostMessage from "@/views/messages/PostMessage.vue";
@@ -150,6 +150,7 @@ import ImageViewer from '../ImageViewer.vue';
 import {useClient} from "@/plugins/api.js";
 import {useAuthStore} from "@/stores/authStore.js";
 import Reaction from "@/views/contents/Reaction.vue";
+import {useMessageStore} from "@/stores/messageStore.js";
 
 const props = defineProps({
   content: {
@@ -170,12 +171,18 @@ const colorAccent = computed(() => props.content.colorAccent)
 
 const authStore = useAuthStore()
 const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === creatorId.value)
+const messageStore = useMessageStore();
+const messageCount = ref(0);
 
 const hasUrls = computed(() => !!props.content.urls && props.content.urls.length > 0);
 const messagesVisible = ref(false);
 const messages = ref([]);
 const hasMessages = computed(() => messages.value.length > 0)
 
+onBeforeMount(async () => {
+  messageCount.value = await messageStore.fetchMessageCount(contentId.value)
+})
+
 function openDeleteConfirmationDialog() {
   openDeleteConfirmationModal.value = true;
 }