store message outside of room object

front/src/components/modals/AddAccountModal.vue

@@ -110,7 +110,7 @@ function mailChange() {
 
 <template>
     <div>
-        <button @click="modal = true">Open Modal!</button>
+        <button @click="modal = true">Add Account</button>
         <Modal v-if="modal" title="Add new account" @close-modal="modal = false">
             <template v-slot:body>
                 <div class="field">

front/src/store/models/model.ts

@@ -23,7 +23,6 @@ export enum LoadingState {
     loaded = 2,
 }
 
-// todo store messages outside of the room
 export interface Room {
     id: number;
     roomName: string;
@@ -33,8 +32,6 @@ export interface Room {
     userId: number;
     members: Address[];
     notSeen: number;
-    messages: Message[];
-    messageLoading: LoadingState;
     threadIds: number[];
 }
 

front/src/store/store.ts

@@ -33,30 +33,38 @@ function createRoom(options: RoomFromBack): Room {
         members: [],
         user: options.user,
         notSeen: options.notSeen,
-        messages: [],
-        messageLoading: LoadingState.notLoaded,
         threadIds: [],
     };
 }
 
-export interface State {
+interface roomMessage {
-    rooms: Room[];
+    roomId: number;
-    accounts: Account[];
+    fetch: LoadingState;
-    activeAccount: number;
+    messages: Message[];
-    activeRoom: number;
 }
 
-const roomOnId = (state: State, roomId: number) => state.rooms.find((room: Room) => room.id == roomId);
+export interface State {
+    accounts: Account[];
+    activeAccount: number;
+    rooms: Room[];
+    activeRoom: number;
+    roomMessages: roomMessage[];
+}
 
-// // define injection key todo
+const roomOnId = (state: State, roomId: number): Room | undefined =>
+    state.rooms.find((room: Room) => room.id == roomId);
+const msgOnRoomId = (state: State, roomId: number) => state.roomMessages.find((roomMsg) => roomMsg.roomId == roomId);
+
+// define injection key todo
 // export const key: InjectionKey<Store<State>> = Symbol()
 
 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 }],
         activeAccount: 0,
+        rooms: [],
         activeRoom: 0,
+        roomMessages: [],
     },
     mutations: {
         setActiveAccount(state, payload) {
@@ -69,7 +77,15 @@ const store = createStore<State>({
             // todo load room on load page
             const room = state.rooms.find((room) => room.id == payload);
             if (!room) return;
-            store.dispatch("fetchMessages", { roomId: payload, room: room });
+            let roomMessage = msgOnRoomId(state, payload);
+            if (!roomMessage) {
+                state.roomMessages.push({ messages: [], fetch: LoadingState.notLoaded, roomId: payload });
+                roomMessage = msgOnRoomId(state, payload);
+            }
+            store.dispatch("fetchMessages", {
+                roomId: payload,
+                obj: roomMessage,
+            });
         },
         addAccounts(state, payload) {
             payload.forEach((account: AccountFromBack) => {
@@ -98,9 +114,16 @@ const store = createStore<State>({
             // todo add if not exist
             const room = roomOnId(state, payload.roomId);
             if (!room) return;
+            let roomMessage = msgOnRoomId(state, payload.roomId);
+            if (!roomMessage) {
+                state.roomMessages.push({ roomId: payload.roomId, messages: [], fetch: LoadingState.notLoaded });
+                roomMessage = msgOnRoomId(state, payload.roomId);
+            }
+            if (!roomMessage) return;
+
             payload.messages.forEach((message: any) => {
                 message.flags = message.flags?.split(",") ?? [];
-                room.messages.push(message);
+                roomMessage?.messages.push(message);
             });
         },
         addAddress(state, payload) {
@@ -113,13 +136,13 @@ const store = createStore<State>({
         },
         addFlag(state, payload) {
             // todo if seen notif
-            const msg = roomOnId(state, payload.roomId)?.messages.find((msg) => msg.id == payload.messageId);
+            const msg = msgOnRoomId(state, payload.roomId)?.messages.find((msg) => msg.id == payload.messageId);
             if (msg) {
                 msg.flags.push(payload.flag);
             }
         },
         removeFlag(state, payload) {
-            const msg = roomOnId(state, payload.roomId)?.messages.find((msg) => msg.id == payload.messageId);
+            const msg = msgOnRoomId(state, payload.roomId)?.messages.find((msg) => msg.id == payload.messageId);
             if (msg) {
                 msg.flags?.splice(msg.flags?.indexOf(payload.flag), 1);
             }
@@ -147,12 +170,11 @@ const store = createStore<State>({
         messages:
             (state) =>
             (roomId: number): Message[] => {
-                const room = roomOnId(state, roomId);
+                const roomMessage = msgOnRoomId(state, roomId);
-                if (!room) return [];
+                if (roomMessage) return roomMessage.messages;
-                if (room.messageLoading === LoadingState.notLoaded) {
+                state.roomMessages.push({ messages: [], roomId: roomId, fetch: LoadingState.notLoaded });
-                    store.dispatch("fetchMessages", { roomId: room.id, room: room });
+                store.dispatch("fetchMessages", { roomId: roomId, obj: msgOnRoomId(state, roomId) });
-                }
+                return msgOnRoomId(state, roomId)?.messages ?? [];
-                return room.messages;
             },
     },
     actions: {
@@ -178,16 +200,16 @@ const store = createStore<State>({
             }
         },
         fetchMessages: async (context, data) => {
-            if (!data.room || data.room.messageLoading === LoadingState.notLoaded) {
+            if (data.obj.fetch === LoadingState.notLoaded) {
-                data.room.messageLoading = LoadingState.loading;
+                data.obj.fetch = LoadingState.loading;
                 store.dispatch("fetchRoomMembers", { roomId: data.roomId });
                 API.getMessages(data.roomId)
                     .then((res: AxiosResponse) => {
-                        data.room.messageLoading = LoadingState.loaded;
+                        data.obj.fetch = LoadingState.loaded;
                         context.commit("addMessages", { messages: res.data, roomId: data.roomId });
                     })
                     .catch((err: AxiosError) => {
-                        data.room.messageLoading = LoadingState.notLoaded;
+                        data.obj.fetch = LoadingState.notLoaded;
                         console.log(err);
                     });
             }

front/src/views/room/RoomView.vue

@@ -48,7 +48,7 @@ provide("room", room);
         <div id="RoomViewBody">
             <div class="content">
                 <Message
-                    v-for="(message, index) in room?.messages"
+                    v-for="(message, index) in store.getters.messages(room?.id)"
                     :key="index"
                     :msg="message"
                     :members="room?.members"