connected to new url param

frontend/composables/api/tickets/useGetAllTickets.ts

@@ -1,6 +1,7 @@
 // imports
 
 import { useQuery } from "@tanstack/vue-query";
+import { useAppParams } from "~/composables/global/useAppParams";
 import { API_ENDPOINTS, QUERY_KEYS } from "~/constants";
 
 // types
@@ -13,19 +14,21 @@ export type GetAllTicketsRequest = {
     page: string | string[];
 };
 
-const useGetAllTickets = (params: ComputedRef<GetAllTicketsRequest>) => {
+const useGetAllTickets = () => {
     // state
 
     const { $axios: axios } = useNuxtApp();
 
+    const { sort, status, page } = useAppParams();
+
     // methods
 
-    const handleGetAllTickets = async (params: GetAllTicketsRequest) => {
+    const handleGetAllTickets = async () => {
         const { data } = await axios.get<GetAllTicketsResponse>(API_ENDPOINTS.tickets.get_all, {
             params: {
-                sort: params.sort,
-                filter: params.status,
-                offset: Number(params.page) * 7 - 7,
+                sort: sort.value ?? "created_at",
+                filter: status.value,
+                offset: Number(page.value) * 7 - 7,
                 limit: 7,
             },
         });
@@ -33,8 +36,8 @@ const useGetAllTickets = (params: ComputedRef<GetAllTicketsRequest>) => {
     };
 
     return useQuery({
-        queryKey: [QUERY_KEYS.tickets, params],
-        queryFn: () => handleGetAllTickets(params.value),
+        queryKey: [QUERY_KEYS.tickets, sort, status, page],
+        queryFn: () => handleGetAllTickets(),
     });
 };