From 3bc413d5d5cb3835cd86b70414e950222b5b0ed3 Mon Sep 17 00:00:00 2001
From: RafaelCaso <94573618+RafaelCaso@users.noreply.github.com>
Date: Wed, 21 Aug 2024 18:48:10 -0400
Subject: [PATCH] Fix #5 - checked in counter (#25)

* replace img with nextjs Image component

* Hotfix: fix linting issue

* add CheckInCounter component to read contract variable checkedInCounter

* fix: add dependencies to useEffect to avoid infinite chain of updates
---
 packages/nextjs/app/page.tsx                  |  4 +--
 .../nextjs/components/CheckedInCounter.tsx    | 34 +++++++++++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 packages/nextjs/components/CheckedInCounter.tsx

diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index 96a9436..347c77c 100644
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import CheckedInCounter from "../components/CheckedInCounter";
 import type { NextPage } from "next";
 import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 
@@ -15,8 +16,7 @@ const Home: NextPage = () => {
           </h1>
           <p className="text-center text-lg">Get started by taking a look at your batch GitHub repository.</p>
           <p className="text-lg flex gap-2 justify-center">
-            <span className="font-bold">Checked in builders count:</span>
-            <span>To Be Implemented</span>
+            <CheckedInCounter />
           </p>
         </div>
 
diff --git a/packages/nextjs/components/CheckedInCounter.tsx b/packages/nextjs/components/CheckedInCounter.tsx
new file mode 100644
index 0000000..dac0fe1
--- /dev/null
+++ b/packages/nextjs/components/CheckedInCounter.tsx
@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
+
+const CheckInCount = () => {
+  const [feedback, setFeedback] = useState<string>("");
+  const [result, setResult] = useState<string>();
+
+  const {
+    data: checkedIn,
+    isLoading: checkInLoading,
+    error: checkInError,
+  } = useScaffoldReadContract({
+    contractName: "BatchRegistry",
+    functionName: "checkedInCounter",
+  });
+
+  useEffect(() => {
+    if (checkInError) {
+      setFeedback("Something went wrong");
+      console.error(checkInError);
+    } else {
+      setResult(checkInLoading ? "..." : String(Number(checkedIn)));
+    }
+  }, [checkInError, checkInLoading, checkedIn]);
+
+  return (
+    <>
+      <span className="font-bold">Checked in builders count: {result}</span>
+      {feedback && <p>{feedback}</p>}
+    </>
+  );
+};
+
+export default CheckInCount;