Simplify DownloadMonitor by getting rid of timeout

and instead calling the Vuex store directly in the template

Author: VilppeRiskidev

Diff for: src/pages/DownloadMonitor.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <Hero title="Downloads" subtitle="Monitor progress of downloads" hero-type="primary"/>
-        <template v-if="activeDownloads.length === 0">
+        <template v-if="$store.state.download.allDownloads.length === 0">
             <div class='text-center top'>
                 <div class="margin-right">
                     <br/>
@@ -13,7 +13,7 @@
             </div>
         </template>
         <template v-else>
-            <div v-for="(downloadObject, index) of activeDownloads" :key="`download-progress-${index}`">
+            <div v-for="(downloadObject, index) of $store.getters['download/newestFirst']" :key="`download-progress-${index}`">
                 <div>
                     <div class="container margin-right">
                         <div class="border-at-bottom pad pad--sides">
@@ -42,12 +42,10 @@
 
 <script lang="ts">
 
-import Timeout = NodeJS.Timeout;
 import { Component, Vue } from 'vue-property-decorator';
 
 import { Hero } from '../components/all';
 import Progress from '../components/Progress.vue';
-import { DownloadProgress } from "../store/modules/DownloadModule";
 
 @Component({
     components: {
@@ -56,20 +54,6 @@ import { DownloadProgress } from "../store/modules/DownloadModule";
     }
 })
 export default class DownloadMonitor extends Vue {
-    private refreshInterval!: Timeout;
-    private activeDownloads: DownloadProgress[] = [];
-
-    created() {
-        this.activeDownloads = [...this.$store.state.download.allDownloads].reverse();
-        this.refreshInterval = setInterval(() => {
-            this.activeDownloads = [...this.$store.state.download.allDownloads].reverse();
-        }, 100);
-    }
-
-    destroyed() {
-        clearInterval(this.refreshInterval);
-    }
-
 }
 
 </script>

Diff for: src/store/modules/DownloadModule.ts

@@ -3,7 +3,7 @@ import { ActionTree, GetterTree } from "vuex";
 import { State as RootState } from "../../store";
 import R2Error from "../../model/errors/R2Error";
 
-export interface DownloadProgress {
+interface DownloadProgress {
     assignId: number;
     initialMods: string[];
     modName: string;
@@ -59,6 +59,9 @@ export const DownloadModule = {
         currentDownload(state) {
             return state.allDownloads[state.allDownloads.length-1] || null;
         },
+        newestFirst(state) {
+            return Array.from(state.allDownloads).reverse();
+        },
     },
 
     mutations: {