change notif when setting seen flag

back/validator/validator.ts

@@ -13,29 +13,38 @@ import { Request, Response } from "express";
 import statusCodes from "../utils/statusCodes";
 import logger from "../system/Logger";
 
-export const validateCreateAccount = ajv.compile(createAccountSchema);
-export const validateGetAccounts = ajv.compile(getAccountSchema);
-export const validateGetRooms = ajv.compile(getRoomSchema);
-export const validateGetMessages = ajv.compile(getMessagesSchema);
-export const validateGetMembers = ajv.compile(getMembersSchema);
-export const validateSetFlag = ajv.compile(setFlagSchema);
-
 class Validator {
+    validateCreateAccount: any;
+    validateGetAccounts: any;
+    validateGetRooms: any;
+    validateGetMessages: any;
+    validateGetMembers: any;
+    validateSetFlag: any;
+
+    constructor() {
+        this.validateCreateAccount = ajv.compile(createAccountSchema);
+        this.validateGetAccounts = ajv.compile(getAccountSchema);
+        this.validateGetRooms = ajv.compile(getRoomSchema);
+        this.validateGetMessages = ajv.compile(getMessagesSchema);
+        this.validateGetMembers = ajv.compile(getMembersSchema);
+        this.validateSetFlag = ajv.compile(setFlagSchema);
+    }
+
     _getSchema(name: string): any {
         switch (name) {
             case "createAccount":
-                return validateCreateAccount;
+                return this.validateCreateAccount;
             case "getAccounts":
-                return validateGetAccounts;
+                return this.validateGetAccounts;
             case "getRooms":
-                return validateGetRooms;
+                return this.validateGetRooms;
             case "getMessages":
-                return validateGetMessages;
+                return this.validateGetMessages;
             case "getMembers":
-                return validateGetMembers;
+                return this.validateGetMembers;
             case "addFlag":
             case "removeFlag":
-                return validateSetFlag;
+                return this.validateSetFlag;
             default:
                 logger.err(`Schema ${name} not found`);
                 break;
@@ -59,4 +68,4 @@ class Validator {
 }
 
 const validator = new Validator();
-export default validator;
+export default validator;

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/components/structure/message/Message.vue

@@ -10,8 +10,6 @@ import { isSeenFc } from "@/utils/flagsUtils";
 const props = defineProps({
     msg: Object as PropType<Message>,
     members: Array as PropType<Address[]>,
-    mailboxId: Number,
-    roomId: Number,
 });
 
 const displayAddresses = (addressIds: string[] | undefined): string => {
@@ -66,7 +64,7 @@ const classes = (): string => {
         </div>
         <div class="content" :class="[classes()]">
             <Content :content="props.msg?.content" />
-            <Options class="options" :mailboxId="props.mailboxId" :roomId="props.roomId" :msg="props.msg" />
+            <Options class="options" :msg="props.msg" />
         </div>
     </div>
 </template>

front/src/components/structure/message/Options.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps, PropType } from "vue";
+import { defineProps, inject, PropType } from "vue";
 import { Message } from "@/store/models/model";
 import API from "@/services/imapAPI";
 import store from "@/store/store";
@@ -7,24 +7,24 @@ import { isSeenFc } from "@/utils/flagsUtils";
 
 const props = defineProps({
     msg: Object as PropType<Message>,
-    mailboxId: Number,
-    roomId: Number,
 });
 
+const room: any = inject("room");
+
 const setFlag = (flag: string) => {
     // todo loading
-    if (!props.mailboxId || !props.msg) return;
+    if (!room?.value || !props.msg) return;
     let apiCall = isSeenFc(props.msg?.flags) ? API.removeFlag : API.addFlag;
     apiCall({
-        mailboxId: props.mailboxId,
+        mailboxId: room.value?.mailboxId,
         messageId: props.msg?.id,
         flag: flag,
     })
         .then((res) => {
             if (isSeenFc(props.msg?.flags)) {
-                store.commit("removeFlag", { roomId: props.roomId, messageId: props.msg?.id, flag: flag });
+                store.commit("removeFlag", { roomId: room.value?.id, messageId: props.msg?.id, flag: flag });
             } else {
-                store.commit("addFlag", { roomId: props.roomId, messageId: props.msg?.id, flag: flag });
+                store.commit("addFlag", { roomId: room.value?.id, messageId: props.msg?.id, flag: flag });
             }
         })
         .catch((err) => {

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

@@ -1,4 +1,5 @@
 import API from "@/services/imapAPI";
+import { isSeenFc } from "@/utils/flagsUtils";
 import { decodeEmojis } from "@/utils/string";
 import { AxiosError, AxiosResponse } from "axios";
 import { createStore } from "vuex";
@@ -33,30 +34,61 @@ function createRoom(options: RoomFromBack): Room {
         members: [],
         user: options.user,
         notSeen: options.notSeen,
-        messages: [],
-        messageLoading: LoadingState.notLoaded,
         threadIds: [],
     };
 }
 
-export interface State {
-    rooms: Room[];
-    accounts: Account[];
-    activeAccount: number;
-    activeRoom: number;
+interface roomMessage {
+    roomId: number;
+    fetch: LoadingState;
+    messages: Message[];
 }
 
-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);
+
+function updateSeen(state: State, roomId: number, flag: string[], adding: boolean) {
+    // if is seen flag decrement unread value
+    if (isSeenFc(flag)) {
+        const room = roomOnId(state, roomId);
+        if (!room) return;
+        if (adding) {
+            room.notSeen--;
+        } else {
+            room.notSeen++;
+        }
+        // if is thread change seen on parent
+        if (room.roomType == RoomType.THREAD) {
+            const parentRoom = state.rooms.find((room) => room.threadIds.includes(roomId));
+            if (parentRoom) {
+                if (adding) {
+                    parentRoom.notSeen--;
+                } else {
+                    parentRoom.notSeen++;
+                }
+            }
+        }
+    }
+}
+// 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 +101,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 +138,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) {
@@ -112,16 +159,17 @@ 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);
+                updateSeen(state, payload.roomId, payload.flag, true);
             }
         },
         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);
+                updateSeen(state, payload.roomId, payload.flag, false);
             }
         },
     },
@@ -147,12 +195,11 @@ const store = createStore<State>({
         messages:
             (state) =>
             (roomId: number): Message[] => {
-                const room = roomOnId(state, roomId);
-                if (!room) return [];
-                if (room.messageLoading === LoadingState.notLoaded) {
-                    store.dispatch("fetchMessages", { roomId: room.id, room: room });
-                }
-                return room.messages;
+                const roomMessage = msgOnRoomId(state, roomId);
+                if (roomMessage) return roomMessage.messages;
+                state.roomMessages.push({ messages: [], roomId: roomId, fetch: LoadingState.notLoaded });
+                store.dispatch("fetchMessages", { roomId: roomId, obj: msgOnRoomId(state, roomId) });
+                return msgOnRoomId(state, roomId)?.messages ?? [];
             },
     },
     actions: {
@@ -178,16 +225,16 @@ const store = createStore<State>({
             }
         },
         fetchMessages: async (context, data) => {
-            if (!data.room || data.room.messageLoading === LoadingState.notLoaded) {
-                data.room.messageLoading = LoadingState.loading;
+            if (data.obj.fetch === LoadingState.notLoaded) {
+                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

@@ -1,10 +1,10 @@
 <script setup>
 import { useStore } from "vuex";
 import { useRoute, onBeforeRouteUpdate } from "vue-router";
-import { onBeforeMount, ref } from "vue";
+import { onBeforeMount, provide, ref } from "vue";
+import { RoomType } from "@/store/models/model";
 import Header from "./Header.vue";
 import Message from "../../components/structure/message/Message.vue";
-import { Room, RoomType } from "@/store/models/model";
 import MessageViewModal from "@/components/modals/MessageViewModal.vue";
 
 const store = useStore();
@@ -12,29 +12,34 @@ const route = useRoute();
 const messageIdView = ref(-1);
 const message = ref(undefined);
 const id = ref(parseInt(route.params.id));
-let room;
+let room = ref();
+
 onBeforeMount(async () => {
     store.commit("setActiveRoom", id.value);
-    room = store.getters.room(id.value);
+    room.value = store.getters.room(id.value);
+    console.log(room.value);
 });
 
 onBeforeRouteUpdate(async (to, from) => {
     if (to.params.id !== from.params.id) {
         id.value = parseInt(to.params.id);
         store.commit("setActiveRoom", id.value);
-        room = await store.getters.room(id.value);
+        room.value = await store.getters.room(id.value);
+        console.log(room.value);
     }
 });
 
 const shouldDisplayComposer = () => {
-    if (!room) return false;
-    return room.roomType == RoomType.THREAD || room.roomType == RoomType.GROUP;
+    if (!room?.value) return false;
+    return room.value.roomType == RoomType.THREAD || room.value.roomType == RoomType.GROUP;
 };
 
 function openMessageView(id) {
     messageIdView.value = id;
-    message.value = room?.messages.find((message) => message.id == id);
+    message.value = room.value?.messages.find((message) => message.id == id);
 }
+
+provide("room", room);
 </script>
 
 <template>
@@ -43,12 +48,10 @@ function openMessageView(id) {
         <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"
-                    :mailboxId="room.mailboxId"
-                    :roomId="room.id"
                     @open-message-view="(id) => openMessageView(id)"
                 />
             </div>