apply difference between mailbox and account

back/db/api.js

@@ -88,8 +88,10 @@ async function getMessages(roomId) {
         ) content ON msg.message_id = content.message_id
 
         INNER JOIN message ON message.message_id = msg.message_id
+
         WHERE msg.room_id = ?
-        GROUP BY msg.message_id;
+        GROUP BY msg.message_id
+        ORDER BY message.idate;
     `;
     const values = [roomId];
     return await execQueryAsync(query, values);

front/src/store/models/Account.js

@@ -0,0 +1,7 @@
+export default class Account {
+    constructor(_id, _mail) {
+        this.id = _id;
+        this.email = _mail;
+        this.fetched = false;
+    }
+}

front/src/store/store.js

@@ -1,44 +1,23 @@
 import API from "@/services/imapAPI";
 import { createStore } from "vuex";
 import Room from "./models/Room";
+import Account from "./models/Account";
 
 const store = createStore({
     state() {
         return {
-            rooms: [
+            rooms: [],
-                new Room(1, "clemence", 0, "Est ex adipisicing non ipsum voluptate duis enim adipisicing labore.", 1),
-                new Room(2, "laurance", 0, "Est ex adipisicing non ipsum voluptate duis enim adipisicing labore.", 2),
-                new Room(3, "mathilde", 0, "Est ex adipisicing non ipsum voluptate duis enim adipisicing labore.", 1),
-            ],
             messages: [],
-            mailboxes: [],
+            accounts: [new Account(0, "ALL")],
-            activeMailbox: 0,
+            activeAccount: 0,
             activeRoom: 0,
         };
     },
     mutations: {
-        setActiveMailbox(state, payload) {
+        setactiveAccount(state, payload) {
-            state.activeMailbox = payload;
+            state.activeAccount = payload;
-
+            const account = state.accounts.find((account) => account.id == payload);
-            // todo call actions
+            store.dispatch("fetchRooms", { accountId: payload, account: account });
-            // 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) {
-                console.log(payload)
-                API.getRooms(payload)
-                    .then((res) => {
-                        // todo add if not exist
-                        console.log(res.data)
-                        mailbox.fetched = true;
-                        res.data.forEach((room) => {
-                            state.rooms.push(new Room(room.id, room.user, room.userId, room.roomName, room.mailboxId));
-                        });
-                    })
-                    .catch((err) => {
-                        console.log(err);
-                    });
-            }
         },
         setActiveRoom(state, payload) {
             state.activeRoom = payload;
@@ -60,11 +39,15 @@ const store = createStore({
                     });
             }
         },
-        addMailboxes(state, payload) {
+        addAccounts(state, payload) {
-            console.log(payload)
+            payload.forEach((account) => {
-            payload.forEach((mailbox) => {
+                state.accounts.push(new Account(account.id, account.email));
-                mailbox.fetched = false;
+            });
-                state.mailboxes.push(mailbox);
+        },
+        addRooms(state, payload) {
+            // todo add if not exist
+            payload.rooms.forEach((room) => {
+                state.rooms.push(new Room(room.id, room.user, room.userId, room.roomName, room.mailboxId));
             });
         },
         addMessages(state, payload) {
@@ -73,37 +56,48 @@ const store = createStore({
                 room.messages.push(message);
             });
             room.messagesFetched = true;
-            console.log(room.messages)
         },
     },
     getters: {
         rooms: (state) => () => {
-            if (state.activeMailbox === 0) return state.rooms;
+            if (state.activeAccount === 0) return state.rooms;
-            return state.rooms.filter((room) => room.mailboxId == state.activeMailbox);
+            return state.rooms.filter((room) => room.mailboxId == state.activeAccount);
         },
         messages: (state) => (roomId) => {
             const room = state.rooms.find((room) => room.id == roomId);
             if (!room.messagesFetched) {
-                console.log("fetched Messages")
                 store.dispatch("fetchMessages", { roomId: room.id });
             }
             return room.messages;
         },
     },
     actions: {
-        fetchMailboxes: async (context) => {
+        fetchAccounts: async (context) => {
             API.getAccounts()
                 .then((res) => {
-                    context.commit("addMailboxes", res.data);
+                    context.commit("addAccounts", res.data);
                 })
                 .catch((err) => {
                     console.log(err);
                 });
         },
+        fetchRooms: async (context, data) => {
+            if (data.account?.fetched == false) {
+                API.getRooms(data.accountId)
+                    .then((res) => {
+                        data.account.fetched = true;
+                        context.commit("addRooms", { rooms: res.data });
+                    })
+                    .catch((err) => {
+                        console.log(err);
+                    });
+            }
+        },
         fetchMessages: async (context, data) => {
+            console.log(data)
             API.getMessages(data.roomId)
                 .then((res) => {
-                    console.log(res.data)
+                    console.log(res.data);
                     context.commit("addMessages", { messages: res.data, roomId: data.roomId });
                 })
                 .catch((err) => {

front/src/views/modals/AddAccountModal.vue

@@ -64,7 +64,7 @@ function checkError() {
   }
 }
 
-function addMailboxRequest() {
+function addAccountRequest() {
   checkError();
 
   const data = {
@@ -113,7 +113,7 @@ function mailChange() {
       </button>
       <Modal
       v-if="modal"
-        title="Add mailbox"
+        title="Add new account"
         @close-modal="modal = false"
         >
         <template v-slot:body>
@@ -145,7 +145,7 @@ function mailChange() {
           </div>
           <!-- tls -->
           <div>
-            <button :disabled="error != ''" @click="addMailboxRequest">Add</button>
+            <button :disabled="error != ''" @click="addAccountRequest">Add</button>
             {{ error }}
           </div>
         </template>

front/src/views/room/Message.vue

@@ -2,9 +2,7 @@
 import { defineProps } from "vue";
 
 const props = defineProps({ data: Object });
-console.log(props.data.date);
 const date = new Date(props.data.date);
-console.log(date);
 </script>
 <!-- to if to is more than me
         cc -->

front/src/views/room/RoomView.vue

@@ -8,7 +8,6 @@ import Message from "./Message.vue";
 const store = useStore();
 const route = useRoute();
 let { id } = route.params;
-let messages = [];
 onBeforeMount(async () => {
     // get data
     console.log(store.state.rooms.find((room) => room.id === id)?.fetched);
@@ -34,8 +33,6 @@ onBeforeRouteUpdate(async (to, from) => {
         <div id="RoomViewBody">
             <div class="content">
                 <Message v-for="(message, index) in store.getters.messages(id)" :key="index" :data="message" />
-                <b>{{ id }}</b>
-                {{ messages.length }}
             </div>
             <div id="composer">COMPOSER</div>
         </div>

front/src/views/sidebar/Sidebar.vue

@@ -1,18 +1,18 @@
 <template>
     <div>
-        <Mailboxes />
+        <Accounts />
         <Rooms id="rooms"/>
     </div>
 </template>
 
 <script>
-import Mailboxes from './mailboxes/Mailboxes'
+import Accounts from './accounts/Accounts'
 import Rooms from './rooms/Rooms.vue'
 
 export default {
   name: 'Sidebar',
   components: {
-    Mailboxes,
+    Accounts,
     Rooms,
   }
 }

front/src/views/sidebar/accounts/Account.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="container" @click="setActiveMailbox(data.id)" :class="activeMailbox == data.id && 'active'">
+    <div class="container" @click="setactiveAccount(data.id)" :class="activeAccount == data.id && 'active'">
         {{ data.email }}
     </div>
 </template>
@@ -8,17 +8,17 @@
 import { mapMutations, mapState } from 'vuex'
 
 export default {
-  name: 'Mailbox',
+  name: 'Account',
   components: {
   },
   props: {
     data: {mail: String, id: Number}
   },
   computed: {
-    ...mapState(['activeMailbox'])
+    ...mapState(['activeAccount'])
   },
   methods: {
-    ...mapMutations(['setActiveMailbox'])
+    ...mapMutations(['setactiveAccount'])
   }
 }
 </script>

front/src/views/sidebar/accounts/Accounts.vue

@@ -4,33 +4,31 @@
         <!-- deconnect -->
       </div>
       <span class="divider"></span>
-      <Mailbox :data="{'id': 0, 'email': 'all'}"/>
+      <Account v-for="(account, index) in accounts" :key="index" :data="account"/>
-      <Mailbox v-for="(mailbox, index) in mailboxes" :key="index" :data="mailbox"/>
       <span class="divider"></span>
 
-      <AddMailboxModal />
+      <AddAccountModal />
       
     </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import Mailbox from './Mailbox'
+import Account from './Account'
-import AddMailboxModal from '../../modals/AddMailboxModal'
+import AddAccountModal from '../../modals/AddAccountModal'
 import store from '@/store/store'
 
 export default {
-  name: 'Mailboxes',
+  name: 'Accounts',
   components: {
-    Mailbox,
+    Account,
-    AddMailboxModal
+    AddAccountModal
   },
   computed: {
-    ...mapState(['mailboxes'])
+    ...mapState(['accounts'])
   },
   created() {
-    console.log("call api get mailboxes");
+    store.dispatch('fetchAccounts');
-    store.dispatch('fetchMailboxes');
   }
 }