Add custom pdc-api hook

This commit 'migrates' our generic api hook for fetching resources from
the pdc-api, replacing react's reactivity and state-based functions with
those from vue. Also, our new auth package sadly does not provide an
authorized fetch function, so we are instead using it's getToken hook
and adding that to our fetch header. In trying to recreate the exisiting
react function as closely as possible, there is likely room here for
making things more vue-y in the future. But having tested locally it
seems to function as expected.

Similar to react's useEffect, we would want to call the fetchData
function as the callback to vue's onMounted lifecylce hook.

Issue #1009 Rebuild frontend in Vue

Author: hminsky2002

oldSrc/pdc-api.ts

@@ -0,0 +1,49 @@
+import { ref, onMounted, watch } from 'vue';
+import { useKeycloak } from '@dsb-norge/vue-keycloak-js';
+import type { BaseField } from '@pdc/sdk';
+import { getLogger } from '@/logger';
+
+const logger = getLogger('pdc-api');
+const API_URL = import.meta.env.VITE_API_URL;
+
+const { token } = useKeycloak();
+
+function throwIfNotOk(res: Response) {
+	if (!res.ok) {
+		throw new Error(`Response status: ${res.status} ${res.statusText}`);
+	}
+	return res;
+}
+
+export function usePdcApi<T>(path: string, params = new URLSearchParams()) {
+	const data = ref<T | null>(null);
+
+	const fetchData = async () => {
+		data.value = null;
+		try {
+			const url = new URL(path, API_URL);
+			url.search = params.toString();
+
+			const res = await fetch(url.toString(), {
+				headers: { Authorization: `Bearer ${token}` },
+			}).then(throwIfNotOk);
+
+			data.value = (await res.json()) as T;
+		} catch (err) {
+			logger.error(
+				{ error: err, params: params.toString() },
+				`Error fetching ${path}`,
+			);
+		}
+	};
+
+	onMounted(fetchData);
+
+	watch(() => params.toString(), fetchData);
+
+	return { data, fetchData };
+}
+
+export function useBaseFields() {
+	return usePdcApi<BaseField[]>('/baseFields');
+}