Modal improvements

[JamesBock]

BASTA-tfwa/tenant-file/portal-app/src/component/image-table-collapse.tsx

Line 51 in ebacad5

<Modal isOpen={showImageModal}>

This is the general functionality but you should split the modal into its own component so we can reuse it with images in other pages.

BASTA-tfwa/tenant-file/portal-app/src/component/image-table-collapse.tsx

Line 63 in ebacad5

imageName={image?.id === undefined ? "" : image?.thumbnailName}

Use the 'name' field instead of 'thumbnailName' to get the full size image. You will have to use some css styling to make the image an appropriate size.

BASTA-tfwa/tenant-file/portal-app/src/component/image-table-collapse.tsx

Line 85 in ebacad5

onClick={() => {

Try using this icon as a close indicator the modal in the header instead of in the footer-><i className="fa fa-window-close"></i>
Ideally, reactstrap should have se where is the user clicks outside of the modal it will close.

[minpat]

Hey @JamesBock - thanks for the feedback. I agree it would be good to put the modal in its own component. I have a first draft of this (in branch pm/194) - when you get a chance, could you please check the image-table-collapse.tsx? I am having some trouble with the "onClick" event functionality. When I have something like a console.log statement, it prints out when I click the image. But if I try to call ShowModal, or even put any sort of HTML elements in there, it seems to not load anything when I click an image. I am wondering if this is related to the fact that there are some console errors about the type hierarchy (please see screenshot below) - not sure if these were there before. If you would prefer that I show you on my computer I am happy to do so.

[JamesBock]

I believe those console errors where there previously.

The issue here is that you don't actually have the modal in the DOM anywhere.

BASTA-tfwa/tenant-file/portal-app/src/component/image-table-collapse.tsx

Line 52 in 4625606

const ShowModal: React.FC<Props> = () => {

The function is declared but never called. Additionally, you will need to call it in the DOM not in an onClick event as that won't be inserted into the DOM either.

Above shows the ShowModal function being called only if the showImageModal bool is true (I added that piece of state back into this component) and the bool's state is controlled by the onClick event on the cell with the image.

I may have led you astray when I said to make the component reusable. This component is VERY reusable but almost too much so to the point where its just a wrapper around a Modal component. I was thinking of a component that can be reused on other Images specifically. That way we can reuse the formatting and css styling that is appropriate for Image Modals in our app and they don't need to be restated every time.

I would rename the tenantFileCustomModal to imageModal and the css module to imageModal.module.css and focus on making the Modal presentable for the full size image. You will probably want to explicitly set the max-height and max-width at least.

Also, you can simplify this code.

I used that syntax for creating the download link because if you just call onClick on an image it will navigate to it, not download it. You have to use the anchor tag to download. For onClick events that just need to work like buttons, you can just do this.

[JamesBock]

@minpat

[minpat]

Got it - thanks @JamesBock for the info - much appreciated. I will give this a try and will make the component more specific to images.