From 5846e2ef7c982d3ea775a336a5ea36cee8626614 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 5 Feb 2021 11:44:33 +0000 Subject: [PATCH] Change how client provides the current user so that the whole app is actually wrapped in a provider which provides the current user --- .../client/src/components/ClientApp.svelte | 7 +++-- .../client/src/components/Component.svelte | 8 +++--- .../client/src/components/Provider.svelte | 10 +++---- packages/client/src/store/context.js | 26 ++++++++++--------- packages/client/src/utils/componentProps.js | 3 +-- 5 files changed, 28 insertions(+), 26 deletions(-) diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte index cad74a3e63..e204209526 100644 --- a/packages/client/src/components/ClientApp.svelte +++ b/packages/client/src/components/ClientApp.svelte @@ -3,6 +3,7 @@ import { setContext, onMount } from "svelte" import Component from "./Component.svelte" import NotificationDisplay from "./NotificationDisplay.svelte" + import Provider from "./Provider.svelte" import SDK from "../sdk" import { createContextStore, @@ -27,6 +28,8 @@ {#if loaded && $screenStore.activeLayout} - - + + + + {/if} diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte index a9d80a3c5f..6980313312 100644 --- a/packages/client/src/components/Component.svelte +++ b/packages/client/src/components/Component.svelte @@ -4,7 +4,7 @@ import * as ComponentLibrary from "@budibase/standard-components" import Router from "./Router.svelte" import { enrichProps, propsAreSame } from "../utils/componentProps" - import { authStore, builderStore } from "../store" + import { builderStore } from "../store" import { hashString } from "../utils/hash" export let definition = {} @@ -32,7 +32,7 @@ $: constructor = getComponentConstructor(definition._component) $: children = definition._children || [] $: id = definition._id - $: updateComponentProps(definition, $context, $authStore) + $: updateComponentProps(definition, $context) $: styles = definition._styles // Update component context @@ -53,13 +53,13 @@ } // Enriches any string component props using handlebars - const updateComponentProps = async (definition, context, user) => { + const updateComponentProps = async (definition, context) => { // Record the timestamp so we can reference it after enrichment latestUpdateTime = Date.now() const enrichmentTime = latestUpdateTime // Enrich props with context - const enrichedProps = await enrichProps(definition, context, user) + const enrichedProps = await enrichProps(definition, context) // Abandon this update if a newer update has started if (enrichmentTime !== latestUpdateTime) { diff --git a/packages/client/src/components/Provider.svelte b/packages/client/src/components/Provider.svelte index f1349796eb..13dd70667b 100644 --- a/packages/client/src/components/Provider.svelte +++ b/packages/client/src/components/Provider.svelte @@ -4,24 +4,22 @@ export let data export let actions + export let key // Clone and create new data context for this component tree const context = getContext("context") const component = getContext("component") const newContext = createContextStore($context) setContext("context", newContext) + $: providerKey = key || $component.id // Add data context - $: { - if (data !== undefined) { - newContext.actions.provideData($component.id, data) - } - } + $: newContext.actions.provideData(providerKey, data) // Add actions context $: { actions?.forEach(({ type, callback }) => { - newContext.actions.provideAction($component.id, type, callback) + newContext.actions.provideAction(providerKey, type, callback) }) } diff --git a/packages/client/src/store/context.js b/packages/client/src/store/context.js index 63aaee3b14..5092161037 100644 --- a/packages/client/src/store/context.js +++ b/packages/client/src/store/context.js @@ -4,26 +4,28 @@ export const createContextStore = existingContext => { const store = writable({ ...existingContext }) // Adds a data context layer to the tree - const provideData = (componentId, data) => { + const provideData = (key, data) => { + if (!key) { + return + } store.update(state => { - if (componentId) { - state[componentId] = data + state[key] = data - // Keep track of the closest component ID so we can later hydrate a "data" prop. - // This is only required for legacy bindings that used "data" rather than a - // component ID. - state.closestComponentId = componentId - } + // Keep track of the closest component ID so we can later hydrate a "data" prop. + // This is only required for legacy bindings that used "data" rather than a + // component ID. + state.closestComponentId = key return state }) } // Adds an action context layer to the tree - const provideAction = (componentId, actionType, callback) => { + const provideAction = (key, actionType, callback) => { + if (!key || !actionType) { + return + } store.update(state => { - if (actionType && componentId) { - state[`${componentId}_${actionType}`] = callback - } + state[`${key}_${actionType}`] = callback return state }) } diff --git a/packages/client/src/utils/componentProps.js b/packages/client/src/utils/componentProps.js index 42bb6e624a..18a894beaa 100644 --- a/packages/client/src/utils/componentProps.js +++ b/packages/client/src/utils/componentProps.js @@ -21,7 +21,7 @@ export const propsAreSame = (a, b) => { * Enriches component props. * Data bindings are enriched, and button actions are enriched. */ -export const enrichProps = async (props, context, user) => { +export const enrichProps = async (props, context) => { // Exclude all private props that start with an underscore let validProps = {} Object.entries(props) @@ -34,7 +34,6 @@ export const enrichProps = async (props, context, user) => { // Duplicate the closest context as "data" which the builder requires const totalContext = { ...context, - user, // This is only required for legacy bindings that used "data" rather than a // component ID.