From a41b3769996ea4c7d509b7d54eaa6718dfaf6d54 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 30 Jun 2021 20:35:02 +0100 Subject: [PATCH] Fetch and use app theme in real client apps --- packages/client/src/api/app.js | 4 +-- .../client/src/components/ClientApp.svelte | 4 ++- packages/client/src/index.js | 7 +++-- packages/client/src/store/app.js | 27 +++++++++++++++++++ packages/client/src/store/index.js | 1 + packages/client/src/store/initialise.js | 4 +-- packages/client/src/store/screens.js | 23 ++++------------ 7 files changed, 45 insertions(+), 25 deletions(-) create mode 100644 packages/client/src/store/app.js diff --git a/packages/client/src/api/app.js b/packages/client/src/api/app.js index 61c23ef6a6..c5ee305cda 100644 --- a/packages/client/src/api/app.js +++ b/packages/client/src/api/app.js @@ -3,8 +3,8 @@ import API from "./api" /** * Fetches screen definition for an app. */ -export const fetchAppDefinition = async appId => { +export const fetchAppPackage = async appId => { return await API.get({ - url: `/api/applications/${appId}/definition`, + url: `/api/applications/${appId}/appPackage`, }) } diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte index 32725898c7..2675531a63 100644 --- a/packages/client/src/components/ClientApp.svelte +++ b/packages/client/src/components/ClientApp.svelte @@ -13,6 +13,7 @@ authStore, routeStore, builderStore, + appStore, } from "../store" import { TableNames, ActionTypes } from "../constants" import SettingsBar from "./preview/SettingsBar.svelte" @@ -59,7 +60,8 @@ } } - $: themeClass = $builderStore.theme || "spectrum--light" + $: themeClass = + $builderStore.theme || $appStore.application?.theme || "spectrum--light" {#if dataLoaded && $screenStore.activeLayout} diff --git a/packages/client/src/index.js b/packages/client/src/index.js index a928202b1a..b7a303d9d8 100644 --- a/packages/client/src/index.js +++ b/packages/client/src/index.js @@ -1,5 +1,5 @@ import ClientApp from "./components/ClientApp.svelte" -import { builderStore } from "./store" +import { builderStore, appStore } from "./store" let app @@ -7,7 +7,6 @@ const loadBudibase = () => { // Update builder store with any builder flags builderStore.set({ inBuilder: !!window["##BUDIBASE_IN_BUILDER##"], - appId: window["##BUDIBASE_APP_ID##"], layout: window["##BUDIBASE_PREVIEW_LAYOUT##"], screen: window["##BUDIBASE_PREVIEW_SCREEN##"], selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"], @@ -16,6 +15,10 @@ const loadBudibase = () => { theme: window["##BUDIBASE_PREVIEW_THEME##"], }) + // Set app ID - this window flag is set by both the preview and the real + // server rendered app HTML + appStore.actions.setAppID(window["##BUDIBASE_APP_ID##"]) + // Create app if one hasn't been created yet if (!app) { app = new ClientApp({ diff --git a/packages/client/src/store/app.js b/packages/client/src/store/app.js new file mode 100644 index 0000000000..eb5a259a25 --- /dev/null +++ b/packages/client/src/store/app.js @@ -0,0 +1,27 @@ +import * as API from "../api" +import { get, writable } from "svelte/store" + +const createAppStore = () => { + const store = writable({}) + + // Fetches the app definition including screens, layouts and theme + const fetchAppDefinition = async () => { + const appDefinition = await API.fetchAppPackage(get(store).appId) + store.set(appDefinition) + } + + // Sets the initial app ID + const setAppID = id => { + store.update(state => { + state.appId = id + return state + }) + } + + return { + subscribe: store.subscribe, + actions: { setAppID, fetchAppDefinition }, + } +} + +export const appStore = createAppStore() diff --git a/packages/client/src/store/index.js b/packages/client/src/store/index.js index 9f2dbfdcfb..9a6c74e028 100644 --- a/packages/client/src/store/index.js +++ b/packages/client/src/store/index.js @@ -1,4 +1,5 @@ export { authStore } from "./auth" +export { appStore } from "./app" export { notificationStore } from "./notification" export { routeStore } from "./routes" export { screenStore } from "./screens" diff --git a/packages/client/src/store/initialise.js b/packages/client/src/store/initialise.js index 9e24439980..1900e62ce1 100644 --- a/packages/client/src/store/initialise.js +++ b/packages/client/src/store/initialise.js @@ -1,7 +1,7 @@ import { routeStore } from "./routes" -import { screenStore } from "./screens" +import { appStore } from "./app" export async function initialise() { await routeStore.actions.fetchRoutes() - await screenStore.actions.fetchScreens() + await appStore.actions.fetchAppDefinition() } diff --git a/packages/client/src/store/screens.js b/packages/client/src/store/screens.js index 04ed9ca52f..c771f6e277 100644 --- a/packages/client/src/store/screens.js +++ b/packages/client/src/store/screens.js @@ -1,16 +1,12 @@ -import { writable, derived, get } from "svelte/store" +import { derived } from "svelte/store" import { routeStore } from "./routes" import { builderStore } from "./builder" -import * as API from "../api" +import { appStore } from "./app" const createScreenStore = () => { - const config = writable({ - screens: [], - layouts: [], - }) const store = derived( - [config, routeStore, builderStore], - ([$config, $routeStore, $builderStore]) => { + [appStore, routeStore, builderStore], + ([$appStore, $routeStore, $builderStore]) => { let activeLayout let activeScreen if ($builderStore.inBuilder) { @@ -21,7 +17,7 @@ const createScreenStore = () => { activeLayout = { props: { _component: "screenslot" } } // Find the correct screen by matching the current route - const { screens, layouts } = $config + const { screens, layouts } = $appStore if ($routeStore.activeRoute) { activeScreen = screens.find( screen => screen._id === $routeStore.activeRoute.screenId @@ -37,17 +33,8 @@ const createScreenStore = () => { } ) - const fetchScreens = async () => { - const appDefinition = await API.fetchAppDefinition(get(builderStore).appId) - config.set({ - screens: appDefinition.screens, - layouts: appDefinition.layouts, - }) - } - return { subscribe: store.subscribe, - actions: { fetchScreens }, } }