update handling of app updates

packages/builder/src/components/start/AppRow.svelte

@@ -7,7 +7,6 @@
     MenuItem,
     StatusLight,
   } from "@budibase/bbui"
-  import { apps } from "stores/portal"
   import { processStringSync } from "@budibase/string-templates"
 
   export let app
@@ -19,19 +18,12 @@
   export let unpublishApp
   export let releaseLock
   export let editIcon
-
-  $: color =
-    $apps.find(filtered_app => app?.appId === filtered_app.appId)?.icon
-      ?.color || ""
-  $: name =
-    $apps.find(filtered_app => app?.appId === filtered_app.appId)?.icon?.name ||
-    "Apps"
 </script>
 
 <div class="title">
   <div style="display: flex;">
-    <div style="color: {color}">
+    <div style="color: {app.icon?.color || ''}">
-      <Icon size="XL" {name} />
+      <Icon size="XL" name={app.icon?.name || "Apps"} />
     </div>
     <div class="name" on:click={() => editApp(app)}>
       <Heading size="XS">
@@ -99,7 +91,7 @@
       <MenuItem on:click={() => updateApp(app)} icon="Edit">Edit</MenuItem>
       <MenuItem on:click={() => deleteApp(app)} icon="Delete">Delete</MenuItem>
     {/if}
-    <MenuItem on:click={() => editIcon(app)} icon="Edit">Edit Icon</MenuItem>
+    <MenuItem on:click={() => editIcon(app)} icon="Brush">Edit Icon</MenuItem>
   </ActionMenu>
 </div>
 

packages/builder/src/components/start/ChooseIconModal.svelte

@@ -51,9 +51,11 @@
   }
 
   const save = async () => {
-    await apps.updateIcon(app.instance._id, {
+    await apps.update(app.instance._id, {
-      name: selectedIcon,
+      icon: {
-      color: selectedColor,
+        name: selectedIcon,
+        color: selectedColor,
+      },
     })
   }
 </script>
@@ -66,7 +68,7 @@
   >
     <div class="scrollable-icons">
       <div class="title-spacing">
-        <Label>Select an Icon:</Label>
+        <Label>Select an Icon</Label>
       </div>
       <div class="grid">
         {#each iconsList as item}
@@ -82,7 +84,7 @@
     </div>
     <div class="color-selection">
       <div>
-        <Label>Select a Color:</Label>
+        <Label>Select a Color</Label>
       </div>
       <div class="color-selection-item">
         <ColorPicker

packages/builder/src/components/start/CreateAppModal.svelte

@@ -15,6 +15,7 @@
 
   export let template
   export let inline
+
   const values = writable({ name: null })
   const errors = writable({})
   const touched = writable({})
@@ -195,7 +196,9 @@
       error={$touched.name && $errors.name}
       on:blur={() => ($touched.name = true)}
       label="Name"
-      placeholder={`${$auth.user.firstName}'s first app`}
+      placeholder={$auth.user.firstName
+        ? `${$auth.user.firstName}'s app`
+        : "My app"}
     />
   </ModalContent>
 {/if}

packages/builder/src/components/start/UpdateAppModal.svelte

@@ -77,7 +77,7 @@
   async function updateApp() {
     try {
       // Update App
-      await apps.update(app.instance._id, $values.name.trim())
+      await apps.update(app.instance._id, { name: $values.name.trim() })
       hide()
     } catch (error) {
       console.error(error)

packages/builder/src/pages/builder/portal/apps/index.svelte

@@ -366,8 +366,7 @@
       </div>
       <div class="appTable">
         {#each filteredApps as app (app.appId)}
-          <svelte:component
+          <AppRow
-            this={AppRow}
             {releaseLock}
             {editIcon}
             {app}

packages/builder/src/stores/portal/apps.js

@@ -65,37 +65,17 @@ export function createAppStore() {
     }
   }
 
-  async function updateIcon(appId, icon) {
+  async function update(appId, value) {
-    const response = await api.put(`/api/applications/${appId}`, { icon })
+    console.log({ value })
-    if (response.status === 200) {
+    const response = await api.put(`/api/applications/${appId}`, { ...value })
-      store.update(state => {
-        const updatedAppIndex = state.findIndex(
-          app => app.instance._id === appId
-        )
-
-        if (updatedAppIndex !== -1) {
-          const updatedApp = state[updatedAppIndex]
-          updatedApp.icon = icon
-          state.apps = state.splice(updatedAppIndex, 1, updatedApp)
-        }
-
-        return state
-      })
-    } else {
-      throw new Error("Error updating icon")
-    }
-  }
-
-  async function update(appId, name) {
-    const response = await api.put(`/api/applications/${appId}`, { name })
     if (response.status === 200) {
       store.update(state => {
         const updatedAppIndex = state.findIndex(
           app => app.instance._id === appId
         )
         if (updatedAppIndex !== -1) {
-          const updatedApp = state[updatedAppIndex]
+          let updatedApp = state[updatedAppIndex]
-          updatedApp.name = name
+          updatedApp = { ...updatedApp, ...value }
           state.apps = state.splice(updatedAppIndex, 1, updatedApp)
         }
         return state
@@ -109,7 +89,6 @@ export function createAppStore() {
     subscribe: store.subscribe,
     load,
     update,
-    updateIcon,
   }
 }