-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
1,508 additions
and
1 deletion.
There are no files selected for viewing
157 changes: 157 additions & 0 deletions
157
packages/nextjs/app/builders/_components/MembersList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,157 @@ | ||
"use client"; | ||
|
||
import React from "react"; | ||
import Link from "next/link"; | ||
import { AiOutlineLoading3Quarters } from "react-icons/ai"; | ||
import { RiShareBoxLine } from "react-icons/ri"; | ||
import { Address } from "~~/components/scaffold-eth"; | ||
import { useScaffoldEventHistory, useScaffoldReadContract } from "~~/hooks/scaffold-eth"; | ||
|
||
const MembersList = ({ builders }: { builders: string[] }) => { | ||
// Getting the list of builders who have completed their check-in. | ||
const { data: checkedInnBuilders, isLoading: loading } = useScaffoldReadContract({ | ||
contractName: "BatchRegistry", | ||
functionName: "checkedInCounter", | ||
}); | ||
|
||
// Getting the list of builders' address list who have completed their check-in. | ||
const { data: MembersList } = useScaffoldEventHistory({ | ||
contractName: "BatchRegistry", | ||
eventName: "CheckedIn", | ||
blockData: true, | ||
fromBlock: 123753708n - 123506774n, | ||
transactionData: true, | ||
receiptData: true, | ||
}); | ||
|
||
// Separating builders into those with and without a profile page. | ||
const buildersWithProfile = | ||
MembersList?.filter(member => { | ||
const address = member?.args?.builder; | ||
return address && builders.includes(address); | ||
}) || []; | ||
|
||
const buildersWithoutProfile = | ||
MembersList?.filter(member => { | ||
const address = member?.args?.builder; | ||
return address && !builders.includes(address); | ||
}) || []; | ||
|
||
// Counting the number of builders with a profile page. | ||
const profileBuildersCount = buildersWithProfile.length; | ||
|
||
return ( | ||
<> | ||
<div className=" flex justify-center items-center md:gap-x-10 relative"> | ||
<div className="flex items-center gap-x-2 md:mb-8 mb-5"> | ||
<p className="text-lg font-normal text-[25px] underline">Builders:</p> | ||
<p className="text-lg font-bold text-[24px]"> | ||
{loading ? ( | ||
<div className="animate-spin text-lg"> | ||
<AiOutlineLoading3Quarters /> | ||
</div> | ||
) : ( | ||
checkedInnBuilders?.toString() | ||
)} | ||
</p> | ||
</div> | ||
<div className="flex items-center gap-x-2 md:mb-8 mb-5"> | ||
<p className="text-lg font-normal text-[25px] underline">Builders pages created:</p> | ||
<p className="text-lg font-bold text-[24px]"> | ||
{loading ? ( | ||
<div className="animate-spin text-lg"> | ||
<AiOutlineLoading3Quarters /> | ||
</div> | ||
) : ( | ||
profileBuildersCount?.toString() | ||
)} | ||
</p> | ||
</div> | ||
</div> | ||
<div className=" absolute top-[400px]"> | ||
{!MembersList && ( | ||
<div className="animate-spin text-lg"> | ||
<AiOutlineLoading3Quarters /> | ||
</div> | ||
)} | ||
</div> | ||
<div className="md:mx-[200px] overflow-x-auto w-full flex justify-center items-center"> | ||
<table className="w-full sm:w-[80%] lg:w-[50%] border border-black dark:border-gray-300 rounded-lg"> | ||
<thead> | ||
<tr> | ||
<th className="px-8 py-2 sm:px-10 sm:py-3 text-center dark:text-white font-semibold border-l border-black dark:border-gray-300 rounded-tl-lg"> | ||
Addresses | ||
</th> | ||
<th className="px-8 py-2 sm:px-10 sm:py-3 text-center dark:text-white font-semibold border-r border-black dark:border-gray-300 rounded-tr-lg"> | ||
Profile Links | ||
</th> | ||
</tr> | ||
</thead> | ||
|
||
<tbody> | ||
{/* Render builders with profile pages first */} | ||
{buildersWithProfile.map((member, i) => { | ||
const address = member?.args?.builder; | ||
return ( | ||
<tr | ||
key={i} | ||
className={ | ||
i % 2 === 0 | ||
? "bg-primary border border-black dark:border-gray-300" | ||
: "bg-[#323f61] border border-black dark:border-gray-300 py-3" | ||
} | ||
> | ||
<td className="px-8 py-2 sm:px-10 sm:py-4 text-center align-middle"> | ||
<div className="flex justify-center items-center py-1 sm:py-2 text-black rounded-lg"> | ||
<div className="bg-white px-3 py-2 rounded-lg"> | ||
<Address address={address} /> | ||
</div> | ||
</div> | ||
</td> | ||
<td className="px-8 py-2 sm:px-10 sm:py-4 text-center align-middle"> | ||
<Link | ||
href={`/builders/${address}`} | ||
className="text-blue-500 underline flex justify-center items-center font-semibold" | ||
> | ||
View Profile | ||
<div> | ||
<RiShareBoxLine className="text-lg text-gray-400 opacity-45" /> | ||
</div> | ||
</Link> | ||
</td> | ||
</tr> | ||
); | ||
})} | ||
{/* Render builders without profile pages */} | ||
{buildersWithoutProfile.map((member, i) => { | ||
const address = member?.args?.builder; | ||
return ( | ||
<tr | ||
key={i + buildersWithProfile.length} | ||
className={ | ||
i % 2 === 0 | ||
? "bg-primary border border-black dark:border-gray-300" | ||
: "bg-[#323f61] border border-black dark:border-gray-300 py-3" | ||
} | ||
> | ||
<td className="px-8 py-2 sm:px-10 sm:py-4 text-center align-middle"> | ||
<div className="flex justify-center items-center py-1 sm:py-2 text-black rounded-lg"> | ||
<div className="bg-white px-3 py-2 rounded-lg"> | ||
<Address address={address} /> | ||
</div> | ||
</div> | ||
</td> | ||
<td className="px-8 py-2 sm:px-10 sm:py-4 text-center align-middle"> | ||
<span className="text-red-500 font-semibold">No Profile Page</span> | ||
</td> | ||
</tr> | ||
); | ||
})} | ||
</tbody> | ||
</table> | ||
</div> | ||
</> | ||
); | ||
}; | ||
|
||
export default MembersList; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import React from "react"; | ||
import MembersList from "./_components/MembersList"; | ||
import fs from "fs/promises"; | ||
import path from "path"; | ||
|
||
// Getting the buildres dir. data | ||
const getBuildersData = async () => { | ||
const buildersDirectory = path.join(process.cwd(), "/app/builders"); | ||
const builderFiles = await fs.readdir(buildersDirectory); | ||
return builderFiles.filter(file => file !== "page.tsx").map(file => file.replace(".tsx", "")); | ||
}; | ||
|
||
const BuildersPage = async () => { | ||
const builders = await getBuildersData(); | ||
return ( | ||
<div className=" flex flex-col justify-center items-center md:my-20"> | ||
<p className=" text-[22px] font-medium underline">🏰 The Builders 🏗️ of BuidlGuidl: Batch #8 </p> | ||
<MembersList builders={builders} /> | ||
</div> | ||
); | ||
}; | ||
|
||
export default BuildersPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.