Issue 7 - Create builders list page #29

danitome24 · 2024-09-14T20:28:35Z

Description

Created a page to display a list of builders and mentors. The page features:

A section for mentors with their photos, names, and links to their personal pages.
A section for builders with similar details.
A dynamic counter that shows how many builders have checked in out of the total.

You can see a first template:

Additional Information

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 #7

Your ENS/address: 0xaa4C60b784E2b3E485035399bF1b1aBDeD66A60f

vercel · 2024-09-14T20:28:39Z

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

Name	Status	Preview	Comments	Updated (UTC)
batch9-buidlguidl-com-nextjs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 20, 2024 9:20pm

danitome24 · 2024-09-14T21:18:29Z

TODO:

Split into smaller components.
Handle loading events message (display some message that is loading data).
What we do with randomImages?

derrekcoleman

Great job! Very clean architecture. I left some suggestions about the pictures - lmk what you think!

derrekcoleman · 2024-09-19T20:53:45Z

packages/nextjs/app/builders/page.tsx

+const getRandomGender = () => {
+  return Math.random() < 0.5 ? "men" : "women";
+};
+
+const getRandomUserImage = () => {
+  const randomInt = Math.floor(Math.random() * 50);
+  const randomGender = getRandomGender();
+
+  return `https://randomuser.me/api/portraits/${randomGender}/${randomInt}.jpg`;
+};
+
+const getBuilderFromEvent = (event: any): Builder => ({
+  image: getRandomUserImage(),


I wonder what else we can do for profile pictures 🤔

Your design does a great job emphasizing the rounded portraits, so it seems silly to have random placeholders in the final version.

Is it possible to map builders to their GitHub profiles and fetch those avatars, just like you do for mentors?

If not, there are also BlockieAvatars (SE-2 docs) you can modify.

Here's where they are used in the BuidlGuidl app!

I have tried to obtain the GitHubs of the builders automatically, but I haven't found a way. For this, I suppose we would need to manually keep a record of all users and their GitHubs. I have therefore decided to use BlockieAvatars for the image.

Maybe somebody can help with this and find a way to get github profiles automatically.

we could use ENS avatars. let me try something out...

derrekcoleman · 2024-09-19T20:54:35Z

packages/nextjs/app/builders/page.tsx

+const mentors: Mentor[] = [
+  {
+    name: "Eda",
+    image: "https://avatars.githubusercontent.com/u/22100698?v=4",
+    link: "https://github.com/edakturk14",
+    checkedIn: false,
+  },
+  {
+    name: "Derrek",
+    image: "https://avatars.githubusercontent.com/u/80121818?v=4",
+    link: "https://github.com/derrekcoleman",
+    checkedIn: false,
+  },
+  {
+    name: "Philip",
+    image: "https://avatars.githubusercontent.com/u/90064316?v=4",
+    link: "https://github.com/phipsae",
+    checkedIn: false,
+  },
+];


I really appreciate your inclusion of the mentors :)))

derrekcoleman · 2024-09-19T20:55:08Z

packages/nextjs/types/builders.ts

+export type Builder = {
+  image: string;
+  link: string;
+  checkedIn: boolean;
+};
+
+export type Mentor = Builder & {
+  name: string;
+};


ishtails · 2024-09-20T00:26:37Z

@danitome24 really nice work! i have some small changes that i'd like to contribute to this PR. not sure how do i push my commit in here tho.. do i need to fork your fork and push to that? or something else...

here's the screenshot of what i'm thinking:

ens avatar is displayed whenever it exists
user address is displayed below the avatar for identification
filtered duplicate builder entries before rendering

screenshot:

derrekcoleman · 2024-09-20T02:26:23Z

@ishtails you've got the right idea. Check out this discussion about how to manage multiple “remotes” for your local version of the repo. The goal is to make a PR to Dani’s fork of the repo (rather than to the main repo we’re having this discussion in).

ishtails · 2024-09-20T20:11:24Z

@ishtails you've got the right idea. Check out this discussion about how to manage multiple “remotes” for your local version of the repo. The goal is to make a PR to Dani’s fork of the repo (rather than to the main repo we’re having this discussion in).

Tried forking his fork, for some reason i am not able to do that.. so i am thinking to just open a new PR for making the changes i proposed once this is merged (anyway i wanted to redesign the UI like the new home page layout). please proceed with the merge as usual. i'll pick it up once this PR is closed.

derrekcoleman · 2024-09-20T20:22:04Z

Tried forking his fork, for some reason i am not able to do that.. so i am thinking to just open a new PR for making the changes i proposed once this is merged (anyway i wanted to redesign the UI like the new home page layout). please proceed with the merge as usual. i'll pick it up once this PR is closed.

Not so fast @ishtails - you can do this. Your goal is to make a PR to his repo, specifically to his 7-list-members-of-batch branch. You don't need to fork his repo if you already have this repo locally. Instead, you need to change your remote to his repo's URL, then pull/push there.

Resources to learn about changing your remote, which controls where your git push goes.

Definitely worth learning because (a) you will encounter this again in the future and (b) even though the learning make take a moment, the actual fix is only a couple git commands.

- ens avatar is displayed whenever it exists - user address is displayed below the avatar for identification - filtered duplicate builder entries before rendering

improvements on existing layout

ishtails · 2024-09-20T21:22:44Z

Tried forking his fork, for some reason i am not able to do that.. so i am thinking to just open a new PR for making the changes i proposed once this is merged (anyway i wanted to redesign the UI like the new home page layout). please proceed with the merge as usual. i'll pick it up once this PR is closed.

Not so fast @ishtails - you can do this. Your goal is to make a PR to his repo, specifically to his 7-list-members-of-batch branch. You don't need to fork his repo if you already have this repo locally. Instead, you need to change your remote to his repo's URL, then pull/push there.

Resources to learn about changing your remote, which controls where your git push goes.

GitHub docs

StackOverflow 1

StackOverflow 2

Definitely worth learning because (a) you will encounter this again in the future and (b) even though the learning make take a moment, the actual fix is only a couple git commands.

haha you were right, i was just running away xD.. got it working with your and @danitome24's help. thankyou for teaching me something new :))

derrekcoleman · 2024-09-20T21:25:52Z

I’m proud of your persistence! Thanks for the help, @danitome24 🤝

danitome24 mentioned this pull request Sep 14, 2024

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

Closed

vercel bot deployed to Preview September 14, 2024 20:31 View deployment

vercel bot deployed to Preview September 14, 2024 21:18 View deployment

danitome24 marked this pull request as ready for review September 15, 2024 07:02

vercel bot deployed to Preview September 15, 2024 07:03 View deployment

vercel bot deployed to Preview September 15, 2024 07:18 View deployment

danitome24 force-pushed the 7-list-members-of-batch branch from 2b145b2 to 2ede065 Compare September 18, 2024 19:36

vercel bot deployed to Preview September 18, 2024 19:41 View deployment

vercel bot deployed to Preview September 18, 2024 19:52 View deployment

vercel bot deployed to Preview September 18, 2024 20:27 View deployment

derrekcoleman requested changes Sep 19, 2024

View reviewed changes

danitome24 added 11 commits September 20, 2024 00:33

First version of template

5ef31c3

Moved builders checked in

0f22fd4

Get builders from contract

70eeb0e

Swap into next Image component from <img/>

c97cf7a

Splitted code into smaller components

f037412

Splitted code into even smaller components

0f672b4

Removed some log error with div and key prop

e0623c9

Refactored code to use useState and useEffect

1964549

Refactor code

38ce767

Added Link Component and github links for mentors

5552705

Removed lint issues

d564a55

danitome24 force-pushed the 7-list-members-of-batch branch from 58c8dd1 to d564a55 Compare September 19, 2024 22:36

vercel bot deployed to Preview September 19, 2024 22:39 View deployment

Used blockieAvatar for user profiles images

a36c63c

vercel bot deployed to Preview September 19, 2024 22:51 View deployment

ishtails and others added 2 commits September 21, 2024 02:42

improvements on existing layout

7a3975a

- ens avatar is displayed whenever it exists - user address is displayed below the avatar for identification - filtered duplicate builder entries before rendering

Merge pull request #1 from ishtails/my-change-7-list-members-of-batch

66e3c5a

improvements on existing layout

vercel bot deployed to Preview September 20, 2024 21:20 View deployment

derrekcoleman merged commit bd180d7 into BuidlGuidl:main Sep 23, 2024
3 checks passed

derrekcoleman linked an issue Sep 25, 2024 that may be closed by this pull request

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

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue 7 - Create builders list page #29

Issue 7 - Create builders list page #29

danitome24 commented Sep 14, 2024 •

edited

Loading

vercel bot commented Sep 14, 2024 •

edited

Loading

danitome24 commented Sep 14, 2024 •

edited

Loading

derrekcoleman left a comment

derrekcoleman Sep 19, 2024

danitome24 Sep 19, 2024

ishtails Sep 20, 2024

derrekcoleman Sep 19, 2024

derrekcoleman Sep 19, 2024

ishtails commented Sep 20, 2024 •

edited

Loading

derrekcoleman commented Sep 20, 2024

ishtails commented Sep 20, 2024

derrekcoleman commented Sep 20, 2024

ishtails commented Sep 20, 2024

derrekcoleman commented Sep 20, 2024

Issue 7 - Create builders list page #29

Issue 7 - Create builders list page #29

Conversation

danitome24 commented Sep 14, 2024 • edited Loading

Description

Additional Information

Related Issues

vercel bot commented Sep 14, 2024 • edited Loading

danitome24 commented Sep 14, 2024 • edited Loading

derrekcoleman left a comment

Choose a reason for hiding this comment

derrekcoleman Sep 19, 2024

Choose a reason for hiding this comment

danitome24 Sep 19, 2024

Choose a reason for hiding this comment

ishtails Sep 20, 2024

Choose a reason for hiding this comment

derrekcoleman Sep 19, 2024

Choose a reason for hiding this comment

derrekcoleman Sep 19, 2024

Choose a reason for hiding this comment

ishtails commented Sep 20, 2024 • edited Loading

derrekcoleman commented Sep 20, 2024

ishtails commented Sep 20, 2024

derrekcoleman commented Sep 20, 2024

ishtails commented Sep 20, 2024

derrekcoleman commented Sep 20, 2024

danitome24 commented Sep 14, 2024 •

edited

Loading

vercel bot commented Sep 14, 2024 •

edited

Loading

danitome24 commented Sep 14, 2024 •

edited

Loading

ishtails commented Sep 20, 2024 •

edited

Loading