complete installation device pagination

src/components/installation-reports/index.tsx

@@ -1,18 +1,34 @@
 import { installationReportsCol } from "../../utility/reports"
 import { Table } from "../common/table"
-import { useState } from "react"
-import { SortingState } from "@tanstack/react-table"
-import { useQuery } from "@tanstack/react-query"
+import { useEffect, useState } from "react"
+import { useMutation } from "@tanstack/react-query"
 import { getRegisterDeviceList } from "../../services/api/register-device"
+import { RegisterDeviceResponse } from "../../types"
+import { useParamsStore } from "../../store/params"
 
 export const InstallationReports = () => {
-    const [sorting, setSorting] = useState<SortingState>([])
-    const { data, isLoading } = useQuery({
-        queryKey: ["register-device"],
-        queryFn: getRegisterDeviceList
+    const { params } = useParamsStore()
+    const [data, setData] = useState<RegisterDeviceResponse>({
+        data: [],
+        total: 0
     })
-    
+    const { mutate, isPending } = useMutation({
+        mutationFn: getRegisterDeviceList
+    })
+    useEffect(() => {
+        mutate({
+            ...params
+        },
+            {
+                onSuccess: (res: any) => {
+                    setData({
+                        data: res?.data?.data,
+                        total: res?.data?.total
+                    })
+                }
+            })
+    }, [mutate, params])
     return (
-        <Table columns={installationReportsCol} data={data?.data?.data} sorting={sorting} setSorting={setSorting} isLoading={isLoading} />
+        <Table columns={installationReportsCol} data={data?.data} totalData={data?.total} isLoading={isPending} />
     )
 }