From eb570d8254c5fdd6ac8cc1af09a722f71324474e Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Sat, 27 Mar 2021 20:28:03 +0100
Subject: [PATCH] add error handling

---
 .../src/components/survey/UserExperiences.vue    | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/2021-03-17_http-01-starting-setup/src/components/survey/UserExperiences.vue b/2021-03-17_http-01-starting-setup/src/components/survey/UserExperiences.vue
index c84bee3..27f2705 100644
--- a/2021-03-17_http-01-starting-setup/src/components/survey/UserExperiences.vue
+++ b/2021-03-17_http-01-starting-setup/src/components/survey/UserExperiences.vue
@@ -7,7 +7,12 @@
           >Load Submitted Experiences</base-button
         >
       </div>
-      <ul>
+      <p v-if="isLoading">Loading</p>
+      <p v-else-if="!isLoading && error">{{ error }}</p>
+      <p v-else-if="!isLoading && (!results || results.length === 0)">
+        No data to show
+      </p>
+      <ul v-else>
         <survey-result
           v-for="result in results"
           :key="result.id"
@@ -29,7 +34,9 @@ export default {
   },
   data() {
     return {
-      results: []
+      results: [],
+      isLoading: false,
+      error: null
     };
   },
   methods: {
@@ -39,6 +46,8 @@ export default {
           'https://vue-http-demo-8a928-default-rtdb.europe-west1.firebasedatabase.app/surveys.json'
         )
         .then(response => {
+          this.isLoading = true;
+          this.error = null;
           const data = response.data;
           const results = [];
           for (const id in data) {
@@ -48,10 +57,13 @@ export default {
               rating: data[id].rating
             });
           }
+          this.isLoading = false;
           this.results = results;
         })
         .catch(error => {
           console.log(error);
+          this.isLoading = false;
+          this.error = 'Failed to fetch data - please try again later.';
         });
     }
   },