#3885: Finished linking confirmation modal with the copy BOM modal

Author: nunnyu

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

@@ -2,35 +2,58 @@ 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 from 'react';
+import React, { useState } from 'react';
 import ErrorPage from '../../../../ErrorPage';
 import LoadingIndicator from '../../../../../components/LoadingIndicator';
+import BOMCopyConfirmModal from '../MaterialForm/BOMCopyConfirmModal';
 
 export interface CopyBOMModalProps {
   open: boolean;
   onHide: () => void;
   destinationWbsNum: WbsNumber;
+  currentProjectName: string;
 }
 
-const CopyBOMModal: React.FC<CopyBOMModalProps> = ({ open, onHide, destinationWbsNum }) => {
+const CopyBOMModal: React.FC<CopyBOMModalProps> = ({ open, onHide, destinationWbsNum, currentProjectName }) => {
   const { data: cars, isLoading: isLoadingCars, isError: carsIsError, error: carsError } = useGetAllCars();
   const { data: projects, isLoading: isLoadingProjects, isError: projectsIsError, error: projectsError } = useAllProjects();
-  const { mutateAsync: copyMaterials } = useCopyMaterialsToProject();
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [confirmedMaterialIds, setConfirmedMaterialIds] = useState<string[]>([]);
+  const [confirmedSourceProjectName, setConfirmedSourceProjectName] = useState('');
 
   if (isLoadingCars || !cars || isLoadingProjects || !projects) return <LoadingIndicator />;
   if (carsIsError) return <ErrorPage message={carsError?.message} />;
   if (projectsIsError) return <ErrorPage message={projectsError?.message} />;
 
-  const handleCopy = async (materialIds: string[]) => {
-    await copyMaterials({
-      materialIds,
-      destinationWbsNum: wbsPipe(destinationWbsNum)
-    });
-    onHide();
-  };
+  const destinationWbs = wbsPipe(destinationWbsNum);
 
-  return <CopyBOMView open={open} onHide={onHide} cars={cars} projects={projects} onCopy={handleCopy} />;
+  return (
+    <>
+      <CopyBOMView
+        open={open}
+        onHide={onHide}
+        cars={cars}
+        projects={projects}
+        onCopy={(materialIds, sourceProjectName) => {
+          setConfirmedMaterialIds(materialIds);
+          setConfirmedSourceProjectName(sourceProjectName);
+          setConfirmOpen(true);
+        }}
+      />
+      <BOMCopyConfirmModal
+        open={confirmOpen}
+        onHide={() => setConfirmOpen(false)}
+        onSuccess={() => {
+          onHide();
+          setConfirmOpen(false);
+        }}
+        materialIds={confirmedMaterialIds}
+        sourceProjectName={confirmedSourceProjectName}
+        currentProjectName={`${wbsPipe(destinationWbsNum)} - ${currentProjectName}`}
+        destinationWbsNum={destinationWbs}
+      />
+    </>
+  );
 };
 
 export default CopyBOMModal;

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

@@ -10,7 +10,7 @@ interface CopyBOMViewProps {
   onHide: () => void;
   cars: Car[];
   projects: ProjectPreview[];
-  onCopy: (materialIds: string[]) => Promise<void>;
+  onCopy: (materialIds: string[], sourceProjectName: string) => void;
 }
 
 const CopyBOMView: React.FC<CopyBOMViewProps> = ({ open, onHide, cars, projects, onCopy }) => {
@@ -34,7 +34,9 @@ const CopyBOMView: React.FC<CopyBOMViewProps> = ({ open, onHide, cars, projects,
   }));
 
   const handleSubmit = async () => {
-    await onCopy(selectedMaterialIdsRef.current);
+    if (!selectedProject) return;
+    const sourceProjectName = `${wbsPipe(selectedProject.wbsNum)} - ${selectedProject.name}`;
+    onCopy(selectedMaterialIdsRef.current, sourceProjectName);
   };
 
   return (

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/BOMTab.tsx

@@ -20,7 +20,6 @@ import {
   useGetMaterialsForWbsElement
 } from '../../../hooks/bom.hooks';
 import ImportBOMModal from './BOM/ImportBOMModal';
-import BOMCopyConfirmModal from './BOM/MaterialForm/BOMCopyConfirmModal';
 
 export const addMaterialCosts = (accumulator: number, currentMaterial: MaterialPreview) =>
   (currentMaterial.subtotal ?? 0) + accumulator;
@@ -32,7 +31,6 @@ const BOMTab = ({ project }: { project: Project }) => {
   const [showAddAssembly, setShowAddAssembly] = useState(false);
   const [showCopyBOM, setShowCopyBOM] = useState(false);
   const [showImportBOM, setShowImportBOM] = useState(false);
-  const [bomConfirmOpen, setBomConfirmOpen] = useState(false);
 
   const theme = useTheme();
   const user = useCurrentUser();
@@ -101,7 +99,12 @@ const BOMTab = ({ project }: { project: Project }) => {
         allUnits={units}
         assemblies={assemblies}
       />
-      <CopyBOMModal open={showCopyBOM} onHide={() => setShowCopyBOM(false)} destinationWbsNum={project.wbsNum} />
+      <CopyBOMModal
+        open={showCopyBOM}
+        onHide={() => setShowCopyBOM(false)}
+        destinationWbsNum={project.wbsNum}
+        currentProjectName={project.name}
+      />
       <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
         <BOMTableWrapper
           project={project}
@@ -150,17 +153,6 @@ const BOMTab = ({ project }: { project: Project }) => {
               Copy Existing BOM
             </NERButton>
           </Box>
-          {/* <BOMCopyConfirmModal
-            open={bomConfirmOpen}
-            onHide={() => {
-              setBomConfirmOpen(false);
-            }}
-            onSuccess={() => {}}
-            materialIds={materials.map((m) => m.materialId)} // Test: right now, it just copies everything to destination
-            sourceProjectName={'This Project'}
-            currentProjectName={'0.7.0 - Laser Cannon Prototype'}
-            destinationWbsNum={'0.7.0'}
-          ></BOMCopyConfirmModal> */}
           <Box display="flex" gap="20px" alignItems="center">
             <Box sx={{ backgroundColor: theme.palette.background.paper, padding: '8px 14px 8px 14px', borderRadius: '6px' }}>
               Budget: ${project.budget}