fix for delete screens

packages/builder/src/builderStore/store/frontend.js

@@ -36,6 +36,7 @@ const INITIAL_FRONTEND_STATE = {
   hasAppPackage: false,
   libraries: null,
   appId: "",
+  routes: {},
 }
 
 export const getFrontendStore = () => {
@@ -120,6 +121,17 @@ export const getFrontendStore = () => {
         return state
       })
     },
+    routing: {
+      fetch: async () => {
+        const response = await api.get("/api/routing")
+        const json = await response.json()
+
+        store.update(state => {
+          state.routes = json.routes
+          return state
+        })
+      },
+    },
     screens: {
       select: screenId => {
         store.update(state => {

packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte

@@ -15,9 +15,10 @@
   const deleteScreen = () => {
     const screenToDelete = $allScreens.find(scr => scr._id === screen)
     store.actions.screens.delete(screenToDelete)
+    store.actions.routing.fetch()
     // update the page if required
     store.update(state => {
-      if (state.currentPreviewItem._id === screen._id) {
+      if (state.currentPreviewItem._id === screen) {
         store.actions.pages.select($store.currentPageName)
         notifier.success(`Screen ${screenToDelete.name} deleted successfully.`)
         $goto(`./:page/page-layout`)

packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte

@@ -2,12 +2,10 @@
   import { goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import PathTree from "./PathTree.svelte"
-
-  export let routes = {}
 </script>
 
 <div class="root">
-  {#each Object.keys(routes) as path}
-    <PathTree {path} route={routes[path]} />
+  {#each Object.keys($store.routes) as path}
+    <PathTree {path} route={$store.routes[path]} />
   {/each}
 </div>

packages/builder/src/components/userInterface/FrontendNavigatePane.svelte

@@ -12,15 +12,8 @@
 
   let routes = {}
 
-  async function fetchRoutes() {
-    const response = await api.get("/api/routing")
-    const json = await response.json()
-
-    routes = json.routes
-  }
-
   onMount(() => {
-    fetchRoutes()
+    store.actions.routing.fetch()
   })
 </script>
 
@@ -31,7 +24,7 @@
 <PagesList />
 <div class="nav-items-container">
   <PageLayout layout={$store.pages[$store.currentPageName]} />
-  <ComponentNavigationTree {routes} />
+  <ComponentNavigationTree />
 </div>
 <Modal bind:this={modal}>
   <NewScreenModal />

packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte

@@ -1,53 +0,0 @@
-<script>
-  import { goto } from "@sveltech/routify"
-  import { store } from "builderStore"
-  import { notifier } from "builderStore/store/notifications"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { DropdownMenu } from "@budibase/bbui"
-  import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
-
-  export let screen
-
-  let confirmDeleteDialog
-  let dropdown
-  let anchor
-
-  const deleteScreen = () => {
-    store.actions.screens.delete(screen, $store.currentPageName)
-    // update the page if required
-    store.update(state => {
-      if (state.currentPreviewItem._id === screen._id) {
-        store.actions.pages.select($store.currentPageName)
-        notifier.success(`Screen ${screen.name} deleted successfully.`)
-        $goto(`./:page/page-layout`)
-      }
-      return state
-    })
-  }
-</script>
-
-<div bind:this={anchor} on:click|stopPropagation>
-  <div class="icon" on:click={() => dropdown.show()}>
-    <i class="ri-more-line" />
-  </div>
-  <DropdownMenu bind:this={dropdown} {anchor} align="left">
-    <DropdownContainer>
-      <DropdownItem
-        icon="ri-delete-bin-line"
-        title="Delete"
-        on:click={() => confirmDeleteDialog.show()} />
-    </DropdownContainer>
-  </DropdownMenu>
-</div>
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  title="Confirm Deletion"
-  body={`Are you sure you wish to delete the screen '${screen.props._instanceName}' ?`}
-  okText="Delete Screen"
-  onOk={deleteScreen} />
-
-<style>
-  .icon i {
-    font-size: 16px;
-  }
-</style>