From b0ac2a44123340dcaeaef2c23f9380528df2fb98 Mon Sep 17 00:00:00 2001
From: Peter Morton <mortonpd@hotmail.com>
Date: Wed, 19 Oct 2022 10:57:47 -0500
Subject: [PATCH] added basic error handling

---
 .env.development         |  2 +-
 src/ReferenceID.vue      | 36 +++++++++++++++++++++++++-----------
 src/components/Error.vue | 12 ++++++++++++
 3 files changed, 38 insertions(+), 12 deletions(-)
 create mode 100644 src/components/Error.vue

diff --git a/.env.development b/.env.development
index 3c6a459..0b0e5bc 100644
--- a/.env.development
+++ b/.env.development
@@ -1 +1 @@
-VITE_EO_SERVICES_URL=http://localhost:9000
+VITE_EO_SERVICES_URL=http://localhost:3000
diff --git a/src/ReferenceID.vue b/src/ReferenceID.vue
index 5f6c561..6a23ce9 100644
--- a/src/ReferenceID.vue
+++ b/src/ReferenceID.vue
@@ -1,31 +1,42 @@
 <script setup>
 import { ref } from 'vue'
+
 import ContactTable from './components/ContactTable.vue'
 import ContactsSummary from './components/ContactsSummary.vue';
+import Error from './components/Error.vue';
 
 const referenceId = ref('')
 const contactData = ref(null)
+const errorMessage = ref(null)
 
 function onInput(e) {
   referenceId.value = e.target.value
 }
 
-async function fetchData() {
+function fetchData() {
+  //clear errors
+  errorMessage.value = null
   contactData.value = null
-  const res = await fetch(`${import.meta.env.VITE_EO_SERVICES_URL}/unified-data-gateway?referenceId=${ referenceId.value }`, {
+  fetch(`${import.meta.env.VITE_EO_SERVICES_URL}/unified-data-gateway?referenceId=${ referenceId.value }`, {
       credentials: "include" // fetch won't send cookies unless you set credentials
-    })
-    contactData.value = await res.json()
-    console.log(contactData.value)
+    }).then (async response => {
+      const data = await response.json();
+
+      // check for error response
+      if (!response.ok) {
+        // get error message from body or default to response statusText
+        const error = data  || response.statusText;
+        return Promise.reject(error);
+      }
+    contactData.value = await data;
+    }).catch(error => {
+      errorMessage.value = error;
+    });
 }
 
 </script>
 <template>
   <div id="app">
-    <!-- <header>
-      <h1>Message Tracking Time</h1>
-    </header> -->
-
     <div>
       <label for="referenceId">Reference ID: </label>
       <input id="referenceId" :value="referenceId" @input="onInput" placeholder="enter Reference ID here" />
@@ -35,8 +46,11 @@ async function fetchData() {
     <ContactsSummary v-if="contactData" :summary="contactData.data.summary" />
     <div v-else>No Contacts Found</div>
     <ContactTable v-if="contactData" :tableData="contactData.data.findContactsCompletedBetween.edges" />
-    
+    <Error v-if="errorMessage" :errorMessage="errorMessage" />
+
   </div>
 </template>
-<style scoped></style>
+<style scoped>
+
+</style>
 
diff --git a/src/components/Error.vue b/src/components/Error.vue
new file mode 100644
index 0000000..71a61a0
--- /dev/null
+++ b/src/components/Error.vue
@@ -0,0 +1,12 @@
+<script setup>
+
+// eslint-disable-next-line
+defineProps(["errorMessage"]);
+</script>
+<template>
+    <p v-if="errorMessage">Error: {{ errorMessage }}</p>
+</template>
+
+<style>
+
+</style>
\ No newline at end of file