fetch rooms

front/src/services/imapAPI.js

@@ -7,4 +7,7 @@ export default {
     getMailboxes() {
         return API().get('/mail/mailboxes');
     },
+    getRooms(mailboxId) {
+        return API().get(`/mail/${mailboxId}/rooms`);
+    }
 }

front/src/store/rooms.js

@@ -2,65 +2,80 @@ import API from "@/services/imapAPI";
 import { createStore } from "vuex";
 
 const roomsStore = createStore({
-  state() {
-    return {
-      rooms: [
-        {
-          users: "clemnce",
-          object:
-            "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
-          mailbox: 1,
-        },
-        {
-          users: "juliette",
-          object:
-            "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
-          mailbox: 1,
-        },
-        {
-          users: "jean",
-          object:
-            "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
-          mailbox: 2,
-        },
-        {
-          users: "luc",
-          object:
-            "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
-          mailbox: 2,
-        },
-      ],
-      mailboxes: [],
-      activeMailbox: -1
-    };
-  },
-  mutations: {
-    setActiveMailbox(state, payload) {
-        state.activeMailbox = payload;
+    state() {
+        return {
+            rooms: [
+                {
+                    id: 0,
+                    user: "clemnce",
+                    userId: 0,
+                    name: "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
+                    mailboxId: 1,
+                },
+                {
+                    user: "juliette",
+                    name: "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
+                    mailboxId: 1,
+                },
+                {
+                    user: "jean",
+                    name: "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
+                    mailboxId: 2,
+                },
+                {
+                    user: "luc",
+                    name: "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
+                    mailboxId: 2,
+                },
+            ],
+            mailboxes: [],
+            activeMailbox: -1,
+        };
+    },
+    mutations: {
+        setActiveMailbox(state, payload) {
+            state.activeMailbox = payload;
+            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
+                    res.data.forEach((room) => {
+                        state.rooms.push(room);
+                    });
+                }).catch((err) => {
+                    console.log(err)
+                });
+            }
+        },
+        addMailboxes(state, payload) {
+            payload.forEach((mailbox) => {
+                mailbox.fetched = false;
+                state.mailboxes.push(mailbox);
+            });
+        },
+    },
+    getters: {
+        rooms: (state) => () => {
+            console.log(state.rooms.length)
+            if (state.activeMailbox == 0) return state.rooms;
+            return state.rooms.filter((room) => room.mailboxId == state.activeMailbox);
+        },
+    },
+    actions: {
+        async fetchMailboxes(context) {
+            console.log("add mailboxes");
+            API.getMailboxes()
+                .then((res) => {
+                    context.commit("addMailboxes", res.data);
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
     },
-    addMailboxes(state, payload) {
-      payload.forEach(mailbox => {
-        state.mailboxes.push(mailbox);
-      });
-    }
-  },
-  getters: {
-    rooms: (state) => () => {
-        if (state.activeMailbox == 0) return state.rooms;
-        return state.rooms.filter(room => room.mailbox == state.activeMailbox);
-    }
-  },
-  actions: {
-    async addMailboxes(context) {
-      console.log("add mailboxes")
-      API.getMailboxes().then((res) => {
-        console.log(res.data)
-        context.commit("addMailboxes", res.data);
-      }).catch((err) => {
-        console.log(err)
-      });
-    }
-  }
 });
 
 export default roomsStore;

front/src/views/sidebar/Sidebar.vue

@@ -1,19 +1,19 @@
 <template>
     <div>
         <Mailboxes />
-        <Users id="users"/>
+        <Rooms id="rooms"/>
     </div>
 </template>
 
 <script>
 import Mailboxes from './mailboxes/Mailboxes'
-import Users from './users/Users.vue'
+import Rooms from './rooms/Rooms.vue'
 
 export default {
   name: 'Sidebar',
   components: {
     Mailboxes,
-    Users,
+    Rooms,
   }
 }
 </script>
@@ -24,7 +24,7 @@ div {
   height: 100%;
 }
 
-#users {
+#rooms {
   max-width: 300px;
   min-width: 250px;
 }

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

@@ -28,11 +28,10 @@ export default {
   computed: {
     ...mapState(['mailboxes'])
   },
-}
-
-if (roomsStore.state.mailboxes.length == 0) {
-  console.log("call api get mailboxes");
-  roomsStore.dispatch('addMailboxes');
+  created() {
+    console.log("call api get mailboxes");
+    roomsStore.dispatch('fetchMailboxes');
+  }
 }
 
 </script>

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

@@ -3,8 +3,8 @@
         <div id="user">
             <BaseAvatar url="vue.png"/>
             <div id="content">
-                <div id="sender">{{ sender }}</div>
-                <div id="object">{{ object }}</div>
+                <div id="sender">{{ data.user }}</div>
+                <div id="object">{{ data.roomName }}</div>
             </div>
         </div>
         <ThreadList />
@@ -18,8 +18,14 @@ import ThreadList from './threads/ThreadList.vue'
 export default {
   name: 'User',
   props: {
-    sender: String,
-    object: String
+    data: {
+        id: Number,
+        roomName: String,
+        user: String,
+        userId: Number,
+        notSeen: Number,
+        mailboxId: Number
+    }
   },
   components: {
     BaseAvatar,

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

@@ -1,20 +1,20 @@
 <template>
     <div>
-      <User v-for="(room, index) in rooms()" :key="index" :sender="room.users" :object="room.object" />
+      <Room v-for="(room, index) in rooms()" :key="index" :data="room" />
     </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import User from './User'
+import Room from './Room'
 
 export default {
-  name: 'Users',
+  name: 'Rooms',
   props: {
 
   },
   components: {
-    User
+    Room
   },
   computed: {
     ...mapGetters(['rooms'])