Create a print button with each corresponding project row within the "Projects" page

[jahpe777]

Overview

We need to implement the button and PDF output for printing/downloading the TDM Calculation Summary within the "Projects" page

Action Items

• Create a print button with each corresponding project row within the "Projects" page that prints out the summary of each project

Resources/Instructions

Please reference #1314

[jeffmchang]

UPDATE

7/29/23:

Recap:

Identified where we needed to make the change in the file, and noticed that the code was practically there already. The printPDF component was loaded in and also had the ReactToPrint typed in. Started messing around with the componentRef.current on line 399 in ProjectsPage.js that controlled the content. Essentially what’s happening is that the two projects are printing the same PDF because the print button updates ALL print buttons to the componentRef.current PDF.

Second bug with this feature is that when you refresh the page, it breaks it completely because once the referenced component is unmounted and re-mounted, the componentRef variable loses track of where the reference is attached to and returns null. This is only an assumption, but I will be looking more into it.

Blocker:

Need to figure out a way to isolate the projects so the print function doesn’t update ALL the print buttons and keeps them with the respective projects.

Next:

Going to try to access the currentProjects ID and attach them to the printPDF function so they’re all individually attached to each mapped item.

[jeffmchang]

7/31/23:

Recap:

Currently dealing with the same issue, can’t seem to separate the componentRef.current object from each individual project. Trying to see if I can work around the existing code before trying a different way. Was able to map out the projects so the pdfs are connecting to their own respective project row, but the content is still duplicating over.

Mounting and unmounting are still posing an issue, will probably need to implement the useEffect hook. Not entirely sure yet, still focused on the pdf mapping.

Blocker:

existing: Need to figure out a way to isolate the projects so the print function doesn’t update ALL the print buttons and keeps them with the respective projects.

Next:

Will be trying to see if I can use a createRef() built-in function that will create refs for each and every mapped-out project. Need to make sure the refs identify the correct information.

Another option would be to have a separate PdfPrint.js page for strictly the project page, and I would pass in the mapped project details into the function and then generate the PDF upon print request.

[ZekeAranyLucas]

I have this working along side CSV downloads in #1420