tidy up

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

@@ -215,6 +215,7 @@ export const getFrontendStore = () => {
             currentPage._screens = currentPage._screens.filter(
               scr => scr._id !== screenToDelete._id
             )
+
             deletePromise = api.delete(
               `/api/screens/${screenToDelete._id}/${screenToDelete._rev}`
             )

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

@@ -27,22 +27,21 @@
   icon="ri-route-line"
   text={path}
   opened={true}
-  withArrow={route.subpaths}
+  withArrow={route.subpaths} />
-  on:click={() => console.log(route)} />
 
-{#each Object.keys(route.subpaths) as subpath}
+{#each Object.entries(route.subpaths) as [url, subpath]}
-  {#each Object.keys(route.subpaths[subpath].screens) as screen}
+  {#each Object.values(subpath.screens) as screenId}
     <NavItem
       icon="ri-artboard-2-line"
       indentLevel={indent || 1}
-      selected={$store.currentPreviewItem._id === route.subpaths[subpath].screens[screen]}
+      selected={$store.currentPreviewItem._id === screenId}
-      opened={$store.currentPreviewItem._id === route.subpaths[subpath].screens[screen]}
+      opened={$store.currentPreviewItem._id === screenId}
-      text={subpath}
+      text={url}
       withArrow={route.subpaths}
-      on:click={() => changeScreen(route.subpaths[subpath].screens[screen])}>
+      on:click={() => changeScreen(screenId)}>
-      <ScreenDropdownMenu screen={route.subpaths[subpath].screens[screen]} />
+      <ScreenDropdownMenu screen={screenId} />
     </NavItem>
-    {#if selectedScreen?._id === route.subpaths[subpath].screens[screen]}
+    {#if selectedScreen?._id === screenId}
       <ComponentsTree
         components={selectedScreen.props._children}
         currentComponent={$store.currentComponentInfo}

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

@@ -2,7 +2,7 @@
   import { onMount } from "svelte"
   import { store, currentScreens } from "builderStore"
   import api from "builderStore/api"
-  import ComponentsHierarchy from "components/userInterface/ComponentNavigationTree/index.svelte"
+  import ComponentNavigationTree from "components/userInterface/ComponentNavigationTree/index.svelte"
   import PageLayout from "components/userInterface/PageLayout.svelte"
   import PagesList from "components/userInterface/PagesList.svelte"
   import NewScreenModal from "components/userInterface/NewScreenModal.svelte"
@@ -13,12 +13,9 @@
   let routes = {}
 
   async function fetchRoutes() {
-    // fetch the routing stuff here
     const response = await api.get("/api/routing")
     const json = await response.json()
 
-    console.log(json)
-
     routes = json.routes
   }
 
@@ -34,7 +31,7 @@
 <PagesList />
 <div class="nav-items-container">
   <PageLayout layout={$store.pages[$store.currentPageName]} />
-  <ComponentsHierarchy {routes} />
+  <ComponentNavigationTree {routes} />
 </div>
 <Modal bind:this={modal}>
   <NewScreenModal />

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

@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@sveltech/routify"
-  import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
+  import ComponentTree from "./ComponentNavigationTree/ComponentTree.svelte"
   import NavItem from "components/common/NavItem.svelte"
   import { last } from "lodash/fp"
   import { store } from "builderStore"
@@ -37,8 +37,7 @@
   on:click={setCurrentScreenToLayout} />
 
 {#if $store.currentPreviewItem?.name === _layout.title && _layout.component.props._children}
-  <ComponentsHierarchyChildren
+  <ComponentTree
-    thisComponent={_layout.component.props}
     components={_layout.component.props._children}
     currentComponent={$store.currentComponentInfo}
     {dragDropStore} />