load message in front
This commit is contained in:
13
front/src/store/models/Room.js
Normal file
13
front/src/store/models/Room.js
Normal file
@@ -0,0 +1,13 @@
|
||||
export default class Room {
|
||||
constructor(id, user, userId, roomName, mailboxId) {
|
||||
this.id = id;
|
||||
this.user = user;
|
||||
this.userId = userId;
|
||||
this.roomName = roomName;
|
||||
this.mailboxId = mailboxId;
|
||||
|
||||
this.messages = [];
|
||||
this.messagesFetched = false;
|
||||
this.threads = [];
|
||||
}
|
||||
}
|
||||
@@ -1,42 +1,19 @@
|
||||
import API from "@/services/imapAPI";
|
||||
import { createStore } from "vuex";
|
||||
import Room from "./models/Room";
|
||||
|
||||
const store = createStore({
|
||||
state() {
|
||||
return {
|
||||
rooms: [
|
||||
{
|
||||
id: 0,
|
||||
user: "clemnce",
|
||||
userId: 0,
|
||||
roomName: "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
|
||||
mailboxId: 1,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
user: "juliette",
|
||||
roomName: "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
|
||||
mailboxId: 1,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
user: "jean",
|
||||
roomName: "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
|
||||
mailboxId: 2,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
user: "luc",
|
||||
roomName: "Lorem magna minim cillum labore ex eiusmod proident excepteur sint irure ipsum.",
|
||||
mailboxId: 2,
|
||||
},
|
||||
],
|
||||
messages: [
|
||||
|
||||
new Room(1, "clemence", 0, "Est ex adipisicing non ipsum voluptate duis enim adipisicing labore.", 1),
|
||||
new Room(2, "laurance", 0, "Est ex adipisicing non ipsum voluptate duis enim adipisicing labore.", 2),
|
||||
new Room(3, "mathilde", 0, "Est ex adipisicing non ipsum voluptate duis enim adipisicing labore.", 1),
|
||||
],
|
||||
messages: [],
|
||||
mailboxes: [],
|
||||
activeMailbox: 0,
|
||||
activeRoom: 0
|
||||
activeRoom: 0,
|
||||
};
|
||||
},
|
||||
mutations: {
|
||||
@@ -48,16 +25,18 @@ const store = createStore({
|
||||
const mailbox = state.mailboxes.find((mailbox) => mailbox.id == payload);
|
||||
// todo fetched mailbox all
|
||||
if (mailbox?.fetched == false) {
|
||||
API.getRooms(payload).then((res) => {
|
||||
// todo add if not exist
|
||||
mailbox.fetched = true;
|
||||
res.data.forEach((room) => {
|
||||
room.fetched = false;
|
||||
state.rooms.push(room);
|
||||
API.getRooms(payload)
|
||||
.then((res) => {
|
||||
// todo add if not exist
|
||||
console.log(res.data)
|
||||
mailbox.fetched = true;
|
||||
res.data.forEach((room) => {
|
||||
state.rooms.push(new Room(room.id, room.user, room.userId, room.roomName, room.mailboxId));
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
});
|
||||
}
|
||||
},
|
||||
setActiveRoom(state, payload) {
|
||||
@@ -66,24 +45,35 @@ const store = createStore({
|
||||
// fetch messages for this room if not already fetched
|
||||
const room = state.rooms.find((room) => room.id == payload);
|
||||
if (!room || room?.fetched == false) {
|
||||
console.log("add messages")
|
||||
API.getMessages(payload).then((res) => {
|
||||
// todo add if not exist
|
||||
room.fetched = true;
|
||||
res.data.forEach((msg) => {
|
||||
state.messages.push(msg);
|
||||
console.log("add messages");
|
||||
API.getMessages(payload)
|
||||
.then((res) => {
|
||||
// todo add if not exist
|
||||
room.fetched = true;
|
||||
res.data.forEach((msg) => {
|
||||
state.messages.push(msg);
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
});
|
||||
}
|
||||
},
|
||||
addMailboxes(state, payload) {
|
||||
console.log(payload)
|
||||
payload.forEach((mailbox) => {
|
||||
mailbox.fetched = false;
|
||||
state.mailboxes.push(mailbox);
|
||||
});
|
||||
},
|
||||
addMessages(state, payload) {
|
||||
const room = state.rooms.find((room) => room.id == payload.roomId);
|
||||
payload.messages.forEach((message) => {
|
||||
room.messages.push(message);
|
||||
});
|
||||
room.messagesFetched = true;
|
||||
console.log(room.messages)
|
||||
},
|
||||
},
|
||||
getters: {
|
||||
rooms: (state) => () => {
|
||||
@@ -91,16 +81,16 @@ const store = createStore({
|
||||
return state.rooms.filter((room) => room.mailboxId == state.activeMailbox);
|
||||
},
|
||||
messages: (state) => (roomId) => {
|
||||
const room = state.rooms.find((room) => room.id === roomId);
|
||||
if (room?.fetched === false) {
|
||||
console.log("ok")
|
||||
const room = state.rooms.find((room) => room.id == roomId);
|
||||
if (!room.messagesFetched) {
|
||||
console.log("fetched Messages")
|
||||
store.dispatch("fetchMessages", { roomId: room.id });
|
||||
}
|
||||
return [1, 2];
|
||||
}
|
||||
return room.messages;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
async fetchMailboxes(context) {
|
||||
console.log("add mailboxes");
|
||||
fetchMailboxes: async (context) => {
|
||||
API.getMailboxes()
|
||||
.then((res) => {
|
||||
context.commit("addMailboxes", res.data);
|
||||
@@ -109,8 +99,15 @@ const store = createStore({
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
async fetchMessages(context) {
|
||||
console.log(context)
|
||||
fetchMessages: async (context, data) => {
|
||||
API.getMessages(data.roomId)
|
||||
.then((res) => {
|
||||
console.log(res.data)
|
||||
context.commit("addMessages", { messages: res.data, roomId: data.roomId });
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user