fetch rooms

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'])