use provider instead of props in options

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/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/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;
+    if (!room?.value) return false;
-    return room.roomType == RoomType.THREAD || room.roomType == RoomType.GROUP;
+    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>
@@ -47,8 +52,6 @@ function openMessageView(id) {
                     :key="index"
                     :msg="message"
                     :members="room?.members"
-                    :mailboxId="room.mailboxId"
-                    :roomId="room.id"
                     @open-message-view="(id) => openMessageView(id)"
                 />
             </div>