back/controllers/messages.ts

@@ -1,9 +1,8 @@
 import statusCode from "../utils/statusCodes";
 import { getMessages } from "../db/api";
 import logger from "../system/Logger";
-import { Response } from "express";
 
-export async function messages(body, res: Response) {
+export async function messages(body, res) {
     const { roomId } = body;
     getMessages(roomId).then((messages) => {
         res.status(statusCode.OK).json(messages);

back/db/api.ts

@@ -35,7 +35,6 @@ export async function getRooms(mailboxId) {
             address.email AS user,
             app_room.owner_id AS userId,
             app_room.notSeen,
-            app_room.room_type AS roomType,
             mailbox_message.mailbox_id AS mailboxId
             FROM app_room 
             INNER JOIN message
@@ -92,7 +91,7 @@ export async function getMessages(roomId) {
 
         WHERE msg.room_id = ?
         GROUP BY msg.message_id
-        ORDER BY message.idate DESC;
+        ORDER BY message.idate;
     `;
     const values = [roomId];
     return await execQueryAsync(query, values);

front/src/components/Badge.vue

@@ -1,45 +1,25 @@
 <template>
-    <span :class="['badge', type]" :style="{ backgroundColor: color }">
+    <div class="wrapper">
-        {{ value }}
+        <slot class="badge" name="body"> 0 </slot>
-    </span>
+    </div>
 </template>
 
-<script>
-export default {
-    props: {
-        value: {
-            type: [Number, String],
-            default: 0,
-        },
-        color: {
-            type: String,
-            default: "#007bff",
-        },
-        type: {
-            type: String,
-            default: "badge-primary",
-        },
-    },
-};
-</script>
-
 <style scoped>
+.wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #4d5970;
+    height: 1.6rem;
+    width: 1.6rem;
+    min-width: 1.6rem;
+    min-height: 1.6rem;
+    border-radius: 1.6rem;
+}
+
 .badge {
-    display: inline-block;
-    padding: 0.25em 0.4em;
-    font-size: 75%;
-    font-weight: 700;
-    /* line-height: 1; */
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: baseline;
-    border-radius: 0.25rem;
-}
-
-.badge-primary {
     color: #fff;
-    background-color: #007bff;
+    font-size: 1.1rem;
+    line-height: 1.4rem;
 }
-
-/* add more type classes for other types/colors */
 </style>

front/src/store/models/model.ts

@@ -1,13 +1,14 @@
+
 export enum RoomType {
     ROOM = 0,
     CHANNEL = 1,
     GROUP = 2,
     DM = 3,
     THREAD = 4,
-}
+};
 
 export interface Message {
-    todo: true;
+
 }
 
 export interface Room {

front/src/store/store.ts

@@ -1,5 +1,4 @@
 import API from "@/services/imapAPI";
-import { decodeEmojis } from "@/utils/string";
 import { createStore, Store } from "vuex";
 import { Room, Account, Address, RoomType, Message } from "./models/model";
 
@@ -20,10 +19,9 @@ interface AccountFromBack {
 }
 
 function createRoom(options: RoomFromBack): Room {
-    console.log(options.roomType);
     return {
         id: options.id,
-        roomName: decodeEmojis(options.roomName),
+        roomName: options.roomName,
         roomType: options.roomType,
         mailboxId: options.mailboxId,
         userId: options.userId,
@@ -93,19 +91,11 @@ const store = createStore<State>({
         },
     },
     getters: {
-        rooms: (state) => (): Room[] => {
+        rooms: (state) => () => {
             if (state.activeAccount === 0) return state.rooms;
             return state.rooms.filter((room) => room.mailboxId == state.activeAccount);
         },
-        room:
+        messages: (state) => (roomId: number) => {
-            (state) =>
-            (roomId: number): Room | undefined => {
-                const room = state.rooms.find((room) => room.id == roomId);
-                return room;
-            },
-        messages:
-            (state) =>
-            (roomId: number): Message[] => {
             const room = state.rooms.find((room) => room.id == roomId);
             if (!room) return [];
             if (!room.messagesFetched) {

front/src/utils/string.ts

@@ -1,5 +1,3 @@
-// todo optimize
-
 export function decodeEmojis(text: string): string {
     if (!text) return text;
     const regex = /\\u{([^}]+)}/g;

front/src/views/room/Header.vue

@@ -1,54 +1,22 @@
-<script setup lang="ts">
+<script setup>
-import store from "../../store/store";
+import { defineProps } from "vue";
-import { defineProps, ref, watch } from "vue";
+const props = defineProps({ room: Object });
-import Badge from "@/components/Badge.vue";
-import { RoomType } from "@/store/models/model";
-
-const props = defineProps({ id: Number });
-const room = ref(store.getters.room(props.id));
-
-watch(
-    () => props.id,
-    (newId) => {
-        room.value = store.getters.room(newId);
-    },
-);
-
-const roomTitle = () => {
-    const type = room.value?.roomType;
-    if (type === RoomType.DM || type == RoomType.CHANNEL || type == RoomType.ROOM) {
-        return room.value?.user;
-    }
-    return room.value?.roomName;
-};
 </script>
 
 <template>
     <div class="main">
-        <div class="infos">
+        <div>
-            <Badge :value="RoomType[room?.roomType]" />
+            {{ props }}
-            {{ roomTitle() }}
+            type: name / sender
         </div>
-        <div class="action">action: threads message important</div>
+        <div>action: threads message important</div>
     </div>
 </template>
 
 <style scoped>
 .main {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
     border-bottom: 1px solid #505050;
     width: 100%;
     height: 51px;
 }
-
-.infos {
-    margin-left: 15px;
-}
-
-.action {
-    margin-right: 15px;
-}
 </style>

front/src/views/room/RoomView.vue

@@ -1,17 +1,17 @@
 <script setup>
 import { useStore } from "vuex";
 import { useRoute, onBeforeRouteUpdate } from "vue-router";
-import { onBeforeMount, ref } from "vue";
+import { onBeforeMount } from "vue";
 import Header from "./Header.vue";
 import Message from "./Message.vue";
 
 const store = useStore();
 const route = useRoute();
-const id = ref(parseInt(route.params?.id));
+let { id } = route.params;
 onBeforeMount(async () => {
-    console.log(id);
     // get data
-    let room = store.getters.room(id);
+    let room = store.state.rooms.find((room) => room.id === id);
+    console.log(room);
     if (!room || room?.fetched === false) {
         // todo
         // await store.dispatch("fetchMessages", );
@@ -21,8 +21,7 @@ onBeforeMount(async () => {
 
 onBeforeRouteUpdate(async (to, from) => {
     if (to.params.id !== from.params.id) {
-        id.value = parseInt(to.params.id);
+        id = to.params.id;
-        console.log(id);
         store.commit("setActiveRoom", id);
     }
 });
@@ -30,7 +29,7 @@ onBeforeRouteUpdate(async (to, from) => {
 
 <template>
     <div id="main">
-        <Header :id="id"></Header>
+        <Header :room="room"></Header>
         <div id="RoomViewBody">
             <div class="content">
                 <Message v-for="(message, index) in store.getters.messages(id)" :key="index" :data="message" />
@@ -65,7 +64,7 @@ onBeforeRouteUpdate(async (to, from) => {
 
 .content {
     display: flex;
-    flex-direction: column-reverse;
+    flex-direction: column;
     overflow: auto;
     margin-bottom: 100px;
 }

front/src/views/sidebar/Sidebar.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
-        <Accounts class="accounts" />
+        <Accounts />
-        <Rooms class="rooms" />
+        <Rooms id="rooms" />
     </div>
 </template>
 
@@ -24,11 +24,9 @@ div {
     height: 100%;
 }
 
-.accounts {
+#rooms {
-    width: 82px;
+    max-width: 300px;
-}
+    min-width: 250px;
-.rooms {
-    width: 300px;
 }
 
 /* todo setup max size */

front/src/views/sidebar/rooms/Room.vue

@@ -5,6 +5,7 @@ import BaseAvatar from "../../avatars/BaseAvatar.vue";
 import Badge from "../../../components/Badge.vue";
 import ThreadList from "./threads/ThreadList.vue";
 import store from "@/store/store";
+import { decodeEmojis } from "@/utils/string";
 
 const props = defineProps({
     data: {
@@ -31,7 +32,7 @@ const router = useRouter();
             <BaseAvatar url="vue.png" />
             <div id="content">
                 <div id="sender">{{ props.data.user }}</div>
-                <div id="object">{{ props.data.roomName }}</div>
+                <div id="object">{{ decodeEmojis(props.data.roomName) }}</div>
             </div>
             <Badge class="badge" v-if="props.data.unseen > 0"
                 ><template v-slot:body>{{ props.data.unseen }}</template>

front/tsconfig.json

@@ -5,7 +5,6 @@
       "strict": true,
       "jsx": "preserve",
       "importHelpers": true,
-      "allowJs": true,
       "moduleResolution": "node",
       "skipLibCheck": true,
       "esModuleInterop": true,
@@ -20,7 +19,7 @@
       ],
       "paths": {
         "@/*": [
-          "src/*",
+          "src/*"
         ]
       },
       "lib": [