From 7c831b76e2ac86a639eb1a67118acbbfd7961984 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Syn=C3=A1=C4=8Dek?=
 <ondrejsynacek@fastmail.com>
Date: Fri, 25 Dec 2020 09:59:13 +0100
Subject: [PATCH] improvement: disable input when request is pending

---
 lib/frontend/components/AppContainer.svelte   |  5 ++--
 lib/frontend/components/Input.svelte          |  5 ++++
 lib/frontend/components/InputContainer.svelte | 25 +++++++++++++++++++
 lib/frontend/components/Status.svelte         | 23 +++++++++--------
 4 files changed, 44 insertions(+), 14 deletions(-)
 create mode 100644 lib/frontend/components/InputContainer.svelte

diff --git a/lib/frontend/components/AppContainer.svelte b/lib/frontend/components/AppContainer.svelte
index a7c741a..0e290e0 100644
--- a/lib/frontend/components/AppContainer.svelte
+++ b/lib/frontend/components/AppContainer.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Input from './Input.svelte'
+  import InputContainer from './InputContainer.svelte'
   import EventList from './EventList.svelte'
   import Status from './Status.svelte'
   import TrackingPanel from './TrackingPanel.svelte'
@@ -14,8 +14,7 @@
   <TrackingPanel />
 {/if}
 
-<Status />
-<Input />
+<InputContainer />
 {#if showEventList}
   <EventList />
 {/if}
diff --git a/lib/frontend/components/Input.svelte b/lib/frontend/components/Input.svelte
index 156964f..3a3be84 100644
--- a/lib/frontend/components/Input.svelte
+++ b/lib/frontend/components/Input.svelte
@@ -19,6 +19,9 @@
   import { createEvent } from '../actions'
   import logger from '../services/logger'
 
+  export let error
+  export let pending
+
   let value
 
   const onChange = (e) => {
@@ -38,6 +41,7 @@
     id="url"
     name="url"
     bind:value={value}
+    disabled={pending}
     placeholder="Paste / type FB event URL or event number..."
     title="Please insert Facebook Event URL / Number"
   />
@@ -45,6 +49,7 @@
     id="submit"
     type='submit'
     value='Submit'
+    disabled={pending}
     on:click={handleSubmit}
   />
 </form>
diff --git a/lib/frontend/components/InputContainer.svelte b/lib/frontend/components/InputContainer.svelte
new file mode 100644
index 0000000..14bcad9
--- /dev/null
+++ b/lib/frontend/components/InputContainer.svelte
@@ -0,0 +1,25 @@
+<script>
+  import { parseStatusStore, requestStore, swStatusStore } from '../stores'
+  import Input from './Input.svelte'
+  import Status from './Status.svelte'
+
+  $: error = ($requestStore && $requestStore.error) ? $requestStore.error : null
+  $: pending = Boolean($requestStore && !$requestStore.error)
+  $: pendingRequest = $requestStore
+  $: status = $parseStatusStore
+  $: swStatus = $swStatusStore
+</script>
+
+<div class="input-container">
+  <Input
+    {pending}
+    {error}
+  />
+  <Status
+    {error}
+    {pending}
+    {pendingRequest}
+    {status}
+    {swStatus}
+  />
+</div>
diff --git a/lib/frontend/components/Status.svelte b/lib/frontend/components/Status.svelte
index e2c3e43..2145ae4 100644
--- a/lib/frontend/components/Status.svelte
+++ b/lib/frontend/components/Status.svelte
@@ -14,31 +14,32 @@
 </style>
 
 <script>
-  import { parseStatusStore, requestStore, swStatusStore } from '../stores'
-
-  $: error = ($requestStore && $requestStore.error) ? $requestStore.error : null
-  $: pendingRequest = Boolean($requestStore && !$requestStore.error)
+  export let error
+  export let pending
+  export let pendingRequest
+  export let status
+  export let swStatus
 </script>
 
 <div id='status'>
   {#if error}
-    <div class='status-item'>
+    <div class='status-item status-item--error'>
       {error.toString()}
     </div>
   {/if}
-  {#if pendingRequest}
+  {#if pending && pendingRequest}
     <div class='status-item'>
-      Fetching event {$requestStore.url}
+      Fetching event {pendingRequest.url}
     </div>
   {/if}
-  {#if $parseStatusStore}
+  {#if status}
     <div class='status-item'>
-      {$parseStatusStore}
+      {status}
     </div>
   {/if}
-  {#if $swStatusStore}
+  {#if swStatus}
     <div class='status-item'>
-      {$swStatusStore}
+      {swStatus}
     </div>
   {/if}
 </div>