From c83b1d4c35df48b483da0280583e68f44cac05c9 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 29 Sep 2020 10:19:04 +0100
Subject: [PATCH] organise async logic on homepage, style template cards and
 add images

---
 .../src/components/start/AppList.svelte       | 40 +++++++++++++++----
 .../src/components/start/Steps/Info.svelte    |  7 ++--
 .../src/components/start/TemplateList.svelte  | 38 ++++++++++--------
 packages/builder/src/pages/index.svelte       | 36 +----------------
 .../server/src/api/controllers/templates.js   |  2 +-
 5 files changed, 60 insertions(+), 63 deletions(-)
diff --git a/packages/builder/src/components/start/AppList.svelte b/packages/builder/src/components/start/AppList.svelte
index efd448b94a..0a87e63cbb 100644
--- a/packages/builder/src/components/start/AppList.svelte
+++ b/packages/builder/src/components/start/AppList.svelte
@@ -1,20 +1,44 @@
 <script>
   import AppCard from "./AppCard.svelte"
-  export let apps
+  import { Heading } from "@budibase/bbui"
+  import Spinner from "components/common/Spinner.svelte"
+  import { get } from "builderStore/api"
+
+  let promise = getApps()
+
+  async function getApps() {
+    const res = await get("/api/applications")
+    const json = await res.json()
+
+    if (res.ok) {
+      return json
+    } else {
+      throw new Error(json)
+    }
+  }
 </script>
 
 <div class="root">
-  <div class="inner">
-    <div>
+  <Heading medium black>Your Apps</Heading>
+  {#await promise}
+    <div class="spinner-container">
+      <Spinner size="30" />
+    </div>
+  {:then apps}
+    <div class="inner">
       <div>
-        <div class="apps">
-          {#each apps as app}
-            <AppCard {...app} />
-          {/each}
+        <div>
+          <div class="apps">
+            {#each apps as app}
+              <AppCard {...app} />
+            {/each}
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  {:catch err}
+    <h1 style="color:red">{err}</h1>
+  {/await}
 </div>
 
 <style>
diff --git a/packages/builder/src/components/start/Steps/Info.svelte b/packages/builder/src/components/start/Steps/Info.svelte
index a2bc85b976..09f2931207 100644
--- a/packages/builder/src/components/start/Steps/Info.svelte
+++ b/packages/builder/src/components/start/Steps/Info.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Input } from "@budibase/bbui"
+  import { Input, Heading, Body } from "@budibase/bbui"
   export let validationErrors
   export let template
 
@@ -7,10 +7,9 @@
 </script>
 
 {#if template}
-  <h2>Selected Template</h2>
-  <h4>{template.name}</h4>
+  <Heading small black>Selected Template</Heading>
+  <Body>{template.name}</Body>
 {/if}
-
 <h2>Create your web app</h2>
 <div class="container">
   <Input
diff --git a/packages/builder/src/components/start/TemplateList.svelte b/packages/builder/src/components/start/TemplateList.svelte
index 8f056b1a0e..e296f3cdd8 100644
--- a/packages/builder/src/components/start/TemplateList.svelte
+++ b/packages/builder/src/components/start/TemplateList.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Button, Heading } from "@budibase/bbui"
+  import { Button, Heading, Body } from "@budibase/bbui"
   import AppCard from "./AppCard.svelte"
   import Spinner from "components/common/Spinner.svelte"
   import api from "builderStore/api"
@@ -14,18 +14,22 @@
   let templatesPromise = fetchTemplates()
 </script>
 
-{#await templatesPromise}
-  <div class="spinner-container">
-    <Spinner />
-  </div>
-{:then templates}
-  <div class="root">
-    <Heading small black>Budibase Templates</Heading>
+<div class="root">
+  <Heading medium black>Start With a Template</Heading>
+  {#await templatesPromise}
+    <div class="spinner-container">
+      <Spinner size="30" />
+    </div>
+  {:then templates}
     <div class="templates">
       {#each templates as template}
         <div class="templates-card">
-          <h3 class="template-title">{template.name}</h3>
-          <Heading extraSmall black>{template.description}</Heading>
+          <Heading black medium>{template.name}</Heading>
+          <Body medium grey>{template.category}</Body>
+          <Body small black>{template.description}</Body>
+          <div>
+            <img src={template.image} width="300" />
+          </div>
           <div class="card-footer">
             <Button secondary on:click={() => onSelect(template)}>
               Create {template.name}
@@ -34,10 +38,10 @@
         </div>
       {/each}
     </div>
-  </div>
-{:catch err}
-  <h1 style="color:red">{err}</h1>
-{/await}
+  {:catch err}
+    <h1 style="color:red">{err}</h1>
+  {/await}
+</div>
 
 <style>
   .templates {
@@ -50,12 +54,14 @@
   .templates-card {
     background-color: var(--white);
     padding: var(--spacing-xl);
-    max-width: 300px;
-    max-height: 150px;
     border-radius: var(--border-radius-m);
     border: var(--border-dark);
   }
 
+  .card-footer {
+    margin-top: var(--spacing-m);
+  }
+
   h3 {
     font-size: var(--font-size-l);
     font-weight: 600;
diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index 8b2d2cdf76..fc797be89c 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@@ -5,25 +5,11 @@
   import AppList from "components/start/AppList.svelte"
   import { onMount } from "svelte"
   import ActionButton from "components/common/ActionButton.svelte"
-  import { get } from "builderStore/api"
   import Spinner from "components/common/Spinner.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import TemplateList from "components/start/TemplateList.svelte"
   import { Button } from "@budibase/bbui"
 
-  let promise = getApps()
-
-  async function getApps() {
-    const res = await get("/api/applications")
-    const json = await res.json()
-
-    if (res.ok) {
-      return json
-    } else {
-      throw new Error(json)
-    }
-  }
-
   let hasKey
 
   async function fetchKeys() {
@@ -34,7 +20,6 @@
 
   async function checkIfKeysAndApps() {
     const key = await fetchKeys()
-    const apps = await getApps()
     if (key) {
       hasKey = true
     } else {
@@ -79,17 +64,8 @@
   </div>
 </div>
 
-{#await promise}
-  <div class="spinner-container">
-    <Spinner />
-  </div>
-{:then result}
-  <!-- TODO: organise async for template list - make sure the template list is loaded when the app list is being loaded  -->
-  <TemplateList onSelect={showCreateAppModal} />
-  <AppList apps={result} />
-{:catch err}
-  <h1 style="color:red">{err}</h1>
-{/await}
+<TemplateList onSelect={showCreateAppModal} />
+<AppList />
 
 <style>
   .header {
@@ -128,12 +104,4 @@
     color: var(--white);
     font-weight: 500;
   }
-
-  .spinner-container {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
 </style>
diff --git a/packages/server/src/api/controllers/templates.js b/packages/server/src/api/controllers/templates.js
index c9750dee6f..c7be43b4e3 100644
--- a/packages/server/src/api/controllers/templates.js
+++ b/packages/server/src/api/controllers/templates.js
@@ -28,7 +28,7 @@ exports.downloadTemplate = async function(ctx) {
 }
 
 exports.exportTemplateFromApp = async function(ctx) {
-  const { appId, instanceId } = ctx.user.appId
+  const { appId, instanceId } = ctx.user
   const { templateName } = ctx.request.body
 
   await exportTemplateFromApp({
