fetching mailboxes from api

front/src/services/API.js

@@ -1,6 +1,6 @@
 import axios from 'axios'
 
-export default(url='localhost') => {
+export default(url='/api') => {
     return axios.create({
         baseURL: url,
     });

front/src/services/imapAPI.js

@@ -1,7 +1,10 @@
 import API from './API'
 
 export default {
-    getQuote() {
-        return API().get('/');
-    }
+    registerMailbox(data) {
+        return API().post('/mail/mailbox', data);
+    },
+    getMailboxes() {
+        return API().get('/mail/mailboxes');
+    },
 }

front/src/store/rooms.js

@@ -1,3 +1,4 @@
+import API from "@/services/imapAPI";
 import { createStore } from "vuex";
 
 const roomsStore = createStore({
@@ -29,23 +30,36 @@ const roomsStore = createStore({
           mailbox: 2,
         },
       ],
-      mailboxes: [
-        { mail: "mail@domain.com", id: 1 },
-        { mail: "name@example.com", id: 2 },
-      ],
+      mailboxes: [],
       activeMailbox: -1
     };
   },
   mutations: {
     setActiveMailbox(state, payload) {
         state.activeMailbox = payload;
+    },
+    addMailboxes(state, payload) {
+      payload.forEach(mailbox => {
+        state.mailboxes.push(mailbox);
+      });
     }
   },
   getters: {
-    folderRooms: (state) => () => {
-        if (state.activeMailbox == -1) return state.rooms;
+    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)
+      });
+    }
   }
 });
 

front/src/views/modals/AddMailboxModal.vue

@@ -3,7 +3,7 @@ import { ref, computed, watchEffect } from 'vue'
 import Modal from './Modal'
 import API from '../../services/imapAPI';
 
-const modal = ref(true);
+const modal = ref(false);
 
 const email = ref("");
 const pwd = ref("");
@@ -64,10 +64,20 @@ function checkError() {
   }
 }
 
-function addMailboxRequest(event) {
-  console.log(event.target.disabled = true)
+function addMailboxRequest() {
   checkError();
-  API.getQuote().then((res) => {
+
+  const data = {
+    email: email.value,
+    pwd: pwd.value,
+    xoauth: xoauth.value,
+    xoauth2: xoauth2.value,
+    host: host.value,
+    port: port.value,
+    tls: true
+  };
+
+  API.registerMailbox(data).then((res) => {
     console.log(res.status);
   }).catch((err) => {
     console.log(err.request.status)

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

@@ -1,6 +1,6 @@
 <template>
     <div class="container" @click="setActiveMailbox(data.id)" :class="activeMailbox == data.id && 'active'">
-        {{ data.mail }}
+        {{ data.email }}
     </div>
 </template>
 

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

@@ -4,7 +4,7 @@
         <!-- deconnect -->
       </div>
       <span class="divider"></span>
-      <Mailbox :data="{'id': -1, 'mail': 'all'}"/>
+      <Mailbox :data="{'id': 0, 'email': 'all'}"/>
       <Mailbox v-for="(mailbox, index) in mailboxes" :key="index" :data="mailbox"/>
       <span class="divider"></span>
 
@@ -17,6 +17,7 @@
 import { mapState } from 'vuex'
 import Mailbox from './Mailbox'
 import AddMailboxModal from '../../modals/AddMailboxModal'
+import roomsStore from '@/store/rooms'
 
 export default {
   name: 'Mailboxes',
@@ -28,6 +29,12 @@ export default {
     ...mapState(['mailboxes'])
   },
 }
+
+if (roomsStore.state.mailboxes.length == 0) {
+  console.log("call api get mailboxes");
+  roomsStore.dispatch('addMailboxes');
+}
+
 </script>
 
 <style scoped>

front/src/views/sidebar/users/Users.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-      <User v-for="(room, index) in folderRooms()" :key="index" :sender="room.users" :object="room.object" />
+      <User v-for="(room, index) in rooms()" :key="index" :sender="room.users" :object="room.object" />
     </div>
 </template>
 
@@ -17,7 +17,7 @@ export default {
     User
   },
   computed: {
-    ...mapGetters(['folderRooms'])
+    ...mapGetters(['rooms'])
   }
 }
 </script>

front/vue.config.js

@@ -1,4 +1,11 @@
-const { defineConfig } = require('@vue/cli-service')
+const { defineConfig } = require('@vue/cli-service');
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  devServer: {
+      proxy: {
+          "/api": {
+            target: "http://localhost:5500",
+          }
+      }
+  }
 })