delete room when empty

front/src/components/structure/message/Options.vue

@@ -50,7 +50,11 @@ const deleteEverywhere = () => {
     deletionLoading.value = true;
     API.deleteEverywhere({ mailboxId: room.value?.mailboxId, messageId: props.msg?.id })
         .then((res) => {
+            // delete even if we delete the room after because the transition between room is not clean (todo)
             store.commit("removeMsg", { roomId: room.value?.id, messageId: props.msg?.id });
+            if (res.data?.deleteRoom) {
+                store.commit("removeRoom", { roomId: room.value?.id });
+            }
             deletionLoading.value = false;
         })
         .catch((err) => {

front/src/store/store.ts

@@ -132,6 +132,14 @@ const store = createStore<State>({
                 }
             });
         },
+        removeRoom(state, 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);
+            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);

front/src/views/sidebar/Sidebar.vue

@@ -1,3 +1,8 @@
+<script lang="ts" setup>
+import Accounts from "./accounts/Accounts.vue";
+import Rooms from "./rooms/Rooms.vue";
+</script>
+
 <template>
     <div>
         <Accounts class="accounts" />
@@ -5,19 +10,6 @@
     </div>
 </template>
 
-<script>
-import Accounts from "./accounts/Accounts";
-import Rooms from "./rooms/Rooms.vue";
-
-export default {
-    name: "Sidebar",
-    components: {
-        Accounts,
-        Rooms,
-    },
-};
-</script>
-
 <style scoped>
 div {
     display: flex;