From 01d3a1d1dbcc8aeeece643368ce24ca991ac4e12 Mon Sep 17 00:00:00 2001
From: Liam Keegan <liam@keegan.ch>
Date: Wed, 6 Nov 2024 10:23:44 +0100
Subject: [PATCH] Use setTimeout instead of setInterval

- auto-refresh user samples table every 20secs
- auto-refresh admin samples and jobs tables every 30secs
- resolves #42
---
 frontend/src/components/JobsTable.vue | 11 ++++++++++-
 frontend/src/views/AdminView.vue      | 11 ++++++++++-
 frontend/src/views/SamplesView.vue    |  7 ++++---
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/JobsTable.vue b/frontend/src/components/JobsTable.vue
index ded9d71..49a8ae6 100644
--- a/frontend/src/components/JobsTable.vue
+++ b/frontend/src/components/JobsTable.vue
@@ -9,7 +9,7 @@ import {
 } from "flowbite-vue";
 import type { Job } from "@/utils/types";
 import { apiClient, logout } from "@/utils/api-client";
-import { ref } from "vue";
+import { onUnmounted, ref } from "vue";
 
 const jobs = ref([] as Job[]);
 
@@ -29,6 +29,15 @@ function get_jobs() {
 
 get_jobs();
 
+let update_data_handle = setTimeout(function update_data() {
+  get_jobs();
+  update_data_handle = setTimeout(update_data, 30000);
+});
+
+onUnmounted(() => {
+  clearTimeout(update_data_handle);
+});
+
 function get_runtime_minutes(job: Job): number {
   if (job.status === "running") {
     return Math.ceil((Date.now() / 1000 - job.timestamp_start) / 60);
diff --git a/frontend/src/views/AdminView.vue b/frontend/src/views/AdminView.vue
index d8110a0..49b031e 100644
--- a/frontend/src/views/AdminView.vue
+++ b/frontend/src/views/AdminView.vue
@@ -6,7 +6,7 @@ import ListComponent from "@/components/ListComponent.vue";
 import JobsTable from "@/components/JobsTable.vue";
 import ListItem from "@/components/ListItem.vue";
 import { FwbButton, FwbTab, FwbTabs } from "flowbite-vue";
-import { ref } from "vue";
+import { onUnmounted, ref } from "vue";
 import type { Sample } from "@/utils/types";
 import { apiClient, logout } from "@/utils/api-client";
 
@@ -44,6 +44,15 @@ function get_samples() {
 }
 
 get_samples();
+
+let update_data_handle = setTimeout(function update_data() {
+  get_samples();
+  update_data_handle = setTimeout(update_data, 30000);
+});
+
+onUnmounted(() => {
+  clearTimeout(update_data_handle);
+});
 </script>
 
 <template>
diff --git a/frontend/src/views/SamplesView.vue b/frontend/src/views/SamplesView.vue
index 25b9a94..909f085 100644
--- a/frontend/src/views/SamplesView.vue
+++ b/frontend/src/views/SamplesView.vue
@@ -147,13 +147,14 @@ update_samples();
 
 const submit_message = ref("");
 
-let update_data = setInterval(() => {
+let update_data_handle = setTimeout(function update_data() {
   update_samples();
   update_submit_message();
-}, 30000);
+  update_data_handle = setTimeout(update_data, 20000);
+});
 
 onUnmounted(() => {
-  clearInterval(update_data);
+  clearTimeout(update_data_handle);
 });
 
 function update_submit_message() {