mail/front/src/store/store.ts

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, LoadingState } from "./models/model";

interface RoomFromBack {
    id: number;
    roomName: string;
    roomType: RoomType;
    mailboxId: number;
    user: string;
    userId: number;
    // unseen: number;
    // todo thread
}

interface AccountFromBack {
    id: number;
    email: string;
}

function createRoom(options: RoomFromBack): Room {
    console.log(options.roomType);
    return {
        id: options.id,
        roomName: decodeEmojis(options.roomName),
        roomType: options.roomType,
        mailboxId: options.mailboxId,
        userId: options.userId,
        user: options.user,
        unseen: 0,
        messages: [],
        messageLoading: LoadingState.notLoaded,
        threads: [],
    };
}

export interface State {
    rooms: Room[];
    accounts: Account[];
    addresses: Address[];
    activeAccount: number;
    activeRoom: number;
}

// // 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 }],
        addresses: [],
        activeAccount: 0,
        activeRoom: 0,
    },
    mutations: {
        setactiveAccount(state, payload) {
            state.activeAccount = payload;
            const account = state.accounts.find((account) => account.id == payload);
            store.dispatch("fetchRooms", { accountId: payload, account: account });
        },
        setActiveRoom(state, payload) {
            state.activeRoom = payload;
            // 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) => {
                state.accounts.push({ id: account.id, email: account.email, fetched: false });
            });
        },
        addRooms(state, payload) {
            // todo add if not exist
            payload.rooms.forEach((room: RoomFromBack) => {
                state.rooms.push(createRoom(room));
            });
        },
        addMessages(state, payload) {
            // todo add if not exist
            const room = state.rooms.find((room) => room.id == payload.roomId);
            if (!room) return;
            payload.messages.forEach((message: Message) => {
                room.messages.push(message);
            });
        },
        addAddress(state, payload) {
            // todo add if not exist
            payload.addresses.forEach((address: Address) => {
                state.addresses.push(address);
            });
        },
    },
    getters: {
        rooms: (state) => (): Room[] => {
            if (state.activeAccount === 0) return state.rooms;
            return state.rooms.filter((room) => room.mailboxId == state.activeAccount);
        },
        room:
            (state) =>
            (roomId: number): Room | undefined => {
                const room = state.rooms.find((room) => room.id == roomId);
                return room;
            },
        address:
            (state) =>
            (addressId: number): Address | undefined => {
                const address = state.addresses.find((address) => address.id == addressId);
                return address;
            },
        messages:
            (state) =>
            (roomId: number): Message[] => {
                const room = state.rooms.find((room) => room.id == roomId);
                if (!room) return [];
                if (room.messageLoading === LoadingState.notLoaded) {
                    store.dispatch("fetchMessages", { roomId: room.id, room: room });
                }
                return room.messages;
            },
    },
    actions: {
        fetchAccounts: async (context) => {
            API.getAccounts()
                .then((res: AxiosResponse) => {
                    context.commit("addAccounts", res.data);
                })
                .catch((err: AxiosError) => {
                    console.log(err);
                });
        },
        fetchRooms: async (context, data) => {
            if (data.account?.fetched == false) {
                API.getRooms(data.accountId)
                    .then((res: AxiosResponse) => {
                        data.account.fetched = true;
                        context.commit("addRooms", { rooms: res.data });
                    })
                    .catch((err: AxiosError) => {
                        console.log(err);
                    });
            }
        },
        fetchMessages: async (context, data) => {
            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);
                    });
            }
        },
        fetchRoomMembers: async (context, data) => {
            API.getMembers(data.roomId)
                .then((res: AxiosResponse) => {
                    context.commit("addAddress", { addresses: res.data, roomId: data.roomId });
                })
                .catch((err: AxiosError) => {
                    console.log(err);
                });
        },
    },
});

export default store;