From d01e5046d0d3a3bd8edf0ccbebf4b4161460e6ff Mon Sep 17 00:00:00 2001 From: Superior Date: Fri, 18 Oct 2024 21:22:07 +0100 Subject: [PATCH 1/4] Get the check-in count --- packages/nextjs/app/page.tsx | 87 ++++++++++++++++++++++++++++++++++-- 1 file changed, 83 insertions(+), 4 deletions(-) diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx index 66b7e8b..0e6dd12 100644 --- a/packages/nextjs/app/page.tsx +++ b/packages/nextjs/app/page.tsx @@ -1,10 +1,92 @@ "use client"; +import { useEffect, useState } from "react"; import Link from "next/link"; import type { NextPage } from "next"; import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"; +import { useScaffoldReadContract } from "~~/hooks/scaffold-eth"; const Home: NextPage = () => { + const [counter, setCounter] = useState(); + + const { + data, + error, + isLoading: contractLoading, + } = useScaffoldReadContract({ + contractName: "BatchRegistry", + functionName: "checkedInCounter", + }); + + useEffect(() => { + if (data !== undefined) { + setCounter(Number(data)); + } + }, [data]); + + const renderContent = () => { + if (error) { + return ( +
+

Error fetching contract data: {error.message}

+
+ ); + } + + return ( +

+ Checked in builders count: + {counter !== undefined ? counter : "0"} +

+ ); + }; + + if (contractLoading) { + return ( +
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+ {[...Array(6)].map((_, index) => ( +
+ ))} +
+ +
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+ ); + } + return ( <>
@@ -14,10 +96,7 @@ const Home: NextPage = () => { Batch 10

Get started by taking a look at your batch GitHub repository.

-

- Checked in builders count: - To Be Implemented -

+ {renderContent()}
From cae60bf598cb30f4afe78d60bdfc701987510e4e Mon Sep 17 00:00:00 2001 From: Superior Date: Mon, 21 Oct 2024 18:45:47 +0100 Subject: [PATCH 2/4] Refactor checked-in counter rendering logic --- packages/nextjs/app/page.tsx | 68 ++++++------------------------------ 1 file changed, 11 insertions(+), 57 deletions(-) diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx index 0e6dd12..2e95e4c 100644 --- a/packages/nextjs/app/page.tsx +++ b/packages/nextjs/app/page.tsx @@ -1,16 +1,13 @@ "use client"; -import { useEffect, useState } from "react"; import Link from "next/link"; import type { NextPage } from "next"; import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"; import { useScaffoldReadContract } from "~~/hooks/scaffold-eth"; const Home: NextPage = () => { - const [counter, setCounter] = useState(); - const { - data, + data: checkedInCounter, error, isLoading: contractLoading, } = useScaffoldReadContract({ @@ -18,13 +15,16 @@ const Home: NextPage = () => { functionName: "checkedInCounter", }); - useEffect(() => { - if (data !== undefined) { - setCounter(Number(data)); + const renderCheckedInCounterSection = () => { + if (contractLoading) { + return ( +
+
+
+
+ ); } - }, [data]); - const renderContent = () => { if (error) { return (
@@ -36,57 +36,11 @@ const Home: NextPage = () => { return (

Checked in builders count: - {counter !== undefined ? counter : "0"} + {checkedInCounter !== undefined ? Number(checkedInCounter) : "0"}

); }; - if (contractLoading) { - return ( -
-
-
-
-
-
-
-
- -
-
- -
-
-
- {[...Array(6)].map((_, index) => ( -
- ))} -
- -
-
-
-
-
-
- -
-
-
-
- -
-
-
-
-
-
-
-
-
- ); - } - return ( <>
@@ -96,7 +50,7 @@ const Home: NextPage = () => { Batch 10

Get started by taking a look at your batch GitHub repository.

- {renderContent()} + {renderCheckedInCounterSection()}
From c3ac9f2bff9466e81393b92a7b6f68125dfe9d8b Mon Sep 17 00:00:00 2001 From: Superior Date: Wed, 23 Oct 2024 13:50:22 +0100 Subject: [PATCH 3/4] Refactor checked-in counter rendering logic and error handling --- packages/nextjs/app/page.tsx | 44 ++++++++++++++---------------------- 1 file changed, 17 insertions(+), 27 deletions(-) diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx index 2e95e4c..e223d89 100644 --- a/packages/nextjs/app/page.tsx +++ b/packages/nextjs/app/page.tsx @@ -15,32 +15,6 @@ const Home: NextPage = () => { functionName: "checkedInCounter", }); - const renderCheckedInCounterSection = () => { - if (contractLoading) { - return ( -
-
-
-
- ); - } - - if (error) { - return ( -
-

Error fetching contract data: {error.message}

-
- ); - } - - return ( -

- Checked in builders count: - {checkedInCounter !== undefined ? Number(checkedInCounter) : "0"} -

- ); - }; - return ( <>
@@ -50,7 +24,23 @@ const Home: NextPage = () => { Batch 10

Get started by taking a look at your batch GitHub repository.

- {renderCheckedInCounterSection()} + + {error ? ( +
+

Error fetching contract data: {error.message}

+
+ ) : ( +

+ Checked in builders count: + {contractLoading ? ( + +

+ + ) : ( + {checkedInCounter !== undefined ? Number(checkedInCounter) : "0"} + )} +

+ )}
From d54e302566f2aacfce214ac0f586f01c4f4198b9 Mon Sep 17 00:00:00 2001 From: Superior Date: Wed, 23 Oct 2024 20:22:34 +0100 Subject: [PATCH 4/4] Refactor checked-in counter rendering logic and error handling --- packages/nextjs/app/page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx index e223d89..2ba44ec 100644 --- a/packages/nextjs/app/page.tsx +++ b/packages/nextjs/app/page.tsx @@ -30,7 +30,7 @@ const Home: NextPage = () => {

Error fetching contract data: {error.message}

) : ( -

+

Checked in builders count: {contractLoading ? ( @@ -39,7 +39,7 @@ const Home: NextPage = () => { ) : ( {checkedInCounter !== undefined ? Number(checkedInCounter) : "0"} )} -

+
)}