From b2d2c25bd1765f419c25f908390c19086a81d321 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Wed, 27 May 2020 11:44:15 +0200
Subject: [PATCH] add fetch

---
 .../src/components/start/AppCard.svelte       |  6 ++--
 .../src/components/start/AppList.svelte       |  5 ++--
 .../components/start/CreateAppModal.svelte    | 30 +++++++++++++++----
 .../src/pages/[application]/_reset.svelte     |  1 +
 4 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/start/AppCard.svelte b/packages/builder/src/components/start/AppCard.svelte
index 6ba02d4f9b..a54012ac0a 100644
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@@ -2,6 +2,8 @@
   import Button from "components/common/Button.svelte"
   export let name, description =`A minimalist CRM which removes the noise and allows you to focus
               on your business.`, _id;
+              
+  
 </script>
 
 <div class="apps-card">
@@ -31,8 +33,8 @@
     background-color: var(--grey-light);
     text-decoration: none;
   }
-          
-                .app-title {
+  
+  .app-title {
     font-size: 18px;
     font-weight: 700;
     color: var(--ink);
diff --git a/packages/builder/src/components/start/AppList.svelte b/packages/builder/src/components/start/AppList.svelte
index 61ab0244a3..e3b1f572e1 100644
--- a/packages/builder/src/components/start/AppList.svelte
+++ b/packages/builder/src/components/start/AppList.svelte
@@ -26,8 +26,9 @@
 <style>
   .apps {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(400, 1fr));
-    gap: 85px;
+    grid-template-columns: repeat(auto-fill, 400px);
+    grid-gap: 40px 85px;
+    justify-content: start;
   }
   .root {
     margin: 40px 80px;
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 66bb2ac941..f3faee047b 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -6,6 +6,27 @@
   export let onOkay = () => {}
 
   const { close } = getContext("simple-modal")
+  
+  let name = ""
+  let description = ""
+  
+  const createNewApp = async () => {
+    const data = { name, description}    
+    
+    try {
+      const response = await fetch('/api/applications', {
+        method: 'POST', // *GET, POST, PUT, DELETE, etc.
+        credentials: 'same-origin', // include, *same-origin, omit
+        headers: {
+          'Content-Type': 'application/json'
+          // 'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: JSON.stringify(data) // body data type must match "Content-Type" header
+      });
+    } catch (error) {
+      
+    }
+  }
 
   let value
   let onChange = () => {}
@@ -15,12 +36,10 @@
     close()
   }
 
-  function _onOkay() {
-    onOkay(value)
+  async function _onOkay() {
+    await createNewApp()
     close()
   }
-
-  $: onChange(value)
 </script>
 
 <div class="container">
@@ -29,8 +48,9 @@
       <span class="icon"><AppsIcon /></span>
       <h3>Create new web app</h3>
     </div>
-    <Input name="name" label="Name" placeholder="Enter application name" />
+    <Input name="name" label="Name" placeholder="Enter application name" on:change={(e) => name = e.target.value} on:input={(e) => name = e.target.value} />
     <TextArea
+      bind:value={description}
       name="description"
       label="Description"
       placeholder="Describe your application" />
diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index 5de5e3379b..e21518f9f0 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -20,6 +20,7 @@
       await store.setPackage(pkg)
       return pkg
     } else {
+      console.log(pkg)
       throw new Error(pkg)
     }
   }