From 6bc9c86623230ace7e08576a5c427cccc3f1bd36 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 19 Nov 2020 21:07:25 +0000
Subject: [PATCH] fix for delete screens

---
 .../src/builderStore/store/frontend.js        | 12 +++++
 .../ScreenDropdownMenu.svelte                 |  3 +-
 .../ComponentNavigationTree/index.svelte      |  6 +--
 .../userInterface/FrontendNavigatePane.svelte | 11 +---
 .../userInterface/ScreenDropdownMenu.svelte   | 53 -------------------
 5 files changed, 18 insertions(+), 67 deletions(-)
 delete mode 100644 packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 9d9e2f83e6..778c7f7be5 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/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 => {
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte
index bd7341be93..3ecd8ce0dc 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte
+++ b/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`)
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte
index ef783b1afd..dbdfad0828 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte
+++ b/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>
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
index 7f8630330d..90d03e16a2 100644
--- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
+++ b/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 />
diff --git a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
deleted file mode 100644
index 74f4654ce3..0000000000
--- a/packages/builder/src/components/userInterface/ScreenDropdownMenu.svelte
+++ /dev/null
@@ -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>