From 7c98c1eb0c180b65e2a2e6ba15125abb02f9e736 Mon Sep 17 00:00:00 2001
From: grimhilt <grimhilt@users.noreply.github.com>
Date: Thu, 6 Apr 2023 20:24:11 +0200
Subject: [PATCH] restructure members storage in rooms store

---
 front/src/store/models/model.ts               |  6 +++-
 front/src/store/store.ts                      | 33 +++++++++----------
 front/src/views/room/Header.vue               | 33 ++++++++-----------
 front/src/views/room/MemberList.vue           | 15 +++++++++
 front/src/views/room/Message.vue              | 16 ++++++---
 front/src/views/room/RoomView.vue             | 29 +++++++---------
 front/src/views/sidebar/accounts/Account.vue  |  4 +--
 front/src/views/sidebar/rooms/Room.vue        |  4 +--
 .../views/sidebar/rooms/threads/Thread.vue    |  1 -
 .../sidebar/rooms/threads/ThreadList.vue      |  2 +-
 10 files changed, 76 insertions(+), 67 deletions(-)
 create mode 100644 front/src/views/room/MemberList.vue

diff --git a/front/src/store/models/model.ts b/front/src/store/models/model.ts
index b49cef6..b05a1ae 100644
--- a/front/src/store/models/model.ts
+++ b/front/src/store/models/model.ts
@@ -7,7 +7,10 @@ export enum RoomType {
 }
 
 export interface Message {
-    todo: true;
+    fromA: string;
+    subject: string;
+    content: string;
+    date: string;
 }
 
 export enum LoadingState {
@@ -23,6 +26,7 @@ export interface Room {
     mailboxId: number;
     user: string;
     userId: number;
+    members: Address[];
     notSeen: number;
     messages: Message[];
     messageLoading: LoadingState;
diff --git a/front/src/store/store.ts b/front/src/store/store.ts
index 3b0bd1c..8223272 100644
--- a/front/src/store/store.ts
+++ b/front/src/store/store.ts
@@ -30,6 +30,7 @@ function createRoom(options: RoomFromBack): Room {
         roomType: options.roomType,
         mailboxId: options.mailboxId,
         userId: options.userId,
+        members: [],
         user: options.user,
         notSeen: options.notSeen,
         messages: [],
@@ -41,7 +42,6 @@ function createRoom(options: RoomFromBack): Room {
 export interface State {
     rooms: Room[];
     accounts: Account[];
-    addresses: Address[];
     activeAccount: number;
     activeRoom: number;
 }
@@ -53,31 +53,26 @@ const store = createStore<State>({
     state: {
         rooms: [], //createRoom({ id: 12, userId: 1, user: "user", roomName: "room name", mailboxId: 2, roomType: 1 })
         accounts: [{ id: 0, email: "All", fetched: false }],
-        addresses: [],
         activeAccount: 0,
         activeRoom: 0,
     },
     mutations: {
-        setactiveAccount(state, payload) {
+        setActiveAccount(state, payload) {
             state.activeAccount = payload;
             const account = state.accounts.find((account) => account.id == payload);
             store.dispatch("fetchRooms", { accountId: payload, account: account });
         },
         setActiveRoom(state, payload) {
             state.activeRoom = payload;
+            console.log("set active")
             // todo load room on load page
             // let room;
-            // // const room = state.rooms.find((room) => room.id == payload);
-            // console.log(state.rooms.length);
-            // for (let i = 0; i < state.rooms.length; i++) {
-            //     console.log(state.rooms[i].id, payload.value);
-            //     if (state.rooms[i].id == payload.value) {
-            //         room = state.rooms[i];
-            //         break;
-            //     }
-            // }
-            // console.log(room);
-            // store.dispatch("fetchMessages", { roomId: payload, room: room });
+            console.log(payload)
+            console.log(state.rooms)
+            const room = state.rooms.find((room) => room.id == payload);
+            console.log(room)
+            if (!room) return;
+            store.dispatch("fetchMessages", { roomId: payload, room: room });
         },
         addAccounts(state, payload) {
             payload.forEach((account: AccountFromBack) => {
@@ -97,7 +92,6 @@ const store = createStore<State>({
                 const parentRoom = state.rooms.find((room) => room.id == thread.parent_id); // todo debug parent_id to root_id
                 if (parentRoom) {
                     parentRoom.threadIds.push(thread.id);
-                    console.log(parentRoom);
                 } else {
                     console.log("yep...");
                 }
@@ -113,8 +107,10 @@ const store = createStore<State>({
         },
         addAddress(state, payload) {
             // todo add if not exist
+            const room = state.rooms.find((room) => room.id == payload.roomId);
+            if (!room) return;
             payload.addresses.forEach((address: Address) => {
-                state.addresses.push(address);
+                room.members.push(address);
             });
         },
     },
@@ -133,8 +129,9 @@ const store = createStore<State>({
             },
         address:
             (state) =>
-            (addressId: number): Address | undefined => {
-                const address = state.addresses.find((address) => address.id == addressId);
+            (roomId: number, addressId: number): Address | undefined => {
+                const room = state.rooms.find((room) => room.id == roomId);
+                const address = room?.members.find((address) => address.id == addressId);
                 return address;
             },
         messages:
diff --git a/front/src/views/room/Header.vue b/front/src/views/room/Header.vue
index 6a9e58c..60f88a1 100644
--- a/front/src/views/room/Header.vue
+++ b/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 {
diff --git a/front/src/views/room/MemberList.vue b/front/src/views/room/MemberList.vue
new file mode 100644
index 0000000..bbe8d2f
--- /dev/null
+++ b/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>
diff --git a/front/src/views/room/Message.vue b/front/src/views/room/Message.vue
index 96f3aa3..6c08d97 100644
--- a/front/src/views/room/Message.vue
+++ b/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);
 }
 
diff --git a/front/src/views/room/RoomView.vue b/front/src/views/room/RoomView.vue
index 50b5e85..fc89551 100644
--- a/front/src/views/room/RoomView.vue
+++ b/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>
diff --git a/front/src/views/sidebar/accounts/Account.vue b/front/src/views/sidebar/accounts/Account.vue
index b7cf3bd..e21a295 100644
--- a/front/src/views/sidebar/accounts/Account.vue
+++ b/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>
diff --git a/front/src/views/sidebar/rooms/Room.vue b/front/src/views/sidebar/rooms/Room.vue
index 750b493..a33ce0c 100644
--- a/front/src/views/sidebar/rooms/Room.vue
+++ b/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>
diff --git a/front/src/views/sidebar/rooms/threads/Thread.vue b/front/src/views/sidebar/rooms/threads/Thread.vue
index 147fe94..59b5b83 100644
--- a/front/src/views/sidebar/rooms/threads/Thread.vue
+++ b/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>
 
diff --git a/front/src/views/sidebar/rooms/threads/ThreadList.vue b/front/src/views/sidebar/rooms/threads/ThreadList.vue
index e6c9bec..e833f6f 100644
--- a/front/src/views/sidebar/rooms/threads/ThreadList.vue
+++ b/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>