start to load messages from rooms

front/src/main.js

@@ -1,11 +1,11 @@
 import { createApp } from 'vue'
 import router from './router'
 import App from './App.vue'
-import roomsStore from './store/rooms'
+import store from './store/store'
 
 
 const app = createApp(App);
 app.use(router);
-app.use(roomsStore);
+app.use(store);
 
 app.mount('#app');

front/src/router/index.js

@@ -19,7 +19,6 @@ const routes = [
   },
   {
     path: "/:id",
-    name: "test",
     component: RoomView
   }
 ];

front/src/services/imapAPI.js

@@ -9,5 +9,8 @@ export default {
     },
     getRooms(mailboxId) {
         return API().get(`/mail/${mailboxId}/rooms`);
+    },
+    getMessages(roomId) {
+        return API().get(`/mail/${roomId}/messages`);
     }
 }

front/src/store/store.js

@@ -1,7 +1,7 @@
 import API from "@/services/imapAPI";
 import { createStore } from "vuex";
 
-const roomsStore = createStore({
+const store = createStore({
     state() {
         return {
             rooms: [
@@ -9,40 +9,50 @@ const roomsStore = createStore({
                     id: 0,
                     user: "clemnce",
                     userId: 0,
-                    name: "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
+                    roomName: "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
                     mailboxId: 1,
                 },
                 {
+                    id: 1,
                     user: "juliette",
-                    name: "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
+                    roomName: "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
                     mailboxId: 1,
                 },
                 {
+                    id: 2,
                     user: "jean",
-                    name: "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
+                    roomName: "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
                     mailboxId: 2,
                 },
                 {
+                    id: 3,
                     user: "luc",
-                    name: "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
+                    roomName: "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
                     mailboxId: 2,
                 },
+            ],
+            messages: [
+
             ],
             mailboxes: [],
-            activeMailbox: -1,
+            activeMailbox: 0,
+            activeRoom: 0
         };
     },
     mutations: {
         setActiveMailbox(state, payload) {
             state.activeMailbox = payload;
+
+            // todo call actions
+            // fetch rooms for this mailboxes if not already fetched
             const mailbox = state.mailboxes.find((mailbox) => mailbox.id == payload);
             // todo fetched mailbox all
             if (mailbox?.fetched == false) {
-                mailbox.fetched = true;
-                console.log("add messages")
                 API.getRooms(payload).then((res) => {
                     // todo add if not exist
+                    mailbox.fetched = true;
                     res.data.forEach((room) => {
+                        room.fetched = false;
                         state.rooms.push(room);
                     });
                 }).catch((err) => {
@@ -50,6 +60,24 @@ const roomsStore = createStore({
                 });
             }
         },
+        setActiveRoom(state, payload) {
+            state.activeRoom = payload;
+            // todo call actions
+            // fetch messages for this room if not already fetched
+            const room = state.rooms.find((room) => room.id == payload);
+            if (!room || room?.fetched == false) {
+                console.log("add messages")
+                API.getMessages(payload).then((res) => {
+                    // todo add if not exist
+                    room.fetched = true;
+                    res.data.forEach((msg) => {
+                        state.messages.push(msg);
+                    });
+                }).catch((err) => {
+                    console.log(err)
+                });
+            }
+        },
         addMailboxes(state, payload) {
             payload.forEach((mailbox) => {
                 mailbox.fetched = false;
@@ -59,10 +87,16 @@ const roomsStore = createStore({
     },
     getters: {
         rooms: (state) => () => {
-            console.log(state.rooms.length)
-            if (state.activeMailbox == 0) return state.rooms;
+            if (state.activeMailbox === 0) return state.rooms;
             return state.rooms.filter((room) => room.mailboxId == state.activeMailbox);
         },
+        messages: (state) => (roomId) => {
+            const room = state.rooms.find((room) => room.id === roomId);
+            if (room?.fetched === false) {
+                console.log("ok")
+            }
+            return [1, 2];
+        }
     },
     actions: {
         async fetchMailboxes(context) {
@@ -75,7 +109,10 @@ const roomsStore = createStore({
                     console.log(err);
                 });
         },
+        async fetchMessages(context) {
+            console.log(context)
+        },
     },
 });
 
-export default roomsStore;
+export default store;

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