Skip to content

Commit 6bc8f3a

Browse files
EdgarButtnerEdgarButtner
committed
Adding Guest Division Page and Card
1 parent a8c2a4f commit 6bc8f3a

4 files changed

Lines changed: 153 additions & 30 deletions

File tree

‎src/frontend/src/layouts/Sidebar/Sidebar.tsx‎

Lines changed: 26 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,10 @@ import { useHomePageContext } from '../../app/HomePageContext';
2828
// once divisions developed, import TeamType from shared
2929
import { isGuest } from 'shared';
3030
// To be uncommented after divisions page is developed
31-
// import * as MuiIcons from '@mui/icons-material';
32-
// import { useAllTeamTypes } from '../../hooks/team-types.hooks';
33-
// import ErrorPage from '../../pages/ErrorPage';
31+
import * as MuiIcons from '@mui/icons-material';
32+
import { useAllTeamTypes } from '../../hooks/team-types.hooks';
33+
import { TeamType } from 'shared';
34+
import ErrorPage from '../../pages/ErrorPage';
3435
import BarChartIcon from '@mui/icons-material/BarChart';
3536
import { useCurrentUser } from '../../hooks/users.hooks';
3637
import QueryStatsIcon from '@mui/icons-material/QueryStats';
@@ -50,19 +51,19 @@ const Sidebar = ({ drawerOpen, setDrawerOpen, moveContent, setMoveContent }: Sid
5051
const { onPNMHomePage, onOnboardingHomePage } = useHomePageContext();
5152
const user = useCurrentUser();
5253
const { onGuestHomePage } = useHomePageContext();
53-
// const { isError: teamsError, error: teamsErrorMsg, data: teams } = useAllTeamTypes();
54+
const { isError: teamsError, error: teamsErrorMsg, data: teams } = useAllTeamTypes();
5455

5556
// To be uncommented once guest divisions pages are developed
56-
// const allTeams: LinkItem[] = (teams ?? []).map((team: TeamType) => {
57-
// const IconComponent = MuiIcons[(team.iconName in MuiIcons ? team.iconName : 'Circle') as keyof typeof MuiIcons];
58-
// return {
59-
// name: team.name,
60-
// icon: <IconComponent />,
61-
// route: routes.TEAMS + '/' + team.teamTypeId
62-
// };
63-
// });
57+
const allTeams: LinkItem[] = (teams ?? []).map((team: TeamType) => {
58+
const IconComponent = MuiIcons[(team.iconName in MuiIcons ? team.iconName : 'Circle') as keyof typeof MuiIcons];
59+
return {
60+
name: team.name,
61+
icon: <IconComponent />,
62+
route: routes.TEAMS + '/' + team.teamTypeId
63+
};
64+
});
6465

65-
// if (teamsError) return <ErrorPage error={teamsErrorMsg} />;
66+
if (teamsError) return <ErrorPage error={teamsErrorMsg} />;
6667
const memberLinkItems: LinkItem[] = [
6768
{
6869
name: 'Home',
@@ -136,23 +137,18 @@ const Sidebar = ({ drawerOpen, setDrawerOpen, moveContent, setMoveContent }: Sid
136137
},
137138

138139
// Teams tab here to be replaced with below code once guest divisions is developed
139-
!onGuestHomePage && {
140-
name: 'Teams',
141-
icon: <GroupIcon />,
142-
route: routes.TEAMS
143-
},
144-
// !onGuestHomePage
145-
// ? {
146-
// name: 'Teams',
147-
// icon: <GroupIcon />,
148-
// route: routes.TEAMS
149-
// }
150-
// : {
151-
// name: 'Divisions',
152-
// icon: <GroupIcon />,
153-
// route: routes.TEAMS,
154-
// subItems: allTeams
155-
// },
140+
!onGuestHomePage
141+
? {
142+
name: 'Teams',
143+
icon: <GroupIcon />,
144+
route: routes.TEAMS
145+
}
146+
: {
147+
name: 'Divisions',
148+
icon: <GroupIcon />,
149+
route: routes.TEAMS,
150+
subItems: allTeams
151+
},
156152
!onGuestHomePage && {
157153
name: 'Calendar',
158154
icon: <CalendarTodayIcon />,

‎src/frontend/src/pages/GuestDivisionPage/GuestSubteamCard.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { Box, Card, CardContent, Stack, Typography, useTheme, Link } from '@mui/material';
2+
import { TeamPreview } from 'shared';
3+
import { NERButton } from '../../components/NERButton';
4+
import { Link as RouterLink } from 'react-router-dom';
5+
6+
interface TeamTypeCardProps {
7+
team: TeamPreview;
8+
}
9+
10+
const GuestSubteamCard: React.FC<TeamTypeCardProps> = ({ team }) => {
11+
const theme = useTheme();
12+
13+
return (
14+
<Card
15+
variant="outlined"
16+
sx={{
17+
width: '100%',
18+
height: '100%',
19+
display: 'flex',
20+
flexDirection: 'column',
21+
background: theme.palette.background.paper,
22+
borderRadius: 2
23+
}}
24+
>
25+
<CardContent sx={{ padding: 2, display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
26+
<Stack direction="row" justifyContent="space-between">
27+
<Box width={'100%'}>
28+
<Box display="flex" justifyContent="space-between" alignItems="center">
29+
<Typography
30+
fontWeight={'regular'}
31+
variant="h5"
32+
sx={{ marginBottom: '0.2rem', fontSize: { xs: '1.15rem', sm: '1.5rem' }, flexGrow: 1 }}
33+
>
34+
{team.teamName}
35+
</Typography>
36+
</Box>
37+
<Typography fontSize={12} color="text.secondary" sx={{ marginBottom: 1 }}>
38+
Project Lead:{' '}
39+
{team.head?.firstName && team.head?.lastName ? `${team.head.firstName} ${team.head.lastName}` : 'N/A'}
40+
{' • '}
41+
{team.leads.length} {team.leads.length === 1 ? 'lead' : 'leads'}
42+
{' • '}
43+
{team.members.length} {team.members.length === 1 ? 'member' : 'members'}
44+
</Typography>
45+
</Box>
46+
</Stack>
47+
<Typography
48+
sx={{
49+
fontSize: 15,
50+
lineHeight: 1.4,
51+
flexGrow: 1,
52+
overflow: 'hidden',
53+
textOverflow: 'ellipsis',
54+
display: '-webkit-box',
55+
WebkitLineClamp: 3,
56+
WebkitBoxOrient: 'vertical'
57+
}}
58+
>
59+
{team.description}
60+
</Typography>
61+
<Link component={RouterLink} to={`/teams/${team.teamId}`} sx={{ width: '100%', textDecoration: 'none' }}>
62+
<NERButton
63+
fullWidth
64+
sx={{
65+
marginTop: 2,
66+
backgroundColor: theme.palette.error.main,
67+
color: theme.palette.error.contrastText,
68+
'&:hover': {
69+
backgroundColor: theme.palette.error.dark
70+
}
71+
}}
72+
>
73+
Learn more
74+
</NERButton>
75+
</Link>
76+
</CardContent>
77+
</Card>
78+
);
79+
};
80+
81+
export default GuestSubteamCard;

‎src/frontend/src/pages/GuestDivisionPage/GuestTeamPage.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import LoadingIndicator from '../../components/LoadingIndicator';
2+
import ErrorPage from '../ErrorPage';
3+
import { Box, useMediaQuery } from '@mui/system';
4+
import PageLayout from '../../components/PageLayout';
5+
import GuestSubteamCard from './GuestSubteamCard';
6+
import { useAllTeams } from '../../hooks/teams.hooks';
7+
import { useParams } from 'react-router-dom';
8+
9+
interface ParamTypes {
10+
teamId: string;
11+
}
12+
13+
const GuestTeamPage: React.FC = () => {
14+
const isMobilePortrait = useMediaQuery('(max-width:480px)');
15+
const { teamId } = useParams<ParamTypes>();
16+
const { isLoading: teamsIsLoading, isError: teamsIsError, data: allTeams, error: teamsError } = useAllTeams();
17+
18+
if (teamsIsLoading || !allTeams) return <LoadingIndicator />;
19+
if (teamsIsError) return <ErrorPage message={teamsError.message} />;
20+
21+
const filteredTeams = allTeams.filter((team) => team.teamType?.teamTypeId === teamId);
22+
23+
if (filteredTeams.length === 0) return <ErrorPage message="No teams found for this division" />;
24+
25+
return (
26+
<PageLayout title={filteredTeams[0].teamType!.name}>
27+
<Box
28+
sx={{
29+
display: 'grid',
30+
gridTemplateColumns: isMobilePortrait ? '1fr' : 'repeat(3, 1fr)',
31+
gap: isMobilePortrait ? 2 : 3,
32+
width: '100%',
33+
px: isMobilePortrait ? 1 : 0
34+
}}
35+
>
36+
{filteredTeams.map((team) => (
37+
<GuestSubteamCard key={team.teamId} team={team} />
38+
))}
39+
</Box>
40+
</PageLayout>
41+
);
42+
};
43+
44+
export default GuestTeamPage;

‎src/frontend/src/pages/GuestProjectsPage/GuestProjectsCard.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,8 @@ const GuestProjectsCard: React.FC<ProjectCardProps> = ({ project }) => {
7878
</Stack>
7979
<Typography
8080
sx={{
81+
fontSize: 15,
82+
lineHeight: 1.4,
8183
flexGrow: 1,
8284
overflow: 'hidden',
8385
textOverflow: 'ellipsis',

0 commit comments

Comments
 (0)