Skip to content

Commit

Permalink
Merge pull request #33 from Geethika-Kancharla/main
Browse files Browse the repository at this point in the history 
Updated UI for Members page
  • Loading branch information
@SkySingh04
SkySingh04 authored Aug 16, 2024
2 parents da22f29 + bf640d7 commit 73fca8d
Show file tree
Hide file tree
Showing 6 changed files with 70 additions and 34 deletions.
Binary file removed app/favicon.ico
View file
Binary file not shown.
70 changes: 41 additions & 29 deletions components/Members.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import Card from '@/components/ui/Card';
import CollapsibleSection from '@/components/ui/CollapsibleSection';
import { db } from "@/Firebase";
import { collection, query, where, getDocs } from "firebase/firestore";
import ClipLoader from "react-spinners/ClipLoader";

interface Member {
id: string;
Expand All @@ -17,16 +18,17 @@ interface Member {
const headings = ["Alumni", "Fourth Year", "Third Year", "Second Year", "First Year"];

export default function Members() {
// Set default open index to the index of "Alumni"
const [openIndex, setOpenIndex] = useState<number>(headings.indexOf("Alumni"));
const [data, setData] = useState<{ [key: string]: Member[] }>({});
const [loading, setLoading] = useState<boolean>(true);

const handleToggle = (index: number) => {
setOpenIndex(openIndex === index ? -1 : index);
};

useEffect(() => {
const fetchData = async () => {
setLoading(true);
try {
const fetchedData: { [key: string]: Member[] } = {};

Expand All @@ -35,13 +37,11 @@ export default function Members() {
const q = query(membersCollection, where("year", "==", heading));
const querySnapshot = await getDocs(q);

// Collect all documents
const allMembers = querySnapshot.docs.map(doc => ({
id: doc.id,
...(doc.data() as Omit<Member, 'id'>)
})) as Member[];

// Remove duplicates based on name, domain, and year
const uniqueMembers = Array.from(
new Map(
allMembers.map(member => [
Expand All @@ -51,7 +51,6 @@ export default function Members() {
).values()
);

// Sort members alphabetically by name
const sortedMembers = uniqueMembers.sort((a, b) => a.name.localeCompare(b.name));

fetchedData[heading] = sortedMembers;
Expand All @@ -60,39 +59,52 @@ export default function Members() {
setData(fetchedData);
} catch (error) {
console.error("Error fetching data: ", error);
} finally {
setLoading(false);
}
};
fetchData();
}, []);

return (
<div className="flex flex-col justify-center items-center w-full space-y-4 mt-20 pb-8 bg-black">
<h1 className="text-center font-bold text-4xl text-white"></h1>
<div className="flex flex-col justify-center items-center w-full space-y-4 mt-24 bg-black">
<h1 className="text-center font-bold text-4xl text-white">PB Members</h1>
<div className="w-full max-w-6xl px-2 ">
<div className="space-y-2">
{headings.map((heading, index) => (
<CollapsibleSection
key={index}
heading={heading}
content={
<div className='flex justify-center'>
<div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16">
{data[heading]?.map((profile, cardIndex) => (
<Card
key={cardIndex}
name={profile.name}
domain={profile.domain}
company={profile.company || ""}
/>
))}
{loading ? (
<div className="flex justify-center py-10">
<ClipLoader color={"#00C853"} loading={loading} size={50} />
</div>
) : (
<div className="space-y-2">
{headings.map((heading, index) => (
<CollapsibleSection
key={index}
heading={heading}
content={
<div className='flex justify-center'>
{heading === "First Year" && (
<p className="text-white lg:text-2xl text-xl mb-4">
Recruitment incoming soon
</p>
)}
<div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16">
{data[heading]?.map((profile, cardIndex) => (
<Card
key={cardIndex}
name={profile.name}
domain={profile.domain}
company={profile.company || ""}
/>
))}
</div>
</div>
</div>
}
isOpen={openIndex === index}
onToggle={() => handleToggle(index)}
/>
))}
</div>
}
isOpen={openIndex === index}
onToggle={() => handleToggle(index)}
/>
))}
</div>
)}
</div>
</div>
);
Expand Down
19 changes: 15 additions & 4 deletions components/ui/CollapsibleSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,22 @@ const CollapsibleSection = forwardRef<HTMLDivElement, CollapsibleSectionProps>(

useEffect(() => {
if (isOpen && localRef.current) {
localRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });

const offset = 200; // Adjust this value to match the height of your navbar
const bodyRect = document.body.getBoundingClientRect().top;
const elementRect = localRef.current.getBoundingClientRect().top;
const elementPosition = elementRect - bodyRect;
const offsetPosition = elementPosition - offset;

window.scrollTo({
top: offsetPosition,
behavior: 'smooth',
});

}
}, [isOpen]);


return (
<div className="border-b border-gray-700" ref={localRef}>
<div
Expand All @@ -30,13 +42,12 @@ const CollapsibleSection = forwardRef<HTMLDivElement, CollapsibleSectionProps>(
tabIndex={-1}
className="flex items-center justify-between p-4 cursor-pointer bg-black text-white"
>
<h2 className={` ${isOpen ? 'text-4xl mt-24 font-bold' : 'text-xl'} text-[#00C853]
`}>
<h2 className={`${isOpen ? 'text-4xl font-bold' : 'text-xl'} text-[#00C853]`}>
{heading}
</h2>

{isOpen ? (
<FaChevronUp className="h-5 w-5 text-white mt-24" />
<FaChevronUp className="h-5 w-5 text-white" />
) : (
<FaChevronDown className="h-5 w-5 text-white" />
)}
Expand Down
3 changes: 3 additions & 0 deletions components/ui/mobile-menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,9 @@ export default function MobileMenu() {
<li>
<Link href="/leads" className="flex font-medium w-full text-gray-300 hover:text-white py-2 justify-center" onClick={() => setMobileNavOpen(false)}>Leads</Link>
</li>
<li>
<Link href="/members" className="flex font-medium w-full text-gray-300 hover:text-white py-2 justify-center" onClick={() => setMobileNavOpen(false)}>Members</Link>
</li>
<li>
<Link href="/achievements" className="flex font-medium w-full text-gray-300 hover:text-white py-2 justify-center" onClick={() => setMobileNavOpen(false)}>Achievements</Link>
</li>
Expand Down
10 changes: 10 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"react-hook-form": "^7.52.2",

"react-icons": "^5.3.0",

"react-spinners": "^0.14.1",
"react-spring": "^9.7.4",
"tailwind-merge": "^2.4.0",
"tailwindcss-animate": "^1.0.7",
Expand Down

0 comments on commit 73fca8d

Please sign in to comment.