cut over to new frontend store

packages/builder/src/builderStore/index.js

@@ -1,12 +1,12 @@
-import { getStore } from "./store"
+// import { getStore } from "./store"
-// import { getFrontendStore } from "./store/frontend"
+import { getFrontendStore } from "./store/frontend"
 import { getBackendUiStore } from "./store/backend"
 import { getAutomationStore } from "./store/automation/"
 import { getThemeStore } from "./store/theme"
 import analytics from "analytics"
 
-export const store = getStore()
+// export const store = getStore()
-// export const store = getFrontendStore()
+export const store = getFrontendStore()
 export const backendUiStore = getBackendUiStore()
 export const automationStore = getAutomationStore()
 export const themeStore = getThemeStore()

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

@@ -82,11 +82,11 @@ export const getFrontendStore = () => {
             screens: page._screens,
           })
         }
+      }
+
       pkg.justCreated = false
 
-        const components = await fetchComponentLibDefinitions(
+      const components = await fetchComponentLibDefinitions(pkg.application._id)
-          pkg.application._id
-        )
 
       store.update(state => ({
         ...state,
@@ -106,9 +106,7 @@ export const getFrontendStore = () => {
       }))
 
       await backendUiStore.actions.database.select(pkg.application.instance)
-      }
     },
-    // store.setScreenType
     selectPageOrScreen: type => {
       store.update(state => {
         state.currentFrontEndType = type
@@ -241,6 +239,7 @@ export const getFrontendStore = () => {
           ? store.actions.pages.save()
           : store.actions.screens.save(state.currentPreviewItem)
       },
+    },
     pages: {
       select: pageName => {
         store.update(state => {
@@ -254,6 +253,11 @@ export const getFrontendStore = () => {
           state.screens = Array.isArray(current_screens)
             ? current_screens
             : Object.values(current_screens)
+
+          // This is the root of many problems.
+          // Uncaught (in promise) TypeError: Cannot read property '_component' of undefined
+          // it appears that the currentPage sometimes has _props instead of props
+          // why
           const safeProps = makePropsSafe(
             state.components[currentPage.props._component],
             currentPage.props
@@ -478,6 +482,7 @@ export const getFrontendStore = () => {
         return path
       },
     },
-    },
   }
+
+  return store
 }

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

@@ -53,21 +53,21 @@ export const getStore = () => {
   store.setPackage = setPackage(store, initial)
 
   store.saveScreen = saveScreen(store)
-  store.setCurrentScreen = setCurrentScreen(store)
+  store.actions.screens.select = setCurrentScreen(store)
-  store.deleteScreens = deleteScreens(store)
+  store.store.actions.screens.delete = store.actions.screens.delete(store)
-  store.setCurrentPage = setCurrentPage(store)
+  store.actions.pages.select = setCurrentPage(store)
   store.createLink = createLink(store)
   store.createScreen = createScreen(store)
   // store.savePage = savePage(store)
   store.addChildComponent = addChildComponent(store)
-  store.selectComponent = selectComponent(store)
+  store.actions.components.select = selectComponent(store)
   store.setComponentProp = setComponentProp(store)
   store.setPageOrScreenProp = setPageOrScreenProp(store)
-  store.setComponentStyle = setComponentStyle(store)
+  store.actions.components.updateStyle = setComponentStyle(store)
-  store.setScreenType = setScreenType(store)
+  store.actions.selectPageOrScreen = setScreenType(store)
-  store.getPathToComponent = getPathToComponent(store)
+  store.actions.components.findRoute = getPathToComponent(store)
-  store.pasteComponent = pasteComponent(store)
+  store.actions.components.paste = pasteComponent(store)
-  store.storeComponentForCopy = storeComponentForCopy(store)
+  store.actions.components.copy = storeComponentForCopy(store)
   return store
 }
 
@@ -251,7 +251,7 @@ const setCurrentScreen = store => screenName => {
   })
 }
 
-const deleteScreens = store => (screens, pageName = null) => {
+const store.actions.screens.delete = store => (screens, pageName = null) => {
   if (!(screens instanceof Array)) {
     screens = [screens]
   }

packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte

@@ -39,7 +39,7 @@
 
   async function deleteTable() {
     await backendUiStore.actions.tables.delete(table)
-    store.deleteScreens(templateScreens)
+    store.store.actions.screens.delete(templateScreens)
     await backendUiStore.actions.tables.fetch()
     notifier.success("Table deleted")
     hideEditor()

packages/builder/src/components/start/CreateAppModal.svelte

@@ -154,7 +154,7 @@
       if (applicationPkg.ok) {
         backendUiStore.actions.reset()
         pkg.justCreated = true
-        await store.setPackage(pkg)
+        await store.actions.initialise(pkg)
         automationStore.actions.fetch()
       } else {
         throw new Error(pkg)

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

@@ -25,8 +25,8 @@
   }
 
   const selectComponent = component => {
-    store.selectComponent(component)
+    store.actions.components.select(component)
-    const path = store.getPathToComponent(component)
+    const path = store.actions.components.findRoute(component)
     $goto(`./:page/:screen/${path}`)
   }
 
@@ -89,17 +89,19 @@
 
   const storeComponentForCopy = (cut = false) => {
     // lives in store - also used by drag drop
-    store.storeComponentForCopy(component, cut)
+    store.actions.components.copy(component, cut)
   }
 
   const pasteComponent = mode => {
     // lives in store - also used by drag drop
-    store.pasteComponent(component, mode)
+    store.actions.components.paste(component, mode)
   }
 </script>
 
 <div bind:this={anchor} on:click|stopPropagation>
-  <div class="icon" on:click={dropdown.show}><i class="ri-more-line" /></div>
+  <div class="icon" on:click={dropdown.show}>
+    <i class="ri-more-line" />
+  </div>
   <DropdownMenu bind:this={dropdown} width="170px" {anchor} align="left">
     <DropdownContainer on:click={hideDropdown}>
       <DropdownItem

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

@@ -27,7 +27,7 @@
     componentPropDefinition.properties &&
     componentPropDefinition.properties[selectedCategory.value]
 
-  const onStyleChanged = store.setComponentStyle
+  const onStyleChanged = store.actions.components.updateStyle
 
   $: isComponentOrScreen =
     $store.currentView === "component" ||
@@ -81,7 +81,7 @@
       {componentDefinition}
       {panelDefinition}
       displayNameField={displayName}
-      onChange={store.setComponentProp}
+      onChange={store.actions.components.updateProp}
       onScreenPropChange={store.setPageOrScreenProp}
       screenOrPageInstance={$store.currentView !== 'component' && $store.currentPreviewItem} />
   {/if}

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

@@ -25,8 +25,8 @@
   }
 
   const onComponentChosen = component => {
-    store.addChildComponent(component._component, component.presetProps)
+    store.actions.components.create(component._component, component.presetProps)
-    const path = store.getPathToComponent($store.currentComponentInfo)
+    const path = store.actions.components.findRoute($store.currentComponentInfo)
     $goto(`./:page/:screen/${path}`)
     close()
   }
@@ -39,9 +39,13 @@
       class="category"
       on:click={() => onCategoryChosen(category, idx)}
       class:active={idx === selectedIndex}>
-      {#if category.icon}<i class={category.icon} />{/if}
+      {#if category.icon}
+        <i class={category.icon} />
+      {/if}
       <span>{category.name}</span>
-      {#if category.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
+      {#if category.isCategory}
+        <i class="ri-arrow-down-s-line arrow" />
+      {/if}
     </div>
   {/each}
 </div>

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

@@ -24,15 +24,18 @@
   let componentToDelete = ""
 
   const normalizedName = name =>
-    pipe(name, [
+    pipe(
+      name,
+      [
         trimCharsStart("./"),
         trimCharsStart("~/"),
         trimCharsStart("../"),
         trimChars(" "),
-    ])
+      ]
+    )
 
   const changeScreen = screen => {
-    store.setCurrentScreen(screen.props._instanceName)
+    store.actions.screens.select(screen.props._instanceName)
     $goto(`./:page/${screen.props._instanceName}`)
   }
 </script>

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

@@ -35,15 +35,19 @@
 
   const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
   const get_name = s => (!s ? "" : last(s.split("/")))
-  const get_capitalised_name = name => pipe(name, [get_name, capitalise])
+  const get_capitalised_name = name =>
+    pipe(
+      name,
+      [get_name, capitalise]
+    )
   const isScreenslot = name => name === "##builtin/screenslot"
 
   const selectComponent = component => {
     // Set current component
-    store.selectComponent(component)
+    store.actions.components.select(component)
 
     // Get ID path
-    const path = store.getPathToComponent(component)
+    const path = store.actions.components.findRoute(component)
 
     // Go to correct URL
     $goto(`./:page/:screen/${path}`)
@@ -96,8 +100,8 @@
 
   const drop = () => {
     if ($dragDropStore.targetComponent !== $dragDropStore.componentToDrop) {
-      store.storeComponentForCopy($dragDropStore.componentToDrop, true)
+      store.actions.components.copy($dragDropStore.componentToDrop, true)
-      store.pasteComponent(
+      store.actions.components.paste(
         $dragDropStore.targetComponent,
         $dragDropStore.dropPosition
       )

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

@@ -22,7 +22,7 @@
   }
 
   const setCurrentScreenToLayout = () => {
-    store.setScreenType("page")
+    store.actions.selectPageOrScreen("page")
     $goto("./:page/page-layout")
   }
 </script>

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

@@ -2,8 +2,8 @@
   import { params, goto } from "@sveltech/routify"
   import { store } from "builderStore"
 
-  const getPage = (s, name) => {
+  const getPage = (state, name) => {
-    const props = s.pages[name]
+    const props = state.pages[name]
     return { name, props }
   }
 
@@ -18,11 +18,12 @@
     },
   ]
 
+  console.log(store)
   if (!$store.currentPageName)
-    store.setCurrentPage($params.page ? $params.page : "main")
+    store.actions.pages.select($params.page ? $params.page : "main")
 
   const changePage = id => {
-    store.setCurrentPage(id)
+    store.actions.pages.select(id)
     $goto(`./${id}/page-layout`)
   }
 </script>

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

@@ -13,11 +13,11 @@
   let anchor
 
   const deleteScreen = () => {
-    store.deleteScreens(screen, $store.currentPageName)
+    store.actions.screens.delete(screen, $store.currentPageName)
     // update the page if required
     store.update(state => {
       if (state.currentPreviewItem.name === screen.name) {
-        store.setCurrentPage($store.currentPageName)
+        store.actions.pages.select($store.currentPageName)
         notifier.success(`Screen ${screen.name} deleted successfully.`)
         $goto(`./:page/page-layout`)
       }

packages/builder/src/components/userInterface/pagesParsing/createProps.js

@@ -59,6 +59,11 @@ export const createProps = (componentDefinition, derivedFromProps) => {
 }
 
 export const makePropsSafe = (componentDefinition, props) => {
+  if (!componentDefinition) {
+    console.error(
+      "No component definition passed to makePropsSafe. Please check the component definition is being passed correctly."
+    )
+  }
   const safeProps = createProps(componentDefinition, props).props
   for (let propName in safeProps) {
     props[propName] = safeProps[propName]

packages/builder/src/components/userInterface/pagesParsing/searchComponents.js

@@ -29,10 +29,9 @@ export const searchAllComponents = (components, phrase) => {
 }
 
 export const getExactComponent = (components, name, isScreen = false) => {
-  return components.find(comp => {
+  return components.find(comp =>
-    const { props, _instanceName } = comp
+    isScreen ? comp.props._instanceName === name : comp._instanceName === name
-    return name === isScreen ? props._instanceName : _instanceName
+  )
-  })
 }
 
 export const getAncestorProps = (components, name, found = []) => {

packages/builder/src/constants/index.js

@@ -1,19 +1,15 @@
 export const DEFAULT_PAGES_OBJECT = {
   main: {
-    _props: {},
+    props: {
-    _screens: {},
+      _component: "@budibase/standard-components/container",
-    index: {
-      _component: "./components/indexHtml",
     },
-    appBody: "bbapp.main.json",
+    _screens: {},
   },
   unauthenticated: {
-    _props: {},
+    props: {
-    _screens: {},
+      _component: "@budibase/standard-components/container",
-    index: {
-      _component: "./components/indexHtml",
     },
-    appBody: "bbapp.unauthenticated.json",
+    _screens: {},
   },
   componentLibraries: [],
   stylesheets: [],

packages/builder/src/pages/[application]/_reset.svelte

@@ -18,7 +18,7 @@
 
     if (res.ok) {
       backendUiStore.actions.reset()
-      await store.setPackage(pkg)
+      await store.actions.initialise(pkg)
       await automationStore.actions.fetch()
       return pkg
     } else {

packages/builder/src/pages/[application]/automate/[automation]/_layout.svelte

@@ -1,4 +1,4 @@
 <script>
   import { params } from "@sveltech/routify"
-  store.setCurrentPage($params.page)
+  store.actions.pages.select($params.page)
 </script>

packages/builder/src/pages/[application]/design/[page]/[screen]/_layout.svelte

@@ -16,11 +16,11 @@
 
     if (!validScreen) {
       // Go to main layout if URL set to invalid screen
-      store.setCurrentPage("main")
+      store.actions.pages.select("main")
       $goto("../../main")
     } else {
       // Otherwise proceed to set screen
-      store.setCurrentScreen(currentScreenName)
+      store.actions.screens.select(currentScreenName)
 
       // There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
       if ($leftover) {
@@ -35,7 +35,7 @@
     }
   } else {
     // It's a page, so set the screentype to page.
-    store.setScreenType("page")
+    store.actions.selectPageOrScreen("page")
 
     // There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
     if ($leftover) {
@@ -64,7 +64,7 @@
     })
 
     // Select Component!
-    if (componentToSelect) store.selectComponent(componentToSelect)
+    if (componentToSelect) store.actions.components.select(componentToSelect)
   }
 </script>
 

packages/builder/src/pages/[application]/design/[page]/_layout.svelte

@@ -2,7 +2,7 @@
   import { params } from "@sveltech/routify"
   import { store } from "builderStore"
 
-  store.setCurrentPage($params.page)
+  store.actions.pages.select($params.page)
 </script>
 
 <slot />

packages/server/src/api/routes/pages.old.js

@@ -6,7 +6,6 @@ const {
   listScreens,
   saveScreen,
   buildPage,
-  renameScreen,
   deleteScreen,
 } = require("../../utilities/builder")
 const authorized = require("../../middleware/authorized")

packages/server/src/utilities/builder/listScreens.js

@@ -3,46 +3,46 @@ const { join } = require("../centralPath")
 const { keyBy } = require("lodash/fp")
 const { budibaseAppsDir } = require("../budibaseDir")
 
-module.exports = async (appId, pagename) => {
+// module.exports = async (appId, pagename) => {
-  const appPath = join(budibaseAppsDir(), appId)
+//   const appPath = join(budibaseAppsDir(), appId)
-  return keyBy("name")(await fetchscreens(appPath, pagename))
+//   return keyBy("name")(await fetchscreens(appPath, pagename))
-}
+// }
 
-const fetchscreens = async (appPath, pagename, relativePath = "") => {
+// const fetchscreens = async (appPath, pagename, relativePath = "") => {
-  const currentDir = join(appPath, "pages", pagename, "screens", relativePath)
+//   const currentDir = join(appPath, "pages", pagename, "screens", relativePath)
 
-  const contents = await readdir(currentDir)
+//   const contents = await readdir(currentDir)
 
-  const screens = []
+//   const screens = []
 
-  for (let item of contents) {
+//   for (let item of contents) {
-    const itemRelativePath = join(relativePath, item)
+//     const itemRelativePath = join(relativePath, item)
-    const itemFullPath = join(currentDir, item)
+//     const itemFullPath = join(currentDir, item)
-    const stats = await stat(itemFullPath)
+//     const stats = await stat(itemFullPath)
 
-    if (stats.isFile()) {
+//     if (stats.isFile()) {
-      if (!item.endsWith(".json")) continue
+//       if (!item.endsWith(".json")) continue
 
-      const component = await readJSON(itemFullPath)
+//       const component = await readJSON(itemFullPath)
 
-      component.name = itemRelativePath
+//       component.name = itemRelativePath
-        .substring(0, itemRelativePath.length - 5)
+//         .substring(0, itemRelativePath.length - 5)
-        .replace(/\\/g, "/")
+//         .replace(/\\/g, "/")
 
-      component.props = component.props || {}
+//       component.props = component.props || {}
 
-      screens.push(component)
+//       screens.push(component)
-    } else {
+//     } else {
-      const childComponents = await fetchscreens(
+//       const childComponents = await fetchscreens(
-        appPath,
+//         appPath,
-        join(relativePath, item)
+//         join(relativePath, item)
-      )
+//       )
 
-      for (let c of childComponents) {
+//       for (let c of childComponents) {
-        screens.push(c)
+//         screens.push(c)
-      }
+//       }
-    }
+//     }
-  }
+//   }
 
-  return screens
+//   return screens
-}
+// }