From f9d9bb72cb8c1982cbe3acecfff3389c1121aadf Mon Sep 17 00:00:00 2001
From: Dhivya Dandapani <dd.gothedistance@gmail.com>
Date: Fri, 3 Apr 2020 14:14:10 +0530
Subject: [PATCH 1/5] Handle async functions passed as source prop

---
 src/components/Autocomplete.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue
index f307552..2de9b31 100644
--- a/src/components/Autocomplete.vue
+++ b/src/components/Autocomplete.vue
@@ -241,6 +241,13 @@ export default {
           }
 
           return this.resourceSearch(this.source + this.display)
+        case this.source.constructor.name === 'AsyncFunction':
+          // No resource search with no input
+          if (!this.display || this.display.length < 1) {
+            return
+          }
+          // When the function is async and returns a promise
+          return this.handlePromise(this.source(this.display));
         case typeof this.source === 'function':
           // No resource search with no input
           if (!this.display || this.display.length < 1) {
@@ -279,6 +286,10 @@ export default {
         headers: this.getHeaders()
       })
 
+      return this.handlePromise(promise)
+    },
+
+    handlePromise: function (promise) {
       return promise
         .then(response => {
           if (response.ok) {
@@ -297,7 +308,6 @@ export default {
           this.loading = false
         })
     },
-
     /**
      * Set some default headers and apply user supplied headers
      */

From 8c947dd3a66fe6f6e3e9ee35160fddefc99685c4 Mon Sep 17 00:00:00 2001
From: Dhivya Dandapani <dd.gothedistance@gmail.com>
Date: Fri, 3 Apr 2020 14:18:45 +0530
Subject: [PATCH 2/5] Fix eslint semicolon error

---
 src/components/Autocomplete.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue
index 2de9b31..1396398 100644
--- a/src/components/Autocomplete.vue
+++ b/src/components/Autocomplete.vue
@@ -247,7 +247,7 @@ export default {
             return
           }
           // When the function is async and returns a promise
-          return this.handlePromise(this.source(this.display));
+          return this.handlePromise(this.source(this.display))
         case typeof this.source === 'function':
           // No resource search with no input
           if (!this.display || this.display.length < 1) {

From c2db1318a5341bf06b22adfe7f79cbc3d2e410ad Mon Sep 17 00:00:00 2001
From: Dhivya Dandapani <dd.gothedistance@gmail.com>
Date: Sat, 4 Apr 2020 12:49:39 +0530
Subject: [PATCH 3/5] Handle fetch response differntly from promise response

---
 src/components/Autocomplete.vue | 37 ++++++++++++++++++++++++++-------
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue
index 1396398..72627b6 100644
--- a/src/components/Autocomplete.vue
+++ b/src/components/Autocomplete.vue
@@ -63,6 +63,7 @@
 
 <script type="text/babel">
 import debounce from 'lodash/debounce'
+const NETWORK_RESPONSE_ERROR = 'Network response was not ok.'
 export default {
   props: {
     /**
@@ -247,7 +248,7 @@ export default {
             return
           }
           // When the function is async and returns a promise
-          return this.handlePromise(this.source(this.display))
+          return this.handleCallback(this.source(this.display))
         case typeof this.source === 'function':
           // No resource search with no input
           if (!this.display || this.display.length < 1) {
@@ -286,17 +287,37 @@ export default {
         headers: this.getHeaders()
       })
 
-      return this.handlePromise(promise)
+      return this.handleFetchRequest(promise)
     },
 
-    handlePromise: function (promise) {
+    handleFetchResponse: (response) => {
+      if (response.ok) {
+        this.error = null
+        return response.json()
+      }
+      throw new Error(NETWORK_RESPONSE_ERROR)
+    },
+
+    handlePromiseResolution: (response) => {
+      if (response.status === 200) {
+        this.error = null
+        return response
+      }
+      throw new Error(NETWORK_RESPONSE_ERROR)
+    },
+
+    handleFetchRequest (promise) {
+      return this.handlePromise(promise, (response) => this.handleFetchResponse(response))
+    },
+
+    handleCallback (promise) {
+      return this.handlePromise(promise, (response) => this.handlePromiseResolution(response))
+    },
+
+    handlePromise (promise, responseHandler) {
       return promise
         .then(response => {
-          if (response.ok) {
-            this.error = null
-            return response.json()
-          }
-          throw new Error('Network response was not ok.')
+          return responseHandler(response)
         })
         .then(response => {
           this.results = this.setResults(response)

From acbae3c9b08c5173132d0a16eb2205173ef25896 Mon Sep 17 00:00:00 2001
From: Dhivya Dandapani <dd.gothedistance@gmail.com>
Date: Sat, 4 Apr 2020 22:28:53 +0530
Subject: [PATCH 4/5] Fix: Convert objects into methods

---
 src/components/Autocomplete.vue | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue
index 72627b6..b0e6750 100644
--- a/src/components/Autocomplete.vue
+++ b/src/components/Autocomplete.vue
@@ -290,30 +290,26 @@ export default {
       return this.handleFetchRequest(promise)
     },
 
-    handleFetchResponse: (response) => {
+    handleFetchResponse (response) {
       if (response.ok) {
         this.error = null
         return response.json()
       }
       throw new Error(NETWORK_RESPONSE_ERROR)
     },
-
-    handlePromiseResolution: (response) => {
+    handlePromiseResolution (response) {
       if (response.status === 200) {
         this.error = null
         return response
       }
       throw new Error(NETWORK_RESPONSE_ERROR)
     },
-
-    handleFetchRequest (promise) {
+    handleFetchRequest: function (promise) {
       return this.handlePromise(promise, (response) => this.handleFetchResponse(response))
     },
-
     handleCallback (promise) {
       return this.handlePromise(promise, (response) => this.handlePromiseResolution(response))
     },
-
     handlePromise (promise, responseHandler) {
       return promise
         .then(response => {

From 16bc54e474450efc79bf13a481c1e41526eadbb5 Mon Sep 17 00:00:00 2001
From: Dhivya Dandapani <dd.gothedistance@gmail.com>
Date: Mon, 6 Apr 2020 19:59:10 +0530
Subject: [PATCH 5/5] DD | Add loading icon when promise is invoked

---
 src/components/Autocomplete.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue
index b0e6750..9cdd08b 100644
--- a/src/components/Autocomplete.vue
+++ b/src/components/Autocomplete.vue
@@ -308,6 +308,7 @@ export default {
       return this.handlePromise(promise, (response) => this.handleFetchResponse(response))
     },
     handleCallback (promise) {
+      this.loading = true
       return this.handlePromise(promise, (response) => this.handlePromiseResolution(response))
     },
     handlePromise (promise, responseHandler) {