start to load messages from rooms

front/src/views/room/Message.vue

@@ -0,0 +1,30 @@
+<script setup>
+const data = {
+    html: "<div dir=\"ltr\">new content<br><div><br><div class=\"gmail_quote\"><div dir=\"ltr\" class=\"gmail_attr\">---------- Forwarded message ---------<br>De : <b class=\"gmail_sendername\" dir=\"auto\">Ulysse Carlier</b> <span dir=\"auto\">&lt;<a href=\"mailto:carlierulysse@gmail.com\">carlierulysse@gmail.com</a>&gt;</span><br>Date: ven. 10 mars 2023 à 14:52<br>Subject: message to transfer<br>To: Hugueprime M &lt;<a href=\"mailto:hugueprime@gmail.com\">hugueprime@gmail.com</a>&gt;<br></div><br><br><div dir=\"ltr\">content to transfer<br></div>\n</div></div></div>\n",
+    text: "new content\n\n---------- Forwarded message ---------\nDe : Ulysse Carlier <carlierulysse@gmail.com>\nDate: ven. 10 mars 2023 à 14:52\nSubject: message to transfer\nTo: Hugueprime M <hugueprime@gmail.com>\n\n\ncontent to transfer\n",
+    textAsHtml: "<p>new content</p><p>---------- Forwarded message ---------<br/>De : Ulysse Carlier &lt;<a href=\"mailto:carlierulysse@gmail.com\">carlierulysse@gmail.com</a>&gt;<br/>Date: ven. 10 mars 2023 &agrave; 14:52<br/>Subject: message to transfer<br/>To: Hugueprime M &lt;<a href=\"mailto:hugueprime@gmail.com\">hugueprime@gmail.com</a>&gt;</p><p>content to transfer</p>",
+    subject: "Fwd: message to transfer",
+    references: "<CAAGJdR0i=4w1i2Nb9=zx5bCPqkR+2eUCs=_qbXTSzugZu4EXFQ@mail.gmail.com>",
+    date: "2023-03-10T13:52:21.000Z",
+}
+</script>
+        <!-- to if to is more than me
+        cc -->
+        <!-- object (channel only)
+        content
+        attachments -->
+<template>
+    <div class="message">
+        <!-- <div v-html="data.html"></div> -->
+        <!-- <div v-html="data.text"></div> -->
+        <div></div>
+        <div v-html="data.textAsHtml"></div>
+    </div>
+</template>
+
+<style scoped>
+.message {
+    width: 100%;
+    border: white 1px solid;
+}
+</style>

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>
-

front/src/views/sidebar/mailboxes/Mailboxes.vue

@@ -17,7 +17,7 @@
 import { mapState } from 'vuex'
 import Mailbox from './Mailbox'
 import AddMailboxModal from '../../modals/AddMailboxModal'
-import roomsStore from '@/store/rooms'
+import store from '@/store/store'
 
 export default {
   name: 'Mailboxes',
@@ -30,7 +30,7 @@ export default {
   },
   created() {
     console.log("call api get mailboxes");
-    roomsStore.dispatch('fetchMailboxes');
+    store.dispatch('fetchMailboxes');
   }
 }
 

front/src/views/sidebar/rooms/Room.vue

@@ -1,29 +1,11 @@
 <script setup>
 import { useRouter } from "vue-router"
-
-const router = useRouter();
-</script>
-
-<template>
-    <div>
-        <div id="user" @click="router.push(`/${data.id}`)">
-            <BaseAvatar url="vue.png"/>
-            <div id="content">
-                <div id="sender">{{ data.user }}</div>
-                <div id="object">{{ data.roomName }}</div>
-            </div>
-        </div>
-        <ThreadList />
-    </div>
-</template>
-
-<script>
+import { defineProps } from 'vue'
 import BaseAvatar from '../../avatars/BaseAvatar.vue'
 import ThreadList from './threads/ThreadList.vue'
+import store from "@/store/store";
 
-export default {
-  name: 'User',
-  props: {
+const props = defineProps({
     data: {
         id: Number,
         roomName: String,
@@ -32,16 +14,27 @@ export default {
         notSeen: Number,
         mailboxId: Number
     }
-  },
-  components: {
-    BaseAvatar,
-    ThreadList
-  }
-}
+})
+
+const router = useRouter();
+
 </script>
 
+<template>
+    <div>
+        <div class="room" @click="router.push(`/${props.data.id}`)" v-bind:class = " store.state.activeRoom == props.data.id ? 'selected' : ''">
+            <BaseAvatar url="vue.png"/>
+            <div id="content">
+                <div id="sender">{{ props.data.user }}</div>
+                <div id="object">{{ props.data.roomName }}</div>
+            </div>
+        </div>
+        <ThreadList />
+    </div>
+</template>
+
 <style scoped>
-#user {
+.room {
     box-sizing: border-box;
     contain: content;
     display: flex;
@@ -51,7 +44,7 @@ export default {
     cursor: pointer;
 }
 
-#user:hover {
+.room:hover, .selected {
     background-color: #41474f;;
     border-radius: 8px;
 }