Skip to content

Commit d22204f

Browse files
wavehassmanwavehassman
authored
Merge pull request #4151 from Northeastern-Electric-Racing/#4086-Division-Page
#4086 Adding division page
2 parents 2784ce6 + 81f0930 commit d22204f

7 files changed

Lines changed: 148 additions & 7 deletions

File tree

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export interface NavPageLinkItemProps extends LinkItem {
1313
onSubmenuHover?: () => void;
1414
onSubmenuCollapse?: () => void;
1515
isSubItem?: boolean;
16+
isClickableWithSubitems?: boolean;
1617
}
1718

1819
const NavPageLink: React.FC<NavPageLinkItemProps> = ({
@@ -23,7 +24,8 @@ const NavPageLink: React.FC<NavPageLinkItemProps> = ({
2324
isSubmenuOpen,
2425
onSubmenuHover,
2526
onSubmenuCollapse,
26-
isSubItem = false
27+
isSubItem = false,
28+
isClickableWithSubitems
2729
}) => {
2830
const theme = useTheme();
2931

@@ -41,7 +43,7 @@ const NavPageLink: React.FC<NavPageLinkItemProps> = ({
4143
</>
4244
);
4345

44-
if (subItems) {
46+
if (subItems && !isClickableWithSubitems) {
4547
return (
4648
<Box
4749
onMouseEnter={onSubmenuHover}
@@ -68,6 +70,7 @@ const NavPageLink: React.FC<NavPageLinkItemProps> = ({
6870
<NavLink
6971
to={route}
7072
exact={route === routes.HOME}
73+
onMouseEnter={subItems && isClickableWithSubitems ? onSubmenuHover : undefined}
7174
onClick={onSubmenuCollapse}
7275
style={(isActive) => ({
7376
textDecoration: 'none',

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,8 @@ const Sidebar = ({ drawerOpen, setDrawerOpen, moveContent, setMoveContent }: Sid
148148
name: 'Divisions',
149149
icon: <GroupIcon />,
150150
route: routes.TEAMS,
151-
subItems: allTeams
151+
subItems: allTeams,
152+
isClickableWithSubitems: true
152153
},
153154
!onGuestHomePage && {
154155
name: 'Calendar',

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
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 { useAllTeamTypes } from '../../hooks/team-types.hooks';
6+
import { Typography } from '@mui/material';
7+
import GuestTeamCard from './GuestTeamCard';
8+
9+
const GuestDivisionPage: React.FC = () => {
10+
const isMobilePortrait = useMediaQuery('(max-width:480px)');
11+
const {
12+
isLoading: teamTypesIsLoading,
13+
isError: teamTypesIsError,
14+
data: allTeamTypes,
15+
error: teamTypesError
16+
} = useAllTeamTypes();
17+
18+
if (teamTypesIsError) return <ErrorPage message={teamTypesError.message} />;
19+
if (teamTypesIsLoading || !allTeamTypes) return <LoadingIndicator />;
20+
21+
if (allTeamTypes.length === 0) {
22+
return (
23+
<PageLayout title={'Divisions'}>
24+
<Box
25+
sx={{
26+
display: 'flex',
27+
justifyContent: 'center',
28+
alignItems: 'center',
29+
height: '70vh'
30+
}}
31+
>
32+
<Typography>No Teams Found!</Typography>
33+
</Box>
34+
</PageLayout>
35+
);
36+
}
37+
38+
return (
39+
<PageLayout title={'Divisions'}>
40+
<Box
41+
sx={{
42+
display: 'grid',
43+
gridTemplateColumns: isMobilePortrait ? '1fr' : 'repeat(3, 1fr)',
44+
gap: isMobilePortrait ? 2 : 3,
45+
width: '100%',
46+
px: isMobilePortrait ? 1 : 0
47+
}}
48+
>
49+
{allTeamTypes.map((teamType) => (
50+
<GuestTeamCard key={teamType.teamTypeId} teamType={teamType} />
51+
))}
52+
</Box>
53+
</PageLayout>
54+
);
55+
};
56+
57+
export default GuestDivisionPage;

‎src/frontend/src/pages/GuestDivisionsPage/GuestTeamCard.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { Box, Card, CardContent, Stack, Typography, useTheme, Link } from '@mui/material';
2+
import { TeamType } from 'shared';
3+
import { NERButton } from '../../components/NERButton';
4+
import { Link as RouterLink } from 'react-router-dom';
5+
6+
interface GuestTeamCardProps {
7+
teamType: TeamType;
8+
}
9+
10+
const GuestTeamCard: React.FC<GuestTeamCardProps> = ({ teamType }) => {
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+
{teamType.name}
35+
</Typography>
36+
</Box>
37+
</Box>
38+
</Stack>
39+
<Typography
40+
sx={{
41+
fontSize: 15,
42+
lineHeight: 1.4,
43+
flexGrow: 1,
44+
overflow: 'hidden',
45+
textOverflow: 'ellipsis',
46+
display: '-webkit-box',
47+
WebkitLineClamp: 3,
48+
WebkitBoxOrient: 'vertical'
49+
}}
50+
>
51+
{teamType.description}
52+
</Typography>
53+
<Link component={RouterLink} to={`/teams/${teamType.teamTypeId}`} sx={{ width: '100%', textDecoration: 'none' }}>
54+
<NERButton
55+
fullWidth
56+
sx={{
57+
marginTop: 2,
58+
backgroundColor: theme.palette.error.main,
59+
color: theme.palette.error.contrastText,
60+
'&:hover': {
61+
backgroundColor: theme.palette.error.dark
62+
}
63+
}}
64+
>
65+
Learn more
66+
</NERButton>
67+
</Link>
68+
</CardContent>
69+
</Card>
70+
);
71+
};
72+
73+
export default GuestTeamCard;

src/frontend/src/pages/GuestDivisionPage/GuestSubteamCard.tsx renamed to src/frontend/src/pages/GuestTeamsPage/GuestSubteamCard.tsx

File renamed without changes.

src/frontend/src/pages/GuestDivisionPage/GuestTeamPage.tsx renamed to src/frontend/src/pages/GuestTeamsPage/GuestTeamPage.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const GuestTeamPage: React.FC<GuestTeamPageProps> = ({ teamTypeId }) => {
3030

3131
if (teams.length === 0) {
3232
return (
33-
<PageLayout title={teamTypeName}>
33+
<PageLayout title={teamTypeName} previousPages={[{ name: 'Divisions', route: '/teams' }]}>
3434
<Box
3535
sx={{
3636
display: 'flex',
@@ -46,7 +46,7 @@ const GuestTeamPage: React.FC<GuestTeamPageProps> = ({ teamTypeId }) => {
4646
}
4747

4848
return (
49-
<PageLayout title={teamTypeName}>
49+
<PageLayout title={teamTypeName} previousPages={[{ name: 'Divisions', route: '/teams' }]}>
5050
<Box
5151
sx={{
5252
display: 'grid',

‎src/frontend/src/pages/TeamsPage/Teams.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ import { useParams } from 'react-router-dom';
1111
import { useCurrentUser } from '../../hooks/users.hooks';
1212
import { isGuest } from 'shared';
1313
import { useAllTeamTypes } from '../../hooks/team-types.hooks';
14-
import GuestTeamPage from '../GuestDivisionPage/GuestTeamPage';
14+
import GuestTeamPage from '../GuestTeamsPage/GuestTeamPage';
15+
import GuestDivisionPage from '../GuestDivisionsPage/GuestDivisionPage';
1516
import LoadingIndicator from '../../components/LoadingIndicator';
1617
import ErrorPage from '../ErrorPage';
1718

@@ -29,11 +30,17 @@ const TeamOrDivisionPage: React.FC = () => {
2930
return <TeamSpecificPage />;
3031
};
3132

33+
const GuestOrMemberTeamsPage: React.FC = () => {
34+
const user = useCurrentUser();
35+
if (isGuest(user.role)) return <GuestDivisionPage />;
36+
return <TeamsPage />;
37+
};
38+
3239
const Teams: React.FC = () => {
3340
return (
3441
<Switch>
3542
<Route path={routes.TEAMS_BY_ID} component={TeamOrDivisionPage} />
36-
<Route path={routes.TEAMS} component={TeamsPage} />
43+
<Route path={routes.TEAMS} component={GuestOrMemberTeamsPage} />
3744
</Switch>
3845
);
3946
};

0 commit comments

Comments
 (0)