#4003 fix route, make boxes better

Author: staysgt

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

@@ -1,4 +1,4 @@
-import { alpha, Box, Card, CardContent, Chip, Stack, Typography, useTheme, useMediaQuery, Link } from '@mui/material';
+import { alpha, Box, Card, CardContent, Chip, Stack, Typography, useTheme, Link } from '@mui/material';
 import { wbsNamePipe, ProjectPreview, wbsPipe, WbsElementStatus } from 'shared';
 import { datePipe } from '../../utils/pipes';
 import { NERButton } from '../../components/NERButton';
@@ -13,7 +13,6 @@ interface ProjectCardProps {
 
 const GuestProjectsCard: React.FC<ProjectCardProps> = ({ project }) => {
   const theme = useTheme();
-  const isMobilePortrait = useMediaQuery('(max-width:600px)');
   const { data: singleProject, isLoading, isError, error } = useSingleProject(project.wbsNum);
   if (isLoading || !singleProject) return <LoadingIndicator />;
   if (isError) return <ErrorPage message={error.message} />;
@@ -24,14 +23,15 @@ const GuestProjectsCard: React.FC<ProjectCardProps> = ({ project }) => {
     <Card
       variant="outlined"
       sx={{
-        minWidth: 'fit-content',
-        minHeight: 'fit-content',
-        width: isMobilePortrait ? '100%' : 'auto',
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
         background: theme.palette.background.paper,
         borderRadius: 2
       }}
     >
-      <CardContent sx={{ padding: 2 }}>
+      <CardContent sx={{ padding: 2, display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
         <Stack direction="row" justifyContent="space-between">
           <Box width={'100%'}>
             <Box display="flex" justifyContent="space-between" alignItems="center">
@@ -67,7 +67,7 @@ const GuestProjectsCard: React.FC<ProjectCardProps> = ({ project }) => {
                 ? `${singleProject.manager.firstName} ${singleProject.manager.lastName}`
                 : 'N/A'}
             </Typography>
-            <Typography fontWeight={'regular'} fontSize={{ xs: 14, sm: 16 }} noWrap>
+            <Typography fontWeight={'regular'} fontSize={{ xs: 14, sm: 16 }}>
               {datePipe(singleProject.startDate) +
                 ' ⟝ ' +
                 singleProject.duration +
@@ -76,7 +76,18 @@ const GuestProjectsCard: React.FC<ProjectCardProps> = ({ project }) => {
             </Typography>
           </Box>
         </Stack>
-        <Typography>{singleProject.summary}</Typography>
+        <Typography
+          sx={{
+            flexGrow: 1,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            display: '-webkit-box',
+            WebkitLineClamp: 3,
+            WebkitBoxOrient: 'vertical'
+          }}
+        >
+          {singleProject.summary}
+        </Typography>
         <Link
           component={RouterLink}
           to={`/projects/${wbsPipe(project.wbsNum)}`}

src/frontend/src/pages/GuestProjectsPage/GuestProjectsPage.tsx

@@ -33,12 +33,14 @@ const GuestProjectsPage: React.FC = () => {
     <PageLayout title="Projects">
       <Box
         width={'100%'}
-        alignContent={'center'}
         display={'flex'}
         justifyContent={'center'}
         gap={2}
-        flexWrap={'wrap'}
         mb={3}
+        sx={{
+          overflowX: 'auto',
+          pb: 1
+        }}
       >
         {teamTypes.map((team) => (
           <Chip
@@ -51,6 +53,7 @@ const GuestProjectsPage: React.FC = () => {
             }
             clickable
             color={selectedTeamTypes?.includes(team.name) ? 'primary' : 'default'}
+            sx={{ flexShrink: 0 }}
           />
         ))}
       </Box>

src/frontend/src/pages/HomePage/components/FeaturedProjects.tsx

@@ -50,7 +50,11 @@ const FeaturedProjects: React.FC = () => {
         {featuredProjects.length === 0 ? (
           <NoFeaturedProjectsDisplay />
         ) : (
-          featuredProjects.map((p) => <GuestProjectsCard project={p} />)
+          featuredProjects.map((p) => (
+            <Box key={p.wbsNum.projectNumber} sx={{ width: isMobilePortrait ? '100%' : 300, flexShrink: 0 }}>
+              <GuestProjectsCard project={p} />
+            </Box>
+          ))
         )}
       </Stack>
     </ScrollablePageBlock>

src/frontend/src/pages/ProjectsPage/Projects.tsx

@@ -10,7 +10,6 @@ import ProjectsPage from './ProjectsPage';
 import CreateWorkPackageForm from '../WorkPackageForm/CreateWorkPackageForm';
 import ProjectCreateContainer from '../ProjectDetailPage/ProjectForm/ProjectCreateContainer';
 import PartPage from '../PartPage/PartPage';
-import GuestProjectsPage from '../GuestProjectsPage/GuestProjectsPage';
 
 const Projects: React.FC = () => {
   return (
@@ -20,7 +19,6 @@ const Projects: React.FC = () => {
       <Route path={routes.WORK_PACKAGE_NEW} component={CreateWorkPackageForm} />
       <Route path={routes.PROJECTS_NEW} component={ProjectCreateContainer} />
       <Route path={routes.PROJECT_PART} component={PartPage} />
-      <Route path={routes.GUEST_PROJECTS} component={GuestProjectsPage} />
       <Route path={routes.PROJECTS_BY_WBS} component={WBSDetails} />
       <Route path={routes.PROJECTS} component={ProjectsPage} />
     </Switch>

src/frontend/src/pages/ProjectsPage/ProjectsPage.tsx

@@ -14,6 +14,7 @@ import { useCurrentUser } from '../../hooks/users.hooks';
 import { isGuest } from 'shared';
 import { Add } from '@mui/icons-material';
 import { useHistory } from 'react-router-dom';
+import GuestProjectsPage from '../GuestProjectsPage/GuestProjectsPage';
 
 /**
  * Cards of all projects that this user is in their team.
@@ -24,6 +25,9 @@ const ProjectsPage: React.FC = () => {
   const user = useCurrentUser();
   const history = useHistory();
 
+  if (isGuest(user.role)) {
+    return <GuestProjectsPage />;
+  }
   return (
     <PageLayout
       title="Projects"

src/frontend/src/utils/routes.ts

@@ -36,7 +36,6 @@ const PROJECTS_BY_WBS = PROJECTS + `/:wbsNum`;
 const PROJECTS_NEW = PROJECTS + `/new`;
 const WORK_PACKAGE_NEW = PROJECTS + `/work-package/new`;
 const PROJECT_PART = PROJECTS_BY_WBS + '/part/:indexNum';
-const GUEST_PROJECTS = PROJECTS + '/guest';
 
 /**************** Teams Section ****************/
 const TEAMS = `/teams`;
@@ -106,7 +105,6 @@ export const routes = {
   PROJECTS_NEW,
   WORK_PACKAGE_NEW,
   PROJECT_PART,
-  GUEST_PROJECTS,
 
   CHANGE_REQUESTS,
   ALL_CHANGE_REQUESTS,