restructure members storage in rooms store

front/src/views/room/Header.vue

@@ -1,47 +1,40 @@
 <script setup lang="ts">
-import store from "../../store/store";
-import { defineProps, ref, watch } from "vue";
+import { defineProps } from "vue";
 import Badge from "@/components/Badge.vue";
 import { RoomType } from "@/store/models/model";
 
-const props = defineProps({ id: Number });
-const room = ref(store.getters.room(props.id));
-// todo auto load
-watch(
-    () => props.id,
-    (newId) => {
-        room.value = store.getters.room(newId);
-    },
-);
+const props = defineProps({ id: Number, room: Object });
 
 const roomTitle = () => {
-    const type = room.value?.roomType;
+    const type =  props.room?.roomType;
     if (type === RoomType.DM || type == RoomType.CHANNEL || type == RoomType.ROOM) {
-        return room.value?.user;
+        return  props.room?.user;
     }
-    return room.value?.roomName;
+    return  props.room?.roomName;
 };
 </script>
 
 <template>
     <div class="main">
-        <div class="infos">
-            <Badge :value="RoomType[room?.roomType]" />
-            {{ roomTitle() }}
+        <div class="context">
+            <div class="infos">
+                <Badge :value="RoomType[room?.roomType]" />
+                {{ roomTitle() }}
+            </div>
+            <div class="action">action: threads message important</div>
         </div>
-        <div class="action">action: threads message important</div>
     </div>
 </template>
 
 <style scoped>
-.main {
+.context {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid #505050;
     width: 100%;
-    height: 51px;
+    height: 35px;
 }
 
 .infos {

front/src/views/room/MemberList.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { defineProps } from "vue";
+
+const props = defineProps({ type: String, members: Object });
+
+</script>
+
+<template>
+    <div class="main">
+        
+    </div>
+</template>
+
+<style scoped>
+</style>

front/src/views/room/Message.vue

@@ -5,7 +5,15 @@ import { removeDuplicates } from "../../utils/array";
 import DOMPurify from "dompurify";
 import store from "@/store/store";
 
-const props = defineProps({ data: Object });
+const props = defineProps({
+    data: {
+        fromA: String,
+        subject: String,
+        content: String,
+        date: String,
+    },
+    members: Array
+});
 const iframe = ref(null);
 
 // todo dompurify
@@ -47,11 +55,10 @@ onMounted(() => {
 });
 
 const displayAddresses = (addressesId) => {
-    // todo store members in rooms ?
     addressesId = removeDuplicates(addressesId);
     let res = "";
     addressesId.forEach((addressId) => {
-        const address = store.getters.address(addressId);
+        const address = props.members.find((member) => member.id == addressId);
         if (address) res += address.email;
     });
     return res;
@@ -109,8 +116,7 @@ iframe {
     max-height: 300px;
     width: 100%;
     border: none;
-    padding: 2px 10px;
-    max-width: 750px; /* template width being 600px to 640px up to 750px (experiment and test) */
+    max-width: 600px; /* template width being 600px to 640px up to 750px (experiment and test) */
     background-color: rgb(234, 234, 234);
 }
 

front/src/views/room/RoomView.vue

@@ -9,30 +9,21 @@ import { RoomType } from "@/store/models/model";
 const store = useStore();
 const route = useRoute();
 const id = ref(parseInt(route.params?.id));
-// let room;
+let room;
 onBeforeMount(async () => {
-    // get data
-    // room = store.getters.room(id);
-    // if (!room || room?.fetched === false) {
-    //     // todo
-    //     // await store.dispatch("fetchMessages", );
-    // }
-    store.commit("setActiveRoom", id);
+    store.commit("setActiveRoom", id.value);
+    room = store.getters.room(id.value);
 });
 
 onBeforeRouteUpdate(async (to, from) => {
     if (to.params.id !== from.params.id) {
         id.value = parseInt(to.params.id);
-        console.log(id);
-        // room = store.getters.room(id);
-        // console.log(room);
-        store.commit("setActiveRoom", id);
+        store.commit("setActiveRoom", id.value);
+        room = await store.getters.room(id.value);
     }
 });
 
 const shouldDisplayComposer = () => {
-    if (!id.value) return false;
-    const room = store.getters.room(id.value);
     if (!room) return false;
     return room.roomType == RoomType.THREAD || room.roomType == RoomType.GROUP;
 };
@@ -40,12 +31,16 @@ const shouldDisplayComposer = () => {
 
 <template>
     <div id="main">
-        <Header :id="id"></Header>
+        <Header :id="id" :room="room"></Header>
         <div id="RoomViewBody">
             <div class="content">
-                <Message v-for="(message, index) in store.getters.messages(id)" :key="index" :data="message" />
+                <Message
+                    v-for="(message, index) in room?.messages"
+                    :key="index"
+                    :data="message"
+                    :members="room?.members"
+                />
             </div>
-            {{ room?.roomType }}
             <div id="composer" v-if="shouldDisplayComposer()">COMPOSER</div>
         </div>
     </div>

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="container" @click="setactiveAccount(data.id)" :class="activeAccount == data.id && 'active'">
+    <div class="container" @click="setActiveAccount(data.id)" :class="activeAccount == data.id && 'active'">
         {{ data.email }}
     </div>
 </template>
@@ -17,7 +17,7 @@ export default {
         ...mapState(["activeAccount"]),
     },
     methods: {
-        ...mapMutations(["setactiveAccount"]),
+        ...mapMutations(["setActiveAccount"]),
     },
 };
 </script>

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

@@ -14,10 +14,10 @@ const props = defineProps({
         userId: Number,
         notSeen: Number,
         mailboxId: Number,
-        threadIds: [Number],
+        threadIds: Array,
     },
 });
-console.log(props.data.threadIds);
+// console.log(props.data.threadIds);
 
 const router = useRouter();
 </script>

front/src/views/sidebar/rooms/threads/Thread.vue

@@ -7,7 +7,6 @@ const props = defineProps({
     threadId: Number,
 });
 const room = store.getters.room(props.threadId);
-console.log(props.thread);
 const router = useRouter();
 </script>
 

front/src/views/sidebar/rooms/threads/ThreadList.vue

@@ -1,7 +1,7 @@
 <script setup>
 import Thread from "./Thread.vue";
 import { defineProps } from "vue";
-const props = defineProps({ threadIds: [Number] });
+const props = defineProps({ threadIds: Array });
 </script>
 
 <template>