Skip to content
Snippets Groups Projects
Commit 9334954b authored by Bernard Roland (Student Com20)'s avatar Bernard Roland (Student Com20)
Browse files

Reduced the number of API requests in the tabs page

parent a8dd0635
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
client/src/pages/Teams/TeamsMembers/index.tsx
+ 28
− 21
View file @ 9334954b
......@@ -19,32 +19,39 @@ export default function TeamsMembers({ members, team }: Props) {
const [roles, setRoles] = useState<TeamRole[]>();
useEffect(() => {
getTeamRoles(team.id).then((roles) => {
setRoles(roles);
})
getTeamRoles(team.id).then(setRoles);
}, [team]);
let teamMembers;
if (roles) {
teamMembers = members.map(member => ({
user: member,
info: member.role.name,
settings: [{
label: 'Edit role',
popupContent: (
<>
<RoleForm setRoles={setRoles} roles={roles} team={team} member={member} />
</>
)
}]
}));
}
return (
<section className="teams-members-section">
{
(roles && teamMembers)
? <MemberList members={teamMembers} addContent={<MemberForm setRoles={setRoles} roles={roles} team={team} />} />
roles
? (
<MemberList
members={members.map(member => ({
user: member,
info: member.role.name,
settings: [{
label: 'Edit role',
popupContent: (
<RoleForm
setRoles={setRoles}
roles={roles}
team={team}
member={member}
/>
)
}]
}))}
addContent={
<MemberForm
setRoles={setRoles}
roles={roles}
team={team}
/>
}
/>
)
: <LoadingScreen />
}
</section>
......
client/src/pages/Teams/index.tsx
+ 78
− 75
View file @ 9334954b
import { useHistory, useParams } from 'react-router';
import { useCallback, useEffect, useState } from 'react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { getTeamMembers, getTeamProjects, getTeams, leaveTeam, Team } from 'adapters/team';
import { getTeamMembers, getTeamProjects, getTeams, leaveTeam, Team, TeamMember } from 'adapters/team';
import { Project } from 'adapters/project';
import Button from 'components/ui/Button';
import { DetailProps } from 'components/ui/DetailBox';
import DetailGrid from 'components/layout/DetailGrid';
import Tabs, { Tab } from 'components/navigation/Tabs';
import Tabs from 'components/navigation/Tabs';
import LoadingScreen from 'components/ui/LoadingScreen';
import ButtonLink from 'components/navigation/ButtonLink';
import Dropdown, { DropDownItem } from 'components/navigation/Dropdown';
import Dropdown from 'components/navigation/Dropdown';
import TeamsMembers from './TeamsMembers';
import TeamsStats from './TeamsStats';
......@@ -22,81 +22,84 @@ export interface Params {
}
export default function Teams() {
const [tabs, setTabs] = useState<Tab[]>([]);
const [allTeams, setTeams] = useState<Team[]>();
const [currentTeam, setCurrentTeam] = useState<Team>();
const [details, setDetails] = useState<DetailProps[]>([]);
const [pageLinks, setPageLinks] = useState<DropDownItem[]>([]);
const [teams, setTeams] = useState<Team[]>();
const [projects, setProjects] = useState<Project[]>([]);
const [members, setMembers] = useState<TeamMember[]>([]);
const history = useHistory();
const { teamId } = useParams<Params>();
const { teamId: teamParamId } = useParams<Params>();
const teamId = teamParamId ?? teams?.[0]?.id
let currentTeam = teams?.find(team => team.id === teamId);
useEffect(() => {
getTeams()
.then((teams) => {
//if no team is defined, take the first one
if ((!teamId && teams[0]) || !teams.find(team => team.id === teamId)) {
history.push('/teams/' + teams[0].id);
}
setTeams(teams);
setCurrentTeam(teams.find(team => team.id === teamId));
})
.catch(() => { });
}, [teamId, history]);
if (teams && (!currentTeam || !teamParamId)) {
if (teams.length > 0) {
// if no team is defined, take the first one
history.replace('/teams/' + teams[0].id);
} else {
history.push('/introduction');
}
}
});
useEffect(() => {
if (currentTeam && allTeams) {
getTeamProjects(currentTeam.id).then((projects) => {
setDetails((state) => state
.filter(detail => detail.title !== 'Projects')
.concat({
icon: 'folder',
title: 'Projects',
number: projects.length
})
);
});
getTeamMembers(currentTeam.id).then((members) => {
setDetails((state) =>
state
.filter(detail => detail.title !== 'Members')
.concat({
icon: 'group',
title: 'Members',
number: members.length
})
);
setTabs([
{
route: '/teams/' + currentTeam.id,
label: 'Members',
component: (<TeamsMembers members={members} team={currentTeam} />)
}, {
route: '/teams/' + currentTeam.id + '/stats/:time',
link: '/teams/' + currentTeam.id + '/stats/week',
label: 'Stats',
component: <TeamsStats teamId={currentTeam.id} />
}
]);
});
//update Tabs link
setPageLinks(allTeams.filter(team => currentTeam.id !== team.id).map(team => {
return {
route: '/teams/' + team.id,
label: team.name,
}
}));
getTeams().then(setTeams);
}, []);
useEffect(() => {
if (teamId) {
getTeamProjects(teamId).then(setProjects);
}
}, [teamId]);
useEffect(() => {
if (teamId) {
getTeamMembers(teamId).then(setMembers);
}
}, [currentTeam, allTeams]);
}, [teamId]);
const leaveCurrentTeam = useCallback(async () => {
if (currentTeam) {
await leaveTeam(currentTeam.id);
history.go(0);
if (teamId && teams) {
await leaveTeam(teamId);
setTeams(teams.filter(team => team.id !== teamId));
}
}, [teams, teamId])
const tabs = useMemo(() => currentTeam && members && [
{
route: '/teams/' + currentTeam.id,
label: 'Members',
component: (<TeamsMembers members={members} team={currentTeam} />)
}, {
route: '/teams/' + currentTeam.id + '/stats/:time',
link: '/teams/' + currentTeam.id + '/stats/week',
label: 'Stats',
component: <TeamsStats teamId={currentTeam.id} />
}
], [currentTeam, members]);
const dropdownList = useMemo(() => teamId && teams && (
teams.filter(team => team.id !== teamId).map(team => ({
route: '/teams/' + team.id,
label: team.name,
}))
), [teams, teamId]);
const details = useMemo(() => members && projects && [
{
icon: 'folder',
title: 'Projects',
number: projects.length
},
{
icon: 'group',
title: 'Members',
number: members.length
}
}, [currentTeam, history])
], [members, projects]);
if (currentTeam) {
if (teamId) {
return (
<div className="teams-page">
<div className="content-container">
......@@ -105,9 +108,9 @@ export default function Teams() {
<p>Here you can see information about your teams, as well as its stats and members.</p>
</div>
{
allTeams
dropdownList
? (
<Dropdown items={pageLinks}>
<Dropdown items={dropdownList}>
<h2>{currentTeam?.name}</h2>
<span className="material-icons icon">
expand_more
......@@ -118,7 +121,7 @@ export default function Teams() {
}
{
details
? (<DetailGrid details={details} />)
? <DetailGrid details={details} />
: (<LoadingScreen />)
}
<div className="buttons">
......@@ -131,7 +134,7 @@ export default function Teams() {
</ButtonLink>
</div>
{
allTeams && allTeams.length > 1 && (
teams && teams.length > 1 && (
<Button className="expanded dark" onClick={leaveCurrentTeam}>
Leave Team
</Button>
......@@ -140,8 +143,8 @@ export default function Teams() {
</div>
{
tabs
? (<Tabs tabs={tabs} />)
: (<LoadingScreen />)
? <Tabs tabs={tabs} />
: <LoadingScreen />
}
</div>
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment