From 6530fbc2169c3c9ee6a03ecb047131fa418dee67 Mon Sep 17 00:00:00 2001
From: melanke <gil.bueno@simpli.com.br>
Date: Thu, 5 Dec 2024 10:37:49 -0300
Subject: [PATCH] Showing Builders without profile on BuildersGrid; Removing
 the checkedInCount, it's supposed to be implemented on a different task

---
 .../nextjs/components/batch/BuildersGrid.tsx  | 43 ++++++++++++-------
 1 file changed, 27 insertions(+), 16 deletions(-)

diff --git a/packages/nextjs/components/batch/BuildersGrid.tsx b/packages/nextjs/components/batch/BuildersGrid.tsx
index 0088700..368a20f 100644
--- a/packages/nextjs/components/batch/BuildersGrid.tsx
+++ b/packages/nextjs/components/batch/BuildersGrid.tsx
@@ -1,15 +1,9 @@
 import Link from "next/link";
 import { useQuery } from "@tanstack/react-query";
 import { Address } from "~~/components/scaffold-eth";
-import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
+import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth";
 
 const BuildersGrid = () => {
-  // Get total number of checked-in builders from contract
-  const { data: checkedInCount, isLoading: countLoading } = useScaffoldReadContract({
-    contractName: "BatchRegistry",
-    functionName: "checkedInCounter",
-  });
-
   // Get builder profiles from filesystem
   const { data: profileBuilders = [], isLoading: profilesLoading } = useQuery<string[]>({
     queryKey: ["builders-profiles"],
@@ -20,7 +14,14 @@ const BuildersGrid = () => {
     },
   });
 
-  if (countLoading || profilesLoading) {
+  // Get checked-in builders from contract events
+  const { data: events, isLoading: eventsLoading } = useScaffoldEventHistory({
+    contractName: "BatchRegistry",
+    eventName: "CheckedIn",
+    fromBlock: 127324219n,
+  });
+
+  if (profilesLoading || eventsLoading) {
     return (
       <div className="w-full px-6 py-8 text-center">
         <span className="loading loading-spinner loading-lg text-primary"></span>
@@ -28,13 +29,13 @@ const BuildersGrid = () => {
     );
   }
 
+  const buildersWithoutProfile = (events ?? [])
+    .map(event => event.args.builder)
+    .filter(address => address && !profileBuilders.includes(address));
+  console.log(buildersWithoutProfile);
+
   return (
     <div className="w-full px-6 py-8">
-      <div className="mb-6">
-        <h2 className="text-2xl font-bold mb-2">Batch Members ({checkedInCount?.toString() || "0"} checked in)</h2>
-        <p className="text-sm text-base-content/70">Showing builders who have created their profiles</p>
-      </div>
-
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         {profileBuilders.map((address, idx) => (
           <Link
@@ -46,13 +47,23 @@ const BuildersGrid = () => {
               <Address address={address} size="lg" />
               <div className="flex justify-between items-center">
                 <span className="text-sm font-semibold hover:underline">View Profile →</span>
-                {checkedInCount && checkedInCount > 0 && (
-                  <span className="text-xs bg-primary/10 px-2 py-1 rounded-full">Checked In</span>
-                )}
               </div>
             </div>
           </Link>
         ))}
+        {buildersWithoutProfile.map((address, idx) => (
+          <div
+            key={`${address}-${idx}`}
+            className="bg-base-100 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-200 border border-base-200"
+          >
+            <div className="flex flex-col gap-2">
+              <Address address={address} size="lg" />
+              <div className="flex justify-between items-center">
+                <span className="text-sm font-semibold text-primary">No Profile</span>
+              </div>
+            </div>
+          </div>
+        ))}
       </div>
     </div>
   );