Added API

resources/js/Composables/useApiResource.ts

@@ -0,0 +1,42 @@
+import { ref, onMounted, onUnmounted, type Ref } from 'vue'
+import axios from 'axios'
+import { api } from '@/api'
+
+interface UseApiResourceReturn<T> {
+    data: Ref<T | null>
+    loading: Ref<boolean>
+    error: Ref<string | null>
+    refresh: () => Promise<void>
+}
+
+export function useApiResource<T>(url: string, immediate = true): UseApiResourceReturn<T> {
+    const data = ref<T | null>(null) as Ref<T | null>
+    const loading = ref(true)
+    const error = ref<string | null>(null)
+
+    let controller = new AbortController()
+
+    async function refresh() {
+        controller.abort()
+        controller = new AbortController()
+        loading.value = true
+        error.value = null
+
+        try {
+            const response = await api.get<T>(url, { signal: controller.signal })
+            data.value = response.data
+        } catch (e) {
+            if (!axios.isCancel(e)) {
+                error.value = 'Failed to load data'
+                console.error(e)
+            }
+        } finally {
+            loading.value = false
+        }
+    }
+
+    if (immediate) onMounted(refresh)
+    onUnmounted(() => controller.abort())
+
+    return { data, loading, error, refresh }
+}

resources/js/Composables/useFlights.ts

@@ -1,21 +1,12 @@
-// useFlights.ts
-import {onMounted, ref} from "vue";
-import {Flight} from "@/Types/types";
-import axios from "axios";
+import { computed } from 'vue'
+import { useApiResource } from '@/Composables/useApiResource'
+import type { Flight } from '@/Types/types'
 
 export function useFlights(url: string, departedOnly: boolean = false) {
-    const flights = ref<Flight[]>([])
-    const flightsLoading = ref(true)
+    const requestUrl = departedOnly ? `${url}/departed` : url
+    const { data, loading, error } = useApiResource<Flight[]>(requestUrl)
 
-    onMounted(async () => {
-        try {
-            const requestUrl = departedOnly ? `${url}/departed` : url
-            const response = await axios.get(requestUrl)
-            flights.value = response.data
-        } finally {
-            flightsLoading.value = false
-        }
-    })
+    const flights = computed(() => data.value ?? [])
 
-    return { flights, flightsLoading }
+    return { flights, flightsLoading: loading, error }
 }

resources/js/Types/types.d.ts

@@ -97,6 +97,7 @@ export type SharedProps = import('@inertiajs/core').PageProps & {
         isLoggedIn: boolean
         roles: string[];
         permissions: string[];
+        apiToken: string | null;
     },
     logo_api_url: string
     achievement_notifications: Notification[]

resources/js/api.ts

@@ -0,0 +1,17 @@
+import axios from 'axios'
+import { usePage } from '@inertiajs/vue3'
+import {SharedProps} from "@/Types/types";
+
+export const api = axios.create({
+    baseURL: import.meta.env.VITE_API_URL,
+    withCredentials: true,
+    headers: { Accept: 'application/json' },
+})
+
+api.interceptors.request.use((config) => {
+    const token = usePage<SharedProps>().props.auth?.apiToken
+    if (token) {
+        config.headers.Authorization = `Bearer ${token}`
+    }
+    return config
+})