✨ Clicking on an image opens it in a modal

src/components/Attachments.tsx

@@ -1,9 +1,9 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import { ButtonBack, ButtonNext, CarouselProvider, Dot, Image, Slide, Slider } from 'pure-react-carousel'
 import styled from 'styled-components'
 import { Attachment } from '../lib/types'
 import 'pure-react-carousel/dist/react-carousel.es.css'
-import { Button } from 'semantic-ui-react'
+import { Button, Modal, ModalContent } from 'semantic-ui-react'
 
 const Wrapper = styled(CarouselProvider)`
   position: relative;
@@ -22,6 +22,9 @@ interface Props {
 }
 
 const Attachments: FC<Props> = props => {
+  const [modalOpen, setModalOpen] = useState<boolean>(false)
+  const [modalImageSrc, setModalImageSrc] = useState<string>('')
+
   const renderButtonsAndDots = () => {
     // FIXME: This doesn't feel like a good pattern.
     // Tried to use styled components instead which didn't work right away.
@@ -46,16 +49,34 @@ const Attachments: FC<Props> = props => {
     )
   }
 
+  const handleImageClick = (event: React.MouseEvent) => {
+    if (!event.target?.src) {
+      return
+    }
+    setModalImageSrc(event.target.src)
+    setModalOpen(true)
+  }
+
+  const handleModalClose = () => {
+    setModalOpen(false)
+    setModalImageSrc('')
+  }
+
   return (
     <Wrapper naturalSlideHeight={0.75} naturalSlideWidth={1} totalSlides={props.attachments.length}>
       <Slider>
         {props.attachments.map((image, key) => (
           <Slide key={key} index={key}>
-            <Image hasMasterSpinner={false} src={image.url} style={{ objectFit: 'scale-down' }} />
+            <Image hasMasterSpinner={false} src={image.url} onClick={handleImageClick} style={{ objectFit: 'scale-down' }} />
           </Slide>
         ))}
       </Slider>
       {props.attachments.length > 1 && renderButtonsAndDots()}
+      <Modal closeIcon onClose={handleModalClose} open={modalOpen}>
+        <ModalContent>
+          <Image hasMasterSpinner={false} src={modalImageSrc} style={{ objectFit: 'scale-down' }} />
+        </ModalContent>
+      </Modal>
     </Wrapper>
   )
 }