feat: enhance homepage and add builders grid #20

gboigwe · 2024-11-20T18:03:16Z

Enhanced Homepage and Builders Grid

Changes Made

Added BuildersGrid component showing registered builders
Created API route to fetch builder addresses from filesystem
Connected grid to personal builder pages
Enhanced homepage dark mode visibility
Updated styling for better UX

Implementation Details

Scans filesystem for builder pages in /builders directory
Displays builder profiles in responsive grid layout
Maintains consistent styling with existing components

[Add screenshots of homepage and grid in light/dark modes]

Screenshot for the Checked Builders Count:

Screenshot for the number of registered builders page:

Additional Information

Still trying to fix some console issues
I have read the contributing docs (if this is your first contribution)
This is not a duplicate of any existing pull request

Related Issues

_Closes #4 _

Your ENS/address: 0x5cc8Be96B1C9A68F57a73b5bEa60cF5D890055A1

vercel · 2024-11-20T18:03:21Z

@gboigwe is attempting to deploy a commit to the BuidlGuidl Team on Vercel.

A member of the Team first needs to authorize it.

gboigwe · 2024-11-20T18:04:39Z

Although not entirely completed as I still need to work on some console errors I found, feel free to make suggestions and or contribute.
And if there is any issue at all please point it out, even if it is the console error issue, please still point it out

melanke

Nice job. Just a few ideas for improvements

packages/nextjs/app/builders/0x5cc8Be96B1C9A68F57a73b5bEa60cF5D890055A1/page.tsx

packages/nextjs/app/page.tsx

packages/nextjs/components/batch/BuildersGrid.tsx

melanke · 2024-11-21T01:23:08Z

packages/nextjs/components/batch/BuildersGrid.tsx

+  useEffect(() => {
+    fetch("/api/builders")
+      .then(res => res.json())
+      .then(addresses => {
+        const buildersList = addresses.map((address: string, index: number) => ({
+          id: index,
+          address: address,
+        }));
+        setBuilders(buildersList);
+        setIsLoading(false);
+      })
+      .catch(error => {
+        console.error("Error fetching builders:", error);
+        setIsLoading(false);
+      });
+  }, []);


This is a matter of preference, but react-query would fit well here.

Also, beside getting the builders by their profile pages, we could get whoever made checkin, even the ones without a profile page. Check this discussion.

Can we get the details from the builders that checked-in?
Okay, I will try it out and see, but not sure how to figure it, but I will definitely try all my best. Thanks so much

You can grab the second parameter of this event:

event CheckedIn(bool first, address builder, address checkInContract);

There's an example on how to do this on the Challenge-4-Dex.

@gboigwe, this one is still open. We want to display all checked-in builders, not just those with a personal profile.

gboigwe · 2024-11-23T01:42:56Z

Made some changes as suggested by @melanke and @phipsae and I have committed them. Sure about the react-query though yet but any other suggestions

phipsae · 2024-11-24T03:19:09Z

@gboigwe thanks, you def tackle one of the more difficult tasks!

Pls look into the comments @melanke made and work on them before you ask for a review.
Pls use useScaffoldReadContract instead of useContractRead for example.
Also it shows me that you touched the builders profiles, there shouldn't be any changes.

Let me know then I'll have a review!

gboigwe · 2024-11-24T03:22:50Z

Okay, thank you.

I actually did used the useScaffoldReadContract

I will check to confirm why that was not seen. Thank you

gboigwe · 2024-11-24T03:27:42Z

Oh and for the builders profile, remember that I used my builders page before for testing but @melanke suggested that I pull his as it was merged already, so I removed mine from the PR and used his

phipsae

Thanks for the changes!

Here’s a general tip: focus solely on the issue you’ve chosen to work on and avoid making unrelated changes. Only modify the files necessary for that specific task.

I understand it can be challenging at first, but that’s exactly why we have this course to guide you! 😊

...s/nextjs/app/builders/0x2Bc096A12C5b37F035180aDeF70EB2B88351e5B8/_components/SocialLinks.tsx

packages/nextjs/app/builders/0x2Bc096A12C5b37F035180aDeF70EB2B88351e5B8/page.tsx

packages/nextjs/contracts/deployedContracts.ts

packages/nextjs/next.config.js

phipsae · 2024-11-25T02:21:06Z

packages/nextjs/app/page.tsx

+  const {
+    data: checkedInCount,
+    isLoading,
+    error,
+  } = useScaffoldReadContract({
+    contractName: "BatchRegistry",
+    functionName: "checkedInCounter",
+  });
+
+  const displayCount = isLoading ? (
+    <span className="loading loading-spinner loading-sm text-primary"></span>
+  ) : error ? (
+    "Error loading"
+  ) : typeof checkedInCount === "bigint" ? (
+    checkedInCount.toString()
+  ) : (
+    "0"
+  );
+


This is out of scope and relates to issue #6. Please remove it.

Please remove this. It belongs to issue #6. If you want to include the "checkedInCounter", create a separate PR for it.

In a "real-world" scenario, when working on an issue, ensure you only add code that falls within its scope.

packages/nextjs/app/page.tsx

packages/nextjs/components/batch/BuildersGrid.tsx

phipsae · 2024-11-28T07:25:48Z

Hi @gboigwe, thanks for the updates!

There are just two more points left to address. Please always make sure to review the conversation for details.

Instead of limiting to builders with profile pages, we sould include everyone who has checked in, even those without a profile. Refer to this discussion. You can use the CheckedIn event: event CheckedIn(bool first, address builder, address checkInContract).
Pls don't solve other issue in this PR discussion (no checkedIn counter, that's another issue, if you want to solve it, create another PR)

Almost done :)

gboigwe · 2024-11-28T07:31:30Z

Okay, thank you. Thanks for you patience with me too

gboigwe · 2024-11-28T07:31:40Z

I will make sure to put that into effect.
@melanke has been helping me out all the way too, I have to acknowledge and commend his support

phipsae · 2024-11-28T07:43:07Z

Okay, thank you. Thanks for you patience with me too

Of course, that's why I am here! So no worries at all. It's all about learning.
@melanke thank you so much!

melanke · 2024-12-01T14:29:47Z

@phipsae This code doesn't work because the fromBlock:

const { data: events, isLoading: eventsLoading } = useScaffoldEventHistory({
    contractName: "BatchRegistry",
    eventName: "CheckedIn",
    fromBlock: 127324219n,
  });

Which is strange, because I got the Contract Creation block and subtracted 10, as we did on the challenges:

But it works when we put zero on fromBlock.

Do you know what's happening?

phipsae · 2024-12-02T06:13:37Z

@phipsae This code doesn't work because the fromBlock:
const { data: events, isLoading: eventsLoading } = useScaffoldEventHistory({
    contractName: "BatchRegistry",
    eventName: "CheckedIn",
    fromBlock: 127324219n,
  });
Which is strange, because I got the Contract Creation block and subtracted 10, as we did on the challenges:

But it works when we put zero on fromBlock.

Do you know what's happening?

No idea, right now. As soon as you push the code, I can have a look at it.

phipsae · 2024-12-05T03:35:39Z

@phipsae This code doesn't work because the fromBlock:
const { data: events, isLoading: eventsLoading } = useScaffoldEventHistory({
    contractName: "BatchRegistry",
    eventName: "CheckedIn",
    fromBlock: 127324219n,
  });
Which is strange, because I got the Contract Creation block and subtracted 10, as we did on the challenges:

But it works when we put zero on fromBlock.
Do you know what's happening?
No idea, right now. As soon as you push the code, I can have a look at it.

I tested it locally, and it works in my environment. Do you have your NEXT_PUBLIC_ALCHEMY_API_KEY set? (Although, if block 0 works, it should be fine.)

…dInCount, it's supposed to be implemented on a different task

vercel · 2024-12-05T13:41:28Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
batch11.buidlguidl.com	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 10, 2024 5:24pm

phipsae

Looks great, thanks!
Only these little comments below and then we are finally ready to merge.

packages/nextjs/components/batch/BuildersGrid.tsx

phipsae · 2024-12-12T05:25:54Z

Thanks a lot for your effort! Finally lets merge 🎉

melanke suggested changes Nov 21, 2024

View reviewed changes

phipsae assigned gboigwe Nov 21, 2024

phipsae mentioned this pull request Nov 23, 2024

7. List the members of the batch (read BatchRegistry contract) #4

Closed

phipsae requested changes Nov 25, 2024

View reviewed changes

Refactored and focused on builders grid

5b62d7e

gboigwe force-pushed the builders-grid branch from f06c50e to 5b62d7e Compare November 27, 2024 07:34

Showing Builders without profile on BuildersGrid; Removing the checke…

6530fbc

…dInCount, it's supposed to be implemented on a different task

vercel bot deployed to Preview December 5, 2024 13:44 View deployment

phipsae requested changes Dec 7, 2024

View reviewed changes

packages/nextjs/components/batch/BuildersGrid.tsx Outdated Show resolved Hide resolved

packages/nextjs/components/batch/BuildersGrid.tsx Outdated Show resolved Hide resolved

remove console.log and fix error on log

75eb1f9

vercel bot deployed to Preview December 10, 2024 17:24 View deployment

phipsae merged commit 49dc849 into BuidlGuidl:main Dec 12, 2024
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: enhance homepage and add builders grid #20

feat: enhance homepage and add builders grid #20

gboigwe commented Nov 20, 2024 •

edited

Loading

vercel bot commented Nov 20, 2024

gboigwe commented Nov 20, 2024

melanke left a comment

melanke Nov 21, 2024

melanke Nov 21, 2024

gboigwe Nov 21, 2024

melanke Nov 21, 2024

phipsae Nov 28, 2024

gboigwe commented Nov 23, 2024

phipsae commented Nov 24, 2024

gboigwe commented Nov 24, 2024

gboigwe commented Nov 24, 2024

phipsae left a comment

phipsae Nov 25, 2024

phipsae Nov 28, 2024

phipsae commented Nov 28, 2024

gboigwe commented Nov 28, 2024

gboigwe commented Nov 28, 2024 •

edited

Loading

phipsae commented Nov 28, 2024

melanke commented Dec 1, 2024

phipsae commented Dec 2, 2024

phipsae commented Dec 5, 2024 •

edited

Loading

vercel bot commented Dec 5, 2024 •

edited

Loading

phipsae left a comment

phipsae commented Dec 12, 2024

feat: enhance homepage and add builders grid #20

feat: enhance homepage and add builders grid #20

Conversation

gboigwe commented Nov 20, 2024 • edited Loading

Enhanced Homepage and Builders Grid

Changes Made

Implementation Details

Screenshot for the Checked Builders Count:

Screenshot for the number of registered builders page:

Additional Information

Related Issues

vercel bot commented Nov 20, 2024

gboigwe commented Nov 20, 2024

melanke left a comment

Choose a reason for hiding this comment

melanke Nov 21, 2024

Choose a reason for hiding this comment

melanke Nov 21, 2024

Choose a reason for hiding this comment

gboigwe Nov 21, 2024

Choose a reason for hiding this comment

melanke Nov 21, 2024

Choose a reason for hiding this comment

phipsae Nov 28, 2024

Choose a reason for hiding this comment

gboigwe commented Nov 23, 2024

phipsae commented Nov 24, 2024

gboigwe commented Nov 24, 2024

gboigwe commented Nov 24, 2024

phipsae left a comment

Choose a reason for hiding this comment

phipsae Nov 25, 2024

Choose a reason for hiding this comment

phipsae Nov 28, 2024

Choose a reason for hiding this comment

phipsae commented Nov 28, 2024

gboigwe commented Nov 28, 2024

gboigwe commented Nov 28, 2024 • edited Loading

phipsae commented Nov 28, 2024

melanke commented Dec 1, 2024

phipsae commented Dec 2, 2024

phipsae commented Dec 5, 2024 • edited Loading

vercel bot commented Dec 5, 2024 • edited Loading

phipsae left a comment

Choose a reason for hiding this comment

phipsae commented Dec 12, 2024

gboigwe commented Nov 20, 2024 •

edited

Loading

gboigwe commented Nov 28, 2024 •

edited

Loading

phipsae commented Dec 5, 2024 •

edited

Loading

vercel bot commented Dec 5, 2024 •

edited

Loading