New Screen - Route Validation

packages/builder/src/userInterface/NewComponent.svelte

@@ -21,30 +21,31 @@
   let layoutComponent
   let screens
   let name = ""
-  let route = ""
+  
   let saveAttempted = false
 
-  store.subscribe(s => {
-    layoutComponents = pipe(
-      s.components,
+  $: layoutComponents = pipe(
+      $store.components,
       [
         filter(c => c.container),
         map(c => ({ name: c.name, ...splitName(c.name) })),
       ]
     )
 
-    layoutComponent = layoutComponent
+  $: layoutComponent = layoutComponent
       ? find(c => c.name === layoutComponent.name)(layoutComponents)
       : layoutComponents[0]
 
-    screens = s.screens
-  })
+  $: screens = $store.screens
+  $: route = !route && screens.length === 0 ? "*" : route
 
   const save = () => {
     saveAttempted = true
 
     const isValid =
-      name.length > 0 && !screenNameExists(name) && layoutComponent
+      name.length > 0 && !screenNameExists(name) 
+      && route.length > 0 && !routeNameExists(route) 
+      && layoutComponent
 
     if (!isValid) return
 
@@ -61,6 +62,19 @@
       return s.name.toLowerCase() === name.toLowerCase()
     })(screens)
   }
+
+  const routeNameExists = route => {
+    return some(s => {
+      return s.route.toLowerCase() === route.toLowerCase()
+    })(screens)
+  }
+
+  const routeChanged = event => {
+    const r = event.target.value
+    if (!r.startsWith("/")) {
+      route = "/" + r
+    }
+  }
 </script>
 
 <div bind:this={componentSelectorModal} id="new-component-modal" uk-modal>
@@ -86,8 +100,9 @@
         <div class="uk-form-controls">
           <input
             class="uk-input uk-form-small"
-            class:uk-form-danger={saveAttempted && route.length === 0}
-            bind:value={route} />
+            class:uk-form-danger={saveAttempted && (route.length === 0 || routeNameExists(route))}
+            bind:value={route} 
+            on:change={routeChanged}/>
         </div>
       </div>