refactor: #3884 addressed PR feedback on state management and added placeholder

Author: rbessin

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/CopyBOM/CopyBOMModal.tsx

@@ -1,9 +1,9 @@
-import { ProjectPreview, WbsNumber, wbsPipe } from 'shared';
+import { WbsNumber, wbsPipe } from 'shared';
 import CopyBOMView from './CopyBOMView';
 import { useGetAllCars } from '../../../../../hooks/cars.hooks';
 import { useAllProjects } from '../../../../../hooks/projects.hooks';
 import { useCopyMaterialsToProject } from '../../../../../hooks/bom.hooks';
-import React, { useState } from 'react';
+import React from 'react';
 import ErrorPage from '../../../../ErrorPage';
 import LoadingIndicator from '../../../../../components/LoadingIndicator';
 
@@ -14,8 +14,6 @@ export interface CopyBOMModalProps {
 }
 
 const CopyBOMModal: React.FC<CopyBOMModalProps> = ({ open, onHide, destinationWbsNum }) => {
-  const [selectedProject, setSelectedProject] = useState<ProjectPreview | null>(null);
-
   const { data: cars, isLoading: isLoadingCars, isError: carsIsError, error: carsError } = useGetAllCars();
   const { data: projects, isLoading: isLoadingProjects, isError: projectsIsError, error: projectsError } = useAllProjects();
   const { mutateAsync: copyMaterials } = useCopyMaterialsToProject();
@@ -38,8 +36,6 @@ const CopyBOMModal: React.FC<CopyBOMModalProps> = ({ open, onHide, destinationWb
       onHide={onHide}
       cars={cars}
       projects={projects}
-      selectedProject={selectedProject}
-      setSelectedProject={setSelectedProject}
       onCopy={handleCopy}
     />
   );

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/CopyBOM/CopyBOMProjectSection.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Typography } from '@mui/material';
-import { DataGrid, GridColDef, GridSelectionModel } from '@mui/x-data-grid';
+import { DataGrid, GridColDef } from '@mui/x-data-grid';
 import { useState } from 'react';
 import { ProjectPreview } from 'shared';
 import LoadingIndicator from '../../../../../components/LoadingIndicator';
@@ -20,7 +20,7 @@ const columns: GridColDef[] = [
 ];
 
 const CopyBOMProjectSection: React.FC<CopyBOMProjectSectionProps> = ({ selectedProject, onSelectionChange }) => {
-  const [selectionModel, setSelectionModel] = useState<GridSelectionModel>([]);
+  const [selectedMaterialIds, setSelectedMaterialIds] = useState<string[]>([]);
   const {
     data: materials,
     isLoading: isLoadingMaterials,
@@ -38,7 +38,7 @@ const CopyBOMProjectSection: React.FC<CopyBOMProjectSectionProps> = ({ selectedP
   React.useEffect(() => {
     if (materials) {
       const allIds = materials.map((m) => m.materialId);
-      setSelectionModel(allIds);
+      setSelectedMaterialIds(allIds);
       onSelectionChange(allIds);
     }
   }, [materials, onSelectionChange]);
@@ -58,17 +58,18 @@ const CopyBOMProjectSection: React.FC<CopyBOMProjectSectionProps> = ({ selectedP
   return (
     <>
       <Typography sx={{ mb: 1 }} variant="body2">
-        {selectionModel.length} material{selectionModel.length !== 1 ? 's' : ''} selected
+        {selectedMaterialIds.length} material{selectedMaterialIds.length !== 1 ? 's' : ''} selected
       </Typography>
       <DataGrid
         rows={rows}
         columns={columns}
         checkboxSelection
         autoHeight
-        selectionModel={selectionModel}
+        selectionModel={selectedMaterialIds}
         onSelectionModelChange={(newModel) => {
-          setSelectionModel(newModel);
-          onSelectionChange(newModel as string[]);
+          const ids = newModel as string[];
+          setSelectedMaterialIds(ids);
+          onSelectionChange(ids);
         }}
         rowsPerPageOptions={[100]}
         hideFooterPagination

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOM/CopyBOM/CopyBOMView.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Grid } from '@mui/material';
+import React, { useRef, useState } from 'react';
+import { Box, Grid } from '@mui/material';
 import { Car, ProjectPreview, wbsPipe } from 'shared';
 import NERModal from '../../../../../components/NERModal';
 import NERAutocomplete from '../../../../../components/NERAutocomplete';
@@ -10,8 +10,6 @@ interface CopyBOMViewProps {
   onHide: () => void;
   cars: Car[];
   projects: ProjectPreview[];
-  selectedProject: ProjectPreview | null;
-  setSelectedProject: (project: ProjectPreview | null) => void;
   onCopy: (materialIds: string[]) => Promise<void>;
 }
 
@@ -20,12 +18,12 @@ const CopyBOMView: React.FC<CopyBOMViewProps> = ({
   onHide,
   cars,
   projects,
-  selectedProject,
-  setSelectedProject,
   onCopy
 }) => {
   const [selectedCar, setSelectedCar] = useState<Car | null>(null);
-  const [selectedMaterialIds, setSelectedMaterialIds] = useState<string[]>([]);
+  const [selectedProject, setSelectedProject] = useState<ProjectPreview | null>(null);
+  const [hasSelection, setHasSelection] = useState(false);
+  const selectedMaterialIdsRef = useRef<string[]>([]);
 
   const carOptions = cars.map((car) => ({
     label: `${car.wbsNum.carNumber} - ${car.name}`,
@@ -42,7 +40,7 @@ const CopyBOMView: React.FC<CopyBOMViewProps> = ({
   }));
 
   const handleSubmit = async () => {
-    await onCopy(selectedMaterialIds);
+    await onCopy(selectedMaterialIdsRef.current);
   };
 
   return (
@@ -53,7 +51,7 @@ const CopyBOMView: React.FC<CopyBOMViewProps> = ({
       submitText="Copy BOM"
       cancelText="Cancel"
       onSubmit={handleSubmit}
-      disabled={selectedMaterialIds.length === 0}
+      disabled={!hasSelection}
       showCloseButton
       paperProps={{ minWidth: '700px' }}
     >
@@ -96,11 +94,32 @@ const CopyBOMView: React.FC<CopyBOMViewProps> = ({
           />
         </Grid>
 
-        {selectedProject && (
-          <Grid item xs={12}>
-            <CopyBOMProjectSection selectedProject={selectedProject} onSelectionChange={setSelectedMaterialIds} />
-          </Grid>
-        )}
+        <Grid item xs={12}>
+          {selectedProject ? (
+            <CopyBOMProjectSection
+              selectedProject={selectedProject}
+              onSelectionChange={(ids) => {
+                selectedMaterialIdsRef.current = ids;
+                setHasSelection(ids.length > 0);
+              }}
+            />
+          ) : (
+            <Box
+              sx={{
+                height: '300px',
+                border: '1px dashed',
+                borderColor: 'grey.400',
+                borderRadius: '4px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: 'grey.500'
+              }}
+            >
+              Select a project to view its materials
+            </Box>
+          )}
+        </Grid>
       </Grid>
     </NERModal>
   );