Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Teams implementation added (for Members page) #46

Closed
wants to merge 5 commits into from
Closed

Teams implementation added (for Members page) #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
48791cc
Modified chairman so it's mobile responsive
duptala Sep 8, 2023
e0e0ec5
Added funtionality to Teams
duptala Sep 8, 2023
03b8aa4
Created Team collection type and implemented it in Teams component
duptala Sep 9, 2023
97a6d9c
Minor modifications to Teams display
duptala Sep 20, 2023
0c185ee
minor import fix
duptala Sep 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions frontend/app/members/Chairman.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const Chairman = () => {
leadership in action!
</p>

<div className="grid grid-cols-[repeat(13,minmax(0,1fr))] grid-rows-2 max-w-6xl isolate mx-auto">
<div className="grid grid-cols-1 md:grid-cols-[repeat(13,minmax(0,1fr))] grid-rows-2 max-w-6xl isolate mx-auto">
<div className="relative col-span-12 md:col-span-7 drop-shadow-xl">
<Image
className="w-full absolute top-0 -right-full h-72 object-contain"
Expand All @@ -44,7 +44,7 @@ const Chairman = () => {
</p>
</div>
</div>
<div className="relative row-start-2 col-span-12 md:col-span-7 md:col-start-7 drop-shadow-xl -translate-y-[30%] -z-10">
<div className="relative row-start-2 col-span-1 md:col-span-7 md:col-start-7 md:drop-shadow-xl md:-translate-y-[30%] md:-z-10">
<Image
className="w-full absolute bottom-0 -left-full h-80 object-contain"
src={Flair1}
Expand Down
125 changes: 108 additions & 17 deletions frontend/app/members/Teams.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,109 @@
import Image from "next/image";
import WeDidItGuys from "../../assets/members/we_did_it_guys.png";

const Teams = () => {
return (
<section
className="px-gutter py-20 text-b-dark-blue"
style={{
background:
"radial-gradient(49.73% 34.21% at 25.21% 41.21%, rgba(253, 141, 93, 0.61) 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(66.83% 44.73% at 78.61% 81.23%, rgba(250, 171, 54, 0.65) 0%, rgba(255, 255, 255, 0.00) 97.76%), linear-gradient(180deg, #FFF 0%, #F4A5A0 100%)",
}}
>
<Image src={WeDidItGuys} alt="" className="max-w-6xl mx-auto" />
</section>
);
};
"use client";
import React, { useState, useEffect } from 'react';
import { z } from 'zod';


async function getTeamsData() {
const res = await fetch(`http://localhost:1337/api/teams?populate[members][populate]=*`, {
headers: {
authorization: `Bearer${process.env.STRAPI_KEY}`
},
cache: "no-cache",
});

if (!res.ok) {
throw new Error('Failed to fetch team data');
}

const json = await res.json();

const memberPictureSchema = z.object({
data: z.object({
attributes: z.object({
url: z.string()
})
})
});

const teamSchema = z.object({
data: z.array(
z.object({
attributes: z.object({
teamName: z.string(),
description: z.string(),
members: z.array(
z.object({
memberName: z.string(),
memberPicture: memberPictureSchema
})
)
})
})
)
});

export default Teams;
console.log(json);
return teamSchema.parse(json);
}

export default function Teams() {

const [teams, setTeams] = useState([]);
const [selectedTeam, setSelectedTeam] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);

useEffect(() => {
getTeamsData()
.then(data => {
setTeams(data.data); // Adjusted for the response structure
setSelectedTeam(data.data[0]?.attributes.teamName); // Adjusted for the response structure
})
.catch(err => {
setError(err.message);
});
}, []);

const selectedTeamDetails = selectedTeam ? teams.find(team => team.attributes.teamName === selectedTeam) : null;

if (error) {
return <div className="text-red-500">{error}</div>;
}

return (
<section
className="px-gutter py-20 text-b-dark-blue"
style={{
background:
"radial-gradient(49.73% 34.21% at 25.21% 41.21%, rgba(253, 141, 93, 0.61) 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(66.83% 44.73% at 78.61% 81.23%, rgba(250, 171, 54, 0.65) 0%, rgba(255, 255, 255, 0.00) 97.76%), linear-gradient(180deg, #FFF 0%, #F4A5A0 100%)",
}}>
<div className="flex justify-center items-center space-x-4 mb-8">
{teams.map((team, index) => (
<div key={index}>
<button
onClick={() => setSelectedTeam(team.attributes.teamName)}
className={`px-4 py-2 text-xl transform transition-transform duration-150 border-transparent border ${selectedTeam === team.attributes.teamName ? "font-bold border-0" : "border-l-1 border-r-1"}`}>
{team.attributes.teamName}
</button>
</div>
))}
</div>

{selectedTeamDetails && (
<>
<h2 className="text-5xl text-center mb-4">{selectedTeamDetails.attributes.teamName}</h2>
<p className="text-center max-w-5xl mx-auto mb-20">{selectedTeamDetails.attributes.description}</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
{selectedTeamDetails?.attributes.members?.map((member) => ( // Ensure members exist within attributes
<div key={member.memberName} className="relative shadow-lg">
<img src={`http://localhost:1337${member.memberPicture.data.attributes.url}`} alt={member.memberName} className="w-full" />
<div className="absolute bottom-0 left-0 w-full bg-white text-center py-2 font-bold">
{member.memberName}
</div>
</div>
))}
</div>
</>
)}
</section>
);
};
81 changes: 81 additions & 0 deletions frontend/app/members/teamsv2
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
"use client";
import React, { useEffect, useState } from 'react';
import Image from "next/image";
// import WeDidItGuys from "../../assets/members/we_did_it_guys.png";
import PlaceholderImage from "../../assets/members/memplaceolder1.png"; // dummy image

const Teams = () => {
const [selectedTeam, setSelectedTeam] = useState("Community Involvement");

// Sample data, replace this with fetched data from Strapi in the future
const teamTypes = ["Community Involvement", "Political Subcommittee", "Arts & Culture"];
const teamDetails = {
"Community Involvement": {
description: "This COMMUNITYY team focuses on ...",
members: [
{ name: "John", image: PlaceholderImage },
//... other members
],
},
"Political Subcommittee": {
description: "This the political team",
members: [
{ name: "Bob", image: PlaceholderImage },
//... other members
],
},
"Arts & Culture": {
description: "This the art and craft team",
members: [
{ name: "Lisa", image: PlaceholderImage },
//... other members
],
},
//... other teams
};

const selectedTeamDetails = selectedTeam ? teamDetails[selectedTeam] : null;

return (

<section
className="px-gutter py-20 text-b-dark-blue"
style={{
background:
"radial-gradient(49.73% 34.21% at 25.21% 41.21%, rgba(253, 141, 93, 0.61) 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(66.83% 44.73% at 78.61% 81.23%, rgba(250, 171, 54, 0.65) 0%, rgba(255, 255, 255, 0.00) 97.76%), linear-gradient(180deg, #FFF 0%, #F4A5A0 100%)",
}}
>

<div className="flex justify-center space-x-6 mb-6">
{teamTypes.map((team) => (
<button
key={team}
onClick={() => setSelectedTeam(team)}
className={selectedTeam === team ? "font-bold" : ""}
>
{team}
</button>
))}
</div>

{selectedTeamDetails && (
<>
<h2 className="text-4xl text-center mb-4">{selectedTeam}</h2>
<p className="text-center max-w-5xl mx-auto mb-20">{selectedTeamDetails.description}</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
{selectedTeamDetails.members.map((member) => (
<div key={member.name} className="relative">
<Image src={member.image} alt={member.name} className="w-full" />
<div className="absolute bottom-0 left-0 w-full bg-white text-center py-2">
{member.name}
</div>
</div>
))}
</div>
</>
)}
</section>
);
};

export default Teams;
Loading