Merge pull request #3 from hcp-uw/updates

Updates Teams page | Small fixes

.gitignore

@@ -132,3 +132,4 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+.vscode/settings.json

src/App.tsx

@@ -1,13 +1,14 @@
-import { ChakraProvider, theme } from "@chakra-ui/react";
-import { HashRouter as Router, Route, Routes } from "react-router-dom";
-import { MembersPage } from "./pages/MembersPage";
-import { TeamsPage } from "./pages/TeamsPage";
-import { EventsPage } from "./pages/EventsPage";
-import { MemberDetailsPage } from "./pages/MemberDetailsPage";
-import "./App.css";
-import { AboutPage } from "./pages/AboutPage";
-import { JoinPage } from "./pages/JoinPage";
+import { ChakraProvider, theme } from '@chakra-ui/react';
+import { HashRouter as Router, Route, Routes } from 'react-router-dom';
+import { MembersPage } from './pages/MembersPage';
+import { LeadTeamsPage } from './pages/LeadTeamsPage';
+import { ProjectTeamsPage } from './pages/ProjectTeamsPage';
+import { EventsPage } from './pages/EventsPage';
+import { MemberDetailsPage } from './pages/MemberDetailsPage';
+import { AboutPage } from './pages/AboutPage';
+import { JoinPage } from './pages/JoinPage';
 import { SponsorPage } from "./pages/SponsorPage";
+import "./App.css";
 
 function App() {
   return (
@@ -16,7 +17,8 @@ function App() {
         <Routes>
           <Route path="/members" element={<MembersPage />} />
           <Route path="/members/:id" element={<MemberDetailsPage />} />
-          <Route path="/teams" element={<TeamsPage />} />
+          <Route path="/teams/leadership" element={<LeadTeamsPage />} />
+          <Route path="/teams/members" element={<ProjectTeamsPage />} />
           <Route path="/events" element={<EventsPage />} />
           <Route path="/about" element={<AboutPage />} />
           <Route path="/join" element={<JoinPage />} />

src/components/EventCard.tsx

@@ -13,11 +13,11 @@ export const EventCard: React.FC<EventCardProps> = ({ event }) => {
   const borderColor = useColorModeValue('gray.200', 'gray.600');
 
   return (
-    <Box 
-      borderWidth="1px" 
-      borderRadius="lg" 
-      overflow="hidden" 
-      boxShadow="lg" 
+    <Box
+      borderWidth="1px"
+      borderRadius="lg"
+      overflow="hidden"
+      boxShadow="lg"
       transition="all 0.3s"
       _hover={{ transform: 'translateY(-5px)', boxShadow: 'xl' }}
       bg={bgColor}

src/components/Layout.tsx

@@ -107,11 +107,11 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({
   const toggleExpand = () => setIsExpanded(!isExpanded);
 
   const navLinks = [
-    { to: "/about", label: "About" },
-    { to: "/events", label: "Events" },
-    { to: "/join", label: "Join" },
-    { to: "/members", label: "Members" },
-    { to: "/teams", label: "Teams" },
+    { to: '/teams/leadership', label: 'Leadership Teams' },
+    { to: '/teams/members', label: 'Project Teams' },
+    { to: '/members', label: 'Members' },
+    { to: '/events', label: 'Events' },
+    { to: '/join', label: 'Join' },
     { to: "/sponsors", label: "Sponsors" },
   ];
 
@@ -209,23 +209,23 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({
                   >
                     <HStack spacing={{ base: 4, md: 10 }}>
                       <FooterLink
-                        href="mailto:your-email@example.com"
+                        href="mailto:huskycodingproject@gmail.com"
                         icon={<FaEnvelope />}
                       />
                       <FooterLink
-                        href="https://github.com/your-org/your-repo"
+                        href="https://github.com/hcp-uw"
                         icon={<FaGithub />}
                       />
                       <FooterLink
                         href="https://twitter.com/your-twitter"
                         icon={<FaTwitter />}
                       />
                       <FooterLink
-                        href="https://linkedin.com/company/your-company"
+                        href="https://www.linkedin.com/company/hcp-uw"
                         icon={<FaLinkedin />}
                       />
                       <FooterLink
-                        href="https://instagram.com/your-instagram"
+                        href="https://www.instagram.com/hcp.uw/"
                         icon={<FaInstagram />}
                       />
                     </HStack>

src/components/MemberCard.tsx

@@ -13,12 +13,12 @@ export const MemberCard: React.FC<MemberCardProps> = ({ member }) => {
   const borderColor = useColorModeValue('gray.200', 'gray.600');
   const navigate = useNavigate();
   return (
-    <Box 
+    <Box
       onClick={() => navigate(`/members/${member.memberId}`)}
-      borderWidth="1px" 
-      borderRadius="lg" 
+      borderWidth="1px"
+      borderRadius="lg"
       p={6}
-      boxShadow="md" 
+      boxShadow="md"
       transition="all 0.3s"
       _hover={{ transform: 'translateY(-5px)', boxShadow: 'xl' }}
       bg={bgColor}

src/interfaces/DBTypes.ts

@@ -18,6 +18,7 @@ export interface DBMember {
   linkedin?: string;
   profilePicture: string;
   created_at: string;
+  lead: boolean;
 }
 
 export interface DBTeam {
@@ -27,6 +28,7 @@ export interface DBTeam {
   logo: string;
   deployLink?: string;
   created_at: string;
+  lead: boolean;
 }
 
 export interface DBSponsor {
@@ -61,11 +63,13 @@ export interface DBCreateMember {
   discord: string;
   linkedin?: string;
   profilePicture: string;
+  lead: boolean;
 }
 
 export interface DBCreateTeam {
   name: string;
   githubRepo: string;
   logo: string;
   deployLink?: string;
+  lead: boolean;
 }

src/interfaces/ITeam.ts

@@ -5,6 +5,7 @@ export interface ITeam {
   logo?: string
   deployLink?: string
   githubRepo?: string
+  lead: boolean;
 }
 
 export interface ITeamMemberRelation {

src/interfaces/mapping.ts

@@ -32,6 +32,7 @@ export const mapDBMemberToIMember = (dbMember: DBMember): IMember => ({
   linkedin: dbMember.linkedin || undefined,
   github: dbMember.github,
   profilePicture: dbMember.profilePicture,
+  lead: dbMember.lead,
 });
 
 export const mapIMemberToDBCreateMember = (member: IMember): DBCreateMember => ({
@@ -42,6 +43,7 @@ export const mapIMemberToDBCreateMember = (member: IMember): DBCreateMember => (
   linkedin: member.linkedin,
   github: member.github,
   profilePicture: member.profilePicture,
+  lead: member.lead,
 });
 
 export const mapDBTeamToITeam = (dbTeam: DBTeam): ITeam => ({
@@ -51,6 +53,7 @@ export const mapDBTeamToITeam = (dbTeam: DBTeam): ITeam => ({
   logo: dbTeam.logo,
   deployLink: dbTeam.deployLink,
   githubRepo: dbTeam.githubRepo,
+  lead: dbTeam.lead,
 });
 
 export const mapDBSponsorToISponsor = (dbSponsor: DBSponsor): ISponsor => ({
@@ -68,6 +71,7 @@ export const mapITeamToDBCreateTeam = (team: ITeam): DBCreateTeam => ({
   githubRepo: team.githubRepo || "",
   logo: team.logo || "",
   deployLink: team.deployLink,
+  lead: team.lead,
 });
 
 export const mapDBTeamMemberRelationToITeamMemberRelation = (dbTeamMemberRelation: DBTeamMemberRelation): ITeamMemberRelation => ({

src/pages/JoinPage.tsx

@@ -64,7 +64,7 @@ export const JoinPage: React.FC = () => {
             _hover={{ transform: 'translateY(-5px)' }}
             transition='all 0.2s'
             onClick={() =>
-              window.open('https://discord.gg/your-invite-link', '_blank')
+              window.open('https://discord.gg/YPT9R4YC', '_blank')
             }
             animation={`${pulseKeyframe} 2s infinite`}
             whileHover={{ scale: 1.05 }}

src/pages/LeadTeamsPage.tsx

@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from 'react';
+import { SimpleGrid, Heading, Spinner, Text, VStack, Input, InputGroup, InputLeftElement } from '@chakra-ui/react';
+import { SearchIcon } from '@chakra-ui/icons';
+import { TeamCard } from '../components/TeamCard';
+import { teamService } from '../service/teamService';
+import { ITeam } from '../interfaces/ITeam';
+import { Layout } from '../components/Layout';
+
+export const LeadTeamsPage: React.FC = () => {
+  const [teams, setTeams] = useState<ITeam[]>([]);
+  const [filteredTeams, setFilteredTeams] = useState<ITeam[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState();
+  const [searchTerm, setSearchTerm] = useState('');
+
+  useEffect(() => {
+    const fetchTeams = async () => {
+      try {
+        const fetchedTeams = await teamService.getAllTeams(true);
+        setTeams(fetchedTeams);
+        setFilteredTeams(fetchedTeams);
+      } catch (err) {
+        console.error(err);
+        setError('Failed to fetch teams');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchTeams();
+  }, []);
+
+  useEffect(() => {
+    const results = teams.filter(team =>
+      team.name?.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+    setFilteredTeams(results);
+  }, [searchTerm, teams]);
+
+  if (loading) return <Layout><Spinner size="xl" /></Layout>;
+  if (error) return <Layout><Text color="red.500">{error}</Text></Layout>;
+
+  return (
+    <Layout>
+      <VStack spacing={8} align="stretch">
+        <Heading>Teams</Heading>
+        <InputGroup>
+          <InputLeftElement pointerEvents="none" children={<SearchIcon color="gray.300" />} />
+          <Input
+            type="text"
+            placeholder="Search teams..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </InputGroup>
+        <SimpleGrid columns={[1, 2, 3]} spacing={6}>
+          {filteredTeams.map(team => (
+            <TeamCard key={team.teamId?.toString()} team={team} />
+          ))}
+        </SimpleGrid>
+      </VStack>
+    </Layout>
+  );
+};

src/pages/TeamsPage.tsx → src/pages/ProjectTeamsPage.tsx

@@ -6,7 +6,7 @@ import { teamService } from '../service/teamService';
 import { ITeam } from '../interfaces/ITeam';
 import { Layout } from '../components/Layout';
 
-export const TeamsPage: React.FC = () => {
+export const ProjectTeamsPage: React.FC = () => {
   const [teams, setTeams] = useState<ITeam[]>([]);
   const [filteredTeams, setFilteredTeams] = useState<ITeam[]>([]);
   const [loading, setLoading] = useState(true);

src/service/teamService.ts

@@ -7,16 +7,16 @@ import { mapDBTeamToITeam, mapDBTeamMemberRelationToITeamMemberRelation, mapDBMe
 const API_URL = 'your-api-url'
 
 export const teamService = {
-  getAllTeams: async (): Promise<ITeam[]> => {
+  getAllTeams: async (lead: boolean = false): Promise<ITeam[]> => {
     let { data: teamData, error: teamError } = await supabase
       .from('Teams')
       .select('*')
       .returns<DBTeam[]>()
+      .eq('lead', lead)
 
     if (teamError) {
       throw new Error(teamError.message)
     }
-
     if (!teamData) {
       return []
     }