#3884 addressed PR feedback

Author: rbessin

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

@@ -20,7 +20,7 @@ const CopyBOMModal: React.FC<CopyBOMModalProps> = ({ open, onHide, destinationWb
   const { data: projects, isLoading: isLoadingProjects, isError: projectsIsError, error: projectsError } = useAllProjects();
   const { mutateAsync: copyMaterials } = useCopyMaterialsToProject();
 
-  if (isLoadingCars || isLoadingProjects) return <LoadingIndicator />;
+  if (isLoadingCars || !cars || isLoadingProjects || !projects) return <LoadingIndicator />;
   if (carsIsError) return <ErrorPage message={carsError?.message} />;
   if (projectsIsError) return <ErrorPage message={projectsError?.message} />;
 
@@ -36,8 +36,8 @@ const CopyBOMModal: React.FC<CopyBOMModalProps> = ({ open, onHide, destinationWb
     <CopyBOMView
       open={open}
       onHide={onHide}
-      cars={cars ?? []}
-      projects={projects ?? []}
+      cars={cars}
+      projects={projects}
       selectedProject={selectedProject}
       setSelectedProject={setSelectedProject}
       onCopy={handleCopy}

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

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Typography } from '@mui/material';
 import { DataGrid, GridColDef, GridSelectionModel } from '@mui/x-data-grid';
+import { useState } from 'react';
 import { ProjectPreview } from 'shared';
 import LoadingIndicator from '../../../../../components/LoadingIndicator';
 import { useGetAssembliesForWbsElement, useGetMaterialsForWbsElement } from '../../../../../hooks/bom.hooks';
 import ErrorPage from '../../../../ErrorPage';
 
 interface CopyBOMProjectSectionProps {
   selectedProject: ProjectPreview;
-  selectionModel: GridSelectionModel;
-  setSelectionModel: (model: GridSelectionModel) => void;
+  onSelectionChange: (materialIds: string[]) => void;
 }
 
 const columns: GridColDef[] = [
@@ -21,9 +21,9 @@ const columns: GridColDef[] = [
 
 const CopyBOMProjectSection: React.FC<CopyBOMProjectSectionProps> = ({
   selectedProject,
-  selectionModel,
-  setSelectionModel
+  onSelectionChange
 }) => {
+  const [selectionModel, setSelectionModel] = useState<GridSelectionModel>([]);
   const {
     data: materials,
     isLoading: isLoadingMaterials,
@@ -40,9 +40,11 @@ const CopyBOMProjectSection: React.FC<CopyBOMProjectSectionProps> = ({
 
   React.useEffect(() => {
     if (materials) {
-      setSelectionModel(materials.map((m) => m.materialId));
+      const allIds = materials.map((m) => m.materialId);
+      setSelectionModel(allIds);
+      onSelectionChange(allIds);
     }
-  }, [materials, setSelectionModel]);
+  }, [materials]);
 
   if (isLoadingMaterials || isLoadingAssemblies || !materials || !assemblies) return <LoadingIndicator />;
   if (isErrorMaterials) return <ErrorPage message={materialsError?.message} />;
@@ -67,7 +69,10 @@ const CopyBOMProjectSection: React.FC<CopyBOMProjectSectionProps> = ({
         checkboxSelection
         autoHeight
         selectionModel={selectionModel}
-        onSelectionModelChange={(newModel) => setSelectionModel(newModel)}
+        onSelectionModelChange={(newModel) => {
+          setSelectionModel(newModel);
+          onSelectionChange(newModel as string[]);
+        }}
         rowsPerPageOptions={[100]}
         hideFooterPagination
         sx={{

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

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { Grid } from '@mui/material';
-import { GridSelectionModel } from '@mui/x-data-grid';
 import { Car, ProjectPreview, wbsPipe } from 'shared';
 import NERModal from '../../../../../components/NERModal';
 import NERAutocomplete from '../../../../../components/NERAutocomplete';
@@ -26,7 +25,7 @@ const CopyBOMView: React.FC<CopyBOMViewProps> = ({
   onCopy
 }) => {
   const [selectedCar, setSelectedCar] = useState<Car | null>(null);
-  const [selectionModel, setSelectionModel] = useState<GridSelectionModel>([]);
+  const [selectedMaterialIds, setSelectedMaterialIds] = useState<string[]>([]);
 
   const carOptions = cars.map((car) => ({
     label: `${car.wbsNum.carNumber} - ${car.name}`,
@@ -43,7 +42,7 @@ const CopyBOMView: React.FC<CopyBOMViewProps> = ({
   }));
 
   const handleSubmit = async () => {
-    await onCopy(selectionModel as string[]);
+    await onCopy(selectedMaterialIds);
   };
 
   return (
@@ -54,7 +53,7 @@ const CopyBOMView: React.FC<CopyBOMViewProps> = ({
       submitText="Copy BOM"
       cancelText="Cancel"
       onSubmit={handleSubmit}
-      disabled={selectionModel.length === 0}
+      disabled={selectedMaterialIds.length === 0}
       showCloseButton
       paperProps={{ minWidth: '700px' }}
     >
@@ -101,8 +100,7 @@ const CopyBOMView: React.FC<CopyBOMViewProps> = ({
           <Grid item xs={12}>
             <CopyBOMProjectSection
               selectedProject={selectedProject}
-              selectionModel={selectionModel}
-              setSelectionModel={setSelectionModel}
+              onSelectionChange={setSelectedMaterialIds}
             />
           </Grid>
         )}