refactor: move room property logic to component, away from router

Will also handle the not found case in a different way, showing in the UI a not found message rather than erroring out.
prose-im · Oct 18, 2023 · 8a45f0d · 8a45f0d
1 parent 159078a
commit 8a45f0d
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 40 deletions.
diff --git a/src/components/inbox/InboxMessaging.vue b/src/components/inbox/InboxMessaging.vue
@@ -252,7 +252,7 @@ export default {
       immediate: true,
 
       handler(newValue: Room, oldValue: Room) {
-        if (newValue && (!oldValue || newValue.id != oldValue.id)) {
+        if (newValue && (!oldValue || newValue.id !== oldValue.id)) {
           // Mark as stale
           this.isMessageSyncStale = true;
 

diff --git a/src/components/inbox/InboxUserinfoInformation.vue b/src/components/inbox/InboxUserinfoInformation.vue
@@ -118,7 +118,7 @@ export default {
 
         if (this.profile.information.lastActive) {
           const activePrefix =
-            this.availability != Availability.Unavailable
+            this.availability !== Availability.Unavailable
               ? "Active"
               : "Last seen";
 

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -15,7 +15,7 @@ import {
   createRouter,
   createWebHistory
 } from "vue-router";
-import init, { JID, RoomID } from "@prose-im/prose-sdk-js";
+import init, { JID } from "@prose-im/prose-sdk-js";
 
 // PROJECT: VIEWS
 import AppBase from "@/views/app/AppBase.vue";
@@ -29,9 +29,6 @@ import Store from "@/store";
 // PROJECT: BROKER
 import Broker from "@/broker";
 
-// PROJECT: UTILITIES
-import logger from "@/utilities/logger";
-
 /**************************************************************************
  * ENUMERATIONS
  * ************************************************************************* */
@@ -110,30 +107,6 @@ class Router {
               name: "app.inbox",
               component: AppInboxBase,
 
-              props: route => {
-                const room = Store.$muc.getRoomByID(
-                  route.params.roomId as RoomID
-                );
-
-                if (!room) {
-                  const availableRooms = Store.$muc.getAvailableRoomIDs();
-
-                  let errorMessage = `Room not found '${route.params.roomId}'.`;
-
-                  if (availableRooms.length == 0) {
-                    errorMessage += " There are no rooms available.";
-                  } else {
-                    errorMessage += ` Available rooms are ${availableRooms.join(
-                      ", "
-                    )}`;
-                  }
-
-                  logger.error(errorMessage);
-                }
-
-                return { room: room };
-              },
-
               beforeEnter: (to, from, next) => {
                 Broker.client
                   .awaitConnection()

diff --git a/src/views/app/inbox/AppInboxBase.vue b/src/views/app/inbox/AppInboxBase.vue
@@ -43,8 +43,7 @@
 
 <script lang="ts">
 // NPM
-import { JID, Room } from "@prose-im/prose-sdk-js";
-import { PropType } from "vue";
+import { JID, Room, RoomID } from "@prose-im/prose-sdk-js";
 
 // PROJECT: STORES
 import Store from "@/store";
@@ -69,16 +68,18 @@ export default {
     InboxForm
   },
 
-  props: {
-    room: {
-      type: Object as PropType<Room>,
-      required: true
-    }
-  },
-
   computed: {
     jid(): JID {
-      return new JID(this.$route.params.roomId as string);
+      return new JID(this.roomId as string);
+    },
+
+    roomId(): RoomID {
+      return this.$route.params.roomId as RoomID;
+    },
+
+    room(): Room | void {
+      // TODO: handle case of room not found (show placeholder data)
+      return Store.$muc.getRoomByID(this.roomId);
     },
 
     layout(): typeof Store.$layout {