Getting started into removing screens from store.

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

@@ -1,4 +1,4 @@
-import { writable, get } from "svelte/store"
+import { writable, get, derived } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
 import {
   createProps,
@@ -15,9 +15,8 @@ import getNewComponentName from "../getNewComponentName"
 import analytics from "analytics"
 import {
   getParent,
-  // saveScreenApi as _saveScreenApi,
   generateNewIdsForComponent,
-  getComponentDefinition, findChildComponentType, regenerateCssForScreen, savePage as _savePage,
+  getComponentDefinition, findChildComponentType,
 } from "../storeUtils"
 
 const INITIAL_FRONTEND_STATE = {
@@ -42,6 +41,16 @@ 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 => {
@@ -129,7 +138,7 @@ export const getFrontendStore = () => {
     screens: {
       select: screenName => {
         store.update(state => {
-          const screen = getExactComponent(state.screens, screenName, true)
+          const screen = getExactComponent(state.allScreens, screenName, true)
           state.currentPreviewItem = screen
           state.currentFrontEndType = "screen"
           state.currentView = "detail"

packages/builder/src/builderStore/storeUtils.js

@@ -8,15 +8,6 @@ import { generate_screen_css } from "./generate_css"
 import { uuid } from "./uuid"
 import getNewComponentName from "./getNewComponentName"
 
-export const selectComponent = (state, component) => {
-  const componentDef = component._component.startsWith("##")
-    ? component
-    : state.components[component._component]
-  state.currentComponentInfo = makePropsSafe(componentDef, component)
-  state.currentView = "component"
-  return state
-}
-
 export const getParent = (rootProps, child) => {
   let parent
   walkProps(rootProps, (p, breakWalk) => {
@@ -31,42 +22,6 @@ export const getParent = (rootProps, child) => {
   return parent
 }
 
-// export const saveCurrentPreviewItem = s =>
-//   s.currentFrontEndType === "page"
-//     ? savePage(s)
-//     : store.actions.screens.save(s.currentPreviewItem)
-
-export const savePage = async state => {
-  const pageName = state.currentPageName || "main"
-  const page = state.pages[pageName]
-
-  const response = await api
-    .post(`/api/pages/${page._id}`, {
-      page: { componentLibraries: state.pages.componentLibraries, ...page },
-      screens: page._screens,
-    })
-    .then(response => response.json())
-  store.update(innerState => {
-    innerState.pages[pageName]._rev = response.rev
-    return innerState
-  })
-  return state
-}
-
-// export const saveScreenApi = async (screen, state) => {
-//   const currentPage = state.pages[state.currentPageName]
-//   const response = await api.post(`/api/screens/${currentPage._id}`, screen)
-//   const json = await response.json()
-
-//   store.update(innerState => {
-//     // TODO: need to update pages in here
-//     // innerState.pages[pageName]._rev = response.rev
-//     return innerState
-//   })
-
-//   await savePage(state)
-// }
-
 export const walkProps = (props, action, cancelToken = null) => {
   cancelToken = cancelToken || { cancelled: false }
   action(props, () => {
@@ -81,17 +36,6 @@ export const walkProps = (props, action, cancelToken = null) => {
   }
 }
 
-export const regenerateCssForScreen = screen => {
-  screen._css = generate_screen_css([screen.props])
-}
-
-export const regenerateCssForCurrentScreen = state => {
-  if (state.currentPreviewItem) {
-    regenerateCssForScreen(state.currentPreviewItem)
-  }
-  return state
-}
-
 export const generateNewIdsForComponent = (component, state, changeName = true) =>
   walkProps(component, prop => {
     prop._id = uuid()