CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-10 22:46:09 +12:00
Code Issues Projects Releases Wiki Activity

Ensure state never gets out of sync when saving app metadata by using server response to update state

Browse source
This commit is contained in:
Andrew Kingston 2022-07-15 08:27:35 +01:00
parent 587b385a47
commit edfb0fa50d
2 changed files with 12 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/builder/src/builderStore/index.js
View file

@ -2,7 +2,6 @@ import { getFrontendStore } from "./store/frontend"
import { getAutomationStore } from "./store/automation" import { getAutomationStore } from "./store/automation"
import { getThemeStore } from "./store/theme" import { getThemeStore } from "./store/theme"
import { derived } from "svelte/store" import { derived } from "svelte/store"
import { LAYOUT_NAMES } from "../constants"
import { findComponent, findComponentPath } from "./componentUtils" import { findComponent, findComponentPath } from "./componentUtils"
import { RoleUtils } from "@budibase/frontend-core" import { RoleUtils } from "@budibase/frontend-core"
@ -28,6 +27,10 @@ export const selectedComponent = derived(
} }
) )
// For legacy compatibility only, but with the new design UI this is just
// the selected screen
export const currentAsset = selectedScreen
export const sortedScreens = derived(store, $store => { export const sortedScreens = derived(store, $store => {
return $store.screens.slice().sort((a, b) => { return $store.screens.slice().sort((a, b) => {
// Sort by role first // Sort by role first
@ -66,12 +69,3 @@ export const selectedComponentPath = derived(
).map(component => component._id) ).map(component => component._id)
} }
) )
export const mainLayout = derived(store, $store => {
return $store.layouts?.find(
layout => layout._id === LAYOUT_NAMES.MASTER.PRIVATE
)
})
// For compatibility
export const currentAsset = selectedScreen

16
packages/builder/src/builderStore/store/frontend.js
View file

@ -1,6 +1,6 @@
import { get, writable } from "svelte/store" import { get, writable } from "svelte/store"
import { cloneDeep } from "lodash/fp" import { cloneDeep } from "lodash/fp"
import { currentAsset, selectedScreen, selectedComponent } from "builderStore" import { selectedScreen, selectedComponent } from "builderStore"
import { import {
datasources, datasources,
integrations, integrations,
@ -155,12 +155,12 @@ export const getFrontendStore = () => {
theme: { theme: {
save: async theme => { save: async theme => {
const appId = get(store).appId const appId = get(store).appId
await API.saveAppMetadata({ const app = await API.saveAppMetadata({
appId, appId,
metadata: { theme }, metadata: { theme },
}) })
store.update(state => { store.update(state => {
state.theme = theme state.theme = app.theme
return state return state
}) })
}, },
@ -168,12 +168,12 @@ export const getFrontendStore = () => {
customTheme: { customTheme: {
save: async customTheme => { save: async customTheme => {
const appId = get(store).appId const appId = get(store).appId
await API.saveAppMetadata({ const app = await API.saveAppMetadata({
appId, appId,
metadata: { customTheme }, metadata: { customTheme },
}) })
store.update(state => { store.update(state => {
state.customTheme = customTheme state.customTheme = app.customTheme
return state return state
}) })
}, },
@ -181,12 +181,12 @@ export const getFrontendStore = () => {
navigation: { navigation: {
save: async navigation => { save: async navigation => {
const appId = get(store).appId const appId = get(store).appId
await API.saveAppMetadata({ const app = await API.saveAppMetadata({
appId, appId,
metadata: { navigation }, metadata: { navigation },
}) })
store.update(state => { store.update(state => {
state.navigation = navigation state.navigation = app.navigation
return state return state
}) })
}, },
@ -407,7 +407,7 @@ export const getFrontendStore = () => {
} }
if (componentName.endsWith("/formstep")) { if (componentName.endsWith("/formstep")) {
const parentForm = findClosestMatchingComponent( const parentForm = findClosestMatchingComponent(
get(currentAsset).props, get(selectedScreen).props,
get(selectedComponent)._id, get(selectedComponent)._id,
component => component._component.endsWith("/form") component => component._component.endsWith("/form")
) )