Move screen ranking and sorting logic to screen store

packages/client/src/components/ClientApp.svelte

@@ -3,7 +3,7 @@
   import { setContext, onMount } from "svelte"
   import { Layout, Heading, Body } from "@budibase/bbui"
   import ErrorSVG from "@budibase/frontend-core/assets/error.svg"
-  import { Constants, CookieUtils, RoleUtils } from "@budibase/frontend-core"
+  import { Constants, CookieUtils } from "@budibase/frontend-core"
   import Component from "./Component.svelte"
   import SDK from "sdk"
   import {
@@ -48,11 +48,16 @@
   $: {
     if (dataLoaded && $routeStore.routerLoaded && !$routeStore.activeRoute) {
       if ($screenStore.screens.length) {
-        // If we have some available screens, find the best route to push the
-        // user to initially
-        const route = getBestRoute($screenStore.screens)
+        // If we have some available screens, use the first screen which
+        // represents the best route based on rank
+        const route = $screenStore.screens[0].routing?.route
+        if (!route) {
+          permissionError = true
+          console.error("No route found but screens exist")
+        } else {
           permissionError = false
           routeStore.actions.navigate(route)
+        }
       } else if ($authStore) {
         // If the user is logged in but has no screens, they don't have
         // permission to use the app
@@ -67,40 +72,6 @@
     }
   }
 
-  // Assigns a rank to a potential screen route, preferring home screens
-  // and higher roles
-  const rankScreen = screen => {
-    const roleId = screen.routing.roleId
-    let rank = RoleUtils.getRolePriority(roleId)
-    if (screen.routing.homeScreen) {
-      rank += 100
-    }
-    return rank
-  }
-
-  // Determines the best route to push the user to initially from a set of
-  // available screens
-  const getBestRoute = screens => {
-    // Enrich and rank all screens, preferring all home screens
-    const enrichedScreens = screens?.map(screen => ({
-      ...screen,
-      rank: rankScreen(screen),
-    }))
-
-    // Sort ranked screens
-    const rankedScreens = enrichedScreens?.sort((a, b) => {
-      // First sort by rank
-      if (a.rank !== b.rank) {
-        return a.rank > b.rank ? -1 : 1
-      }
-      // Then sort alphabetically
-      return a.routing.route < b.routing.route ? -1 : 1
-    })
-
-    // Use the best ranking screen
-    return rankedScreens?.[0].routing?.route || "/"
-  }
-
   // Load app config
   onMount(async () => {
     await initialise()

packages/client/src/stores/screens.js

@@ -2,6 +2,7 @@ import { derived } from "svelte/store"
 import { routeStore } from "./routes"
 import { builderStore } from "./builder"
 import { appStore } from "./app"
+import { RoleUtils } from "@budibase/frontend-core"
 
 const createScreenStore = () => {
   const store = derived(
@@ -21,7 +22,7 @@ const createScreenStore = () => {
         }
       } else {
         // Find the correct screen by matching the current route
-        screens = $appStore.screens
+        screens = $appStore.screens || []
         if ($routeStore.activeRoute) {
           activeScreen = screens.find(
             screen => screen._id === $routeStore.activeRoute.screenId
@@ -39,6 +40,26 @@ const createScreenStore = () => {
         }
       }
 
+      // Assign ranks to screens, preferring higher roles and home screens
+      screens.forEach(screen => {
+        const roleId = screen.routing.roleId
+        let rank = RoleUtils.getRolePriority(roleId)
+        if (screen.routing.homeScreen) {
+          rank += 100
+        }
+        screen.rank = rank
+      })
+
+      // Sort screens so the best route is first
+      screens = screens.sort((a, b) => {
+        // First sort by rank
+        if (a.rank !== b.rank) {
+          return a.rank > b.rank ? -1 : 1
+        }
+        // Then sort alphabetically
+        return a.routing.route < b.routing.route ? -1 : 1
+      })
+
       // If we don't have a legacy custom layout, build a layout structure
       // from the screen navigation settings
       if (!activeLayout) {