⚡ Moves common functionality into reusable mixin

src/components/Widgets/CryptoPriceChart.vue

@@ -18,9 +18,6 @@ export default {
       chartDom: null,
     };
   },
-  mounted() {
-    this.fetchData();
-  },
   computed: {
     /* The crypto asset to fetch price data for */
     asset() {
@@ -61,11 +58,6 @@ export default {
     },
   },
   methods: {
-    /* Extends mixin, and updates data. Called by parent component */
-    update() {
-      this.startLoading();
-      this.fetchData();
-    },
     /* Create new chart, using the crypto data */
     generateChart() {
       return new Chart(`#${this.chartId}`, {

src/components/Widgets/CryptoWatchList.vue

@@ -32,9 +32,6 @@ export default {
       cryptoData: null,
     };
   },
-  mounted() {
-    this.fetchData();
-  },
   computed: {
     /* The crypto assets to fetch price data for */
     assets() {
@@ -82,11 +79,6 @@ export default {
     },
   },
   methods: {
-    /* Extends mixin, and updates data. Called by parent component */
-    update() {
-      this.startLoading();
-      this.fetchData();
-    },
     /* Make GET request to CoinGecko API endpoint */
     fetchData() {
       axios.get(this.endpoint)

src/components/Widgets/ExchangeRates.vue

@@ -24,9 +24,6 @@ export default {
       exchangeRates: null,
     };
   },
-  mounted() {
-    this.fetchData();
-  },
   computed: {
     /* The users API key for exchangerate-api.com */
     apiKey() {
@@ -51,11 +48,6 @@ export default {
     },
   },
   methods: {
-    /* Extends mixin, and updates data. Called by parent component */
-    update() {
-      this.startLoading();
-      this.fetchData();
-    },
     /* Make GET request to CoinGecko API endpoint */
     fetchData() {
       axios.get(this.endpoint)

src/components/Widgets/Flights.vue

@@ -43,9 +43,6 @@ export default {
       arrivals: [],
     };
   },
-  mounted() {
-    this.fetchData();
-  },
   filters: {
     formatDate(date) {
       const d = new Date(date);
@@ -105,11 +102,6 @@ export default {
     },
   },
   methods: {
-    /* Extends mixin, and updates data. Called by parent component */
-    update() {
-      this.startLoading();
-      this.fetchData();
-    },
     /* Make GET request to CoinGecko API endpoint */
     fetchData() {
       const requestConfig = {

src/components/Widgets/Jokes.vue

@@ -20,9 +20,6 @@ export default {
       jokeLine2: null,
     };
   },
-  mounted() {
-    this.fetchData();
-  },
   computed: {
     /* Language code to fetch jokes for */
     language() {
@@ -53,11 +50,6 @@ export default {
     },
   },
   methods: {
-    /* Extends mixin, and updates data. Called by parent component */
-    update() {
-      this.startLoading();
-      this.fetchData();
-    },
     /* Make GET request to Jokes API endpoint */
     fetchData() {
       axios.get(this.endpoint)

src/components/Widgets/NdCpuHistory.vue

@@ -17,9 +17,6 @@ export default {
       chartDom: null,
     };
   },
-  mounted() {
-    this.fetchData();
-  },
   computed: {
     /* URL where NetData is hosted */
     netDataHost() {

src/components/Widgets/NdLoadHistory.vue

@@ -17,9 +17,6 @@ export default {
       chartDom: null,
     };
   },
-  mounted() {
-    this.fetchData();
-  },
   computed: {
     /* URL where NetData is hosted */
     netDataHost() {

src/components/Widgets/NdRamHistory.vue

@@ -13,9 +13,6 @@ import ChartingMixin from '@/mixins/ChartingMixin';
 export default {
   mixins: [WidgetMixin, ChartingMixin],
   components: {},
-  mounted() {
-    this.fetchData();
-  },
   computed: {
     /* URL where NetData is hosted */
     netDataHost() {

src/components/Widgets/RssFeed.vue

@@ -42,9 +42,6 @@ export default {
       posts: null,
     };
   },
-  mounted() {
-    this.fetchData();
-  },
   computed: {
     /* The URL to users atom-format RSS feed */
     rssUrl() {
@@ -91,11 +88,6 @@ export default {
     },
   },
   methods: {
-    /* Extends mixin, and updates data. Called by parent component */
-    update() {
-      this.startLoading();
-      this.fetchData();
-    },
     /* Make GET request to Rss2Json */
     fetchData() {
       axios.get(this.endpoint)

src/components/Widgets/StockPriceChart.vue

@@ -18,9 +18,6 @@ export default {
       chartDom: null,
     };
   },
-  mounted() {
-    this.fetchData();
-  },
   computed: {
     /* The stock or share asset symbol to fetch data for */
     stock() {
@@ -66,11 +63,6 @@ export default {
     },
   },
   methods: {
-    /* Extends mixin, and updates data. Called by parent component */
-    update() {
-      this.startLoading();
-      this.fetchData();
-    },
     /* Create new chart, using the crypto data */
     generateChart() {
       return new Chart(`#${this.chartId}`, {

src/components/Widgets/SystemInfo.vue

@@ -52,11 +52,6 @@ export default {
     },
   },
   methods: {
-    /* Extends mixin, and updates data. Called by parent component */
-    update() {
-      this.startLoading();
-      this.fetchData();
-    },
     /* Make GET request to CoinGecko API endpoint */
     fetchData() {
       axios.get(this.endpoint)

src/components/Widgets/TflStatus.vue

@@ -49,11 +49,6 @@ export default {
     },
   },
   methods: {
-    /* Extends mixin, and updates data. Called by parent component */
-    update() {
-      this.startLoading();
-      this.fetchData();
-    },
     /* Makes GET request to the TFL API */
     fetchData() {
       axios.get(widgetApiEndpoints.tflStatus)
@@ -114,10 +109,6 @@ export default {
       this.showAll = !this.showAll;
     },
   },
-  created() {
-    if (this.options.showAll) this.showAll = true;
-    this.fetchData();
-  },
 };
 </script>
 

src/components/Widgets/XkcdComic.vue

@@ -23,9 +23,6 @@ export default {
       comicNum: '',
     };
   },
-  mounted() {
-    this.fetchData();
-  },
   computed: {
     /* Let user select which comic to display: random, latest or a specific number */
     comicNumber() {
@@ -44,11 +41,6 @@ export default {
     },
   },
   methods: {
-    /* Extends mixin, and updates data. Called by parent component */
-    update() {
-      this.startLoading();
-      this.fetchData();
-    },
     /* Make GET request to CoinGecko API endpoint */
     fetchData() {
       axios.get(this.endpoint)