first connections to api of team page

client/src/components/layout/DetailGrid/index.tsx

@@ -2,7 +2,7 @@ import './detail-grid.scss';
 import DetailBox, { DetailProps } from 'components/ui/DetailBox';
 
 interface Props {
-    details: DetailProps[]
+    details?: DetailProps[]
 }
 
 export default function DetailGrid({ details }: Props) {
@@ -10,7 +10,7 @@ export default function DetailGrid({ details }: Props) {
     return (
         <div className="detail-grid">
             {
-                details.map((detail) => (
+                details?.map((detail) => (
                     <div key={detail.title} className="box-container">
                         <DetailBox {...detail} />
                     </div>

client/src/components/ui/DetailBox/index.tsx

@@ -17,7 +17,7 @@ export default function DetailBox({ number, icon, title, label }: DetailProps) {
                     </span>
                 </div>
                 <div className="text">
-                    {!label && number && <div className="number">{number}</div>}
+                    {!label && number !== undefined && <div className="number">{number}</div>}
                     <div className={'title' + (label ? ' bold' : '')}>{title}</div>
                     {label && <div className="label">{label}</div>}
                 </div>

client/src/pages/Teams/index.tsx

@@ -5,17 +5,39 @@ import Tabs from 'components/navigation/Tabs';
 import Dropdown from 'components/navigation/Dropdown';
 import TeamsMembers from './TeamsMembers';
 import TeamsStats from './TeamsStats';
+import { useEffect, useState } from 'react';
+import { getTeamMembers, getTeamProjects, getTeams, Team } from 'adapters/team';
+import { DetailProps } from 'components/ui/DetailBox';
+
 
 export default function Teams() {
-    const teamDetails = [{
-        icon: 'group',
-        title: 'Member',
-        number: 2
-    }, {
-        icon: 'folder',
-        title: 'Projects',
-        number: 3
-    }];
+    const [allTeams, setTeams] = useState<Team[]>();
+    const [currentTeam, setCurrentTeam] = useState<Team>();
+    const [details, setDetails] = useState<DetailProps[]>([]);
+
+    useEffect(() => {
+        getTeams().then((teams) => {
+            setTeams(teams);
+            setCurrentTeam(teams[0]);
+            if (teams[0]) {
+                getTeamProjects(teams[0].id).then((projects) => {
+                    console.log(projects);
+                    setDetails((state) => [...state, {
+                        icon: 'folder',
+                        title: 'Projects',
+                        number: projects.length
+                    }]);
+                });
+                getTeamMembers(teams[0].id).then((members) => {
+                    setDetails((state) => [...state, {
+                        icon: 'group',
+                        title: 'Members',
+                        number: members.length
+                    }]);
+                })
+            }
+        }).catch(() => { });
+    }, []);
 
     const tabs = [{
         path: '/teams',
@@ -27,6 +49,7 @@ export default function Teams() {
         component: TeamsStats
     }];
 
+    //TODO dynamic
     const teams = [{
         route: '/teams/members?team=someOther',
         label: 'Some other Team',
@@ -35,14 +58,23 @@ export default function Teams() {
         <div className="teams-page">
             <div className="content-container">
                 <h1 className="underlined">Teams</h1>
-                <Dropdown items={teams}>
-                    <h2>Ryoko</h2>
-                    <span className="material-icons icon">
-                        expand_more
-                    </span>
-                </Dropdown>
-                <DetailGrid details={teamDetails} />
-                <ButtonLink href="/teams/uuid/edit" className="expanded">
+                {
+                    allTeams && allTeams?.length > 1 && (
+                        <Dropdown items={teams}>
+                            <h2>{currentTeam?.name}</h2>
+                            <span className="material-icons icon">
+                                expand_more
+                            </span>
+                        </Dropdown>
+                    )
+                }
+                {
+                    allTeams && allTeams?.length === 1 && (
+                        <h2>{currentTeam?.name}</h2>
+                    )
+                }
+                <DetailGrid details={details} />
+                <ButtonLink href={'/teams/' + currentTeam?.id + '/edit'} className="expanded">
                     Edit
                 </ButtonLink>
                 <Tabs tabs={tabs} />