From 9c30ab2df3e162b1622d2350f0fa74a76878ec04 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 19 Nov 2020 18:39:22 +0000 Subject: [PATCH] Fetch app definition and routes from the server --- packages/client/src/api/app.js | 10 +++++++ packages/client/src/api/attachments.js | 4 +-- packages/client/src/api/auth.js | 8 ++--- packages/client/src/api/index.js | 1 + packages/client/src/api/relationships.js | 4 +-- packages/client/src/api/routes.js | 4 +-- packages/client/src/api/rows.js | 12 ++++---- packages/client/src/api/screens.js | 0 packages/client/src/api/tables.js | 6 ++-- packages/client/src/api/views.js | 4 +-- .../client/src/components/ClientApp.svelte | 18 +++++++---- packages/client/src/components/Router.svelte | 23 +++++++------- packages/client/src/store/auth.js | 6 ++-- packages/client/src/store/routes.js | 19 +++++------- packages/client/src/store/screens.js | 30 +++++++++++++------ packages/standard-components/src/Embed.svelte | 8 ++--- packages/standard-components/src/Login.svelte | 7 +---- .../standard-components/src/Navigation.svelte | 1 - 18 files changed, 92 insertions(+), 73 deletions(-) create mode 100644 packages/client/src/api/app.js delete mode 100644 packages/client/src/api/screens.js diff --git a/packages/client/src/api/app.js b/packages/client/src/api/app.js new file mode 100644 index 0000000000..61c23ef6a6 --- /dev/null +++ b/packages/client/src/api/app.js @@ -0,0 +1,10 @@ +import API from "./api" + +/** + * Fetches screen definition for an app. + */ +export const fetchAppDefinition = async appId => { + return await API.get({ + url: `/api/applications/${appId}/definition`, + }) +} diff --git a/packages/client/src/api/attachments.js b/packages/client/src/api/attachments.js index 68bc7df415..ff5c48c911 100644 --- a/packages/client/src/api/attachments.js +++ b/packages/client/src/api/attachments.js @@ -1,10 +1,10 @@ -import api from "./api" +import API from "./api" /** * Uploads an attachment to the server. */ export const uploadAttachment = async data => { - return await api.post({ + return await API.post({ url: "/api/attachments/upload", body: data, json: false, diff --git a/packages/client/src/api/auth.js b/packages/client/src/api/auth.js index 04fc1169b9..9273a00cc7 100644 --- a/packages/client/src/api/auth.js +++ b/packages/client/src/api/auth.js @@ -1,16 +1,16 @@ -import api from "./api" +import API from "./api" /** * Performs a log in request. */ export const logIn = async ({ username, password }) => { if (!username) { - return api.error("Please enter your username") + return API.error("Please enter your username") } if (!password) { - return api.error("Please enter your password") + return API.error("Please enter your password") } - return await api.post({ + return await API.post({ url: "/api/authenticate", body: { username, password }, }) diff --git a/packages/client/src/api/index.js b/packages/client/src/api/index.js index f1ea13bc38..878964107b 100644 --- a/packages/client/src/api/index.js +++ b/packages/client/src/api/index.js @@ -6,3 +6,4 @@ export * from "./attachments" export * from "./views" export * from "./relationships" export * from "./routes" +export * from "./app" diff --git a/packages/client/src/api/relationships.js b/packages/client/src/api/relationships.js index af2331291c..fe92bfd038 100644 --- a/packages/client/src/api/relationships.js +++ b/packages/client/src/api/relationships.js @@ -1,4 +1,4 @@ -import api from "./api" +import API from "./api" import { enrichRows } from "./rows" /** @@ -8,7 +8,7 @@ export const fetchRelationshipData = async ({ tableId, rowId, fieldName }) => { if (!tableId || !rowId || !fieldName) { return [] } - const response = await api.get({ url: `/api/${tableId}/${rowId}/enrich` }) + const response = await API.get({ url: `/api/${tableId}/${rowId}/enrich` }) const rows = response[fieldName] || [] return await enrichRows(rows, tableId) } diff --git a/packages/client/src/api/routes.js b/packages/client/src/api/routes.js index 35b0dbb512..d762461075 100644 --- a/packages/client/src/api/routes.js +++ b/packages/client/src/api/routes.js @@ -1,10 +1,10 @@ -import api from "./api" +import API from "./api" /** * Fetches available routes for the client app. */ export const fetchRoutes = async () => { - return await api.get({ + return await API.get({ url: `/api/routing/client`, }) } diff --git a/packages/client/src/api/rows.js b/packages/client/src/api/rows.js index a8b16a1c06..2df57be60d 100644 --- a/packages/client/src/api/rows.js +++ b/packages/client/src/api/rows.js @@ -1,11 +1,11 @@ -import api from "./api" +import API from "./api" import { fetchTableDefinition } from "./tables" /** * Fetches data about a certain row in a table. */ export const fetchRow = async ({ tableId, rowId }) => { - const row = await api.get({ + const row = await API.get({ url: `/api/${tableId}/rows/${rowId}`, }) return (await enrichRows([row], tableId))[0] @@ -15,7 +15,7 @@ export const fetchRow = async ({ tableId, rowId }) => { * Creates a row in a table. */ export const saveRow = async row => { - return await api.post({ + return await API.post({ url: `/api/${row.tableId}/rows`, body: row, }) @@ -25,7 +25,7 @@ export const saveRow = async row => { * Updates a row in a table. */ export const updateRow = async row => { - return await api.patch({ + return await API.patch({ url: `/api/${row.tableId}/rows/${row._id}`, body: row, }) @@ -35,7 +35,7 @@ export const updateRow = async row => { * Deletes a row from a table. */ export const deleteRow = async ({ tableId, rowId, revId }) => { - return await api.del({ + return await API.del({ url: `/api/${tableId}/rows/${rowId}/${revId}`, }) } @@ -44,7 +44,7 @@ export const deleteRow = async ({ tableId, rowId, revId }) => { * Deletes many rows from a table. */ export const deleteRows = async ({ tableId, rows }) => { - return await api.post({ + return await API.post({ url: `/api/${tableId}/rows`, body: { rows, diff --git a/packages/client/src/api/screens.js b/packages/client/src/api/screens.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/client/src/api/tables.js b/packages/client/src/api/tables.js index 7ad5633b07..83c92efa8e 100644 --- a/packages/client/src/api/tables.js +++ b/packages/client/src/api/tables.js @@ -1,4 +1,4 @@ -import api from "./api" +import API from "./api" import { enrichRows } from "./rows" /** @@ -6,13 +6,13 @@ import { enrichRows } from "./rows" * Since definitions cannot change at runtime, the result is cached. */ export const fetchTableDefinition = async tableId => { - return await api.get({ url: `/api/tables/${tableId}`, cache: true }) + return await API.get({ url: `/api/tables/${tableId}`, cache: true }) } /** * Fetches all rows from a table. */ export const fetchTableData = async tableId => { - const rows = await api.get({ url: `/api/${tableId}/rows` }) + const rows = await API.get({ url: `/api/${tableId}/rows` }) return await enrichRows(rows, tableId) } diff --git a/packages/client/src/api/views.js b/packages/client/src/api/views.js index 7c1386d721..88dfbe5187 100644 --- a/packages/client/src/api/views.js +++ b/packages/client/src/api/views.js @@ -1,4 +1,4 @@ -import api from "./api" +import API from "./api" import { enrichRows } from "./rows" /** @@ -25,6 +25,6 @@ export const fetchViewData = async ({ ? `/api/views/${name}?${params}` : `/api/views/${name}` - const rows = await api.get({ url: QUERY_VIEW_URL }) + const rows = await API.get({ url: QUERY_VIEW_URL }) return await enrichRows(rows, tableId) } diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte index e3712f3b80..77454edfa5 100644 --- a/packages/client/src/components/ClientApp.svelte +++ b/packages/client/src/components/ClientApp.svelte @@ -1,14 +1,22 @@ - +{#if loaded} + +{/if} diff --git a/packages/client/src/components/Router.svelte b/packages/client/src/components/Router.svelte index 99f4a5722a..f61bff7c10 100644 --- a/packages/client/src/components/Router.svelte +++ b/packages/client/src/components/Router.svelte @@ -6,27 +6,26 @@ import { styleable } from "../utils" export let styles - let routes + $: routerConfig = getRouterConfig($routeStore.routes) - onMount(async () => { - await routeStore.actions.fetchRoutes() - await screenStore.actions.fetchScreens() - routes = {} - $routeStore.routes.forEach(route => { - routes[route.path] = Screen + const getRouterConfig = routes => { + let config = {} + routes.forEach(route => { + config[route.path] = Screen }) // Add catch-all route so that we serve the Screen component always - routes["*"] = Screen - }) + config["*"] = Screen + return config + } - function onRouteLoading({ detail }) { + const onRouteLoading = ({ detail }) => { routeStore.actions.setActiveRoute(detail.route) } -{#if routes} +{#if routerConfig}
- +
{/if} diff --git a/packages/client/src/store/auth.js b/packages/client/src/store/auth.js index 3d718ead63..5734534ba7 100644 --- a/packages/client/src/store/auth.js +++ b/packages/client/src/store/auth.js @@ -1,6 +1,7 @@ import * as API from "../api" import { getAppId } from "../utils" import { writable } from "svelte/store" +import { loc } from "svelte-spa-router" const createAuthStore = () => { const store = writable("") @@ -12,8 +13,8 @@ const createAuthStore = () => { const user = await API.logIn({ username, password }) if (!user.error) { store.set(user.token) + location.reload() } - return !user.error } /** @@ -21,14 +22,13 @@ const createAuthStore = () => { */ const logOut = () => { store.set("") - - // Expire any cookies const appId = getAppId() if (appId) { for (let environment of ["local", "cloud"]) { window.document.cookie = `budibase:${appId}:${environment}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;` } } + location.reload() } return { diff --git a/packages/client/src/store/routes.js b/packages/client/src/store/routes.js index ae5ad0b061..4443844b39 100644 --- a/packages/client/src/store/routes.js +++ b/packages/client/src/store/routes.js @@ -12,18 +12,15 @@ const createRouteStore = () => { const fetchRoutes = async () => { const routeConfig = await API.fetchRoutes() - let routes = {} - Object.values(routeConfig.routes).forEach(pathConfig => { - Object.entries(config).forEach(([subPath, subPathConfig]) => {}) + let routes = [] + Object.values(routeConfig.routes).forEach(route => { + Object.entries(route.subpaths).forEach(([path, config]) => { + routes.push({ + path, + screenId: config.screenId, + }) + }) }) - - console.log(routes2) - - const frontendDefinition = window["##BUDIBASE_FRONTEND_DEFINITION##"] - const routes = frontendDefinition.screens.map(screen => ({ - path: screen.route, - screenId: screen._id, - })) store.update(state => { state.routes = routes return state diff --git a/packages/client/src/store/screens.js b/packages/client/src/store/screens.js index 33eac0ab13..4e29e44621 100644 --- a/packages/client/src/store/screens.js +++ b/packages/client/src/store/screens.js @@ -1,22 +1,34 @@ import { writable, derived } from "svelte/store" import { routeStore } from "./routes" +import * as API from "../api" +import { getAppId } from "../utils" const createScreenStore = () => { - const screens = writable([]) - const store = derived([screens, routeStore], ([$screens, $routeStore]) => { + const config = writable({ + screens: [], + page: {}, + }) + const store = derived([config, routeStore], ([$config, $routeStore]) => { + const { screens, page } = $config const activeScreen = - $screens.length === 1 - ? $screens[0] - : $screens.find(screen => screen.route === $routeStore.activeRoute) + screens.length === 1 + ? screens[0] + : screens.find( + screen => screen.routing.route === $routeStore.activeRoute + ) return { - screens: $screens, + screens, + page, activeScreen, } }) - const fetchScreens = () => { - const frontendDefinition = window["##BUDIBASE_FRONTEND_DEFINITION##"] - screens.set(frontendDefinition.screens) + const fetchScreens = async () => { + const appDefinition = await API.fetchAppDefinition(getAppId()) + config.set({ + screens: appDefinition.screens, + page: appDefinition.page, + }) } return { diff --git a/packages/standard-components/src/Embed.svelte b/packages/standard-components/src/Embed.svelte index 05f39aafac..18e1d1f76c 100644 --- a/packages/standard-components/src/Embed.svelte +++ b/packages/standard-components/src/Embed.svelte @@ -14,12 +14,10 @@ diff --git a/packages/standard-components/src/Login.svelte b/packages/standard-components/src/Login.svelte index 326df1ce8f..e4cef3b761 100644 --- a/packages/standard-components/src/Login.svelte +++ b/packages/standard-components/src/Login.svelte @@ -24,12 +24,7 @@ const login = async () => { loading = true - const success = await authStore.actions.logIn({ username, password }) - if (success) { - location.reload() - } else { - error = true - } + await authStore.actions.logIn({ username, password }) loading = false } diff --git a/packages/standard-components/src/Navigation.svelte b/packages/standard-components/src/Navigation.svelte index 612d37d49d..262517ca26 100644 --- a/packages/standard-components/src/Navigation.svelte +++ b/packages/standard-components/src/Navigation.svelte @@ -9,7 +9,6 @@ const logOut = () => { authStore.actions.logOut() - location.reload() }