Merge branch 'feature/global-car-filtering' of github.com:Northeastern-Electric-Racing/FinishLine into feature/global-car-filtering

rbessin · rbessin · commit bdf0d34655fa · 2026-03-25T20:38:16.000-04:00
Merge remote-tracking branch 'feature/global-car-filtering'
diff --git a/src/backend/src/controllers/users.controllers.ts b/src/backend/src/controllers/users.controllers.ts
@@ -74,7 +74,11 @@ export default class UsersController {
 
   static async getUsersFavoriteProjects(req: Request, res: Response, next: NextFunction) {
     try {
-      const projects = await UsersService.getUsersFavoriteProjects(req.currentUser.userId, req.organization);
+      const projects = await UsersService.getUsersFavoriteProjects(
+        req.currentUser.userId,
+        req.organization,
+        req.currentCar?.carId
+      );
 
       res.status(200).json(projects);
     } catch (error: unknown) {
diff --git a/src/backend/src/services/users.services.ts b/src/backend/src/services/users.services.ts
@@ -161,7 +161,11 @@ export default class UsersService {
    * @param organizationId the id of the organization the user is in
    * @returns the user's favorite projects
    */
-  static async getUsersFavoriteProjects(userId: string, organization: Organization): Promise<ProjectOverview[]> {
+  static async getUsersFavoriteProjects(
+    userId: string,
+    organization: Organization,
+    carId?: string
+  ): Promise<ProjectOverview[]> {
     const requestedUser = await prisma.user.findUnique({ where: { userId } });
     if (!requestedUser) throw new NotFoundException('User', userId);
 
@@ -175,7 +179,8 @@ export default class UsersService {
         wbsElement: {
           organizationId: organization.organizationId,
           dateDeleted: null
-        }
+        },
+        ...(carId && { carId })
       },
       ...getProjectOverviewQueryArgs(organization.organizationId)
     });
diff --git a/src/frontend/src/components/GlobalCarFilterDropdown.tsx b/src/frontend/src/components/GlobalCarFilterDropdown.tsx
@@ -3,9 +3,8 @@
  * See the LICENSE file in the repository root folder for details.
  */
 
-import React, { useState } from 'react';
-import { Box, Typography, Chip, Collapse, IconButton } from '@mui/material';
-import { ExpandMore as ExpandMoreIcon, DirectionsCar as CarIcon } from '@mui/icons-material';
+import { Box, Typography, Chip } from '@mui/material';
+import { DirectionsCar as CarIcon } from '@mui/icons-material';
 import { Car } from 'shared';
 import { useGlobalCarFilter } from '../app/AppGlobalCarFilterContext';
 import LoadingIndicator from './LoadingIndicator';
@@ -17,15 +16,9 @@ interface GlobalCarFilterDropdownProps {
 
 const GlobalCarFilterDropdown: React.FC<GlobalCarFilterDropdownProps> = ({ compact = false, sx = {} }) => {
   const { selectedCar, allCars, setSelectedCar, isLoading, error } = useGlobalCarFilter();
-  const [expanded, setExpanded] = useState(false);
-
-  const handleToggle = () => {
-    setExpanded(!expanded);
-  };
 
   const handleCarSelect = (car: Car | null) => {
     setSelectedCar(car);
-    setExpanded(false);
   };
 
   if (isLoading) {
@@ -60,7 +53,6 @@ const GlobalCarFilterDropdown: React.FC<GlobalCarFilterDropdownProps> = ({ compa
     return (
       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, ...sx }}>
         <Box
-          onClick={handleToggle}
           sx={{
             display: 'flex',
             alignItems: 'center',
@@ -78,67 +70,57 @@ const GlobalCarFilterDropdown: React.FC<GlobalCarFilterDropdownProps> = ({ compa
               {currentCarLabel}
             </Typography>
           </Box>
-          <IconButton size="small" sx={{ color: 'white' }}>
-            <ExpandMoreIcon
-              sx={{
-                transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)',
-                transition: 'transform 0.3s'
-              }}
-            />
-          </IconButton>
         </Box>
-        <Collapse in={expanded}>
-          <Box
+        <Box
+          sx={{
+            display: 'flex',
+            gap: 1,
+            overflowX: 'auto',
+            py: 1,
+            '&::-webkit-scrollbar': {
+              height: 6
+            },
+            '&::-webkit-scrollbar-thumb': {
+              backgroundColor: 'rgba(255,255,255,0.3)',
+              borderRadius: 3
+            }
+          }}
+        >
+          <Chip
+            label="All Cars"
+            onClick={() => handleCarSelect(null)}
+            variant="outlined"
             sx={{
-              display: 'flex',
-              gap: 1,
-              overflowX: 'auto',
-              py: 1,
-              '&::-webkit-scrollbar': {
-                height: 6
-              },
-              '&::-webkit-scrollbar-thumb': {
-                backgroundColor: 'rgba(255,255,255,0.3)',
-                borderRadius: 3
-              }
+              borderColor: 'white',
+              color: 'white',
+              backgroundColor: 'transparent',
+              fontWeight: !selectedCar ? 'bold' : 'normal',
+              borderWidth: !selectedCar ? 2 : 1,
+              '&:hover': { backgroundColor: 'rgba(255,255,255,0.1)' },
+              whiteSpace: 'nowrap'
             }}
-          >
-            <Chip
-              label="All Cars"
-              onClick={() => handleCarSelect(null)}
-              variant="outlined"
-              sx={{
-                borderColor: 'white',
-                color: 'white',
-                backgroundColor: 'transparent',
-                fontWeight: !selectedCar ? 'bold' : 'normal',
-                borderWidth: !selectedCar ? 2 : 1,
-                '&:hover': { backgroundColor: 'rgba(255,255,255,0.1)' },
-                whiteSpace: 'nowrap'
-              }}
-            />
-            {sortedCars.map((car) => {
-              const isSelected = selectedCar ? car.id === selectedCar.id : false;
-              return (
-                <Chip
-                  key={car.id}
-                  label={car.name}
-                  onClick={() => handleCarSelect(car)}
-                  variant="outlined"
-                  sx={{
-                    borderColor: 'white',
-                    color: 'white',
-                    backgroundColor: 'transparent',
-                    fontWeight: isSelected ? 'bold' : 'normal',
-                    borderWidth: isSelected ? 2 : 1,
-                    '&:hover': { backgroundColor: 'rgba(255,255,255,0.1)' },
-                    whiteSpace: 'nowrap'
-                  }}
-                />
-              );
-            })}
-          </Box>
-        </Collapse>
+          />
+          {sortedCars.map((car) => {
+            const isSelected = selectedCar ? car.id === selectedCar.id : false;
+            return (
+              <Chip
+                key={car.id}
+                label={car.name}
+                onClick={() => handleCarSelect(car)}
+                variant="outlined"
+                sx={{
+                  borderColor: 'white',
+                  color: 'white',
+                  backgroundColor: 'transparent',
+                  fontWeight: isSelected ? 'bold' : 'normal',
+                  borderWidth: isSelected ? 2 : 1,
+                  '&:hover': { backgroundColor: 'rgba(255,255,255,0.1)' },
+                  whiteSpace: 'nowrap'
+                }}
+              />
+            );
+          })}
+        </Box>
       </Box>
     );
   }
diff --git a/src/frontend/src/hooks/users.hooks.ts b/src/frontend/src/hooks/users.hooks.ts
@@ -42,6 +42,7 @@ import {
 import { useAuth } from './auth.hooks';
 import { useContext } from 'react';
 import { UserContext } from '../app/AppContextUser';
+import { useGlobalCarFilter } from '../app/AppGlobalCarFilterContext';
 
 /**
  * Custom React Hook to supply the current user
@@ -188,7 +189,8 @@ export const useUserScheduleSettings = (id: string) => {
  * @param id User ID of the requested user's settings.
  */
 export const useUsersFavoriteProjects = (id: string) => {
-  return useQuery<ProjectOverview[], Error>(['users', id, 'favorite projects'], async () => {
+  const { selectedCar } = useGlobalCarFilter();
+  return useQuery<ProjectOverview[], Error>(['users', id, 'favorite projects', selectedCar?.id], async () => {
     const { data } = await getUsersFavoriteProjects(id);
     return data;
   });
diff --git a/src/frontend/src/layouts/Sidebar/Sidebar.tsx b/src/frontend/src/layouts/Sidebar/Sidebar.tsx
@@ -224,12 +224,12 @@ const Sidebar = ({ drawerOpen, setDrawerOpen, moveContent, setMoveContent }: Sid
       }}
     >
       <DrawerHeader>
+        <Box sx={{ maxWidth: 150, minWidth: 0, maxHeight: 70, minHeight: 70 }}>
+          <GlobalCarFilterDropdown compact />
+        </Box>
         <IconButton onClick={() => handleMoveContent()}>{moveContent ? <ChevronLeft /> : <ChevronRight />}</IconButton>
       </DrawerHeader>
-      <Divider />
-      <Box sx={{ px: 2, py: 2 }}>
-        <GlobalCarFilterDropdown compact />
-      </Box>
+      <Box sx={{ py: 2.5 }}></Box>
       <Divider />
       <Box
         overflow={'auto'}
diff --git a/src/frontend/src/pages/ProjectsPage/ProjectsOverview.tsx b/src/frontend/src/pages/ProjectsPage/ProjectsOverview.tsx
@@ -10,14 +10,12 @@ import { useCurrentUser, useUsersFavoriteProjects } from '../../hooks/users.hook
 import ProjectsOverviewCards from './ProjectsOverviewCards';
 import { useGetUsersLeadingProjects, useGetUsersTeamsProjects } from '../../hooks/projects.hooks';
 import { WbsElementStatus } from 'shared';
-import { useGlobalCarFilter } from '../../app/AppGlobalCarFilterContext';
 
 /**
  * Cards of all projects this user has favorited
  */
 const ProjectsOverview: React.FC = () => {
   const user = useCurrentUser();
-  const { selectedCar } = useGlobalCarFilter();
 
   const { isLoading, data: favoriteProjects, isError, error } = useUsersFavoriteProjects(user.userId);
   const {
@@ -50,10 +48,6 @@ const ProjectsOverview: React.FC = () => {
 
   const favoriteProjectsSet: Set<string> = new Set(favoriteProjects.map((project) => project.id));
 
-  const carFilteredFavorites = selectedCar
-    ? favoriteProjects.filter((project) => project.wbsNum.carNumber === selectedCar.wbsNum.carNumber)
-    : favoriteProjects;
-
   // Keeps only favorite team/leading projects (even when completed) or incomplete projects
   const filteredTeamsProjects = teamsProjects.filter(
     (project) => project.status !== WbsElementStatus.Complete || favoriteProjectsSet.has(project.id)
@@ -65,7 +59,7 @@ const ProjectsOverview: React.FC = () => {
   return (
     <Box>
       <ProjectsOverviewCards
-        projects={carFilteredFavorites}
+        projects={favoriteProjects}
         title="My Favorites"
         favoriteProjectsSet={favoriteProjectsSet}
         emptyMessage="You have no favorite projects. Click the star on a project's page to add one!"
