start to load messages from rooms

front/src/views/room/RoomView.vue

@@ -1,35 +1,47 @@
 <script setup>
-  import { useRoute } from "vue-router"
-  import { onBeforeMount } from "vue"
-  import Header from './Header.vue'
+import { useStore } from "vuex";
+import { useRoute, onBeforeRouteUpdate } from "vue-router";
+import { onBeforeMount } from "vue";
+import Header from "./Header.vue";
+import Message from "./Message.vue";
 
-  const route = useRoute();
-
-  onBeforeMount(() => {
+const store = useStore();
+const route = useRoute();
+let { id } = route.params;
+let messages = [];
+onBeforeMount(async () => {
     // get data
-  });
-
-  const { id } = route.params;
+    console.log(store.state.rooms.find((room) => room.id === id)?.fetched);
+    let room = store.state.rooms.find((room) => room.id === id);
+    if (!room || room?.fetched === false) {
+        await store.dispatch("fetchMessages");
+    }
+    store.commit("setActiveRoom", id);
+});
 
+onBeforeRouteUpdate(async (to, from) => {
+    if (to.params.id !== from.params.id) {
+        id = to.params.id;
+        store.commit("setActiveRoom", id);
+    }
+});
 </script>
 
 <template>
     <div>
         <Header></Header>
         <div>
-            Room
-            is thread
+            <Message v-for="(message, index) in store.getters.messages(id)" :key="index" :data="message" />
             <b>{{ id }}</b>
+            {{ messages.length }}
         </div>
-
     </div>
 </template>
 
 <style scoped>
 div {
-    background-color: #1D1D23;
+    background-color: #1d1d23;
     color: white;
     width: 100%;
 }
 </style>
-