From a945ad9e2915f15904ab54e8629593f98bf2d55f Mon Sep 17 00:00:00 2001
From: Dominic Villemure <doumvil@hotmail.com>
Date: Sun, 25 Aug 2024 13:30:02 -0400
Subject: [PATCH] fix double component rendering ( only hidden )

---
 src/stores/messageStore.js                    |  1 -
 src/views/contents/ContentCard.vue            |  1 +
 src/views/contents/ContentList.vue            | 31 +++++++++++++------
 .../contents/contentcards/NContentCard.vue    |  1 +
 .../contents/contentcards/SmContentCard.vue   |  1 +
 5 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/stores/messageStore.js b/src/stores/messageStore.js
index 453258c..cee1374 100644
--- a/src/stores/messageStore.js
+++ b/src/stores/messageStore.js
@@ -12,7 +12,6 @@ export const useMessageStore = defineStore('message', () => {
         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) {
diff --git a/src/views/contents/ContentCard.vue b/src/views/contents/ContentCard.vue
index 2c7c3be..3b66b15 100644
--- a/src/views/contents/ContentCard.vue
+++ b/src/views/contents/ContentCard.vue
@@ -190,6 +190,7 @@ function openDeleteConfirmationDialog() {
 function addMessage(newMessage) {
   messages.value.unshift(newMessage);
   messagesVisible.value = true;
+  messageCount.value ++;
 }
 
 function toggleComments() {
diff --git a/src/views/contents/ContentList.vue b/src/views/contents/ContentList.vue
index fc63d23..cf5fec3 100644
--- a/src/views/contents/ContentList.vue
+++ b/src/views/contents/ContentList.vue
@@ -5,15 +5,11 @@
                      class="md:gap-2">
 
     <template v-for="content in contents" :key="content.id">
-
-      <div class="d-sm-none mb-1">
-        <content-card-sm :content="content" @content-deleted="onContentDeleted"></content-card-sm>
-      </div>
-
-     
-      <div class="d-none d-sm-flex">
-        <content-card-normal :content="content" @content-deleted="onContentDeleted"></content-card-normal>
-      </div>
+      <component
+          :is="isSmallScreen ? ContentCardSm : ContentCardNormal"
+          :content="content"
+          @content-deleted="onContentDeleted"
+      ></component>
     </template>
 
     <template v-slot:empty>
@@ -31,7 +27,7 @@
 
 <script setup>
 import {useClient} from '@/plugins/api.js';
-import {ref, watch} from 'vue';
+import {onBeforeUnmount, onMounted, ref, watch} from 'vue';
 import ContentCardNormal from "@/views/contents/contentcards/NContentCard.vue";
 import ContentCardSm from "@/views/contents/contentcards/SmContentCard.vue";
 
@@ -51,6 +47,21 @@ const contents = ref(props.contents)
 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)
 }
diff --git a/src/views/contents/contentcards/NContentCard.vue b/src/views/contents/contentcards/NContentCard.vue
index 5cc4b15..83fb42a 100644
--- a/src/views/contents/contentcards/NContentCard.vue
+++ b/src/views/contents/contentcards/NContentCard.vue
@@ -191,6 +191,7 @@ function openDeleteConfirmationDialog() {
 function addMessage(newMessage) {
   messages.value.unshift(newMessage);
   messagesVisible.value = true;
+  messageCount.value ++;
 }
 
 function toggleComments() {
diff --git a/src/views/contents/contentcards/SmContentCard.vue b/src/views/contents/contentcards/SmContentCard.vue
index bfd8deb..974dffc 100644
--- a/src/views/contents/contentcards/SmContentCard.vue
+++ b/src/views/contents/contentcards/SmContentCard.vue
@@ -190,6 +190,7 @@ function openDeleteConfirmationDialog() {
 function addMessage(newMessage) {
   messages.value.unshift(newMessage);
   messagesVisible.value = true;
+  messageCount.value ++;
 }
 
 function toggleComments() {