From 99015ca67607a0578a2c3855170d08e67bfc7fcf Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 4 May 2020 10:32:25 +0200
Subject: [PATCH] adds working routing for clicking on components

---
 .../ComponentsHierarchyChildren.svelte              | 13 ++++++++++---
 .../src/components/userInterface/PageLayout.svelte  |  1 +
 .../src/components/userInterface/PagesList.svelte   |  2 +-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index 51301a32c..18f9ec7ea 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { goto } from "@sveltech/routify"
   import { store } from "builderStore"
   import { last } from "lodash/fp"
   import { pipe } from "../common/core"
@@ -17,7 +18,6 @@
   export let onMoveUpComponent
   export let onMoveDownComponent
   export let onCopyComponent
-  export let ids = []
 
   const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
   const get_name = s => (!s ? "" : last(s.split("/")))
@@ -31,14 +31,21 @@
     }
   }
 
-  const selectComponent = (ids, component) => {
+  const selectComponent = component => {
+    // Set current component
     store.selectComponent(component)
+
+    // Get ID path
+    const path = store.getPathToComponent(component)
+
+    // Go to correct URL
+    $goto(`./:page/:screen/${path}`)
   }
 </script>
 
 <ul>
   {#each components as component, index (component._id)}
-    <li on:click|stopPropagation={() => selectComponent(ids, component)}>
+    <li on:click|stopPropagation={() => selectComponent(component)}>
       <div
         class="budibase__nav-item item"
         class:selected={currentComponent === component}
diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte
index fb56e142b..4f55fcd99 100644
--- a/packages/builder/src/components/userInterface/PageLayout.svelte
+++ b/packages/builder/src/components/userInterface/PageLayout.svelte
@@ -71,6 +71,7 @@
 
   {#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children}
     <ComponentsHierarchyChildren
+      thisComponent={_layout.component.props}
       components={_layout.component.props._children}
       currentComponent={$store.currentComponentInfo}
       onDeleteComponent={confirmDeleteComponent}
diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte
index 33b93719a..562c81386 100644
--- a/packages/builder/src/components/userInterface/PagesList.svelte
+++ b/packages/builder/src/components/userInterface/PagesList.svelte
@@ -24,7 +24,7 @@
 
   const changePage = id => {
     store.setCurrentPage(id)
-    $goto(`./${id}`)
+    $goto(`./${id}/page-layout`)
   }
 </script>