load message in page loading

README.md

@@ -1,28 +1,31 @@
 # TRIFORM
-*WORK IN PROGRESS*
+
+_WORK IN PROGRESS_
 
 TRIFORM (Threaded Rooms Interface For Organised Relational Mails) is a mail client which sorts mails into conversations based on the members present in each mails.
 
 ## Features
 
-- [x] Multi account
-- [x] Live syncing of mails
-- [x] Live syncing of flags
-- [x] Mark as read/unread
-- [ ] Attachments
-- [ ] Send new mails
-- [ ] Respond to mails
-- [ ] Delete mails
-- [ ] Live sync with the ui
+-   [x] Multi account (tested only with gmail)
+-   [x] Live syncing of mails
+-   [x] Live syncing of flags
+-   [x] Mark as read/unread
+-   [x] Flag important
+-   [ ] Attachments
+-   [ ] Send new mails
+-   [ ] Respond to mails
+-   [x] Delete mails
+-   [ ] Delete rooms
+-   [ ] Live sync with the ui
 
 ## Installation
 
 ## Definitions
 
-- Room: General space where messages are grouped.
-- Channel: Space use for newsletters or other conversations when there is a low need for reply.
-- Group: Space contening several users that are part of the conversation.
-- DM: Space defining a conversation with only one other member.
-- Thread: Sub-Space generally created when changing the number of member in a space.
+-   Room: General space where messages are grouped.
+-   Channel: Space use for newsletters or other conversations when there is a low need for reply.
+-   Group: Space contening several users that are part of the conversation.
+-   DM: Space defining a conversation with only one other member.
+-   Thread: Sub-Space generally created when changing the number of member in a space.
 
 ## Examples

front/README.md

@@ -1,24 +0,0 @@
-# mail
-
-## Project setup
-```
-yarn install
-```
-
-### Compiles and hot-reloads for development
-```
-yarn serve
-```
-
-### Compiles and minifies for production
-```
-yarn build
-```
-
-### Lints and fixes files
-```
-yarn lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).

front/src/store/store.ts

@@ -77,8 +77,6 @@ function updateSeen(state: State, roomId: number, flag: string[], adding: boolea
         }
     }
 }
-// define injection key todo
-// export const key: InjectionKey<Store<State>> = Symbol()
 
 const store = createStore<State>({
     state: {
@@ -96,9 +94,6 @@ const store = createStore<State>({
         },
         setActiveRoom(state, payload) {
             state.activeRoom = payload;
-            // todo load room on load page
-            const room = roomOnId(state, payload);
-            if (!room) return;
             let roomMessage = msgOnRoomId(state, payload);
             if (!roomMessage) {
                 state.roomMessages.push({ messages: [], fetch: LoadingState.notLoaded, roomId: payload });
@@ -115,7 +110,6 @@ const store = createStore<State>({
             });
         },
         addRooms(state, payload) {
-            // todo add if not exist
             const buffer: RoomFromBack[] = [];
             payload.rooms.forEach((room: RoomFromBack) => {
                 if (room.roomType == RoomType.THREAD) {
@@ -134,7 +128,6 @@ const store = createStore<State>({
             });
         },
         removeRoom(state, payload) {
-            console.log(payload);
             const roomMessageIndex = state.roomMessages.findIndex((roomM) => roomM.roomId === payload.roomId);
             state.roomMessages.splice(roomMessageIndex, 1);
             const roomIndex = state.rooms.findIndex((room) => room.id === payload.roomId);
@@ -147,21 +140,18 @@ const store = createStore<State>({
                     parentRoom.threadIds = parentRoom?.threadIds.filter((id) => id !== roomToDelete.id);
                 }
             }
+            // todo fix to many at the same time bug
             state.rooms.splice(roomIndex, 1);
             // state.activeRoom = state.rooms[0].id;
             // router.push(`/${state.activeRoom}`);
         },
         addMessages(state, payload) {
-            // 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(",") ?? [];
                 roomMessage?.messages.push(message);
@@ -225,9 +215,14 @@ const store = createStore<State>({
         messages:
             (state) =>
             (roomId: number): Message[] => {
+                if (!roomId) return [];
                 const roomMessage = msgOnRoomId(state, roomId);
-                if (roomMessage) return roomMessage.messages;
-                state.roomMessages.push({ messages: [], roomId: roomId, fetch: LoadingState.notLoaded });
+                if (roomMessage && roomMessage.fetch === LoadingState.loaded) return roomMessage.messages;
+                if (!roomMessage) {
+                    state.roomMessages.push({ messages: [], roomId: roomId, fetch: LoadingState.notLoaded });
+                } else if (roomMessage.fetch === LoadingState.loaded) {
+                    return roomMessage.messages;
+                }
                 store.dispatch("fetchMessages", { roomId: roomId, obj: msgOnRoomId(state, roomId) });
                 return msgOnRoomId(state, roomId)?.messages ?? [];
             },

front/src/views/room/RoomView.vue

@@ -17,10 +17,10 @@ const id = ref(parseInt(route.params.id));
 let room = ref();
 
 onBeforeMount(async () => {
+    console.log(id.value);
     store.commit("setActiveRoom", id.value);
     room.value = store.getters.room(id.value);
-    messages.value = store.getters.messages(room.value?.id);
-    console.log(room.value);
+    messages.value = store.getters.messages(id.value);
 });
 
 onBeforeRouteUpdate(async (to, from) => {
@@ -28,9 +28,7 @@ onBeforeRouteUpdate(async (to, from) => {
         id.value = parseInt(to.params.id);
         store.commit("setActiveRoom", id.value);
         room.value = await store.getters.room(id.value);
-        messages.value = store.getters.messages(room.value?.id);
-
-        console.log(room.value);
+        messages.value = store.getters.messages(id.value);
     }
 });