remove duplicate loading

front/src/views/room/RoomView.vue

@@ -4,18 +4,19 @@ import { useRoute, onBeforeRouteUpdate } from "vue-router";
 import { onBeforeMount, ref } from "vue";
 import Header from "./Header.vue";
 import Message from "./Message.vue";
+import { RoomType } from "@/store/models/model";
 
 const store = useStore();
 const route = useRoute();
 const id = ref(parseInt(route.params?.id));
+// let room;
 onBeforeMount(async () => {
-    console.log(id);
     // get data
-    let room = store.getters.room(id);
-    if (!room || room?.fetched === false) {
-        // todo
-        // await store.dispatch("fetchMessages", );
-    }
+    // room = store.getters.room(id);
+    // if (!room || room?.fetched === false) {
+    //     // todo
+    //     // await store.dispatch("fetchMessages", );
+    // }
     store.commit("setActiveRoom", id);
 });
 
@@ -23,9 +24,18 @@ onBeforeRouteUpdate(async (to, from) => {
     if (to.params.id !== from.params.id) {
         id.value = parseInt(to.params.id);
         console.log(id);
+        // room = store.getters.room(id);
+        // console.log(room);
         store.commit("setActiveRoom", id);
     }
 });
+
+const shouldDisplayComposer = () => {
+    if (!id.value) return false;
+    const room = store.getters.room(id);
+    if (!room) return false;
+    return room.roomType === RoomType.THREAD || room.roomType === RoomType.GROUP;
+};
 </script>
 
 <template>
@@ -35,7 +45,8 @@ onBeforeRouteUpdate(async (to, from) => {
             <div class="content">
                 <Message v-for="(message, index) in store.getters.messages(id)" :key="index" :data="message" />
             </div>
-            <div id="composer">COMPOSER</div>
+            {{ room?.roomType }}
+            <div id="composer" v-if="shouldDisplayComposer()">COMPOSER</div>
         </div>
     </div>
 </template>
@@ -67,6 +78,6 @@ onBeforeRouteUpdate(async (to, from) => {
     display: flex;
     flex-direction: column-reverse;
     overflow: auto;
-    margin-bottom: 100px;
+    margin-bottom: 60px;
 }
 </style>