From 542b003f7e5f1c14162d820d6206ac39fe3936b4 Mon Sep 17 00:00:00 2001 From: mike12345567 Date: Thu, 5 Nov 2020 17:47:27 +0000 Subject: [PATCH] Refactoring to replace the use of frontend store.screens with derived allScreens and currentScreens. --- .../src/builderStore/getNewComponentName.js | 4 +- packages/builder/src/builderStore/index.js | 22 +++++- .../src/builderStore/store/frontend.js | 33 ++------- .../src/builderStore/store/frontend/index.js | 0 .../store/frontend/pages/index.js | 70 ------------------- .../popovers/EditTablePopover.svelte | 4 +- .../ComponentsPaneSwitcher.svelte | 4 +- .../userInterface/DetailScreenSelect.svelte | 4 +- .../EventsEditor/StateBindingCascader.svelte | 4 +- .../EventsEditor/actions/NavigateTo.svelte | 4 +- .../userInterface/FrontendNavigatePane.svelte | 4 +- .../userInterface/NewScreenModal.svelte | 6 +- .../userInterface/ScreenSelect.svelte | 6 +- .../userInterface/SettingsView.svelte | 4 +- .../design/[page]/[screen]/_layout.svelte | 4 +- 15 files changed, 51 insertions(+), 122 deletions(-) delete mode 100644 packages/builder/src/builderStore/store/frontend/index.js delete mode 100644 packages/builder/src/builderStore/store/frontend/pages/index.js diff --git a/packages/builder/src/builderStore/getNewComponentName.js b/packages/builder/src/builderStore/getNewComponentName.js index 963c66ebce..a69bec21ad 100644 --- a/packages/builder/src/builderStore/getNewComponentName.js +++ b/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) } } diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js index f4e0cf0f8b..61f816196e 100644 --- a/packages/builder/src/builderStore/index.js +++ b/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() diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index c860098a8c..7d788ff5ee 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/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]) } diff --git a/packages/builder/src/builderStore/store/frontend/index.js b/packages/builder/src/builderStore/store/frontend/index.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/builder/src/builderStore/store/frontend/pages/index.js b/packages/builder/src/builderStore/store/frontend/pages/index.js deleted file mode 100644 index 4ce8105e7d..0000000000 --- a/packages/builder/src/builderStore/store/frontend/pages/index.js +++ /dev/null @@ -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 - }) - } -} \ No newline at end of file diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte index 46f53af4d3..1fdbe35151 100644 --- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte +++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte @@ -1,5 +1,5 @@
- {#if $store.currentFrontEndType === 'page' || $store.screens.length} + {#if $store.currentFrontEndType === 'page' || $allScreens.length}