complete award page - score - transactions not complete

src/components/awards/index.tsx

@@ -1,7 +1,17 @@
+import { useQuery } from "@tanstack/react-query"
 import { AwardNotComplete } from "./award-not-complete"
-import { AwardComplete } from "./awards-complete"
+import { getAwardsList } from "../../services/api/awards"
+import { useEffect } from "react"
+import { AwardsResponse } from "../../types"
 
 export const Awards = () => {
+    const { data, isLoading } = useQuery({
+        queryKey: ["awards"],
+        queryFn: getAwardsList
+    })
+
+    useEffect(() => { console.log("data =>", data?.data) }, [data])
+    if (isLoading) return <p>LOADING...</p>
     return (
         <div className="flex flex-col gap-10">
             <div className="flex flex-row justify-between items-center">
@@ -9,8 +19,7 @@ export const Awards = () => {
                 <p className="font-normal text-base text-primary-text-color">امتیازهای من: 65</p>
             </div>
             <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-6">
-                <AwardNotComplete />
-                <AwardComplete />
+                {data?.data?.map((award: AwardsResponse) => <AwardNotComplete key={award.id} award={award} />)}
             </div>
         </div>
     )