remove duplicate loading

back/test/mail/saveMessage-test.ts

@@ -53,7 +53,6 @@ import {
     getThreadInfoOnId,
     incrementNotSeenRoom,
 } from "../../db/saveMessage-db";
-import { AttrsWithEnvelope } from "../../interfaces/mail/attrs.interface";
 import { AttrsWithEnvelopeTest, createReplyWithSameMembers } from "../test-utils/test-messageUtils";
 // todo esbuild
 // new message from us

front/src/store/models/model.ts

@@ -10,6 +10,12 @@ export interface Message {
     todo: true;
 }
 
+export enum LoadingState {
+    notLoaded = 0,
+    loading = 1,
+    loaded = 2,
+}
+
 export interface Room {
     id: number;
     roomName: string;
@@ -19,7 +25,7 @@ export interface Room {
     userId: number;
     unseen: number;
     messages: Message[];
-    messagesFetched: boolean;
+    messageLoading: LoadingState;
     threads: object[];
 }
 

front/src/store/store.ts

@@ -2,7 +2,7 @@ import API from "@/services/imapAPI";
 import { decodeEmojis } from "@/utils/string";
 import { AxiosError, AxiosResponse } from "axios";
 import { createStore, Store } from "vuex";
-import { Room, Account, Address, RoomType, Message } from "./models/model";
+import { Room, Account, Address, RoomType, Message, LoadingState } from "./models/model";
 
 interface RoomFromBack {
     id: number;
@@ -31,7 +31,7 @@ function createRoom(options: RoomFromBack): Room {
         user: options.user,
         unseen: 0,
         messages: [],
-        messagesFetched: false,
+        messageLoading: LoadingState.notLoaded,
         threads: [],
     };
 }
@@ -63,8 +63,19 @@ const store = createStore<State>({
         },
         setActiveRoom(state, payload) {
             state.activeRoom = payload;
-            const room = state.rooms.find((room) => room.id == payload);
-            store.dispatch("fetchMessages", { roomId: payload, room: room });
+            // 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 });
         },
         addAccounts(state, payload) {
             payload.forEach((account: AccountFromBack) => {
@@ -84,7 +95,6 @@ const store = createStore<State>({
             payload.messages.forEach((message: Message) => {
                 room.messages.push(message);
             });
-            room.messagesFetched = true;
         },
         addAddress(state, payload) {
             // todo add if not exist
@@ -115,8 +125,8 @@ const store = createStore<State>({
             (roomId: number): Message[] => {
                 const room = state.rooms.find((room) => room.id == roomId);
                 if (!room) return [];
-                if (!room.messagesFetched) {
-                    store.dispatch("fetchMessages", { roomId: room.id });
+                if (room.messageLoading === LoadingState.notLoaded) {
+                    store.dispatch("fetchMessages", { roomId: room.id, room: room });
                 }
                 return room.messages;
             },
@@ -144,13 +154,16 @@ const store = createStore<State>({
             }
         },
         fetchMessages: async (context, data) => {
-            if (!data.room || data.room?.fetched == false) {
+            if (!data.room || data.room.messageLoading === LoadingState.notLoaded) {
+                data.room.messageLoading = LoadingState.loading;
                 store.dispatch("fetchRoomMembers", { roomId: data.roomId });
                 API.getMessages(data.roomId)
                     .then((res: AxiosResponse) => {
+                        data.room.messageLoading = LoadingState.loaded;
                         context.commit("addMessages", { messages: res.data, roomId: data.roomId });
                     })
                     .catch((err: AxiosError) => {
+                        data.room.messageLoading = LoadingState.notLoaded;
                         console.log(err);
                     });
             }

front/src/views/room/RoomView.vue

@@ -4,18 +4,19 @@ import { useRoute, onBeforeRouteUpdate } from "vue-router";
 import { onBeforeMount, ref } from "vue";
 import Header from "./Header.vue";
 import Message from "./Message.vue";
+import { RoomType } from "@/store/models/model";
 
 const store = useStore();
 const route = useRoute();
 const id = ref(parseInt(route.params?.id));
+// let room;
 onBeforeMount(async () => {
-    console.log(id);
     // get data
-    let room = store.getters.room(id);
-    if (!room || room?.fetched === false) {
-        // todo
-        // await store.dispatch("fetchMessages", );
-    }
+    // room = store.getters.room(id);
+    // if (!room || room?.fetched === false) {
+    //     // todo
+    //     // await store.dispatch("fetchMessages", );
+    // }
     store.commit("setActiveRoom", id);
 });
 
@@ -23,9 +24,18 @@ 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);
     }
 });
+
+const shouldDisplayComposer = () => {
+    if (!id.value) return false;
+    const room = store.getters.room(id);
+    if (!room) return false;
+    return room.roomType === RoomType.THREAD || room.roomType === RoomType.GROUP;
+};
 </script>
 
 <template>
@@ -35,7 +45,8 @@ onBeforeRouteUpdate(async (to, from) => {
             <div class="content">
                 <Message v-for="(message, index) in store.getters.messages(id)" :key="index" :data="message" />
             </div>
-            <div id="composer">COMPOSER</div>
+            {{ room?.roomType }}
+            <div id="composer" v-if="shouldDisplayComposer()">COMPOSER</div>
         </div>
     </div>
 </template>
@@ -67,6 +78,6 @@ onBeforeRouteUpdate(async (to, from) => {
     display: flex;
     flex-direction: column-reverse;
     overflow: auto;
-    margin-bottom: 100px;
+    margin-bottom: 60px;
 }
 </style>