Optimise invoice data requests #56

resources/js/pages/Customers.vue

@@ -4,8 +4,6 @@ import { ref, onMounted, computed, watch } from 'vue'
 import AppLayout from '@/layouts/AppLayout.vue'
 import AppHeader from '@/components/AppHeader.vue'
 import { Address } from '@/types'
-import { Head } from '@inertiajs/vue3'
-import api from '@/axios'
 import { Customer } from '@/types'
 import { bgColorForString } from '@/lib/utils'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
@@ -21,7 +19,12 @@ import { TooltipArrow } from 'reka-ui'
 import CustomerDialog from '@/components/CustomerDialog.vue'
 import { toast } from 'vue-sonner'
 import { SocialIcon } from '@/components/ui/social-icon'
-import { AxiosError } from 'axios'
+
+interface Props {
+    customersData: Customer[];
+}
+
+const props = defineProps<Props>();
 
 const customersData = ref([] as Customer[])
 const searchQuery = ref('')
@@ -29,16 +32,10 @@ const searchField = ref()
 const activeCustomer = ref<Customer | null>(null)
 const detailDialogOpen = ref(false)
 
-onMounted(async () => {
-    try {
-        const response = await api.get('/customers');
-        customersData.value = (response.data as Customer[]).toSorted((a, b) => (a.companyName ?? '').localeCompare(b.companyName ?? ''));
-        searchField.value = document.getElementById('search')
-        searchField.value.focus()
-
-    } catch (error: AxiosError) {
-        toast.error(error.name, { description: error.message })
-    }
+onMounted(() => {
+    customersData.value = props.customersData.toSorted((a, b) => (a.companyName ?? '').localeCompare(b.companyName ?? ''));
+    searchField.value = document.getElementById('search')
+    searchField.value.focus()
 })
 
 watch(activeCustomer, () => {