grimhilt/mail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

store message outside of room object

Browse Source
This commit is contained in:
grimhilt 2023-04-13 13:14:50 +02:00
parent 0b950ba7a7
commit 8cb1271f9a
4 changed files with 48 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/components/modals/AddAccountModal.vue
View File

@ -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">

3
front/src/store/models/model.ts
View File

@ -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[];
}

70
front/src/store/store.ts
View File

@ -33,30 +33,38 @@ 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);
// 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);
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 +200,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);
});
}

2
front/src/views/room/RoomView.vue
View File

@ -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"