Frontend has proper error handling & api fetching is in it's own file

1 files changed, 35 insertions, 0 deletions

diff --git a/packages/client/src/util/fetch.js b/packages/client/src/util/fetch.js
new file mode 100644
index 0000000..a6a43b0
--- /dev/null
+++ b/packages/client/src/util/fetch.js
@@ -0,0 +1,35 @@
+export default async function(endpoint, fetch_failed, is_loading, data_name) {
+	const fetch_timeout = setTimeout(() => {
+		if(!fetch_failed.value) {
+			fetch_failed.value = `Failed to fetch ${data_name} data.`;
+			is_loading.value = false;
+		}
+	}, 5000);
+
+	const data_req = await fetch(`${window.location.protocol}//${window.location.host}/api/v1/${endpoint}`).catch(() => {
+		if(!fetch_failed.value) {
+			fetch_failed.value = `Failed to fetch ${data_name} data.`;
+			is_loading.value = false;
+			clearTimeout(fetch_timeout);
+		}
+		return null;
+	});
+
+	if(data_req !== null) {
+		const data = await data_req.json().catch(() => {
+			fetch_failed.value = "Failed to parse server response.";
+		});
+
+		if(data_req.ok) {
+			clearTimeout(fetch_timeout);
+			is_loading.value = false;
+			return data.data;
+		} else {
+			fetch_failed.value = `Failed to fetch ${data_name} data.`;
+		}
+	}
+
+	clearTimeout(fetch_timeout);
+	is_loading.value = false;
+	return null;
+};