From 98cd8383a16afdcff2f9a6cf566d08f6571e7696 Mon Sep 17 00:00:00 2001
From: James Brooks <jbrooksuk@me.com>
Date: Sun, 17 Jun 2018 11:47:53 +0100
Subject: [PATCH] Add FetchData component

---
 resources/assets/js/app.js                   |  4 ++-
 resources/assets/js/components/FetchData.vue | 31 ++++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 resources/assets/js/components/FetchData.vue

diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index e3926942..6cc822fc 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -27,6 +27,8 @@ window.axios.defaults.headers.common = {
      * or customize the JavaScript scaffolding to fit your unique needs.
      */
 
+    Vue.component('fetch-data', require('./components/FetchData'));
+
     new Vue({
         el: '#app',
         data () {
@@ -48,5 +50,5 @@ window.axios.defaults.headers.common = {
             'invite-team': require('./components/dashboard/InviteTeam'),
             'metric-chart': require('./components/status-page/Metric'),
         }
-    })
+    });
 })()
diff --git a/resources/assets/js/components/FetchData.vue b/resources/assets/js/components/FetchData.vue
new file mode 100644
index 00000000..354ce30e
--- /dev/null
+++ b/resources/assets/js/components/FetchData.vue
@@ -0,0 +1,31 @@
+<script>
+export default {
+    props: ['url'],
+    data() {
+        return {
+            loaded: false,
+            response: null,
+        }
+    },
+    created() {
+        axios.get(this.url)
+            .then((response) => {
+                this.response = response
+                this.loaded = true
+            })
+    },
+    render() {
+        if (!this.loaded) {
+            return this.$scopedSlots.default({
+                loading: true,
+                response: null,
+            })
+        }
+
+        return this.$scopedSlots.default({
+            loading: false,
+            response: this.response.data,
+        })
+    },
+}
+</script>