Fixing some bugs that have been found.

packages/builder/src/builderStore/store/frontend.js

@@ -45,6 +45,10 @@ export const getFrontendStore = () => {
   store.actions = {
     // TODO: REFACTOR
     initialise: async pkg => {
+      store.update(state => {
+        state.appId = pkg.application._id
+        return state
+      })
       const screens = await api.get("/api/screens").then(r => r.json())
 
       const mainScreens = screens.filter(screen =>

packages/builder/src/builderStore/store/frontend/pages/index.js

@@ -0,0 +1,70 @@
+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
+    })
+  }
+}

packages/server/src/api/controllers/application.js

@@ -1,14 +1,11 @@
 const CouchDB = require("../../db")
 const { compileStaticAssetsForPage } = require("../../utilities/builder")
 const env = require("../../environment")
-const { copy, existsSync, readFile, writeFile } = require("fs-extra")
+const { copy, existsSync } = require("fs-extra")
 const { budibaseAppsDir } = require("../../utilities/budibaseDir")
-const sqrl = require("squirrelly")
 const setBuilderToken = require("../../utilities/builder/setBuilderToken")
 const fs = require("fs-extra")
 const { join, resolve } = require("../../utilities/centralPath")
-const { promisify } = require("util")
-const chmodr = require("chmodr")
 const packageJson = require("../../../package.json")
 const { createLinkView } = require("../../db/linkedRows")
 const { downloadTemplate } = require("../../utilities/templates")
@@ -153,14 +150,6 @@ exports.delete = async function(ctx) {
 }
 
 const createEmptyAppPackage = async (ctx, app) => {
-  const templateFolder = resolve(
-    __dirname,
-    "..",
-    "..",
-    "utilities",
-    "appDirectoryTemplate"
-  )
-
   const appsFolder = budibaseAppsDir()
   const newAppFolder = resolve(appsFolder, app._id)
 
@@ -170,24 +159,7 @@ const createEmptyAppPackage = async (ctx, app) => {
     ctx.throw(400, "App folder already exists for this application")
   }
 
-  // await fs.ensureDir(join(newAppFolder, "pages", "main", "screens"), 0o777)
+  fs.mkdirpSync(newAppFolder)
-  // await fs.ensureDir(
-  //   join(newAppFolder, "pages", "unauthenticated", "screens"),
-  //   0o777
-  // )
-
-  await copy(templateFolder, newAppFolder)
-
-  // this line allows full permission on copied files
-  // we have an unknown problem without this, whereby the
-  // files get weird permissions and cant be written to :(
-  const chmodrPromise = promisify(chmodr)
-  await chmodrPromise(newAppFolder, 0o777)
-
-  await updateJsonFile(join(appsFolder, app._id, "package.json"), {
-    name: npmFriendlyAppName(app.name),
-  })
-
   // if this app is being created from a template,
   // copy the frontend page definition files from
   // the template directory.
@@ -203,23 +175,6 @@ const createEmptyAppPackage = async (ctx, app) => {
     await copy(templatePageDefinitions, join(appsFolder, app._id, "pages"))
   }
 
-  // const mainJson = await updateJsonFile(
-  //   join(appsFolder, app._id, "pages", "main", "page.json"),
-  //   app
-  // )
-  //
-  // mainJson._id = generatePageID()
-  // await db.put(mainJson)
-
-  // const unauthenticatedJson = await updateJsonFile(
-  //   join(appsFolder, app._id, "pages", "unauthenticated", "page.json"),
-  //   app
-  // )
-
-  // Write to couch
-  // unauthenticatedJson._id = generatePageID()
-  // await db.put(unauthenticatedJson)
-
   const mainPage = cloneDeep(MAIN)
   mainPage._id = generatePageID()
   mainPage.title = app.name
@@ -227,7 +182,7 @@ const createEmptyAppPackage = async (ctx, app) => {
   unauthPage._id = generatePageID()
   // TODO: fix - handlebars etc
   unauthPage.title = app.name
-  unauthPage.props._children[0]._children.title = `Log in to ${app.name}`
+  unauthPage.props._children[0].title = `Log in to ${app.name}`
   const homeScreen = cloneDeep(HOME_SCREEN)
   homeScreen._id = generateScreenID(mainPage._id)
   await db.bulkDocs([mainPage, unauthPage, homeScreen])
@@ -243,31 +198,3 @@ const createEmptyAppPackage = async (ctx, app) => {
 
   return newAppFolder
 }
-
-// const loadScreens = async (appFolder, page) => {
-//   const screensFolder = join(appFolder, "pages", page, "screens")
-//
-//   const screenFiles = (await fs.readdir(screensFolder)).filter(s =>
-//     s.endsWith(".json")
-//   )
-//
-//   let screens = []
-//   for (let file of screenFiles) {
-//     screens.push(await fs.readJSON(join(screensFolder, file)))
-//   }
-//   return screens
-// }
-
-const updateJsonFile = async (filePath, app) => {
-  const json = await readFile(filePath, "utf8")
-  const newJson = sqrl.Render(json, app)
-  await writeFile(filePath, newJson, "utf8")
-  return JSON.parse(newJson)
-}
-
-const npmFriendlyAppName = name =>
-  name
-    .replace(/_/g, "")
-    .replace(/./g, "")
-    .replace(/ /g, "")
-    .toLowerCase()

packages/server/src/api/controllers/page.js

@@ -7,9 +7,10 @@ exports.save = async function(ctx) {
 
   const appPackage = ctx.request.body
 
+  const page = await db.get(ctx.params.pageId)
   await compileStaticAssetsForPage(
     ctx.user.appId,
-    ctx.params.pageId,
+    page.name,
     ctx.request.body
   )
 

packages/server/src/utilities/builder/setBuilderToken.js

@@ -21,6 +21,7 @@ module.exports = async (ctx, appId, version) => {
 
   // set the builder token
   setCookie(ctx, "builder", token)
+  setCookie(ctx, "currentapp", appId)
   // need to clear all app tokens or else unable to use the app in the builder
   let allDbNames = await CouchDB.allDbs()
   allDbNames.map(dbName => {