Refactoring to replace the use of frontend store.screens with derived allScreens and currentScreens.

packages/builder/src/builderStore/getNewComponentName.js

@@ -1,5 +1,7 @@
 import { walkProps } from "./storeUtils"
 import { get_capitalised_name } from "../helpers"
+import { get } from "svelte/store"
+import { allScreens } from "builderStore"
 
 export default function(component, state) {
   const capitalised = get_capitalised_name(
@@ -25,7 +27,7 @@ export default function(component, state) {
     findMatches(state.currentPreviewItem.props)
   } else {
     // viewing master page - need to find against all screens
-    for (let screen of state.screens) {
+    for (let screen of get(allScreens)) {
       findMatches(screen.props)
     }
   }

packages/builder/src/builderStore/index.js

@@ -1,16 +1,34 @@
-// import { getStore } from "./store"
 import { getFrontendStore } from "./store/frontend"
 import { getBackendUiStore } from "./store/backend"
 import { getAutomationStore } from "./store/automation/"
 import { getThemeStore } from "./store/theme"
+import { derived } from "svelte/store"
 import analytics from "analytics"
 
-// export const store = getStore()
 export const store = getFrontendStore()
 export const backendUiStore = getBackendUiStore()
 export const automationStore = getAutomationStore()
 export const themeStore = getThemeStore()
 
+export const allScreens = derived(store, $store => {
+  let screens = []
+  if ($store.pages == null) {
+    return screens
+  }
+  for (let page of Object.values($store.pages)) {
+    screens = screens.concat(page._screens)
+  }
+  return screens
+})
+
+export const currentScreens = derived(store, $store => {
+  const currentScreens = $store.pages[$store.currentPageName]?._screens
+  if (currentScreens == null) {
+    return []
+  }
+  return Array.isArray(currentScreens) ? currentScreens : Object.values(currentScreens)
+})
+
 export const initialise = async () => {
   try {
     await analytics.activate()

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

@@ -1,4 +1,4 @@
-import { writable, get, derived } from "svelte/store"
+import { writable, get } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
 import {
   createProps,
@@ -6,7 +6,7 @@ import {
   getBuiltin,
 } from "components/userInterface/pagesParsing/createProps"
 import { getExactComponent } from "components/userInterface/pagesParsing/searchComponents"
-import { backendUiStore } from "builderStore"
+import { backendUiStore, allScreens } from "builderStore"
 import { generate_screen_css } from "../generate_css"
 import { fetchComponentLibDefinitions } from "../loadComponentLibraries"
 import api from "../api"
@@ -41,16 +41,6 @@ const INITIAL_FRONTEND_STATE = {
 export const getFrontendStore = () => {
   const store = writable({ ...INITIAL_FRONTEND_STATE })
 
-  store.allScreens = derived(store.pages, $pages => {
-    let screens = []
-    if ($pages) {
-      for (let page of Object.values($pages)) {
-        screens = screens.concat(page._screens)
-      }
-    }
-    return screens
-  })
-
   store.actions = {
     // TODO: REFACTOR
     initialise: async pkg => {
@@ -110,10 +100,7 @@ export const getFrontendStore = () => {
         appId: pkg.application._id,
         pages: pkg.pages,
         hasAppPackage: true,
-        screens: [
-          ...Object.values(mainScreens),
-          ...Object.values(unauthScreens),
-        ],
+        currentScreens: [],
         builtins: [getBuiltin("##builtin/screenslot")],
         appInstance: pkg.application.instance,
       }))
@@ -138,7 +125,7 @@ export const getFrontendStore = () => {
     screens: {
       select: screenName => {
         store.update(state => {
-          const screen = getExactComponent(state.allScreens, screenName, true)
+          const screen = getExactComponent(get(allScreens), screenName, true)
           state.currentPreviewItem = screen
           state.currentFrontEndType = "screen"
           state.currentView = "detail"
@@ -195,7 +182,6 @@ export const getFrontendStore = () => {
         // TODO: should carry out all server updates to screen in a single call
         store.update(state => {
           state.pages[pageName]._screens = currentPageScreens
-          state.screens = currentPageScreens
           state.currentPreviewItem = screen
           const safeProps = makePropsSafe(
             state.components[screen.props._component],
@@ -227,9 +213,6 @@ export const getFrontendStore = () => {
           for (let screenToDelete of Array.isArray(screenToDelete)
             ? screenToDelete
             : [screenToDelete]) {
-            state.screens = state.screens.filter(
-              screen => screen.name !== screenToDelete.name
-            )
             // Remove screen from current page as well
             // TODO: Should be done server side
             state.pages[pageName]._screens = state.pages[
@@ -256,16 +239,12 @@ export const getFrontendStore = () => {
     pages: {
       select: pageName => {
         store.update(state => {
-          const current_screens = state.pages[pageName]._screens
-
           const currentPage = state.pages[pageName]
 
+          state.currentScreens = currentPage._screens
           state.currentFrontEndType = "page"
           state.currentView = "detail"
           state.currentPageName = pageName
-          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
@@ -280,7 +259,7 @@ export const getFrontendStore = () => {
           state.currentPreviewItem = state.pages[pageName]
           store.actions.screens.regenerateCssForCurrentScreen()
 
-          for (let screen of state.screens) {
+          for (let screen of get(allScreens)) {
             screen._css = generate_screen_css([screen.props])
           }
 

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

@@ -1,70 +0,0 @@
-import {makePropsSafe} from "../../../../components/userInterface/pagesParsing/createProps"
-import {generate_screen_css} from "../../../generate_css"
-import {get} from "svelte/store"
-import api from "../../../api"
-import { store } from "builderStore"
-
-class Page {
-  constructor(page) {
-    this.pageName = page.name
-    this.pageObj = page
-  }
-
-  select() {
-    store.update(state => {
-      const pageName = this.pageName
-      const current_screens = state.pages[pageName]._screens
-
-      const currentPage = state.pages[pageName]
-
-      state.currentFrontEndType = "page"
-      state.currentView = "detail"
-      state.currentPageName = pageName
-      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
-      )
-      state.currentComponentInfo = safeProps
-      currentPage.props = safeProps
-      state.currentPreviewItem = state.pages[pageName]
-      store.actions.screens.regenerateCssForCurrentScreen()
-
-      for (let screen of state.screens) {
-        screen._css = generate_screen_css([screen.props])
-      }
-
-      return state
-    })
-  }
-
-  async save() {
-    const page = this.pageObj
-    const storeContents = get(store)
-    const pageName = storeContents.currentPageName || "main"
-    const pageToSave = page || storeContents.pages[pageName]
-
-    // TODO: revisit. This sends down a very weird payload
-    const response = await api
-      .post(`/api/pages/${pageToSave._id}`, {
-        page: {
-          componentLibraries: storeContents.pages.componentLibraries,
-          ...pageToSave,
-        },
-        screens: pageToSave._screens,
-      })
-      .then(response => response.json())
-
-    store.update(state => {
-      state.pages[pageName]._rev = response.rev
-      return state
-    })
-  }
-}

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

@@ -1,5 +1,5 @@
 <script>
-  import { backendUiStore, store } from "builderStore"
+  import { backendUiStore, store, allScreens } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import { DropdownMenu, Button, Input } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
@@ -28,7 +28,7 @@
   }
 
   function showModal() {
-    const screens = $store.screens
+    const screens = $allScreens
     templateScreens = screens.filter(screen => screen.autoTableId === table._id)
     willBeDeleted = ["All table data"].concat(
       templateScreens.map(screen => `Screen ${screen.props._instanceName}`)

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

@@ -1,5 +1,5 @@
 <script>
-  import { store } from "builderStore/"
+  import { store, allScreens } from "builderStore"
   import ComponentPropertiesPanel from "./ComponentPropertiesPanel.svelte"
   import ComponentSelectionList from "./ComponentSelectionList.svelte"
 
@@ -18,7 +18,7 @@
 </script>
 
 <div class="root">
-  {#if $store.currentFrontEndType === 'page' || $store.screens.length}
+  {#if $store.currentFrontEndType === 'page' || $allScreens.length}
     <div class="switcher">
       <button
         class:selected={selected === COMPONENT_SELECTION_TAB}

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

@@ -1,7 +1,7 @@
 <script>
   import { DataList } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
-  import { store } from "builderStore"
+  import { allScreens } from "builderStore"
 
   const dispatch = createEventDispatcher()
 
@@ -13,7 +13,7 @@
 
   const getUrls = () => {
     return [
-      ...$store.screens
+      ...$allScreens
         .filter(
           screen =>
             screen.props._component.endsWith("/rowdetail") ||

packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Input, DataList, Select } from "@budibase/bbui"
-  import { store, automationStore } from "builderStore"
+  import { automationStore, allScreens } from "builderStore"
 
   export let parameter
 
@@ -24,7 +24,7 @@
   {:else if parameter.name === 'url'}
     <DataList on:change bind:value={parameter.value}>
       <option value="" />
-      {#each $store.screens as screen}
+      {#each $allScreens as screen}
         <option value={screen.route}>{screen.props._instanceName}</option>
       {/each}
     </DataList>

packages/builder/src/components/userInterface/EventsEditor/actions/NavigateTo.svelte

@@ -1,6 +1,6 @@
 <script>
   import { DataList, Label } from "@budibase/bbui"
-  import { store } from "builderStore"
+  import { allScreens } from "builderStore"
 
   export let parameters
 </script>
@@ -9,7 +9,7 @@
   <Label size="m" color="dark">Screen</Label>
   <DataList secondary bind:value={parameters.url}>
     <option value="" />
-    {#each $store.screens as screen}
+    {#each $allScreens as screen}
       <option value={screen.route}>{screen.props._instanceName}</option>
     {/each}
   </DataList>

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

@@ -1,5 +1,5 @@
 <script>
-  import { store } from "builderStore"
+  import { store, currentScreens } from "builderStore"
   import ComponentsHierarchy from "components/userInterface/ComponentsHierarchy.svelte"
   import PageLayout from "components/userInterface/PageLayout.svelte"
   import PagesList from "components/userInterface/PagesList.svelte"
@@ -16,7 +16,7 @@
 <PagesList />
 <div class="nav-items-container">
   <PageLayout layout={$store.pages[$store.currentPageName]} />
-  <ComponentsHierarchy screens={$store.screens} />
+  <ComponentsHierarchy screens={$currentScreens} />
 </div>
 <Modal bind:this={modal}>
   <NewScreenModal />

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

@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@sveltech/routify"
-  import { store, backendUiStore } from "builderStore"
+  import { store, backendUiStore, allScreens } from "builderStore"
   import {
     Input,
     Button,
@@ -24,7 +24,7 @@
 
   $: templates = getTemplates($store, $backendUiStore.tables)
 
-  $: route = !route && $store.screens.length === 0 ? "*" : route
+  $: route = !route && $allScreens.length === 0 ? "*" : route
 
   $: baseComponents = Object.values($store.components)
     .filter(componentDefinition => componentDefinition.baseComponent)
@@ -87,7 +87,7 @@
   }
 
   const routeNameExists = route => {
-    return $store.screens.some(
+    return $allScreens.some(
       screen => screen.route.toLowerCase() === route.toLowerCase()
     )
   }

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

@@ -1,7 +1,7 @@
 <script>
   import { DataList } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
-  import { store, backendUiStore } from "builderStore"
+  import { store, allScreens, backendUiStore } from "builderStore"
   import fetchBindableProperties from "builderStore/fetchBindableProperties"
 
   const dispatch = createEventDispatcher()
@@ -17,7 +17,7 @@
   // and substitute the :id param for the actual {{ ._id }} binding
   const getUrls = () => {
     const urls = [
-      ...$store.screens
+      ...$allScreens
         .filter(screen => !screen.props._component.endsWith("/rowdetail"))
         .map(screen => ({
           name: screen.props._instanceName,
@@ -33,7 +33,7 @@
       tables: $backendUiStore.tables,
     })
 
-    const detailScreens = $store.screens.filter(screen =>
+    const detailScreens = $allScreens.filter(screen =>
       screen.props._component.endsWith("/rowdetail")
     )
 

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

@@ -4,7 +4,7 @@
   import Input from "./PropertyPanelControls/Input.svelte"
   import { goto } from "@sveltech/routify"
   import { excludeProps } from "./propertyCategories.js"
-  import { store } from "builderStore"
+  import { store, allScreens } from "builderStore"
   import { walkProps } from "builderStore/storeUtils"
 
   export let panelDefinition = []
@@ -67,7 +67,7 @@
       lookForDuplicate($store.currentPreviewItem.props)
     } else {
       // viewing master page - need to dedupe against all screens
-      for (let screen of $store.screens) {
+      for (let screen of $allScreens) {
         lookForDuplicate(screen.props)
       }
     }

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

@@ -1,7 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import { params, leftover, goto } from "@sveltech/routify"
-  import { store } from "builderStore"
+  import { store, allScreens } from "builderStore"
 
   // Get any leftover params not caught by Routifys params store.
   const componentIds = $leftover.split("/").filter(id => id !== "")
@@ -10,7 +10,7 @@
   if ($params.screen !== "page-layout") {
     const currentScreenName = decodeURI($params.screen)
     const validScreen =
-      $store.screens.findIndex(
+      $allScreens.findIndex(
         screen => screen.props._instanceName === currentScreenName
       ) !== -1