show addresses in front

front/src/store/models/model.ts

@@ -30,5 +30,7 @@ export interface Account {
 }
 
 export interface Address {
-    todo: boolean;
+    id: number;
+    name: string | null;
+    email: string;
 }

front/src/store/store.ts

@@ -1,5 +1,6 @@
 import API from "@/services/imapAPI";
 import { decodeEmojis } from "@/utils/string";
+import { AxiosError, AxiosResponse } from "axios";
 import { createStore, Store } from "vuex";
 import { Room, Account, Address, RoomType, Message } from "./models/model";
 
@@ -103,6 +104,12 @@ const store = createStore<State>({
                 const room = state.rooms.find((room) => room.id == roomId);
                 return room;
             },
+        address:
+            (state) =>
+            (addressId: number): Address | undefined => {
+                const address = state.addresses.find((address) => address.id == addressId);
+                return address;
+            },
         messages:
             (state) =>
             (roomId: number): Message[] => {
@@ -117,21 +124,21 @@ const store = createStore<State>({
     actions: {
         fetchAccounts: async (context) => {
             API.getAccounts()
-                .then((res) => {
+                .then((res: AxiosResponse) => {
                     context.commit("addAccounts", res.data);
                 })
-                .catch((err) => {
+                .catch((err: AxiosError) => {
                     console.log(err);
                 });
         },
         fetchRooms: async (context, data) => {
             if (data.account?.fetched == false) {
                 API.getRooms(data.accountId)
-                    .then((res) => {
+                    .then((res: AxiosResponse) => {
                         data.account.fetched = true;
                         context.commit("addRooms", { rooms: res.data });
                     })
-                    .catch((err) => {
+                    .catch((err: AxiosError) => {
                         console.log(err);
                     });
             }
@@ -140,20 +147,20 @@ const store = createStore<State>({
             if (!data.room || data.room?.fetched == false) {
                 store.dispatch("fetchRoomMembers", { roomId: data.roomId });
                 API.getMessages(data.roomId)
-                    .then((res) => {
+                    .then((res: AxiosResponse) => {
                         context.commit("addMessages", { messages: res.data, roomId: data.roomId });
                     })
-                    .catch((err) => {
+                    .catch((err: AxiosError) => {
                         console.log(err);
                     });
             }
         },
         fetchRoomMembers: async (context, data) => {
             API.getMembers(data.roomId)
-                .then((res) => {
+                .then((res: AxiosResponse) => {
                     context.commit("addAddress", { addresses: res.data, roomId: data.roomId });
                 })
-                .catch((err) => {
+                .catch((err: AxiosError) => {
                     console.log(err);
                 });
         },

front/src/utils/array.ts

@@ -0,0 +1,9 @@
+export function removeDuplicates(array: []) {
+    const unique: [] = [];
+    for (let i = 0; i < array.length; i++) {
+        if (!unique.includes(array[i])) {
+            unique.push(array[i]);
+        }
+    }
+    return unique;
+}

front/src/views/room/Message.vue

@@ -1,7 +1,9 @@
 <script setup>
 import { defineProps, onMounted, ref } from "vue";
 import { decodeEmojis } from "../../utils/string";
+import { removeDuplicates } from "../../utils/array";
 import DOMPurify from "dompurify";
+import store from "@/store/store";
 
 const props = defineProps({ data: Object });
 const date = new Date(props.data.date);
@@ -30,6 +32,17 @@ onMounted(() => {
     `);
     doc.close();
 });
+
+const displayAddresses = (addressesId) => {
+    // todo store members in rooms ?
+    addressesId = removeDuplicates(addressesId);
+    let res = "";
+    addressesId.forEach((addressId) => {
+        const address = store.getters.address(addressId);
+        if (address) res += address.email;
+    });
+    return res;
+};
 </script>
 <!-- to if to is more than me
         cc -->
@@ -39,7 +52,9 @@ onMounted(() => {
 <template>
     <div class="message">
         <div id="context">
-            <div class="left" id="profile">{{ props.data.fromA }}</div>
+            <div class="left" id="profile">
+                {{ displayAddresses(props.data.fromA?.split(",")) }} - {{ props.data.fromA }}
+            </div>
             <div class="middle">{{ decodeEmojis(props.data.subject) }}</div>
             <div class="right" id="date">
                 {{