complete paginations

src/components/score/index.tsx

@@ -1,17 +1,36 @@
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { Table } from "../common/table"
-import { SortingState } from "@tanstack/react-table"
 import { scoresCol } from "../../utility/score"
-import { useQuery } from "@tanstack/react-query"
+import { useMutation } from "@tanstack/react-query"
 import { getScoresList } from "../../services/api/score"
+import { useParamsStore } from "../../store/params"
+import { ScoreResponse } from "../../types"
 
 export const Score = () => {
-    const [sorting, setSorting] = useState<SortingState>([])
-    const { data, isLoading } = useQuery({
-        queryKey: ["score-list"],
-        queryFn: getScoresList
+    const { params } = useParamsStore()
+    const [data, setData] = useState<ScoreResponse>({
+        data: [],
+        total: 0,
+        score: 0
     })
+    const { mutate, isPending } = useMutation({
+        mutationFn: getScoresList
+    })
+    useEffect(() => {
+        mutate({
+            ...params
+        },
+            {
+                onSuccess: (res: any) => {
+                    setData({
+                        data: res?.data?.data,
+                        total: res?.data?.total,
+                        score: res?.data?.score
+                    })
+                }
+            })
+    }, [mutate, params])
     return (
-        <Table sorting={sorting} setSorting={setSorting} columns={scoresCol} data={data?.data?.data} tableStatus={data?.data?.score} isLoading={isLoading} />
+        <Table columns={scoresCol} data={data?.data} tableStatus={true} tableScore={data?.score} isLoading={isPending} totalData={data?.total} />
     )
 }